diff --git a/ContentExplorer.meta b/ContentExplorer.meta
new file mode 100644
index 0000000..3fb9058
--- /dev/null
+++ b/ContentExplorer.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 3d54f69fd90050e41a745774b685bce3
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ContentExplorer/ContentExplorerDemo.cs b/ContentExplorer/ContentExplorerDemo.cs
new file mode 100644
index 0000000..5b127e4
--- /dev/null
+++ b/ContentExplorer/ContentExplorerDemo.cs
@@ -0,0 +1,198 @@
+// Examples~/ContentExplorer/ContentExplorerDemo.cs
+// Demonstrates: CollapsibleSection, IconLabelButton, LoadingIcon
+//
+// Scene setup:
+//   1. Open the provided ContentExplorer scene (the UIDocument and this
+//      ContentExplorerDemo component live on the same GameObject; the demo
+//      resolves the UIDocument via GetComponent<UIDocument>() at runtime).
+//   2. Press Play — a loading spinner blocks interaction for 1.5 s, then three
+//      collapsible accordion sections appear. Tap any row to see which item was selected.
+
+using System.Collections;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Content explorer demo showcasing <see cref="CollapsibleSection"/>,
+    /// <see cref="IconLabelButton"/>, and <see cref="LoadingIcon"/>.
+    ///
+    /// On Start a full-screen loading overlay is displayed using <see cref="LoadingIcon"/>
+    /// which blocks pointer events (<c>blockInteraction: true</c>).
+    /// After 1.5 seconds the spinner is stopped and the three collapsible sections
+    /// are revealed with a simple fade-in.
+    ///
+    /// Each section contains several <see cref="IconLabelButton"/> rows.
+    /// Clicking a row writes the selection into the status label at the bottom.
+    /// </summary>
+    public class ContentExplorerDemo : MonoBehaviour
+    {
+        private static readonly (string section, string[] items)[] SectionData =
+        {
+            (
+                "Getting Started",
+                new[]
+                {
+                    "Introduction to UI Toolkit",
+                    "Your first VisualElement",
+                    "Styling with USS classes",
+                    "Working with events",
+                }
+            ),
+            (
+                "Controls",
+                new[]
+                {
+                    "PillButton — gradient actions",
+                    "PillInputField — mobile-ready input",
+                    "ScrollSnap — paging container",
+                    "QuadrantStepper — segmented navigation",
+                }
+            ),
+            (
+                "Utilities",
+                new[]
+                {
+                    "VisualElementShakeUtility",
+                    "UIToolkitExtensions helpers",
+                    "ToastSwipeDismissManipulator",
+                }
+            ),
+        };
+
+        private UIDocument uiDocument;
+        private LoadingIcon loadingIcon;
+        private VisualElement contentScroll;
+        private Label statusLabel;
+        private Texture2D spinnerTexture;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ContentExplorerDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void OnDestroy()
+        {
+            if (spinnerTexture != null)
+                Destroy(spinnerTexture);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            var screen = UIToolkitExtensions.CreateVisualElement(root, "contentExplorer__screen");
+
+            var card = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__card");
+
+            var eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__title");
+            titleLabel.text = "Content Explorer";
+
+            var subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__subtitle");
+            subtitleLabel.text = "Browse the demo content below, expand any section, and tap a row to inspect the current selection.";
+
+            contentScroll = UIToolkitExtensions.CreateVisualElement(card, "contentExplorer__contentScroll");
+            contentScroll.style.opacity = 0f;
+
+            foreach (var (sectionTitle, items) in SectionData)
+            {
+                BuildSection(contentScroll, sectionTitle, items);
+            }
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__statusLabel");
+            statusLabel.text = "Loading content…";
+
+            BuildLoadingOverlay(screen);
+
+            StartCoroutine(SimulateAsyncLoad());
+        }
+
+        private void BuildSection(VisualElement parent, string sectionTitle, string[] items)
+        {
+            var section = new CollapsibleSection();
+            section.TitleText = sectionTitle;
+            section.AddToClassList("contentExplorer__section");
+
+            foreach (var itemText in items)
+            {
+                var capturedText = itemText;
+
+                var btn = new IconLabelButton();
+                btn.Text = capturedText;
+                btn.AddToClassList("contentExplorer__itemButton");
+                btn.Clicked += () => OnItemClicked(capturedText);
+
+                section.AddBodyContent(btn);
+            }
+
+            parent.Add(section);
+        }
+
+        private void BuildLoadingOverlay(VisualElement screen)
+        {
+            var overlay = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__loadingOverlay");
+
+            loadingIcon = new LoadingIcon();
+            loadingIcon.AddToClassList("contentExplorer__loadingIcon");
+            spinnerTexture = ProceduralTextureUtility.CreateSpinnerArc(64, new Color(0.27f, 0.55f, 0.87f));
+            loadingIcon.SetIcon(spinnerTexture);
+            overlay.Add(loadingIcon);
+
+            var loadingLabel = UIToolkitExtensions.CreateVisualElement<Label>(overlay, "contentExplorer__loadingLabel");
+            loadingLabel.text = "Loading content…";
+
+            loadingIcon.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
+        }
+
+        private IEnumerator SimulateAsyncLoad()
+        {
+            yield return new WaitForSeconds(1.5f);
+
+            loadingIcon.StopLoading();
+
+            var overlay = loadingIcon.parent;
+            if (overlay != null)
+            {
+                overlay.style.display = DisplayStyle.None;
+            }
+
+            contentScroll.style.transitionProperty = new StyleList<StylePropertyName>(
+                new System.Collections.Generic.List<StylePropertyName>
+                {
+                    new("opacity")
+                });
+            contentScroll.style.transitionDuration = new StyleList<TimeValue>(
+                new System.Collections.Generic.List<TimeValue>
+                {
+                    new(500, TimeUnit.Millisecond)
+                });
+            contentScroll.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new System.Collections.Generic.List<EasingFunction>
+                {
+                    new(EasingMode.EaseOut)
+                });
+            contentScroll.style.opacity = 1f;
+
+            statusLabel.text = "Tap any item to select it.";
+        }
+
+        private void OnItemClicked(string itemText)
+        {
+            statusLabel.text = $"Selected: {itemText}";
+            Debug.Log($"[ContentExplorerDemo] Item selected: {itemText}");
+        }
+
+    }
+}
diff --git a/ContentExplorer/ContentExplorerDemo.cs.meta b/ContentExplorer/ContentExplorerDemo.cs.meta
new file mode 100644
index 0000000..39273ee
--- /dev/null
+++ b/ContentExplorer/ContentExplorerDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 2d8f644310fc97b459fa3b0d17e76774
\ No newline at end of file
diff --git a/ContentExplorer/ContentExplorerDemo.unity b/ContentExplorer/ContentExplorerDemo.unity
new file mode 100644
index 0000000..a728bae
--- /dev/null
+++ b/ContentExplorer/ContentExplorerDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Content Explorer Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 2d8f644310fc97b459fa3b0d17e76774, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ContentExplorer/ContentExplorerDemo.unity.meta b/ContentExplorer/ContentExplorerDemo.unity.meta
new file mode 100644
index 0000000..dce2e4e
--- /dev/null
+++ b/ContentExplorer/ContentExplorerDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 84def1e9806042c486b57324b77e56f2
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ContentExplorer/ContentExplorerStyles.uss b/ContentExplorer/ContentExplorerStyles.uss
new file mode 100644
index 0000000..c79ec4b
--- /dev/null
+++ b/ContentExplorer/ContentExplorerStyles.uss
@@ -0,0 +1,115 @@
+.contentExplorer__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	position: relative;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.contentExplorer__card {
+	width: 100%;
+	max-width: 620px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.contentExplorer__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.contentExplorer__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.contentExplorer__subtitle {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 24px;
+	white-space: normal;
+}
+
+.contentExplorer__contentScroll {
+	flex-direction: column;
+	margin-bottom: 18px;
+}
+
+.contentExplorer__section {
+	margin-bottom: 12px;
+	padding-bottom: 6px;
+	overflow: hidden;
+	background-color: rgba(255, 255, 255, 0.07);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-radius: 20px;
+}
+
+.contentExplorer__section > .collapsibleSection__header {
+	min-height: 58px;
+	padding-left: 18px;
+	padding-right: 18px;
+	background-color: rgba(255, 255, 255, 0.07);
+}
+
+.contentExplorer__section .collapsibleSection__title {
+	color: rgba(235, 238, 245, 1);
+}
+
+.contentExplorer__itemButton {
+	margin-left: 12px;
+	margin-right: 12px;
+	margin-top: 4px;
+	margin-bottom: 4px;
+	height: 48px;
+	background-color: rgba(255, 255, 255, 0.045);
+	border-radius: 14px;
+}
+
+.contentExplorer__itemButton .iconLabelButton__label {
+	color: rgba(210, 216, 230, 1);
+}
+
+.contentExplorer__statusLabel {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 0.95);
+	white-space: normal;
+}
+
+.contentExplorer__loadingOverlay {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	background-color: rgba(9, 15, 27, 0.94);
+}
+
+.contentExplorer__loadingIcon {
+	width: 64px;
+	height: 64px;
+}
+
+.contentExplorer__loadingLabel {
+	font-size: 14px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-top: 12px;
+}
diff --git a/ContentExplorer/ContentExplorerStyles.uss.meta b/ContentExplorer/ContentExplorerStyles.uss.meta
new file mode 100644
index 0000000..59af928
--- /dev/null
+++ b/ContentExplorer/ContentExplorerStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 12219e8f91a7400bbc2d0b48ffa22a34
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ContentExplorer/ContentExplorerUxmlBinder.cs b/ContentExplorer/ContentExplorerUxmlBinder.cs
new file mode 100644
index 0000000..af33c3b
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlBinder.cs
@@ -0,0 +1,88 @@
+// Examples~/ContentExplorer/ContentExplorerUxmlBinder.cs
+// UXML counterpart of ContentExplorerDemo.cs. Layout lives in ContentExplorerUxmlView.uxml;
+// this binder wires the loading sequence and item-selection behaviour.
+
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Behaviour binder for the UXML-authored ContentExplorer demo.
+    /// </summary>
+    public class ContentExplorerUxmlBinder : MonoBehaviour
+    {
+        private UIDocument uiDocument;
+        private LoadingIcon loadingIcon;
+        private VisualElement loadingOverlay;
+        private VisualElement contentScroll;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ContentExplorerUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            loadingIcon = root.Q<LoadingIcon>("loading-icon");
+            loadingOverlay = root.Q<VisualElement>("loading-overlay");
+            contentScroll = root.Q<VisualElement>("content-scroll");
+            statusLabel = root.Q<Label>("status-label");
+
+            root.Query<IconLabelButton>().ForEach(button =>
+            {
+                button.Clicked += () => OnItemClicked(button.Text);
+            });
+
+            loadingIcon?.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
+            StartCoroutine(SimulateAsyncLoad());
+        }
+
+        private IEnumerator SimulateAsyncLoad()
+        {
+            yield return new WaitForSeconds(1.5f);
+
+            loadingIcon?.StopLoading();
+
+            if (loadingOverlay != null)
+            {
+                loadingOverlay.style.display = DisplayStyle.None;
+            }
+
+            if (contentScroll != null)
+            {
+                contentScroll.style.transitionProperty = new StyleList<StylePropertyName>(
+                    new List<StylePropertyName> { new("opacity") });
+                contentScroll.style.transitionDuration = new StyleList<TimeValue>(
+                    new List<TimeValue> { new(500, TimeUnit.Millisecond) });
+                contentScroll.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                    new List<EasingFunction> { new(EasingMode.EaseOut) });
+                contentScroll.style.opacity = 1f;
+            }
+
+            if (statusLabel != null)
+            {
+                statusLabel.text = "Tap any item to select it.";
+            }
+        }
+
+        private void OnItemClicked(string itemText)
+        {
+            if (statusLabel != null)
+            {
+                statusLabel.text = $"Selected: {itemText}";
+            }
+
+            Debug.Log($"[ContentExplorerUxmlBinder] Item selected: {itemText}");
+        }
+    }
+}
diff --git a/ContentExplorer/ContentExplorerUxmlBinder.cs.meta b/ContentExplorer/ContentExplorerUxmlBinder.cs.meta
new file mode 100644
index 0000000..bf0f171
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 83347d6d4df34d839329054353efc450
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ContentExplorer/ContentExplorerUxmlDemo.unity b/ContentExplorer/ContentExplorerUxmlDemo.unity
new file mode 100644
index 0000000..7301dc5
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 1
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Content Explorer (UXML)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: e736883a490f43f89ffabd93a96005d3, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 83347d6d4df34d839329054353efc450, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ContentExplorer/ContentExplorerUxmlDemo.unity.meta b/ContentExplorer/ContentExplorerUxmlDemo.unity.meta
new file mode 100644
index 0000000..fe8fb90
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 65bd31839fa24c128b7b338b52ce6cc2
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ContentExplorer/ContentExplorerUxmlView.uxml b/ContentExplorer/ContentExplorerUxmlView.uxml
new file mode 100644
index 0000000..f0e9f88
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlView.uxml
@@ -0,0 +1,41 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ContentExplorerStyles.uss" />
+
+    <ui:VisualElement name="screen" class="contentExplorer__screen">
+        <ui:VisualElement name="card" class="contentExplorer__card">
+            <ui:Label text="Toolkit Sample" class="contentExplorer__eyebrow" />
+            <ui:Label text="Content Explorer" class="contentExplorer__title" />
+            <ui:Label text="Browse the demo content below, expand any section, and tap a row to inspect the current selection." class="contentExplorer__subtitle" />
+
+            <ui:VisualElement name="content-scroll" class="contentExplorer__contentScroll" style="opacity: 0;">
+                <ext:CollapsibleSection title-text="Getting Started" class="contentExplorer__section">
+                    <ext:IconLabelButton text="Introduction to UI Toolkit" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="Your first VisualElement" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="Styling with USS classes" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="Working with events" class="contentExplorer__itemButton" />
+                </ext:CollapsibleSection>
+
+                <ext:CollapsibleSection title-text="Controls" class="contentExplorer__section">
+                    <ext:IconLabelButton text="PillButton — gradient actions" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="PillInputField — mobile-ready input" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="ScrollSnap — paging container" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="QuadrantStepper — segmented navigation" class="contentExplorer__itemButton" />
+                </ext:CollapsibleSection>
+
+                <ext:CollapsibleSection title-text="Utilities" class="contentExplorer__section">
+                    <ext:IconLabelButton text="VisualElementShakeUtility" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="UIToolkitExtensions helpers" class="contentExplorer__itemButton" />
+                    <ext:IconLabelButton text="ToastSwipeDismissManipulator" class="contentExplorer__itemButton" />
+                </ext:CollapsibleSection>
+            </ui:VisualElement>
+
+            <ui:Label name="status-label" text="Loading content…" class="contentExplorer__statusLabel" />
+        </ui:VisualElement>
+
+        <ui:VisualElement name="loading-overlay" class="contentExplorer__loadingOverlay">
+            <ext:LoadingIcon name="loading-icon" class="contentExplorer__loadingIcon" />
+            <ui:Label text="Loading content…" class="contentExplorer__loadingLabel" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ContentExplorer/ContentExplorerUxmlView.uxml.meta b/ContentExplorer/ContentExplorerUxmlView.uxml.meta
new file mode 100644
index 0000000..a0d6645
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: e736883a490f43f89ffabd93a96005d3
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/DropDownPhoneEntry.meta b/DropDownPhoneEntry.meta
new file mode 100644
index 0000000..6cf22bb
--- /dev/null
+++ b/DropDownPhoneEntry.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 25e61942cd154633833d3b7fcb948d60
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
new file mode 100644
index 0000000..f0df558
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
@@ -0,0 +1,204 @@
+// Examples~/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
+// Demonstrates: DropDownControl, PillInputField, PillButton
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the same
+//   GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - A dial-code DropDownControl and a PillInputField sit side by side in a single
+//        composite input row.
+//      - Pick a dial code from the dropdown, then type a phone number (the digits are
+//        grouped and formatted as you type).
+//      - The "Send code" PillButton stays disabled until at least 10 digits are entered;
+//        the status line reports readiness and confirms the simulated send.
+
+using System;
+using System.Text;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Demonstrates <see cref="DropDownControl"/> paired with <see cref="PillInputField"/>
+    /// </summary>
+    public class DropDownPhoneEntryDemo : MonoBehaviour
+    {
+        private static readonly string[] DialCodeOptions =
+        {
+            "+1",
+            "+33",
+            "+34",
+            "+44",
+            "+49",
+            "+61",
+            "+81",
+            "+91",
+        };
+
+        private const string WaitingStatusText = "Enter at least 10 digits to enable the button.";
+
+        private UIDocument uiDocument;
+        private DropDownControl dialCodePicker;
+        private PillInputField phoneNumberInput;
+        private PillButton sendCodeButton;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("DropDownPhoneEntryDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+            UpdateSendButtonState(phoneNumberInput?.Value);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "phoneVerificationExample__screen");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "phoneVerificationExample__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "phoneVerificationExample__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "phoneVerificationExample__title");
+            title.text = "YOUR PHONE NUMBER";
+
+            Label description = UIToolkitExtensions.CreateVisualElement<Label>(card, "phoneVerificationExample__description");
+            description.text = "To protect this space, we verify each person once. We'll send a verification code by text message.";
+
+            VisualElement compositeInput = UIToolkitExtensions.CreateVisualElement(card, "phoneVerificationExample__phoneCompositeInput");
+
+            dialCodePicker = UIToolkitExtensions.CreateVisualElement<DropDownControl>(compositeInput, "phoneVerificationExample__dialCodePicker");
+            dialCodePicker.Items = DialCodeOptions;
+            dialCodePicker.SetDefault("+44");
+            dialCodePicker.OpenStateChanged += HandlePickerOpenStateChanged;
+            dialCodePicker.ValueChanged += HandleDialCodeChanged;
+
+            UIToolkitExtensions.CreateVisualElement(compositeInput, "phoneVerificationExample__inputDivider");
+
+            phoneNumberInput = UIToolkitExtensions.CreateVisualElement<PillInputField>(compositeInput, "phoneVerificationExample__phoneInput");
+            phoneNumberInput.SetPlaceholder("Type your number here");
+            phoneNumberInput.KeyboardType = TouchScreenKeyboardType.PhonePad;
+            phoneNumberInput.OnValueChanged += UpdateSendButtonState;
+            phoneNumberInput.OnValidation += UpdateSendButtonState;
+
+            Label info = UIToolkitExtensions.CreateVisualElement<Label>(card, "phoneVerificationExample__info");
+            info.text = "Your phone number is used only for verification and connection, never shared.";
+
+            sendCodeButton = UIToolkitExtensions.CreateVisualElement<PillButton>(card, "phoneVerificationExample__sendButton");
+            sendCodeButton.Text = "Send code";
+            sendCodeButton.SetInnerColor("#4A90E2");
+            sendCodeButton.SetOuterColor("#7B68EE");
+            sendCodeButton.SetTextColor(Color.white);
+            sendCodeButton.Clicked += SendCode;
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "phoneVerificationExample__status");
+            statusLabel.text = WaitingStatusText;
+        }
+
+        private void HandlePickerOpenStateChanged(bool isOpen)
+        {
+            if (statusLabel == null)
+            {
+                return;
+            }
+
+            if (isOpen)
+            {
+                statusLabel.text = "Choose a dial code.";
+                return;
+            }
+
+            UpdateSendButtonState(phoneNumberInput?.Value);
+        }
+
+        private void HandleDialCodeChanged(string value)
+        {
+            UpdateSendButtonState(phoneNumberInput?.Value);
+        }
+
+        private void UpdateSendButtonState(string rawValue)
+        {
+            if (sendCodeButton == null)
+            {
+                return;
+            }
+
+            bool isValid = ExtractDigits(rawValue).Length >= 10;
+            sendCodeButton.SetEnabled(isValid);
+            sendCodeButton.style.opacity = isValid ? 1f : 0.42f;
+
+            if (statusLabel == null)
+            {
+                return;
+            }
+
+            if (!isValid)
+            {
+                statusLabel.text = WaitingStatusText;
+                return;
+            }
+
+            statusLabel.text = $"Ready to send a code to {dialCodePicker?.Value} {FormatReadableNumber(rawValue)}.";
+        }
+
+        private void SendCode()
+        {
+            string digits = ExtractDigits(phoneNumberInput?.Value);
+            if (digits.Length < 10)
+            {
+                UpdateSendButtonState(phoneNumberInput?.Value);
+                return;
+            }
+
+            statusLabel.text = $"Sample send complete: code sent to {dialCodePicker?.Value} {digits}.";
+        }
+
+        private static string ExtractDigits(string value)
+        {
+            if (string.IsNullOrEmpty(value))
+            {
+                return string.Empty;
+            }
+
+            var builder = new StringBuilder(value.Length);
+            for (int index = 0; index < value.Length; index++)
+            {
+                char currentCharacter = value[index];
+                if (char.IsDigit(currentCharacter))
+                {
+                    builder.Append(currentCharacter);
+                }
+            }
+
+            return builder.ToString();
+        }
+
+        private static string FormatReadableNumber(string value)
+        {
+            string digits = ExtractDigits(value);
+            if (digits.Length <= 3)
+            {
+                return digits;
+            }
+
+            if (digits.Length <= 6)
+            {
+                return $"{digits[..3]} {digits[3..]}";
+            }
+
+            if (digits.Length <= 10)
+            {
+                return $"{digits[..3]} {digits[3..6]} {digits[6..]}";
+            }
+
+            return $"{digits[..3]} {digits[3..6]} {digits[6..10]} {digits[10..]}";
+        }
+    }
+}
\ No newline at end of file
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs.meta b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs.meta
new file mode 100644
index 0000000..a247a65
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: e60a7a7457a84fb6be8102ce13f03f7d
\ No newline at end of file
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity b/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity
new file mode 100644
index 0000000..a51f88f
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: DropDown Phone Entry Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: e60a7a7457a84fb6be8102ce13f03f7d, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity.meta b/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity.meta
new file mode 100644
index 0000000..2bf6d1c
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: f85210feac2c7de4790c82598acb5a44
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
new file mode 100644
index 0000000..b7f736c
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
@@ -0,0 +1,163 @@
+.phoneVerificationExample__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.phoneVerificationExample__card {
+	width: 100%;
+	max-width: 560px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.phoneVerificationExample__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 12px;
+}
+
+.phoneVerificationExample__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.phoneVerificationExample__description {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	-unity-text-align: upper-left;
+	white-space: normal;
+	margin-bottom: 24px;
+}
+
+.phoneVerificationExample__phoneCompositeInput {
+	width: 100%;
+	height: 72px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-left: 0;
+	padding-right: 0;
+	border-width: 1px;
+	border-radius: 22px;
+	border-color: rgba(255, 255, 255, 0.14);
+	background-color: rgba(255, 255, 255, 0.03);
+	margin-bottom: 18px;
+}
+
+.phoneVerificationExample__dialCodePicker {
+	width: auto;
+	min-width: 164px;
+	max-width: 220px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.phoneVerificationExample__dialCodePicker .dropDownControl__trigger {
+	height: 72px;
+	border-width: 0;
+	border-radius: 0;
+	background-color: rgba(0, 0, 0, 0);
+	justify-content: flex-end;
+}
+
+.phoneVerificationExample__dialCodePicker .dropDownControl__triggerLabel {
+	font-size: 20px;
+	-unity-text-align: middle-right;
+	padding-left: 24px;
+	padding-right: 12px;
+	flex-grow: 0;
+}
+
+.phoneVerificationExample__dialCodePicker .dropDownControl__triggerIcon {
+	margin-right: 14px;
+	margin-left: 0;
+	width: 18px;
+	height: 18px;
+}
+
+.phoneVerificationExample__inputDivider {
+	width: 1px;
+	height: 40px;
+	margin-left: 8px;
+	margin-right: 8px;
+	background-color: rgba(255, 255, 255, 0.14);
+}
+
+.phoneVerificationExample__phoneInput {
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.phoneVerificationExample__phoneInput > .pillInputField__input {
+	height: 72px;
+	border-width: 0;
+	border-radius: 0;
+	background-color: rgba(0, 0, 0, 0);
+}
+
+.phoneVerificationExample__phoneInput .pillInputField__inputTextContent > .unity-text-field__input,
+.phoneVerificationExample__phoneInput .pillInputField__inputTextContent > .unity-base-text-field__input {
+	-unity-text-align: middle-left;
+	padding-left: 18px;
+	padding-right: 10px;
+	font-size: 18px;
+	color: rgba(255, 255, 255, 1);
+	/* Override the default (light) theme: the inner input ships an opaque white
+	   background, which made the white typed text invisible (white-on-white).
+	   Transparent lets the dark card show through, matching the dropdown panel. */
+	background-color: rgba(0, 0, 0, 0);
+	border-left-width: 0;
+	border-right-width: 0;
+	border-top-width: 0;
+	border-bottom-width: 0;
+}
+
+.phoneVerificationExample__phoneInput .unity-text-field__placeholder,
+.phoneVerificationExample__phoneInput .unity-base-text-field__placeholder {
+	-unity-text-align: middle-left;
+	color: rgba(180, 191, 220, 0.65);
+}
+
+.phoneVerificationExample__info {
+	font-size: 14px;
+	color: rgba(173, 183, 210, 0.85);
+	-unity-text-align: upper-left;
+	white-space: normal;
+	margin-bottom: 24px;
+}
+
+.phoneVerificationExample__sendButton {
+	width: 100%;
+	height: 58px;
+	margin-bottom: 14px;
+}
+
+.phoneVerificationExample__status {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 0.95);
+	-unity-text-align: upper-left;
+	white-space: normal;
+}
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss.meta b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss.meta
new file mode 100644
index 0000000..63e2dbb
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 1bbf180a29eb24745b57512501be5545
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
new file mode 100644
index 0000000..eba7eff
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
@@ -0,0 +1,163 @@
+// Examples~/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
+// UXML counterpart of DropDownPhoneEntryDemo.cs.
+//
+// The layout lives in DropDownPhoneEntryUxmlView.uxml (loaded by the UIDocument on this
+// GameObject). This binder only queries the cloned tree and wires the interactive
+// behaviour — the "layout in UXML, behaviour in C#" division of labour.
+
+using System.Text;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Behaviour binder for the UXML-authored DropDownPhoneEntry demo.
+    /// </summary>
+    public class DropDownPhoneEntryUxmlBinder : MonoBehaviour
+    {
+        private const string WaitingStatusText = "Enter at least 10 digits to enable the button.";
+
+        private UIDocument uiDocument;
+        private DropDownControl dialCodePicker;
+        private PillInputField phoneNumberInput;
+        private PillButton sendCodeButton;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("DropDownPhoneEntryUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            dialCodePicker = root.Q<DropDownControl>("dial-code-picker");
+            phoneNumberInput = root.Q<PillInputField>("phone-input");
+            sendCodeButton = root.Q<PillButton>("send-button");
+            statusLabel = root.Q<Label>("status-label");
+
+            if (dialCodePicker == null || phoneNumberInput == null || sendCodeButton == null)
+            {
+                Debug.LogWarning("DropDownPhoneEntryUxmlBinder: one or more named elements were not found in the UXML.", this);
+                return;
+            }
+
+            dialCodePicker.SetDefault("+44");
+            dialCodePicker.OpenStateChanged += HandlePickerOpenStateChanged;
+            dialCodePicker.ValueChanged += HandleDialCodeChanged;
+
+            phoneNumberInput.OnValueChanged += UpdateSendButtonState;
+            phoneNumberInput.OnValidation += UpdateSendButtonState;
+
+            sendCodeButton.SetTextColor(Color.white);
+            sendCodeButton.Clicked += SendCode;
+
+            UpdateSendButtonState(phoneNumberInput.Value);
+        }
+
+        private void HandlePickerOpenStateChanged(bool isOpen)
+        {
+            if (statusLabel == null)
+            {
+                return;
+            }
+
+            if (isOpen)
+            {
+                statusLabel.text = "Choose a dial code.";
+                return;
+            }
+
+            UpdateSendButtonState(phoneNumberInput?.Value);
+        }
+
+        private void HandleDialCodeChanged(string value)
+        {
+            UpdateSendButtonState(phoneNumberInput?.Value);
+        }
+
+        private void UpdateSendButtonState(string rawValue)
+        {
+            if (sendCodeButton == null)
+            {
+                return;
+            }
+
+            bool isValid = ExtractDigits(rawValue).Length >= 10;
+            sendCodeButton.SetEnabled(isValid);
+            sendCodeButton.style.opacity = isValid ? 1f : 0.42f;
+
+            if (statusLabel == null)
+            {
+                return;
+            }
+
+            if (!isValid)
+            {
+                statusLabel.text = WaitingStatusText;
+                return;
+            }
+
+            statusLabel.text = $"Ready to send a code to {dialCodePicker?.Value} {FormatReadableNumber(rawValue)}.";
+        }
+
+        private void SendCode()
+        {
+            string digits = ExtractDigits(phoneNumberInput?.Value);
+            if (digits.Length < 10)
+            {
+                UpdateSendButtonState(phoneNumberInput?.Value);
+                return;
+            }
+
+            statusLabel.text = $"Sample send complete: code sent to {dialCodePicker?.Value} {digits}.";
+        }
+
+        private static string ExtractDigits(string value)
+        {
+            if (string.IsNullOrEmpty(value))
+            {
+                return string.Empty;
+            }
+
+            var builder = new StringBuilder(value.Length);
+            foreach (char currentCharacter in value)
+            {
+                if (char.IsDigit(currentCharacter))
+                {
+                    builder.Append(currentCharacter);
+                }
+            }
+
+            return builder.ToString();
+        }
+
+        private static string FormatReadableNumber(string value)
+        {
+            string digits = ExtractDigits(value);
+            if (digits.Length <= 3)
+            {
+                return digits;
+            }
+
+            if (digits.Length <= 6)
+            {
+                return $"{digits[..3]} {digits[3..]}";
+            }
+
+            if (digits.Length <= 10)
+            {
+                return $"{digits[..3]} {digits[3..6]} {digits[6..]}";
+            }
+
+            return $"{digits[..3]} {digits[3..6]} {digits[6..10]} {digits[10..]}";
+        }
+    }
+}
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs.meta b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs.meta
new file mode 100644
index 0000000..4ae1ed4
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 81ce770f45b947348c7542bdf302789e
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity b/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity
new file mode 100644
index 0000000..64f8b41
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 1
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: DropDown Phone Entry (UXML)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: f1284c7c25124949a70f46f2f06f8bdb, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 81ce770f45b947348c7542bdf302789e, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity.meta b/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity.meta
new file mode 100644
index 0000000..5e7ea82
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: bfa1ca7c08374fbbb183a5a28f134f84
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml b/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml
new file mode 100644
index 0000000..4f675ca
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml
@@ -0,0 +1,30 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <!--
+      UXML version of the DropDownPhoneEntry demo. Mirrors DropDownPhoneEntryDemo.cs
+      but declares the layout here; DropDownPhoneEntryUxmlBinder.cs only wires behaviour.
+      Controls (DropDownControl, PillInputField, PillButton) are [UxmlElement] types from
+      the UnityUIToolkit.Extensions namespace (the xmlns:ext prefix above).
+    -->
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="DropDownPhoneEntryStyles.uss" />
+
+    <ui:VisualElement name="screen" class="phoneVerificationExample__screen">
+        <ui:VisualElement name="card" class="phoneVerificationExample__card">
+            <ui:Label text="Toolkit Sample" class="phoneVerificationExample__eyebrow" />
+            <ui:Label text="YOUR PHONE NUMBER" class="phoneVerificationExample__title" />
+            <ui:Label text="To protect this space, we verify each person once. We'll send a verification code by text message." class="phoneVerificationExample__description" />
+
+            <ui:VisualElement name="composite-input" class="phoneVerificationExample__phoneCompositeInput">
+                <ext:DropDownControl name="dial-code-picker" class="phoneVerificationExample__dialCodePicker" items="+1,+33,+34,+44,+49,+61,+81,+91" />
+                <ui:VisualElement class="phoneVerificationExample__inputDivider" />
+                <ext:PillInputField name="phone-input" class="phoneVerificationExample__phoneInput" placeholder="Type your number here" keyboard-type="PhonePad" />
+            </ui:VisualElement>
+
+            <ui:Label text="Your phone number is used only for verification and connection, never shared." class="phoneVerificationExample__info" />
+
+            <ext:PillButton name="send-button" class="phoneVerificationExample__sendButton" text="Send code" inner-color="#4A90E2" outer-color="#7B68EE" />
+
+            <ui:Label name="status-label" text="Enter at least 10 digits to enable the button." class="phoneVerificationExample__status" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml.meta b/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml.meta
new file mode 100644
index 0000000..e7cede3
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: f1284c7c25124949a70f46f2f06f8bdb
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ImageCropOverlay.meta b/ImageCropOverlay.meta
new file mode 100644
index 0000000..1886487
--- /dev/null
+++ b/ImageCropOverlay.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 0adcf5a2d6d04514b154cff5915f3b7c
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.cs b/ImageCropOverlay/ImageCropOverlayDemo.cs
new file mode 100644
index 0000000..05551a4
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemo.cs
@@ -0,0 +1,267 @@
+// Examples~/ImageCropOverlay/ImageCropOverlayDemo.cs
+// Demonstrates: ImageCropOverlayControl, CircularImageButton, PillButton
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the same
+//   GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - A generated default portrait is shown in a CircularImageButton, alongside a
+//        "Saved Preview" panel.
+//      - Tap the image or the "Edit Image" button to open the crop overlay; drag to move,
+//        pinch or mouse-wheel to zoom, then press Save.
+//      - The saved crop is applied back into both the button and the preview; "Reset"
+//        restores the original generated portrait.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Demonstrates <see cref="ImageCropOverlayControl"/> with a reusable profile image flow.
+    /// The demo starts with a generated portrait, opens the crop overlay from the image or button,
+    /// and applies the saved crop back into the on-screen preview.
+    /// </summary>
+    public class ImageCropOverlayDemo : MonoBehaviour
+    {
+        private UIDocument uiDocument;
+        private CircularImageButton imageButton;
+        private VisualElement savedPreview;
+        private Label statusLabel;
+        private PillButton resetButton;
+
+        private Texture2D defaultTexture;
+        private Texture2D croppedTexture;
+
+        private Texture2D ActiveTexture => croppedTexture != null ? croppedTexture : defaultTexture;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ImageCropOverlayDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            defaultTexture = CreateDefaultPortraitTexture(512);
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+            RefreshPreview("Default image loaded. Tap Edit Image to crop and save.");
+        }
+
+        private void OnDestroy()
+        {
+            DestroyRuntimeTexture(croppedTexture);
+            DestroyRuntimeTexture(defaultTexture);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "imageCropOverlayDemo__screen");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "imageCropOverlayDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "imageCropOverlayDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "imageCropOverlayDemo__title");
+            title.text = "PROFILE IMAGE CROP";
+
+            Label description = UIToolkitExtensions.CreateVisualElement<Label>(card, "imageCropOverlayDemo__description");
+            description.text = "Start from a default portrait, move and scale the image, then save the crop directly back into the screen preview.";
+
+            VisualElement stage = UIToolkitExtensions.CreateVisualElement(card, "imageCropOverlayDemo__stage");
+
+            imageButton = UIToolkitExtensions.CreateVisualElement<CircularImageButton>(stage, "imageCropOverlayDemo__imageButton");
+            imageButton.Clicked += OpenCropOverlay;
+
+            Label helper = UIToolkitExtensions.CreateVisualElement<Label>(stage, "imageCropOverlayDemo__helper");
+            helper.text = "Tap the image or the button below to edit the crop.";
+
+            VisualElement previewCard = UIToolkitExtensions.CreateVisualElement(stage, "imageCropOverlayDemo__previewCard");
+
+            Label previewTitle = UIToolkitExtensions.CreateVisualElement<Label>(previewCard, "imageCropOverlayDemo__previewTitle");
+            previewTitle.text = "Saved Preview";
+
+            savedPreview = UIToolkitExtensions.CreateVisualElement(previewCard, "imageCropOverlayDemo__previewImage");
+            savedPreview.style.backgroundSize = new BackgroundSize(BackgroundSizeType.Cover);
+
+            VisualElement buttonRow = UIToolkitExtensions.CreateVisualElement(card, "imageCropOverlayDemo__buttonRow");
+
+            PillButton editButton = UIToolkitExtensions.CreateVisualElement<PillButton>(buttonRow, "imageCropOverlayDemo__actionButton");
+            editButton.Text = "Edit Image";
+            editButton.SetInnerColor("#4A90E2");
+            editButton.SetOuterColor("#7B68EE");
+            editButton.SetTextColor(Color.white);
+            editButton.Clicked += OpenCropOverlay;
+
+            resetButton = UIToolkitExtensions.CreateVisualElement<PillButton>(buttonRow, "imageCropOverlayDemo__actionButton", "imageCropOverlayDemo__actionButton--secondary");
+            resetButton.Text = "Reset";
+            resetButton.SetInnerColor("#465062");
+            resetButton.SetOuterColor("#5C667A");
+            resetButton.SetTextColor(Color.white);
+            resetButton.Clicked += ResetImage;
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "imageCropOverlayDemo__status");
+        }
+
+        private void OpenCropOverlay()
+        {
+            if (ActiveTexture == null)
+            {
+                statusLabel.text = "No source image is available for cropping.";
+                return;
+            }
+
+            var configuration = new ImageCropOverlayControl.Configuration
+            {
+                Title = "Move and Scale",
+                CancelLabel = "Cancel",
+                SaveLabel = "Save",
+                ExportSize = 512,
+                ScreenMarginPx = 48f,
+                MaxViewportWidthRatio = 0.9f,
+                CornerRadiusPercent = ImageCropOverlayControl.CircleCornerRadiusPercent,
+            };
+
+            bool overlayShown = ImageCropOverlayControl.Show(
+                imageButton ?? uiDocument.rootVisualElement,
+                ActiveTexture,
+                configuration,
+                OnCropConfirmed,
+                () => RefreshPreview("Crop cancelled. The current preview was left unchanged.")) != null;
+
+            if (overlayShown)
+            {
+                statusLabel.text = "Drag to move the image. Pinch or use the mouse wheel to zoom, then press Save.";
+            }
+        }
+
+        private void OnCropConfirmed(Texture2D newTexture)
+        {
+            ReplaceCroppedTexture(newTexture);
+            RefreshPreview($"Crop saved at {newTexture.width}x{newTexture.height}. The preview now reflects the exported texture.");
+        }
+
+        private void ResetImage()
+        {
+            ReplaceCroppedTexture(null);
+            RefreshPreview("Reset to the original generated portrait.");
+        }
+
+        private void RefreshPreview(string statusMessage)
+        {
+            Texture2D previewTexture = ActiveTexture;
+            if (previewTexture != null)
+            {
+                imageButton.SetImage(previewTexture);
+                savedPreview.style.backgroundImage = new StyleBackground(previewTexture);
+            }
+            else
+            {
+                imageButton.ClearImage();
+                savedPreview.style.backgroundImage = StyleKeyword.Null;
+            }
+
+            bool canReset = croppedTexture != null;
+            resetButton.SetEnabled(canReset);
+            resetButton.style.opacity = canReset ? 1f : 0.42f;
+            statusLabel.text = statusMessage;
+        }
+
+        private void ReplaceCroppedTexture(Texture2D newTexture)
+        {
+            if (croppedTexture != null && croppedTexture != newTexture)
+            {
+                DestroyRuntimeTexture(croppedTexture);
+            }
+
+            croppedTexture = newTexture;
+        }
+
+        private static void DestroyRuntimeTexture(Texture2D texture)
+        {
+            if (texture != null)
+            {
+                Destroy(texture);
+            }
+        }
+
+        private static Texture2D CreateDefaultPortraitTexture(int size)
+        {
+            var texture = new Texture2D(size, size, TextureFormat.RGBA32, false)
+            {
+                wrapMode = TextureWrapMode.Clamp,
+                filterMode = FilterMode.Bilinear,
+            };
+
+            var pixels = new Color[size * size];
+            Vector2 center = new(size * 0.5f, size * 0.5f);
+            float backgroundRadius = size * 0.49f;
+            Vector2 torsoCenter = new(size * 0.5f, size * 0.72f);
+            Vector2 torsoSize = new(size * 0.24f, size * 0.18f);
+            Vector2 headCenter = new(size * 0.5f, size * 0.38f);
+            float headRadius = size * 0.12f;
+            Vector2 hairCenter = new(size * 0.5f, size * 0.34f);
+            Vector2 hairSize = new(size * 0.16f, size * 0.11f);
+
+            Color backgroundTop = new(0.31f, 0.55f, 0.95f, 1f);
+            Color backgroundBottom = new(0.12f, 0.78f, 0.72f, 1f);
+            Color torsoColor = new(0.13f, 0.21f, 0.37f, 1f);
+            Color skinColor = new(0.97f, 0.81f, 0.67f, 1f);
+            Color hairColor = new(0.17f, 0.12f, 0.1f, 1f);
+
+            for (int y = 0; y < size; y++)
+            {
+                for (int x = 0; x < size; x++)
+                {
+                    int pixelIndex = (y * size) + x;
+                    Vector2 currentPoint = new(x, y);
+                    float distanceFromCenter = Vector2.Distance(currentPoint, center);
+                    if (distanceFromCenter > backgroundRadius)
+                    {
+                        pixels[pixelIndex] = Color.clear;
+                        continue;
+                    }
+
+                    float verticalLerp = Mathf.Clamp01((float)y / size);
+                    Color pixelColor = Color.Lerp(backgroundTop, backgroundBottom, verticalLerp);
+
+                    if (IsInsideEllipse(currentPoint, torsoCenter, torsoSize))
+                    {
+                        pixelColor = torsoColor;
+                    }
+
+                    if (Vector2.Distance(currentPoint, headCenter) <= headRadius)
+                    {
+                        pixelColor = skinColor;
+                    }
+
+                    if (IsInsideEllipse(currentPoint, hairCenter, hairSize) && currentPoint.y >= size * 0.26f)
+                    {
+                        pixelColor = hairColor;
+                    }
+
+                    pixels[pixelIndex] = pixelColor;
+                }
+            }
+
+            texture.SetPixels(pixels);
+            texture.Apply(updateMipmaps: false, makeNoLongerReadable: false);
+            return texture;
+        }
+
+        private static bool IsInsideEllipse(Vector2 point, Vector2 ellipseCenter, Vector2 ellipseRadii)
+        {
+            if (ellipseRadii.x <= 0f || ellipseRadii.y <= 0f)
+            {
+                return false;
+            }
+
+            float normalizedX = (point.x - ellipseCenter.x) / ellipseRadii.x;
+            float normalizedY = (point.y - ellipseCenter.y) / ellipseRadii.y;
+            return (normalizedX * normalizedX) + (normalizedY * normalizedY) <= 1f;
+        }
+    }
+}
\ No newline at end of file
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.cs.meta b/ImageCropOverlay/ImageCropOverlayDemo.cs.meta
new file mode 100644
index 0000000..9fe21b5
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 17d9f17d4e614a56a332dc4c612687e2
\ No newline at end of file
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.unity b/ImageCropOverlay/ImageCropOverlayDemo.unity
new file mode 100644
index 0000000..60c7a00
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.039215688, g: 0.05490196, b: 0.09411765, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Image Crop Overlay Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 17d9f17d4e614a56a332dc4c612687e2, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.unity.meta b/ImageCropOverlay/ImageCropOverlayDemo.unity.meta
new file mode 100644
index 0000000..25952e5
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 99198037f5db6f044afcdc1c4c87a6fe
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ImageCropOverlay/ImageCropOverlayDemoStyles.uss b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
new file mode 100644
index 0000000..9b2e0d3
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
@@ -0,0 +1,119 @@
+.imageCropOverlayDemo__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.imageCropOverlayDemo__card {
+	width: 100%;
+	max-width: 720px;
+	padding-left: 32px;
+	padding-right: 32px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 27, 41, 0.96);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.imageCropOverlayDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(122, 232, 199, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 12px;
+}
+
+.imageCropOverlayDemo__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.imageCropOverlayDemo__description {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	-unity-text-align: upper-left;
+	white-space: normal;
+	margin-bottom: 28px;
+}
+
+.imageCropOverlayDemo__stage {
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 26px;
+}
+
+.imageCropOverlayDemo__imageButton {
+	width: 176px;
+	height: 176px;
+	margin-bottom: 14px;
+}
+
+.imageCropOverlayDemo__helper {
+	font-size: 14px;
+	color: rgba(167, 176, 204, 0.88);
+	-unity-text-align: middle-center;
+	white-space: normal;
+	margin-bottom: 22px;
+}
+
+.imageCropOverlayDemo__previewCard {
+	width: 100%;
+	max-width: 320px;
+	padding-left: 18px;
+	padding-right: 18px;
+	padding-top: 18px;
+	padding-bottom: 18px;
+	background-color: rgba(255, 255, 255, 0.03);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 22px;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageCropOverlayDemo__previewTitle {
+	font-size: 13px;
+	color: rgba(150, 162, 194, 0.95);
+	-unity-font-style: bold;
+	-unity-text-align: middle-center;
+	margin-bottom: 12px;
+}
+
+.imageCropOverlayDemo__previewImage {
+	width: 220px;
+	height: 220px;
+	border-radius: 32px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.06);
+}
+
+.imageCropOverlayDemo__buttonRow {
+	flex-direction: row;
+	justify-content: space-between;
+	gap: 14px;
+	margin-bottom: 16px;
+}
+
+.imageCropOverlayDemo__actionButton {
+	flex-grow: 1;
+	height: 58px;
+}
+
+.imageCropOverlayDemo__status {
+	font-size: 13px;
+	color: rgba(122, 232, 199, 0.95);
+	-unity-text-align: upper-left;
+	white-space: normal;
+}
diff --git a/ImageCropOverlay/ImageCropOverlayDemoStyles.uss.meta b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss.meta
new file mode 100644
index 0000000..a565e87
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: c56007a49029ada4e9fed31db2327270
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs b/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs
new file mode 100644
index 0000000..2bdca6a
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs
@@ -0,0 +1,220 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class ImageCropOverlayUxmlBinder : MonoBehaviour
+    {
+        private UIDocument uiDocument;
+        private CircularImageButton imageButton;
+        private VisualElement savedPreview;
+        private Label statusLabel;
+        private PillButton resetButton;
+
+        private Texture2D defaultTexture;
+        private Texture2D croppedTexture;
+
+        private Texture2D ActiveTexture => croppedTexture != null ? croppedTexture : defaultTexture;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ImageCropOverlayUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            defaultTexture = CreateDefaultPortraitTexture(512);
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            imageButton = root.Q<CircularImageButton>("image-button");
+            savedPreview = root.Q<VisualElement>("preview-image");
+            statusLabel = root.Q<Label>("status-label");
+            resetButton = root.Q<PillButton>("reset-button");
+            PillButton editButton = root.Q<PillButton>("edit-button");
+
+            imageButton.Clicked += OpenCropOverlay;
+            if (editButton != null)
+            {
+                editButton.SetTextColor(Color.white);
+                editButton.Clicked += OpenCropOverlay;
+            }
+
+            if (resetButton != null)
+            {
+                resetButton.SetTextColor(Color.white);
+                resetButton.Clicked += ResetImage;
+            }
+
+            RefreshPreview("Default image loaded. Tap Edit Image to crop and save.");
+        }
+
+        private void OnDestroy()
+        {
+            DestroyRuntimeTexture(croppedTexture);
+            DestroyRuntimeTexture(defaultTexture);
+        }
+
+        private void OpenCropOverlay()
+        {
+            if (ActiveTexture == null)
+            {
+                statusLabel.text = "No source image is available for cropping.";
+                return;
+            }
+
+            var configuration = new ImageCropOverlayControl.Configuration
+            {
+                Title = "Move and Scale",
+                CancelLabel = "Cancel",
+                SaveLabel = "Save",
+                ExportSize = 512,
+                ScreenMarginPx = 48f,
+                MaxViewportWidthRatio = 0.9f,
+                CornerRadiusPercent = ImageCropOverlayControl.CircleCornerRadiusPercent,
+            };
+
+            bool overlayShown = ImageCropOverlayControl.Show(
+                imageButton ?? uiDocument.rootVisualElement,
+                ActiveTexture,
+                configuration,
+                OnCropConfirmed,
+                () => RefreshPreview("Crop cancelled. The current preview was left unchanged.")) != null;
+
+            if (overlayShown)
+            {
+                statusLabel.text = "Drag to move the image. Pinch or use the mouse wheel to zoom, then press Save.";
+            }
+        }
+
+        private void OnCropConfirmed(Texture2D newTexture)
+        {
+            ReplaceCroppedTexture(newTexture);
+            RefreshPreview($"Crop saved at {newTexture.width}x{newTexture.height}. The preview now reflects the exported texture.");
+        }
+
+        private void ResetImage()
+        {
+            ReplaceCroppedTexture(null);
+            RefreshPreview("Reset to the original generated portrait.");
+        }
+
+        private void RefreshPreview(string statusMessage)
+        {
+            Texture2D previewTexture = ActiveTexture;
+            if (previewTexture != null)
+            {
+                imageButton.SetImage(previewTexture);
+                savedPreview.style.backgroundImage = new StyleBackground(previewTexture);
+            }
+            else
+            {
+                imageButton.ClearImage();
+                savedPreview.style.backgroundImage = StyleKeyword.Null;
+            }
+
+            bool canReset = croppedTexture != null;
+            resetButton.SetEnabled(canReset);
+            resetButton.style.opacity = canReset ? 1f : 0.42f;
+            statusLabel.text = statusMessage;
+        }
+
+        private void ReplaceCroppedTexture(Texture2D newTexture)
+        {
+            if (croppedTexture != null && croppedTexture != newTexture)
+            {
+                DestroyRuntimeTexture(croppedTexture);
+            }
+
+            croppedTexture = newTexture;
+        }
+
+        private static void DestroyRuntimeTexture(Texture2D texture)
+        {
+            if (texture != null)
+            {
+                Destroy(texture);
+            }
+        }
+
+        private static Texture2D CreateDefaultPortraitTexture(int size)
+        {
+            var texture = new Texture2D(size, size, TextureFormat.RGBA32, false)
+            {
+                wrapMode = TextureWrapMode.Clamp,
+                filterMode = FilterMode.Bilinear,
+            };
+
+            var pixels = new Color[size * size];
+            Vector2 center = new(size * 0.5f, size * 0.5f);
+            float backgroundRadius = size * 0.49f;
+            Vector2 torsoCenter = new(size * 0.5f, size * 0.72f);
+            Vector2 torsoSize = new(size * 0.24f, size * 0.18f);
+            Vector2 headCenter = new(size * 0.5f, size * 0.38f);
+            float headRadius = size * 0.12f;
+            Vector2 hairCenter = new(size * 0.5f, size * 0.34f);
+            Vector2 hairSize = new(size * 0.16f, size * 0.11f);
+
+            Color backgroundTop = new(0.31f, 0.55f, 0.95f, 1f);
+            Color backgroundBottom = new(0.12f, 0.78f, 0.72f, 1f);
+            Color torsoColor = new(0.13f, 0.21f, 0.37f, 1f);
+            Color skinColor = new(0.97f, 0.81f, 0.67f, 1f);
+            Color hairColor = new(0.17f, 0.12f, 0.1f, 1f);
+
+            for (int y = 0; y < size; y++)
+            {
+                for (int x = 0; x < size; x++)
+                {
+                    int pixelIndex = (y * size) + x;
+                    Vector2 currentPoint = new(x, y);
+                    float distanceFromCenter = Vector2.Distance(currentPoint, center);
+                    if (distanceFromCenter > backgroundRadius)
+                    {
+                        pixels[pixelIndex] = Color.clear;
+                        continue;
+                    }
+
+                    float verticalLerp = Mathf.Clamp01((float)y / size);
+                    Color pixelColor = Color.Lerp(backgroundTop, backgroundBottom, verticalLerp);
+
+                    if (IsInsideEllipse(currentPoint, torsoCenter, torsoSize))
+                    {
+                        pixelColor = torsoColor;
+                    }
+
+                    if (Vector2.Distance(currentPoint, headCenter) <= headRadius)
+                    {
+                        pixelColor = skinColor;
+                    }
+
+                    if (IsInsideEllipse(currentPoint, hairCenter, hairSize) && currentPoint.y >= size * 0.26f)
+                    {
+                        pixelColor = hairColor;
+                    }
+
+                    pixels[pixelIndex] = pixelColor;
+                }
+            }
+
+            texture.SetPixels(pixels);
+            texture.Apply(updateMipmaps: false, makeNoLongerReadable: false);
+            return texture;
+        }
+
+        private static bool IsInsideEllipse(Vector2 point, Vector2 ellipseCenter, Vector2 ellipseRadii)
+        {
+            if (ellipseRadii.x <= 0f || ellipseRadii.y <= 0f)
+            {
+                return false;
+            }
+
+            float normalizedX = (point.x - ellipseCenter.x) / ellipseRadii.x;
+            float normalizedY = (point.y - ellipseCenter.y) / ellipseRadii.y;
+            return (normalizedX * normalizedX) + (normalizedY * normalizedY) <= 1f;
+        }
+    }
+}
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs.meta b/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs.meta
new file mode 100644
index 0000000..2169705
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: a1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity b/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity
new file mode 100644
index 0000000..b8b9437
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity
@@ -0,0 +1,151 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+  m_LightingDataAsset: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Image Crop Overlay (UXML)
+  m_TagString: Untagged
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: a1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: a1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity.meta b/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity.meta
new file mode 100644
index 0000000..04c56eb
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: a1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlView.uxml b/ImageCropOverlay/ImageCropOverlayUxmlView.uxml
new file mode 100644
index 0000000..c9b5b7f
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlView.uxml
@@ -0,0 +1,28 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ImageCropOverlayDemoStyles.uss" />
+
+    <ui:VisualElement class="imageCropOverlayDemo__screen">
+        <ui:VisualElement class="imageCropOverlayDemo__card">
+            <ui:Label text="Toolkit Sample" class="imageCropOverlayDemo__eyebrow" />
+            <ui:Label text="PROFILE IMAGE CROP" class="imageCropOverlayDemo__title" />
+            <ui:Label text="Start from a default portrait, move and scale the image, then save the crop directly back into the screen preview." class="imageCropOverlayDemo__description" />
+
+            <ui:VisualElement class="imageCropOverlayDemo__stage">
+                <ext:CircularImageButton name="image-button" class="imageCropOverlayDemo__imageButton" />
+                <ui:Label text="Tap the image or the button below to edit the crop." class="imageCropOverlayDemo__helper" />
+                <ui:VisualElement class="imageCropOverlayDemo__previewCard">
+                    <ui:Label text="Saved Preview" class="imageCropOverlayDemo__previewTitle" />
+                    <ui:VisualElement name="preview-image" class="imageCropOverlayDemo__previewImage" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+
+            <ui:VisualElement class="imageCropOverlayDemo__buttonRow">
+                <ext:PillButton name="edit-button" class="imageCropOverlayDemo__actionButton" text="Edit Image" inner-color="#4A90E2" outer-color="#7B68EE" />
+                <ext:PillButton name="reset-button" class="imageCropOverlayDemo__actionButton imageCropOverlayDemo__actionButton--secondary" text="Reset" inner-color="#465062" outer-color="#5C667A" />
+            </ui:VisualElement>
+
+            <ui:Label name="status-label" class="imageCropOverlayDemo__status" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ImageCropOverlay/ImageCropOverlayUxmlView.uxml.meta b/ImageCropOverlay/ImageCropOverlayUxmlView.uxml.meta
new file mode 100644
index 0000000..1682ca3
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: a1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/LICENSE.meta b/LICENSE.meta
new file mode 100644
index 0000000..7da9c97
--- /dev/null
+++ b/LICENSE.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 01d39305cc092b24289c1659d515a30f
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/NotificationList.meta b/NotificationList.meta
new file mode 100644
index 0000000..10dd355
--- /dev/null
+++ b/NotificationList.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: df03698f6e2343f399d72f5a2112c693
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/NotificationList/NotificationListDemo.cs b/NotificationList/NotificationListDemo.cs
new file mode 100644
index 0000000..2eb086e
--- /dev/null
+++ b/NotificationList/NotificationListDemo.cs
@@ -0,0 +1,181 @@
+// Examples~/NotificationList/NotificationListDemo.cs
+// Demonstrates: ElasticListView, NotificationBadge
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the same
+//   GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - A header row shows a title and an unread NotificationBadge (top right).
+//      - The ElasticListView below holds the notifications. It bounces elastically and,
+//        on device, a swipe-up past the bottom edge loads 3 more (the control notes that
+//        swipe input is unreliable in the editor — use the Add button there).
+//      - "Add Notification" appends a randomly generated notification and bumps the badge.
+//      - Tap the badge to mark everything read (the count returns to zero and the badge hides).
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Notification feed demo combining <see cref="ElasticListView"/> and <see cref="NotificationBadge"/>.
+    ///
+    /// The badge tracks the unread count: "Add Notification" appends one item and increments it,
+    /// while tapping the badge clears it. Swipe-up overscroll raises
+    /// <see cref="ElasticListView.LoadMoreRequested"/>, which the demo answers by simulating a short
+    /// fetch (via <c>schedule</c>) and appending three more items between
+    /// <see cref="ElasticListView.BeginLoadMore"/> and <see cref="ElasticListView.EndLoadMore"/>.
+    /// </summary>
+    public class NotificationListDemo : MonoBehaviour
+    {
+        private const int SeedCount = 4;
+        private const int LoadMoreBatch = 3;
+        private const long SimulatedFetchMs = 700;
+
+        private static readonly string[] MessageTemplates =
+        {
+            "Alex sent you a new message.",
+            "Your order has shipped and is on its way.",
+            "Jordan started following you.",
+            "Your weekly summary is ready to view.",
+            "You hit your daily step goal of 10,000.",
+            "A new comment was added to your post.",
+            "Backup completed successfully.",
+            "Your subscription renews in 3 days.",
+            "Taylor mentioned you in a thread.",
+            "New login from an unrecognised device.",
+            "Payment received — thank you!",
+            "Reminder: stand-up starts in 15 minutes.",
+        };
+
+        private static readonly Color[] AccentColors =
+        {
+            new(0.29f, 0.78f, 0.65f, 1f),
+            new(0.51f, 0.68f, 1.00f, 1f),
+            new(0.78f, 0.55f, 1.00f, 1f),
+            new(1.00f, 0.72f, 0.42f, 1f),
+            new(1.00f, 0.54f, 0.54f, 1f),
+        };
+
+        private ElasticListView listView;
+        private NotificationBadge badge;
+        private int unreadCount;
+        private int accentIndex;
+        private bool loadingMore;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("NotificationListDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "notificationListDemo__screen");
+
+            VisualElement cardWrap = UIToolkitExtensions.CreateVisualElement(screen, "notificationListDemo__cardWrap");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(cardWrap, "notificationListDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "notificationListDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "notificationListDemo__title");
+            title.text = "Notifications";
+
+            Label instruction = UIToolkitExtensions.CreateVisualElement<Label>(card, "notificationListDemo__instruction");
+            instruction.text = "Add notifications to grow the list and bump the unread badge. Swipe up past the " +
+                "bottom to load more (best on device). Tap the badge to mark all read.";
+
+            listView = UIToolkitExtensions.CreateVisualElement<ElasticListView>(card, "notificationListDemo__list");
+            listView.EmptyStateText = "You're all caught up.";
+            listView.EnableTouchElasticity(0.12f);
+            listView.EnableLoadMore();
+            listView.LoadMoreRequested += OnLoadMoreRequested;
+
+            for (int i = 0; i < SeedCount; i++)
+            {
+                listView.AddItem(CreateNotificationItem(RandomMessage()));
+            }
+
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "notificationListDemo__bottomBar");
+
+            PillButton addButton = UIToolkitExtensions.CreateVisualElement<PillButton>(bottomBar, "notificationListDemo__addButton");
+            addButton.Text = "Add Notification";
+            addButton.SetInnerColor("#4A90E2");
+            addButton.SetOuterColor("#7B68EE");
+            addButton.SetTextColor(Color.white);
+            addButton.SetFontSize(15f);
+            addButton.Clicked += OnAddClicked;
+
+            badge = UIToolkitExtensions.CreateVisualElement<NotificationBadge>(cardWrap, "notificationListDemo__badge");
+            badge.RegisterCallback<ClickEvent>(_ => MarkAllRead());
+        }
+
+        private void OnAddClicked()
+        {
+            listView.AddItem(CreateNotificationItem(RandomMessage()));
+            unreadCount++;
+            badge.SetCount(unreadCount);
+        }
+
+        private void OnLoadMoreRequested()
+        {
+            if (loadingMore)
+            {
+                return;
+            }
+
+            loadingMore = true;
+            listView.BeginLoadMore();
+
+            listView.schedule.Execute(() =>
+            {
+                for (int i = 0; i < LoadMoreBatch; i++)
+                {
+                    listView.AddItem(CreateNotificationItem(RandomMessage()));
+                }
+
+                listView.EndLoadMore();
+                loadingMore = false;
+            }).StartingIn(SimulatedFetchMs);
+        }
+
+        private void MarkAllRead()
+        {
+            unreadCount = 0;
+            badge.SetCount(0);
+        }
+
+        private VisualElement CreateNotificationItem(string message)
+        {
+            VisualElement item = UIToolkitExtensions.CreateVisualElement("notificationListDemo__item");
+
+            VisualElement accent = UIToolkitExtensions.CreateVisualElement(item, "notificationListDemo__itemAccent");
+            accent.style.backgroundColor = AccentColors[accentIndex % AccentColors.Length];
+            accentIndex++;
+
+            VisualElement textBlock = UIToolkitExtensions.CreateVisualElement(item, "notificationListDemo__itemText");
+
+            Label messageLabel = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "notificationListDemo__itemMessage");
+            messageLabel.text = message;
+
+            Label metaLabel = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "notificationListDemo__itemMeta");
+            metaLabel.text = "Just now";
+
+            return item;
+        }
+
+        private static string RandomMessage()
+        {
+            return MessageTemplates[Random.Range(0, MessageTemplates.Length)];
+        }
+    }
+}
diff --git a/NotificationList/NotificationListDemo.cs.meta b/NotificationList/NotificationListDemo.cs.meta
new file mode 100644
index 0000000..3edf834
--- /dev/null
+++ b/NotificationList/NotificationListDemo.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: fb8f508026994286850a306527fb973f
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/NotificationList/NotificationListDemo.unity b/NotificationList/NotificationListDemo.unity
new file mode 100644
index 0000000..4e1a26d
--- /dev/null
+++ b/NotificationList/NotificationListDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Notification List Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: fb8f508026994286850a306527fb973f, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/NotificationList/NotificationListDemo.unity.meta b/NotificationList/NotificationListDemo.unity.meta
new file mode 100644
index 0000000..f12249c
--- /dev/null
+++ b/NotificationList/NotificationListDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 44bf46a8a8c04755a01c341ed299fb8f
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/NotificationList/NotificationListStyles.uss b/NotificationList/NotificationListStyles.uss
new file mode 100644
index 0000000..294d20b
--- /dev/null
+++ b/NotificationList/NotificationListStyles.uss
@@ -0,0 +1,121 @@
+.notificationListDemo__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+/* Non-clipping wrapper that anchors the absolutely-positioned badge to the card. */
+.notificationListDemo__cardWrap {
+	width: 100%;
+	max-width: 580px;
+	flex-grow: 1;
+	max-height: 760px;
+	flex-direction: column;
+	position: relative;
+}
+
+.notificationListDemo__card {
+	flex-grow: 1;
+	min-height: 0;
+	flex-direction: column;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 28px;
+	padding-bottom: 28px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.notificationListDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.notificationListDemo__title {
+	font-size: 24px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 8px;
+}
+
+/* Drawn as an absolute overlay on top of the panel. The badge is a sibling of the
+   card (not a child), so the card's rounded corners can never clip it. */
+.notificationListDemo__badge {
+	position: absolute;
+	top: 16px;
+	right: 16px;
+}
+
+.notificationListDemo__instruction {
+	font-size: 13px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 16px;
+	white-space: normal;
+}
+
+.notificationListDemo__list {
+	flex-grow: 1;
+	min-height: 0;
+	margin-bottom: 16px;
+}
+
+.notificationListDemo__list .elasticListView__emptyLabel {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.7);
+}
+
+.notificationListDemo__item {
+	flex-direction: row;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.04);
+	border-radius: 14px;
+	padding-left: 14px;
+	padding-right: 14px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	margin-bottom: 10px;
+	overflow: hidden;
+}
+
+.notificationListDemo__itemAccent {
+	width: 4px;
+	align-self: stretch;
+	border-radius: 2px;
+	margin-right: 12px;
+	flex-shrink: 0;
+}
+
+.notificationListDemo__itemText {
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.notificationListDemo__itemMessage {
+	font-size: 14px;
+	color: rgba(236, 240, 252, 1);
+	white-space: normal;
+}
+
+.notificationListDemo__itemMeta {
+	font-size: 11px;
+	color: rgba(150, 160, 185, 1);
+	margin-top: 3px;
+}
+
+.notificationListDemo__bottomBar {
+	align-items: center;
+}
+
+.notificationListDemo__addButton {
+	height: 52px;
+	align-self: stretch;
+}
diff --git a/NotificationList/NotificationListStyles.uss.meta b/NotificationList/NotificationListStyles.uss.meta
new file mode 100644
index 0000000..3322ef1
--- /dev/null
+++ b/NotificationList/NotificationListStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: bdfe3d45ceeb43589b0495f98e37582a
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/NotificationList/NotificationListUxmlBinder.cs b/NotificationList/NotificationListUxmlBinder.cs
new file mode 100644
index 0000000..fc4bffe
--- /dev/null
+++ b/NotificationList/NotificationListUxmlBinder.cs
@@ -0,0 +1,139 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class NotificationListUxmlBinder : MonoBehaviour
+    {
+        private const int SeedCount = 4;
+        private const int LoadMoreBatch = 3;
+        private const long SimulatedFetchMs = 700;
+
+        private static readonly string[] MessageTemplates =
+        {
+            "Alex sent you a new message.",
+            "Your order has shipped and is on its way.",
+            "Jordan started following you.",
+            "Your weekly summary is ready to view.",
+            "You hit your daily step goal of 10,000.",
+            "A new comment was added to your post.",
+            "Backup completed successfully.",
+            "Your subscription renews in 3 days.",
+            "Taylor mentioned you in a thread.",
+            "New login from an unrecognised device.",
+            "Payment received — thank you!",
+            "Reminder: stand-up starts in 15 minutes.",
+        };
+
+        private static readonly Color[] AccentColors =
+        {
+            new(0.29f, 0.78f, 0.65f, 1f),
+            new(0.51f, 0.68f, 1.00f, 1f),
+            new(0.78f, 0.55f, 1.00f, 1f),
+            new(1.00f, 0.72f, 0.42f, 1f),
+            new(1.00f, 0.54f, 0.54f, 1f),
+        };
+
+        private ElasticListView listView;
+        private NotificationBadge badge;
+        private int unreadCount;
+        private int accentIndex;
+        private bool loadingMore;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("NotificationListUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+
+            badge = root.Q<NotificationBadge>("badge");
+            badge.RegisterCallback<ClickEvent>(_ => MarkAllRead());
+
+            listView = root.Q<ElasticListView>("list");
+            listView.EnableTouchElasticity(0.12f);
+            listView.EnableLoadMore();
+            listView.LoadMoreRequested += OnLoadMoreRequested;
+
+            for (int i = 0; i < SeedCount; i++)
+            {
+                listView.AddItem(CreateNotificationItem(RandomMessage()));
+            }
+
+            PillButton addButton = root.Q<PillButton>("add-button");
+            addButton.SetTextColor(Color.white);
+            addButton.Clicked += OnAddClicked;
+        }
+
+        private void OnAddClicked()
+        {
+            listView.AddItem(CreateNotificationItem(RandomMessage()));
+            unreadCount++;
+            badge.SetCount(unreadCount);
+        }
+
+        private void OnLoadMoreRequested()
+        {
+            if (loadingMore)
+            {
+                return;
+            }
+
+            loadingMore = true;
+            listView.BeginLoadMore();
+
+            listView.schedule.Execute(() =>
+            {
+                for (int i = 0; i < LoadMoreBatch; i++)
+                {
+                    listView.AddItem(CreateNotificationItem(RandomMessage()));
+                }
+
+                listView.EndLoadMore();
+                loadingMore = false;
+            }).StartingIn(SimulatedFetchMs);
+        }
+
+        private void MarkAllRead()
+        {
+            unreadCount = 0;
+            badge.SetCount(0);
+        }
+
+        private VisualElement CreateNotificationItem(string message)
+        {
+            var item = new VisualElement();
+            item.AddToClassList("notificationListDemo__item");
+
+            var accent = new VisualElement();
+            accent.AddToClassList("notificationListDemo__itemAccent");
+            accent.style.backgroundColor = AccentColors[accentIndex % AccentColors.Length];
+            accentIndex++;
+            item.Add(accent);
+
+            var textBlock = new VisualElement();
+            textBlock.AddToClassList("notificationListDemo__itemText");
+            item.Add(textBlock);
+
+            var messageLabel = new Label(message);
+            messageLabel.AddToClassList("notificationListDemo__itemMessage");
+            textBlock.Add(messageLabel);
+
+            var metaLabel = new Label("Just now");
+            metaLabel.AddToClassList("notificationListDemo__itemMeta");
+            textBlock.Add(metaLabel);
+
+            return item;
+        }
+
+        private static string RandomMessage()
+        {
+            return MessageTemplates[Random.Range(0, MessageTemplates.Length)];
+        }
+    }
+}
diff --git a/NotificationList/NotificationListUxmlBinder.cs.meta b/NotificationList/NotificationListUxmlBinder.cs.meta
new file mode 100644
index 0000000..3c96296
--- /dev/null
+++ b/NotificationList/NotificationListUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: f1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/NotificationList/NotificationListUxmlDemo.unity b/NotificationList/NotificationListUxmlDemo.unity
new file mode 100644
index 0000000..57b407d
--- /dev/null
+++ b/NotificationList/NotificationListUxmlDemo.unity
@@ -0,0 +1,106 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: Notification List (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: f1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: f1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/NotificationList/NotificationListUxmlDemo.unity.meta b/NotificationList/NotificationListUxmlDemo.unity.meta
new file mode 100644
index 0000000..7830a22
--- /dev/null
+++ b/NotificationList/NotificationListUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: f1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/NotificationList/NotificationListUxmlView.uxml b/NotificationList/NotificationListUxmlView.uxml
new file mode 100644
index 0000000..1ab9847
--- /dev/null
+++ b/NotificationList/NotificationListUxmlView.uxml
@@ -0,0 +1,22 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="NotificationListStyles.uss" />
+
+    <ui:VisualElement class="notificationListDemo__screen">
+        <ui:VisualElement class="notificationListDemo__cardWrap">
+            <ui:VisualElement class="notificationListDemo__card">
+                <ui:Label text="Toolkit Sample" class="notificationListDemo__eyebrow" />
+                <ui:Label text="Notifications" class="notificationListDemo__title" />
+
+                <ui:Label text="Add notifications to grow the list and bump the unread badge. Swipe up past the bottom to load more (best on device). Tap the badge to mark all read." class="notificationListDemo__instruction" />
+
+                <ext:ElasticListView name="list" class="notificationListDemo__list" empty-text="You're all caught up." />
+
+                <ui:VisualElement class="notificationListDemo__bottomBar">
+                    <ext:PillButton name="add-button" class="notificationListDemo__addButton" text="Add Notification" inner-color="#4A90E2" outer-color="#7B68EE" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+            <ext:NotificationBadge name="badge" class="notificationListDemo__badge" count="0" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/NotificationList/NotificationListUxmlView.uxml.meta b/NotificationList/NotificationListUxmlView.uxml.meta
new file mode 100644
index 0000000..a637e82
--- /dev/null
+++ b/NotificationList/NotificationListUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: f1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ProfileEditor.meta b/ProfileEditor.meta
new file mode 100644
index 0000000..0d890dc
--- /dev/null
+++ b/ProfileEditor.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 3bc4b30a2dc14c7eac0eebb52203985a
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ProfileEditor/ProfileEditorDemo.cs b/ProfileEditor/ProfileEditorDemo.cs
new file mode 100644
index 0000000..61ea836
--- /dev/null
+++ b/ProfileEditor/ProfileEditorDemo.cs
@@ -0,0 +1,242 @@
+// Examples~/ProfileEditor/ProfileEditorDemo.cs
+// Demonstrates: CircularImageButton, GrayscaleImage, ToggleButton, ColorToggleGroup, ColorToggleButton
+//
+// Scene setup (already configured in the provided ProfileEditorDemo.unity scene):
+//   - A single GameObject holds a UIDocument (using the shared example Panel Settings:
+//     Scale With Screen Size, 1080x1920) and this component.
+//   - The demo builds its UI entirely in C# via GetComponent<UIDocument>().
+//   - Press Play.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Profile editor demo combining avatar display, image processing, and theme color
+    /// selection, mirroring <c>Documentation~/Examples/ProfileEditor.md</c>.
+    ///
+    /// Controls featured:
+    ///   <see cref="CircularImageButton"/> — the profile avatar; tapping it logs a message
+    ///   (a real app would open an image picker).
+    ///   <see cref="GrayscaleImage"/> — a sample gradient image that switches between full
+    ///   colour and black-and-white.
+    ///   <see cref="ToggleButton"/> — the "B&amp;W" two-state toggle that drives the grayscale switch.
+    ///   <see cref="ColorToggleGroup"/> / <see cref="ColorToggleButton"/> — a five-colour,
+    ///   single-selection theme picker that updates a swatch and a colour-name label.
+    ///
+    /// The package ships no grayscale shader/material, so the grayscale effect is demonstrated
+    /// by swapping the <see cref="GrayscaleImage.TextureProperty"/> between a colour texture and a
+    /// runtime-desaturated copy (the <see cref="GrayscaleImage.GreyscaleEnabled"/> flag is also set,
+    /// which takes effect automatically if a grayscale material is assigned later).
+    /// </summary>
+    public class ProfileEditorDemo : MonoBehaviour
+    {
+        private readonly struct ThemeColor
+        {
+            public readonly string Name;
+            public readonly Color Value;
+
+            public ThemeColor(string name, Color value)
+            {
+                Name = name;
+                Value = value;
+            }
+        }
+
+        private static readonly ThemeColor[] ThemeColors =
+        {
+            new("Coral", new Color(0.90f, 0.45f, 0.45f)),
+            new("Amber", new Color(1.00f, 0.72f, 0.30f)),
+            new("Lemon", new Color(0.98f, 0.86f, 0.36f)),
+            new("Mint", new Color(0.51f, 0.78f, 0.52f)),
+            new("Sky", new Color(0.39f, 0.71f, 0.96f)),
+        };
+
+        private UIDocument uiDocument;
+        private CircularImageButton avatarButton;
+        private GrayscaleImage sampleImage;
+        private ToggleButton blackWhiteToggle;
+        private ColorToggleGroup colorGroup;
+        private VisualElement swatch;
+        private Label colorNameLabel;
+        private Label statusLabel;
+
+        private Texture2D avatarTexture;
+        private Texture2D colorSampleTexture;
+        private Texture2D grayscaleSampleTexture;
+        private Texture2D circleTexture;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ProfileEditorDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            CreateTextures();
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void OnDestroy()
+        {
+            DestroyTexture(avatarTexture);
+            DestroyTexture(colorSampleTexture);
+            DestroyTexture(grayscaleSampleTexture);
+            DestroyTexture(circleTexture);
+        }
+
+        private void CreateTextures()
+        {
+            avatarTexture = ProceduralTextureUtility.CreateHorizontalGradient(
+                new Color(0.45f, 0.55f, 0.95f), new Color(0.12f, 0.78f, 0.72f), 256);
+            colorSampleTexture = ProceduralTextureUtility.CreateHorizontalGradient(
+                new Color(0.95f, 0.45f, 0.55f), new Color(0.35f, 0.45f, 0.95f), 256);
+            grayscaleSampleTexture = CreateDesaturatedCopy(colorSampleTexture);
+            circleTexture = ProceduralTextureUtility.CreateSolidCircle(64, Color.white);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "profileEditor__screen");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "profileEditor__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__title");
+            title.text = "PROFILE EDITOR";
+
+            Label description = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__description");
+            description.text = "Avatar display, image processing, and theme color selection working together in one screen.";
+
+            VisualElement avatarRow = UIToolkitExtensions.CreateVisualElement(card, "profileEditor__avatarRow");
+
+            avatarButton = UIToolkitExtensions.CreateVisualElement<CircularImageButton>(avatarRow, "profileEditor__avatar");
+            avatarButton.SetImage(avatarTexture);
+            avatarButton.Clicked += OnAvatarClicked;
+
+            Label avatarHelp = UIToolkitExtensions.CreateVisualElement<Label>(avatarRow, "profileEditor__avatarHelp");
+            avatarHelp.text = "Tap the avatar to change your profile picture. In this demo it logs to the Console.";
+
+            Label imageLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__sectionLabel");
+            imageLabel.text = "Sample Image";
+
+            VisualElement imageRow = UIToolkitExtensions.CreateVisualElement(card, "profileEditor__imageRow");
+
+            sampleImage = UIToolkitExtensions.CreateVisualElement<GrayscaleImage>(imageRow, "profileEditor__sampleImage");
+            sampleImage.scaleMode = ScaleMode.ScaleAndCrop;
+            sampleImage.GreyscaleEnabled = false;
+            sampleImage.TextureProperty = colorSampleTexture;
+
+            VisualElement bwBlock = UIToolkitExtensions.CreateVisualElement(imageRow, "profileEditor__bwBlock");
+
+            Label bwLabel = UIToolkitExtensions.CreateVisualElement<Label>(bwBlock, "profileEditor__bwLabel");
+            bwLabel.text = "B&W";
+
+            blackWhiteToggle = UIToolkitExtensions.CreateVisualElement<ToggleButton>(bwBlock, "profileEditor__bwToggle");
+            blackWhiteToggle.OnClicked += OnBlackWhiteToggled;
+
+            Label colorLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__sectionLabel");
+            colorLabel.text = "Theme Color";
+
+            colorGroup = UIToolkitExtensions.CreateVisualElement<ColorToggleGroup>(card, "profileEditor__colorGroup");
+            colorGroup.Alignment = FlexDirection.Row;
+
+            var colorValues = new Color[ThemeColors.Length];
+            for (int index = 0; index < ThemeColors.Length; index++)
+            {
+                colorValues[index] = ThemeColors[index].Value;
+            }
+            colorGroup.Colors = colorValues;
+
+            colorGroup.Query(className: "toggleButton__icon")
+                .ForEach(icon => icon.style.backgroundImage = new StyleBackground(circleTexture));
+
+            colorGroup.OnColorSelected += OnThemeColorSelected;
+
+            VisualElement swatchRow = UIToolkitExtensions.CreateVisualElement(card, "profileEditor__swatchRow");
+
+            swatch = UIToolkitExtensions.CreateVisualElement(swatchRow, "profileEditor__swatch");
+
+            colorNameLabel = UIToolkitExtensions.CreateVisualElement<Label>(swatchRow, "profileEditor__colorName");
+            colorNameLabel.text = "No color selected";
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__status");
+            statusLabel.text = "Pick a theme color, toggle B&W, or tap the avatar.";
+
+            colorGroup.SelectColor(ThemeColors[0].Value);
+        }
+
+        private void OnAvatarClicked()
+        {
+            statusLabel.text = "Avatar tapped — a real app would open an image picker here.";
+            Debug.Log("[ProfileEditorDemo] Avatar clicked.");
+        }
+
+        private void OnBlackWhiteToggled()
+        {
+            bool blackAndWhite = blackWhiteToggle.IsSelected;
+            sampleImage.GreyscaleEnabled = blackAndWhite;
+            sampleImage.TextureProperty = blackAndWhite ? grayscaleSampleTexture : colorSampleTexture;
+            statusLabel.text = blackAndWhite
+                ? "Sample image switched to black & white."
+                : "Sample image switched to full color.";
+        }
+
+        private void OnThemeColorSelected(Color color)
+        {
+            swatch.style.backgroundColor = color;
+            colorNameLabel.text = $"Theme: {ResolveColorName(color)}";
+            statusLabel.text = "Theme color updated.";
+        }
+
+        private static string ResolveColorName(Color color)
+        {
+            foreach (ThemeColor themeColor in ThemeColors)
+            {
+                if (themeColor.Value == color)
+                {
+                    return themeColor.Name;
+                }
+            }
+
+            return "Custom";
+        }
+
+        private static Texture2D CreateDesaturatedCopy(Texture2D source)
+        {
+            var copy = new Texture2D(source.width, source.height, TextureFormat.RGBA32, false)
+            {
+                wrapMode = TextureWrapMode.Clamp,
+                filterMode = FilterMode.Bilinear,
+            };
+
+            Color[] pixels = source.GetPixels();
+            for (int index = 0; index < pixels.Length; index++)
+            {
+                Color pixel = pixels[index];
+                float luminance = (0.299f * pixel.r) + (0.587f * pixel.g) + (0.114f * pixel.b);
+                pixels[index] = new Color(luminance, luminance, luminance, pixel.a);
+            }
+
+            copy.SetPixels(pixels);
+            copy.Apply(updateMipmaps: false, makeNoLongerReadable: false);
+            return copy;
+        }
+
+        private static void DestroyTexture(Texture2D texture)
+        {
+            if (texture != null)
+            {
+                Destroy(texture);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/ProfileEditor/ProfileEditorDemo.cs.meta b/ProfileEditor/ProfileEditorDemo.cs.meta
new file mode 100644
index 0000000..6d38d4a
--- /dev/null
+++ b/ProfileEditor/ProfileEditorDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: a79c435680fb45bd80f37f7e946ec585
diff --git a/ProfileEditor/ProfileEditorDemo.unity b/ProfileEditor/ProfileEditorDemo.unity
new file mode 100644
index 0000000..59e8e55
--- /dev/null
+++ b/ProfileEditor/ProfileEditorDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Profile Editor Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: a79c435680fb45bd80f37f7e946ec585, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ProfileEditor/ProfileEditorDemo.unity.meta b/ProfileEditor/ProfileEditorDemo.unity.meta
new file mode 100644
index 0000000..3002349
--- /dev/null
+++ b/ProfileEditor/ProfileEditorDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: eb1f7ddbac394169bd0c9c35c8285772
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ProfileEditor/ProfileEditorStyles.uss b/ProfileEditor/ProfileEditorStyles.uss
new file mode 100644
index 0000000..d0c6ce5
--- /dev/null
+++ b/ProfileEditor/ProfileEditorStyles.uss
@@ -0,0 +1,178 @@
+.profileEditor__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.profileEditor__card {
+	width: 100%;
+	max-width: 560px;
+	padding-left: 32px;
+	padding-right: 32px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 27, 41, 0.96);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.profileEditor__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 12px;
+}
+
+.profileEditor__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.profileEditor__description {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	-unity-text-align: upper-left;
+	white-space: normal;
+	margin-bottom: 24px;
+}
+
+.profileEditor__avatarRow {
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 24px;
+}
+
+.profileEditor__avatar {
+	width: 96px;
+	height: 96px;
+	flex-shrink: 0;
+	margin-right: 18px;
+}
+
+.profileEditor__avatarHelp {
+	flex-grow: 1;
+	flex-shrink: 1;
+	font-size: 14px;
+	color: rgba(173, 183, 210, 0.85);
+	-unity-text-align: upper-left;
+	white-space: normal;
+}
+
+.profileEditor__sectionLabel {
+	font-size: 13px;
+	color: rgba(150, 162, 194, 0.95);
+	-unity-font-style: bold;
+	-unity-text-align: upper-left;
+	margin-top: 8px;
+	margin-bottom: 12px;
+}
+
+.profileEditor__imageRow {
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 24px;
+}
+
+.profileEditor__sampleImage {
+	width: 240px;
+	height: 150px;
+	flex-shrink: 0;
+	border-radius: 18px;
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	background-color: rgba(255, 255, 255, 0.04);
+	overflow: hidden;
+	margin-right: 20px;
+}
+
+.profileEditor__bwBlock {
+	align-items: center;
+	justify-content: center;
+}
+
+.profileEditor__bwLabel {
+	font-size: 14px;
+	color: rgba(226, 232, 245, 0.9);
+	-unity-font-style: bold;
+	-unity-text-align: middle-center;
+	margin-bottom: 8px;
+}
+
+.profileEditor__bwToggle {
+	width: 58px;
+	height: 32px;
+	border-radius: 16px;
+	background-color: rgba(255, 255, 255, 0.12);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.16);
+	transition-property: background-color;
+	transition-duration: 160ms;
+}
+
+.profileEditor__bwToggle.toggleButton--selected {
+	background-color: rgba(46, 204, 113, 1);
+	border-color: rgba(46, 204, 113, 1);
+}
+
+.profileEditor__colorGroup {
+	flex-grow: 0;
+	margin-bottom: 18px;
+}
+
+.profileEditor__colorGroup .colorToggleGroup__container {
+	flex-direction: row;
+	flex-grow: 0;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.profileEditor__colorGroup .toggleButton {
+	width: 44px;
+	height: 44px;
+	margin-left: 6px;
+	margin-right: 6px;
+	border-radius: 50%;
+}
+
+.profileEditor__swatchRow {
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 18px;
+}
+
+.profileEditor__swatch {
+	width: 34px;
+	height: 34px;
+	border-radius: 17px;
+	background-color: rgba(255, 255, 255, 0.08);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.16);
+	margin-right: 14px;
+	flex-shrink: 0;
+}
+
+.profileEditor__colorName {
+	flex-grow: 1;
+	font-size: 15px;
+	color: rgba(226, 232, 245, 0.9);
+	-unity-text-align: middle-left;
+	white-space: normal;
+}
+
+.profileEditor__status {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 0.95);
+	-unity-text-align: upper-left;
+	white-space: normal;
+}
diff --git a/ProfileEditor/ProfileEditorStyles.uss.meta b/ProfileEditor/ProfileEditorStyles.uss.meta
new file mode 100644
index 0000000..2f597fc
--- /dev/null
+++ b/ProfileEditor/ProfileEditorStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: a9cd86c0e6df48c081a1739af33ef5f4
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ProfileEditor/ProfileEditorUxmlBinder.cs b/ProfileEditor/ProfileEditorUxmlBinder.cs
new file mode 100644
index 0000000..4b1d084
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlBinder.cs
@@ -0,0 +1,187 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class ProfileEditorUxmlBinder : MonoBehaviour
+    {
+        private static readonly string[] PaletteHex =
+        {
+            "#E74C3C",
+            "#3498DB",
+            "#2ECC71",
+            "#F39C12",
+            "#9B59B6",
+        };
+
+        private CircularImageButton avatarButton;
+        private GrayscaleImage grayscaleImage;
+        private ToggleButton bwToggle;
+        private VisualElement colorSwatch;
+        private Label colorLabel;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ProfileEditorUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            avatarButton = root.Q<CircularImageButton>("avatar-button");
+            grayscaleImage = root.Q<GrayscaleImage>("sample-image");
+            bwToggle = root.Q<ToggleButton>("bw-toggle");
+            ColorToggleGroup colorGroup = root.Q<ColorToggleGroup>("color-group");
+            colorSwatch = root.Q<VisualElement>("color-swatch");
+            colorLabel = root.Q<Label>("color-label");
+            statusLabel = root.Q<Label>("status-label");
+
+            avatarButton.SetUploadLabel("Tap to upload");
+            avatarButton.SetImage(CreatePlaceholderAvatarTexture(96), isDefault: true);
+            avatarButton.Clicked += OnProfilePhotoClicked;
+
+            grayscaleImage.TextureProperty = CreateGradientBannerTexture(400, 140);
+            grayscaleImage.scaleMode = ScaleMode.ScaleAndCrop;
+
+            bwToggle.SetImage(CreateCheckmarkTexture(32));
+            bwToggle.OnClicked += OnBWToggleClicked;
+
+            Color[] paletteColors = new Color[PaletteHex.Length];
+            for (int index = 0; index < PaletteHex.Length; index++)
+            {
+                ColorUtility.TryParseHtmlString(PaletteHex[index], out paletteColors[index]);
+            }
+
+            colorGroup.Alignment = FlexDirection.Row;
+            colorGroup.Colors = paletteColors;
+            colorGroup.OnColorSelected += OnColorSelected;
+
+            statusLabel.text = "Tap the photo, toggle greyscale, or choose a theme color.";
+        }
+
+        private void OnProfilePhotoClicked()
+        {
+            statusLabel.text = "Photo tapped — would open picker.";
+            Debug.Log("[ProfileEditorUxmlBinder] CircularImageButton tapped.");
+        }
+
+        private void OnBWToggleClicked()
+        {
+            grayscaleImage.GreyscaleEnabled = bwToggle.IsSelected;
+            bwToggle.style.backgroundColor = bwToggle.IsSelected
+                ? new Color(0.28f, 0.56f, 0.89f, 1f)
+                : new Color(0.88f, 0.88f, 0.92f, 1f);
+        }
+
+        private void OnColorSelected(Color selectedColor)
+        {
+            colorSwatch.style.backgroundColor = selectedColor;
+            colorLabel.text = $"#{ColorUtility.ToHtmlStringRGB(selectedColor)}";
+            statusLabel.text = $"Theme color selected: #{ColorUtility.ToHtmlStringRGB(selectedColor)}";
+        }
+
+        private static Texture2D CreatePlaceholderAvatarTexture(int size)
+        {
+            var tex = new Texture2D(size, size, TextureFormat.RGBA32, false);
+            tex.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[size * size];
+            var centre = size / 2f;
+            var radius = centre - 1f;
+
+            for (var y = 0; y < size; y++)
+            {
+                for (var x = 0; x < size; x++)
+                {
+                    var dx = x - centre;
+                    var dy = y - centre;
+                    var dist = Mathf.Sqrt(dx * dx + dy * dy);
+                    pixels[y * size + x] = dist > radius
+                        ? Color.clear
+                        : Color.Lerp(new Color(0.28f, 0.56f, 0.89f, 1f), new Color(0.48f, 0.76f, 1f, 1f), (float)y / size);
+                }
+            }
+
+            tex.SetPixels(pixels);
+            tex.Apply();
+            return tex;
+        }
+
+        private static Texture2D CreateGradientBannerTexture(int width, int height)
+        {
+            var tex = new Texture2D(width, height, TextureFormat.RGBA32, false);
+            tex.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[width * height];
+
+            for (var y = 0; y < height; y++)
+            {
+                for (var x = 0; x < width; x++)
+                {
+                    var hue = (float)x / width;
+                    var sat = 0.75f;
+                    var val = 0.75f + 0.15f * ((float)y / height);
+                    pixels[y * width + x] = Color.HSVToRGB(hue, sat, val);
+                }
+            }
+
+            tex.SetPixels(pixels);
+            tex.Apply();
+            return tex;
+        }
+
+        private static Texture2D CreateCheckmarkTexture(int size)
+        {
+            var tex = new Texture2D(size, size, TextureFormat.RGBA32, false);
+            tex.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[size * size];
+
+            for (var i = 0; i < pixels.Length; i++)
+            {
+                pixels[i] = Color.clear;
+            }
+
+            int margin = size / 4;
+            DrawLine(pixels, size, margin, size / 2, size / 2, size - margin, Color.white, 2);
+            DrawLine(pixels, size, size / 2, size - margin, size - margin, margin, Color.white, 2);
+
+            tex.SetPixels(pixels);
+            tex.Apply();
+            return tex;
+        }
+
+        private static void DrawLine(Color[] pixels, int texSize, int x0, int y0, int x1, int y1, Color color, int thickness)
+        {
+            int dx = Mathf.Abs(x1 - x0);
+            int dy = Mathf.Abs(y1 - y0);
+            int sx = x0 < x1 ? 1 : -1;
+            int sy = y0 < y1 ? 1 : -1;
+            int err = dx - dy;
+
+            while (true)
+            {
+                for (int ty = -thickness; ty <= thickness; ty++)
+                {
+                    for (int tx = -thickness; tx <= thickness; tx++)
+                    {
+                        int px = x0 + tx;
+                        int py = y0 + ty;
+                        if (px >= 0 && px < texSize && py >= 0 && py < texSize)
+                        {
+                            pixels[py * texSize + px] = color;
+                        }
+                    }
+                }
+
+                if (x0 == x1 && y0 == y1) break;
+                int e2 = 2 * err;
+                if (e2 > -dy) { err -= dy; x0 += sx; }
+                if (e2 < dx) { err += dx; y0 += sy; }
+            }
+        }
+    }
+}
diff --git a/ProfileEditor/ProfileEditorUxmlBinder.cs.meta b/ProfileEditor/ProfileEditorUxmlBinder.cs.meta
new file mode 100644
index 0000000..3aedb9d
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: b1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ProfileEditor/ProfileEditorUxmlDemo.unity b/ProfileEditor/ProfileEditorUxmlDemo.unity
new file mode 100644
index 0000000..be154eb
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlDemo.unity
@@ -0,0 +1,110 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: Profile Editor (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: b1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: b1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ProfileEditor/ProfileEditorUxmlDemo.unity.meta b/ProfileEditor/ProfileEditorUxmlDemo.unity.meta
new file mode 100644
index 0000000..8f053fa
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: b1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ProfileEditor/ProfileEditorUxmlView.uxml b/ProfileEditor/ProfileEditorUxmlView.uxml
new file mode 100644
index 0000000..9839995
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlView.uxml
@@ -0,0 +1,35 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ProfileEditorStyles.uss" />
+
+    <ui:VisualElement class="profileEditor__screen">
+        <ui:VisualElement class="profileEditor__card">
+            <ui:Label text="Toolkit Sample" class="profileEditor__eyebrow" />
+            <ui:Label text="EDIT PROFILE" class="profileEditor__title" />
+            <ui:Label text="Tap the photo, toggle the sample banner, and pick a theme color from the palette below." class="profileEditor__description" />
+
+            <ui:VisualElement class="profileEditor__avatarRow">
+                <ext:CircularImageButton name="avatar-button" class="profileEditor__avatar" />
+                <ui:Label text="Tap to change the profile photo in a real app. This sample keeps the control focused on layout and state." class="profileEditor__avatarHelp" />
+            </ui:VisualElement>
+
+            <ui:Label text="Sample Image" class="profileEditor__sectionLabel" />
+            <ui:VisualElement class="profileEditor__imageRow">
+                <ext:GrayscaleImage name="sample-image" class="profileEditor__sampleImage" />
+                <ui:VisualElement class="profileEditor__bwBlock">
+                    <ui:Label text="B&amp;W Mode" class="profileEditor__bwLabel" />
+                    <ext:ToggleButton name="bw-toggle" class="profileEditor__bwToggle" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+
+            <ui:Label text="Theme Color" class="profileEditor__sectionLabel" />
+            <ext:ColorToggleGroup name="color-group" class="profileEditor__colorGroup" />
+            <ui:VisualElement class="profileEditor__swatchRow">
+                <ui:VisualElement name="color-swatch" class="profileEditor__swatch" />
+                <ui:Label name="color-label" text="None" class="profileEditor__colorName" />
+            </ui:VisualElement>
+
+            <ui:Label name="status-label" class="profileEditor__status" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ProfileEditor/ProfileEditorUxmlView.uxml.meta b/ProfileEditor/ProfileEditorUxmlView.uxml.meta
new file mode 100644
index 0000000..894db69
--- /dev/null
+++ b/ProfileEditor/ProfileEditorUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: b1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/README.md b/README.md
index a5a4042..d9cdb80 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,49 @@
-# com.unity.uitoolkitextensions.examples
\ No newline at end of file
+<!-- Offline documentation -->
+
+# Unity UI Toolkit Extensions Examples
+
+Ready-to-run sample scenes demonstrating the Unity UI Toolkit Extensions controls in realistic combinations.
+
+You can follow the UI Toolkit Extensions team for updates and news on:
+
+## [Twitter - #unityuiextensions](https://twitter.com/search?q=%23unityuiextensions) / [Facebook](https://www.facebook.com/UnityUIExtensions/) / [YouTube](https://www.youtube.com/@UnityUIExtensions)
+
+> Ways to get in touch:
+>
+> - [Gitter Chat](https://gitter.im/Unity-UI-Extensions/Lobby) site for the UI / UI Toolkit Extensions project
+> - [GitHub Discussions](https://github.com/Unity-UI-Extensions/com.unity.uitoolkitextensions/discussions), if you have any questions, queries or suggestions
+
+## Installing the Examples
+
+The examples are included with the package as the **UI Toolkit Extensions Samples** package sample. Once the package is installed, import them from the Unity Package Manager:
+
+***Package Manager -> Unity UI Toolkit Extensions -> Samples -> Import***
+
+## Examples
+
+- **ScrollSnap + PageDotIndicator** — Horizontal paging with dot indicator and a ComingSoonMessage page.
+- **Registration Form** — Full form using PillInputField, RoundedInputField, PillButton, PillSelector, and shake validation.
+- **Step Wizard** — Multi-step flow using QuadrantStepper and StepProgressBar.
+- **Content Explorer** — LoadingIcon reveal with CollapsibleSection and IconLabelButton items.
+- **Profile Editor** — CircularImageButton, GrayscaleImage, ToggleButton, and ColorToggleGroup.
+- **Toast Notifications** — Swipe-to-dismiss toast stack using ToastSwipeDismissManipulator.
+- **Dropdown Phone Entry** — Phone-number entry pairing a country-code DropDownControl with PillInputFields.
+- **Image Crop Overlay** — Pan / pinch-zoom crop flow using ImageCropOverlayControl and CircularImageButton.
+- **Notification List** — Elastic notification feed using ElasticListView, NotificationBadge, and PillButton.
+- **Screen Header** — Top app-bar demo wiring ScreenHeader's title and action events.
+- **Scroll Snap (Split Views)** — The same ScrollSnap built three ways — C#, UXML, and a split layout.
+- **Social Links** — Editable social-links section using SocialLinkContainer and PillButton.
+
+## Latest documentation
+
+The list above is a snapshot for offline reference. For the most accurate and up-to-date documentation — including full walkthroughs and code examples for every sample — always refer to the **[Unity UI Extensions website](https://unity-ui-extensions.github.io/)**:
+
+- **[Example scenes](https://unity-ui-extensions.github.io/uitoolkit/examples/)** — walkthroughs of every sample.
+- **[UI Toolkit Controls](https://unity-ui-extensions.github.io/uitoolkit/#controls)** — searchable reference for the controls the samples use.
+
+## Document revision history
+
+|Date|Details|
+|-|-|
+|June 16th, 2026|V1.0.0-preview.1 created, project creation|
+|July 20th, 2026|V1.0.0-preview.2 created, controls overhaul|
diff --git a/README.md.meta b/README.md.meta
new file mode 100644
index 0000000..6a6782b
--- /dev/null
+++ b/README.md.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 1c583de5ff361de4bbf59413474e2c9e
+TextScriptImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/RegistrationForm.meta b/RegistrationForm.meta
new file mode 100644
index 0000000..8844dea
--- /dev/null
+++ b/RegistrationForm.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 8b6f98bfa3096454f82407741f9ebd9e
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/RegistrationForm/RegistrationFormDemo.cs b/RegistrationForm/RegistrationFormDemo.cs
new file mode 100644
index 0000000..6adb69f
--- /dev/null
+++ b/RegistrationForm/RegistrationFormDemo.cs
@@ -0,0 +1,261 @@
+// Examples~/RegistrationForm/RegistrationFormDemo.cs
+// Demonstrates: PillInputField, RoundedInputField, PillSelector, PillButton, VisualElementShakeUtility
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the same
+//   GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - A registration card holds Full Name / Email / Password PillInputFields, an
+//        optional multiline RoundedInputField bio, and a PillSelector that cycles
+//        categories each time it is tapped.
+//      - "Create Account" validates the fields (name not empty, email contains '@',
+//        password at least 6 characters); each invalid field shakes via
+//        VisualElementShakeUtility.
+//      - On success the form fades out and a confirmation message fades in.
+
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Registration form demo showcasing <see cref="PillInputField"/>,
+    /// <see cref="RoundedInputField"/>, <see cref="PillButton"/>, <see cref="PillSelector"/>,
+    /// and <see cref="VisualElementShakeUtility"/> for validation feedback.
+    ///
+    /// Validation rules:
+    ///   Full Name  — must not be empty.
+    ///   Email      — must contain '@'.
+    ///   Password   — must be at least 6 characters.
+    ///   Bio        — optional (no validation).
+    ///   Category   — cycles through options when the selector is tapped.
+    ///
+    /// On successful validation the form fades out and a success message is shown
+    /// after a short coroutine delay.
+    /// </summary>
+    public class RegistrationFormDemo : MonoBehaviour
+    {
+        private static readonly string[] CategoryOptions =
+        {
+            "Fitness",
+            "Nutrition",
+            "Wellness",
+            "Mindfulness",
+        };
+
+        private int currentCategoryIndex = 0;
+
+        private UIDocument uiDocument;
+        private PillInputField nameField;
+        private PillInputField emailField;
+        private PillInputField passwordField;
+        private RoundedInputField bioField;
+        private PillSelector categorySelector;
+        private VisualElement formContainer;
+        private VisualElement successContainer;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("RegistrationFormDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "registrationForm__screen");
+
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__title");
+            titleLabel.text = "Registration Form";
+
+            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__subtitle");
+            subtitleLabel.text = "Complete the sample form below to review the shared example card style in a more complex layout.";
+
+            formContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__formContainer");
+
+            nameField = new PillInputField();
+            nameField.Label = "Full Name";
+            nameField.SetPlaceholder("Your full name");
+            nameField.KeyboardType = TouchScreenKeyboardType.Default;
+            nameField.AddToClassList("registrationForm__nameField");
+            ApplyPillInputStyle(nameField);
+            formContainer.Add(nameField);
+
+            emailField = new PillInputField();
+            emailField.Label = "Email Address";
+            emailField.SetPlaceholder("you@example.com");
+            emailField.KeyboardType = TouchScreenKeyboardType.EmailAddress;
+            emailField.AddToClassList("registrationForm__emailField");
+            ApplyPillInputStyle(emailField);
+            formContainer.Add(emailField);
+
+            passwordField = new PillInputField();
+            passwordField.Label = "Password";
+            passwordField.SetPlaceholder("Min. 6 characters");
+            passwordField.SetPasswordMode(true);
+            passwordField.SetMaxLength(64);
+            passwordField.AddToClassList("registrationForm__passwordField");
+            ApplyPillInputStyle(passwordField);
+            formContainer.Add(passwordField);
+
+            Label bioSectionLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__sectionLabel");
+            bioSectionLabel.text = "Bio (optional)";
+
+            bioField = new RoundedInputField();
+            bioField.Placeholder = "Tell us a little about yourself…";
+            bioField.Multiline = true;
+            bioField.MaxLength = 280;
+            bioField.SetTextColor(Color.white);
+            bioField.SetFontSize(14f);
+            bioField.AddToClassList("registrationForm__bioField");
+            formContainer.Add(bioField);
+
+            categorySelector = new PillSelector();
+            categorySelector.Label = "Category";
+            categorySelector.Value = CategoryOptions[currentCategoryIndex];
+            categorySelector.AddToClassList("registrationForm__categorySelector");
+            categorySelector.Clicked += OnCategorySelectorClicked;
+            formContainer.Add(categorySelector);
+
+            PillButton submitButton = new PillButton();
+            submitButton.Text = "Create Account";
+            submitButton.SetInnerColor("#4A90E2");
+            submitButton.SetOuterColor("#7B68EE");
+            submitButton.SetTextColor(Color.white);
+            submitButton.SetFontSize(16f);
+            submitButton.AddToClassList("registrationForm__submitButton");
+            submitButton.Clicked += OnSubmitClicked;
+            formContainer.Add(submitButton);
+
+            BuildSuccessContainer(card);
+        }
+
+        private void BuildSuccessContainer(VisualElement card)
+        {
+            successContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__successContainer");
+
+            VisualElement icon = UIToolkitExtensions.CreateVisualElement(successContainer, "registrationForm__successIcon");
+
+            Label checkLabel = UIToolkitExtensions.CreateVisualElement<Label>(icon, "registrationForm__successCheck");
+            checkLabel.text = "✓";
+
+            Label successTitle = UIToolkitExtensions.CreateVisualElement<Label>(successContainer, "registrationForm__successTitle");
+            successTitle.text = "Account Created!";
+
+            Label successMessage = UIToolkitExtensions.CreateVisualElement<Label>(successContainer, "registrationForm__successMessage");
+            successMessage.text = "Welcome aboard! Your account has been successfully created. You can now explore all features.";
+        }
+
+        private static void ApplyPillInputStyle(PillInputField field)
+        {
+            field.SetTextColor(Color.white);
+            field.SetFontSize(15f);
+        }
+
+        private void OnCategorySelectorClicked()
+        {
+            currentCategoryIndex = (currentCategoryIndex + 1) % CategoryOptions.Length;
+            categorySelector.Value = CategoryOptions[currentCategoryIndex];
+        }
+
+        private void OnSubmitClicked()
+        {
+            if (!ValidateForm())
+            {
+                return;
+            }
+
+            StartCoroutine(ShowSuccessTransition());
+        }
+
+        /// <summary>
+        /// Validates all required fields.
+        /// Shakes each invalid field using <see cref="VisualElementShakeUtility"/>.
+        /// </summary>
+        /// <returns>True when all rules pass.</returns>
+        private bool ValidateForm()
+        {
+            var isValid = true;
+
+            if (string.IsNullOrWhiteSpace(nameField.Value))
+            {
+                VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                nameField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                nameField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            if (!emailField.Value.Contains("@"))
+            {
+                VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                emailField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                emailField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            if (passwordField.Value.Length < 6)
+            {
+                VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                passwordField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                passwordField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            return isValid;
+        }
+
+        /// <summary>
+        /// Fades the form out, waits briefly, then reveals the success message.
+        /// </summary>
+        private IEnumerator ShowSuccessTransition()
+        {
+            formContainer.style.transitionProperty = new StyleList<StylePropertyName>(
+                new List<StylePropertyName> { new("opacity") });
+            formContainer.style.transitionDuration = new StyleList<TimeValue>(
+                new List<TimeValue> { new(400, TimeUnit.Millisecond) });
+            formContainer.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new List<EasingFunction> { new(EasingMode.EaseInOut) });
+            formContainer.style.opacity = 0f;
+
+            yield return new WaitForSeconds(0.45f);
+
+            formContainer.style.display = DisplayStyle.None;
+            successContainer.style.display = DisplayStyle.Flex;
+
+            successContainer.style.opacity = 0f;
+            successContainer.style.transitionProperty = new StyleList<StylePropertyName>(
+                new List<StylePropertyName> { new("opacity") });
+            successContainer.style.transitionDuration = new StyleList<TimeValue>(
+                new List<TimeValue> { new(500, TimeUnit.Millisecond) });
+            successContainer.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new List<EasingFunction> { new(EasingMode.EaseOut) });
+
+            yield return null;
+
+            successContainer.style.opacity = 1f;
+        }
+    }
+}
\ No newline at end of file
diff --git a/RegistrationForm/RegistrationFormDemo.cs.meta b/RegistrationForm/RegistrationFormDemo.cs.meta
new file mode 100644
index 0000000..aa3104b
--- /dev/null
+++ b/RegistrationForm/RegistrationFormDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 1bec585e7563a5247afc32a2edea2f7e
\ No newline at end of file
diff --git a/RegistrationForm/RegistrationFormDemo.unity b/RegistrationForm/RegistrationFormDemo.unity
new file mode 100644
index 0000000..e69c91e
--- /dev/null
+++ b/RegistrationForm/RegistrationFormDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Registration Form Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 1bec585e7563a5247afc32a2edea2f7e, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/RegistrationForm/RegistrationFormDemo.unity.meta b/RegistrationForm/RegistrationFormDemo.unity.meta
new file mode 100644
index 0000000..2777137
--- /dev/null
+++ b/RegistrationForm/RegistrationFormDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 4b184b0302994c0d88f6c4f98770f1f4
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/RegistrationForm/RegistrationFormStyles.uss b/RegistrationForm/RegistrationFormStyles.uss
new file mode 100644
index 0000000..5ce468b
--- /dev/null
+++ b/RegistrationForm/RegistrationFormStyles.uss
@@ -0,0 +1,212 @@
+.registrationForm__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.registrationForm__card {
+	width: 100%;
+	max-width: 580px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.registrationForm__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.registrationForm__formContainer {
+	flex-direction: column;
+}
+
+.registrationForm__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.registrationForm__subtitle {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 28px;
+	white-space: normal;
+}
+
+.registrationForm__nameField,
+.registrationForm__emailField,
+.registrationForm__passwordField {
+	margin-bottom: 16px;
+}
+
+.registrationForm__formContainer .pillInputField__label {
+	font-size: 12px;
+	color: rgba(173, 183, 210, 0.85);
+	-unity-text-align: upper-left;
+	margin-left: 4px;
+	margin-bottom: 6px;
+}
+
+.registrationForm__formContainer .pillInputField__input {
+	height: 52px;
+	justify-content: center;
+	background-color: rgba(255, 255, 255, 0.04);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.14);
+	border-radius: 14px;
+}
+
+.registrationForm__formContainer .pillInputField__input .unity-base-text-field__input,
+.registrationForm__formContainer .pillInputField__input .unity-text-field__input {
+	flex-grow: 1;
+	background-color: rgba(0, 0, 0, 0);
+	border-width: 0;
+	margin: 0;
+	padding-left: 16px;
+	padding-right: 16px;
+	-unity-text-align: middle-left;
+}
+
+.registrationForm__formContainer .pillInputField__input .unity-text-field__placeholder,
+.registrationForm__formContainer .pillInputField__input .unity-base-text-field__placeholder {
+	color: rgba(190, 200, 225, 0.9);
+	-unity-text-align: middle-left;
+}
+
+.registrationForm__field--error .pillInputField__input {
+	background-color: rgba(120, 36, 56, 0.45);
+	border-color: rgba(232, 69, 96, 0.85);
+}
+
+.registrationForm__sectionLabel {
+	font-size: 12px;
+	color: rgba(173, 183, 210, 0.85);
+	margin-bottom: 6px;
+}
+
+.registrationForm__bioField {
+	height: 96px;
+	margin-bottom: 16px;
+	background-color: rgba(255, 255, 255, 0.04);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.14);
+	border-radius: 14px;
+	overflow: hidden;
+}
+
+.registrationForm__bioField .roundedInputField__textField,
+.registrationForm__bioField .roundedInputField__input,
+.registrationForm__bioField .unity-base-text-field__input {
+	background-color: rgba(0, 0, 0, 0);
+	border-width: 0;
+}
+
+.registrationForm__bioField .roundedInputField__input,
+.registrationForm__bioField .unity-base-text-field__input {
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	-unity-text-align: upper-left;
+}
+
+.registrationForm__bioField .roundedInputField__placeholder {
+	color: rgba(190, 200, 225, 0.9);
+	padding-left: 16px;
+	padding-top: 12px;
+	-unity-text-align: upper-left;
+}
+
+.registrationForm__categorySelector {
+	margin-bottom: 32px;
+}
+
+.registrationForm__categorySelector .pillSelector__label {
+	font-size: 12px;
+	color: rgba(173, 183, 210, 0.85);
+	-unity-text-align: upper-left;
+	margin-left: 4px;
+	margin-bottom: 6px;
+}
+
+.registrationForm__categorySelector .pillSelector__container {
+	height: 52px;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.04);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.14);
+	border-radius: 14px;
+	padding-left: 16px;
+	padding-right: 14px;
+}
+
+.registrationForm__categorySelector .pillSelector__clickableLabel {
+	font-size: 15px;
+	color: rgba(255, 255, 255, 1);
+	-unity-text-align: middle-left;
+}
+
+.registrationForm__submitButton {
+	height: 52px;
+	margin-bottom: 16px;
+}
+
+.registrationForm__successContainer {
+	display: none;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-top: 20px;
+	padding-bottom: 8px;
+	padding-left: 16px;
+	padding-right: 16px;
+}
+
+.registrationForm__successIcon {
+	width: 72px;
+	height: 72px;
+	border-top-left-radius: 36px;
+	border-top-right-radius: 36px;
+	border-bottom-left-radius: 36px;
+	border-bottom-right-radius: 36px;
+	background-color: rgba(46, 204, 112, 1);
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 24px;
+}
+
+.registrationForm__successCheck {
+	font-size: 36px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+}
+
+.registrationForm__successTitle {
+	font-size: 26px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+	-unity-text-align: middle-center;
+}
+
+.registrationForm__successMessage {
+	font-size: 15px;
+	color: rgba(173, 183, 210, 0.85);
+	-unity-text-align: middle-center;
+	white-space: normal;
+}
diff --git a/RegistrationForm/RegistrationFormStyles.uss.meta b/RegistrationForm/RegistrationFormStyles.uss.meta
new file mode 100644
index 0000000..ab5d1b6
--- /dev/null
+++ b/RegistrationForm/RegistrationFormStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: ec5bcb433d114509a1d4a2b11a82ff7b
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/RegistrationForm/RegistrationFormUxmlBinder.cs b/RegistrationForm/RegistrationFormUxmlBinder.cs
new file mode 100644
index 0000000..b8c2d48
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlBinder.cs
@@ -0,0 +1,179 @@
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class RegistrationFormUxmlBinder : MonoBehaviour
+    {
+        private static readonly string[] CategoryOptions =
+        {
+            "Fitness",
+            "Nutrition",
+            "Wellness",
+            "Mindfulness",
+        };
+
+        private int currentCategoryIndex;
+
+        private UIDocument uiDocument;
+        private PillInputField nameField;
+        private PillInputField emailField;
+        private PillInputField passwordField;
+        private RoundedInputField bioField;
+        private PillSelector categorySelector;
+        private PillButton submitButton;
+        private VisualElement formContainer;
+        private VisualElement successContainer;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("RegistrationFormUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            nameField = root.Q<PillInputField>("name-field");
+            emailField = root.Q<PillInputField>("email-field");
+            passwordField = root.Q<PillInputField>("password-field");
+            bioField = root.Q<RoundedInputField>("bio-field");
+            categorySelector = root.Q<PillSelector>("category-selector");
+            submitButton = root.Q<PillButton>("submit-button");
+            formContainer = root.Q<VisualElement>("form-container");
+            successContainer = root.Q<VisualElement>("success-container");
+
+            if (nameField == null || emailField == null || passwordField == null || submitButton == null)
+            {
+                Debug.LogWarning("RegistrationFormUxmlBinder: one or more named elements were not found in the UXML.", this);
+                return;
+            }
+
+            ApplyPillInputStyle(nameField);
+            ApplyPillInputStyle(emailField);
+            ApplyPillInputStyle(passwordField);
+
+            if (bioField != null)
+            {
+                bioField.SetTextColor(Color.white);
+                bioField.SetFontSize(14f);
+            }
+
+            if (categorySelector != null)
+            {
+                categorySelector.Clicked += OnCategorySelectorClicked;
+            }
+
+            submitButton.SetTextColor(Color.white);
+            submitButton.SetFontSize(16f);
+            submitButton.Clicked += OnSubmitClicked;
+        }
+
+        private static void ApplyPillInputStyle(PillInputField field)
+        {
+            field.SetTextColor(Color.white);
+            field.SetFontSize(15f);
+        }
+
+        private void OnCategorySelectorClicked()
+        {
+            currentCategoryIndex = (currentCategoryIndex + 1) % CategoryOptions.Length;
+            categorySelector.Value = CategoryOptions[currentCategoryIndex];
+        }
+
+        private void OnSubmitClicked()
+        {
+            if (!ValidateForm())
+            {
+                return;
+            }
+
+            StartCoroutine(ShowSuccessTransition());
+        }
+
+        private bool ValidateForm()
+        {
+            var isValid = true;
+
+            if (string.IsNullOrWhiteSpace(nameField.Value))
+            {
+                VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                nameField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                nameField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            if (!emailField.Value.Contains("@"))
+            {
+                VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                emailField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                emailField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            if (passwordField.Value.Length < 6)
+            {
+                VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                passwordField.EnableInClassList("registrationForm__field--error", true);
+                isValid = false;
+            }
+            else
+            {
+                passwordField.EnableInClassList("registrationForm__field--error", false);
+            }
+
+            return isValid;
+        }
+
+        private IEnumerator ShowSuccessTransition()
+        {
+            if (formContainer != null)
+            {
+                formContainer.style.transitionProperty = new StyleList<StylePropertyName>(
+                    new List<StylePropertyName> { new("opacity") });
+                formContainer.style.transitionDuration = new StyleList<TimeValue>(
+                    new List<TimeValue> { new(400, TimeUnit.Millisecond) });
+                formContainer.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                    new List<EasingFunction> { new(EasingMode.EaseInOut) });
+                formContainer.style.opacity = 0f;
+            }
+
+            yield return new WaitForSeconds(0.45f);
+
+            if (formContainer != null)
+            {
+                formContainer.style.display = DisplayStyle.None;
+            }
+
+            if (successContainer == null)
+            {
+                yield break;
+            }
+
+            successContainer.style.display = DisplayStyle.Flex;
+            successContainer.style.opacity = 0f;
+            successContainer.style.transitionProperty = new StyleList<StylePropertyName>(
+                new List<StylePropertyName> { new("opacity") });
+            successContainer.style.transitionDuration = new StyleList<TimeValue>(
+                new List<TimeValue> { new(500, TimeUnit.Millisecond) });
+            successContainer.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new List<EasingFunction> { new(EasingMode.EaseOut) });
+
+            yield return null;
+
+            successContainer.style.opacity = 1f;
+        }
+    }
+}
\ No newline at end of file
diff --git a/RegistrationForm/RegistrationFormUxmlBinder.cs.meta b/RegistrationForm/RegistrationFormUxmlBinder.cs.meta
new file mode 100644
index 0000000..5f7aeb1
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: b5250e60052e4e8680b5150708a0eb49
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/RegistrationForm/RegistrationFormUxmlDemo.unity b/RegistrationForm/RegistrationFormUxmlDemo.unity
new file mode 100644
index 0000000..a53433b
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 1
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Registration Form (UXML)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: 4cc527e4c717494c8c7c10372c93eacd, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: b5250e60052e4e8680b5150708a0eb49, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/RegistrationForm/RegistrationFormUxmlDemo.unity.meta b/RegistrationForm/RegistrationFormUxmlDemo.unity.meta
new file mode 100644
index 0000000..2dcbf56
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 84097ae9e7b344ce97ff0fc7317fe6bb
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/RegistrationForm/RegistrationFormUxmlView.uxml b/RegistrationForm/RegistrationFormUxmlView.uxml
new file mode 100644
index 0000000..d5b362e
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlView.uxml
@@ -0,0 +1,33 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="RegistrationFormStyles.uss" />
+
+    <ui:VisualElement name="screen" class="registrationForm__screen">
+        <ui:VisualElement name="card" class="registrationForm__card">
+            <ui:Label text="Toolkit Sample" class="registrationForm__eyebrow" />
+            <ui:Label text="Registration Form" class="registrationForm__title" />
+            <ui:Label text="Complete the sample form below to review the shared example card style in a more complex layout." class="registrationForm__subtitle" />
+
+            <ui:VisualElement name="form-container" class="registrationForm__formContainer">
+                <ext:PillInputField name="name-field" class="registrationForm__nameField" label="Full Name" placeholder="Your full name" />
+                <ext:PillInputField name="email-field" class="registrationForm__emailField" label="Email Address" placeholder="you@example.com" keyboard-type="EmailAddress" />
+                <ext:PillInputField name="password-field" class="registrationForm__passwordField" label="Password" placeholder="Min. 6 characters" password-mode="true" max-length="64" />
+
+                <ui:Label text="Bio (optional)" class="registrationForm__sectionLabel" />
+                <ext:RoundedInputField name="bio-field" class="registrationForm__bioField" placeholder="Tell us a little about yourself…" multiline="true" max-length="280" />
+
+                <ext:PillSelector name="category-selector" class="registrationForm__categorySelector" label="Category" value="Fitness" />
+
+                <ext:PillButton name="submit-button" class="registrationForm__submitButton" text="Create Account" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+
+            <ui:VisualElement name="success-container" class="registrationForm__successContainer">
+                <ui:VisualElement class="registrationForm__successIcon">
+                    <ui:Label text="&#10003;" class="registrationForm__successCheck" />
+                </ui:VisualElement>
+                <ui:Label text="Account Created!" class="registrationForm__successTitle" />
+                <ui:Label text="Welcome aboard! Your account has been successfully created. You can now explore all features." class="registrationForm__successMessage" />
+            </ui:VisualElement>
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/RegistrationForm/RegistrationFormUxmlView.uxml.meta b/RegistrationForm/RegistrationFormUxmlView.uxml.meta
new file mode 100644
index 0000000..5cde8f1
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 4cc527e4c717494c8c7c10372c93eacd
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ScreenHeader.meta b/ScreenHeader.meta
new file mode 100644
index 0000000..272860f
--- /dev/null
+++ b/ScreenHeader.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 0662659a3feb4442ad872cf105ec6b4d
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScreenHeader/ScreenHeaderDemo.cs b/ScreenHeader/ScreenHeaderDemo.cs
new file mode 100644
index 0000000..957605b
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderDemo.cs
@@ -0,0 +1,88 @@
+// Examples~/ScreenHeader/ScreenHeaderDemo.cs
+// Demonstrates: ScreenHeader
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the
+//   same GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - A full-width header bar sits at the top: a back button (left edge), a centered
+//        title, and a sound on/off toggle (right edge). An info button sits beside it.
+//      - Tap the back or info button to log the action to the status line below.
+//      - Tap the sound toggle to flip between the volume-on / volume-off icons; the
+//        status line reports the muted state.
+//
+// The header icons are supplied entirely through USS (ScreenHeaderStyles.uss) using the
+// package's SVG icon assets, so the demo assigns no Texture2D references in code. The
+// toggle glyph swaps automatically via the control's "toggleButton--selected" state class.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Screen header demo using <see cref="ScreenHeader"/>.
+    ///
+    /// The control owns no application state: it raises <see cref="ScreenHeader.Action1Clicked"/>
+    /// (back), <see cref="ScreenHeader.Action3Clicked"/> (info) and
+    /// <see cref="ScreenHeader.Action4Toggled"/> (sound on/off), which the demo turns into
+    /// status-line updates. The host stays responsible for any behaviour behind those events.
+    /// </summary>
+    public class ScreenHeaderDemo : MonoBehaviour
+    {
+        private ScreenHeader header;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ScreenHeaderDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "screenHeaderDemo__screen");
+
+            header = UIToolkitExtensions.CreateVisualElement<ScreenHeader>(screen, "screenHeaderDemo__header");
+            header.Title = "header";
+            header.Configure(showAction1: true, showTitle: true, showAction2: false,
+                showAction3: true, showAction4Toggle: true);
+
+            header.Action1Clicked += () => SetStatus("Back tapped — a real app would pop this screen.");
+            header.Action3Clicked += () => SetStatus("Info tapped — show help or an about panel here.");
+            header.Action4Toggled += isMuted => SetStatus(isMuted ? "Sound muted." : "Sound on.");
+
+            VisualElement body = UIToolkitExtensions.CreateVisualElement(screen, "screenHeaderDemo__body");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(body, "screenHeaderDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "screenHeaderDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "screenHeaderDemo__title");
+            title.text = "Screen Header";
+
+            Label instruction = UIToolkitExtensions.CreateVisualElement<Label>(card, "screenHeaderDemo__instruction");
+            instruction.text = "A configurable top bar with edge action buttons. Tap the back or info buttons, " +
+                "or flip the sound toggle, to see the header report each interaction below.";
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "screenHeaderDemo__status");
+            statusLabel.text = "Interact with the header above.";
+        }
+
+        private void SetStatus(string message)
+        {
+            if (statusLabel != null)
+            {
+                statusLabel.text = message;
+            }
+        }
+    }
+}
diff --git a/ScreenHeader/ScreenHeaderDemo.cs.meta b/ScreenHeader/ScreenHeaderDemo.cs.meta
new file mode 100644
index 0000000..6990e0f
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderDemo.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: d8cbc9fb0cea4be5b2bc63a3fd49caaa
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScreenHeader/ScreenHeaderDemo.unity b/ScreenHeader/ScreenHeaderDemo.unity
new file mode 100644
index 0000000..70aa3ac
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Screen Header Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: d8cbc9fb0cea4be5b2bc63a3fd49caaa, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ScreenHeader/ScreenHeaderDemo.unity.meta b/ScreenHeader/ScreenHeaderDemo.unity.meta
new file mode 100644
index 0000000..f3cc177
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 30274097c609485182491587f2e337ce
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScreenHeader/ScreenHeaderStyles.uss b/ScreenHeader/ScreenHeaderStyles.uss
new file mode 100644
index 0000000..9761621
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderStyles.uss
@@ -0,0 +1,101 @@
+.screenHeaderDemo__screen {
+	flex-grow: 1;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+/* Header bar surface */
+.screenHeaderDemo__header {
+	background-color: rgba(20, 28, 44, 0.94);
+	border-bottom-width: 1px;
+	border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.screenHeaderDemo__header .screenHeader__title {
+	color: rgba(255, 255, 255, 1);
+}
+
+/* Back button (action 1) — left edge, ChevronLeft glyph */
+.screenHeaderDemo__header .screenHeader__action1Button .toggleButton__image {
+	background-image: url("project://database/Packages/com.unity.uitoolkitextensions/Runtime/Assets/Icons/ChevronLeft.svg");
+	-unity-background-image-tint-color: rgba(236, 240, 252, 1);
+}
+
+/* Info button (action 3) — right edge, sits to the left of the sound toggle */
+.screenHeaderDemo__header .screenHeader__action3Button.toggleButton {
+	right: 92px;
+}
+
+.screenHeaderDemo__header .screenHeader__action3Button .toggleButton__image {
+	background-image: url("project://database/Packages/com.unity.uitoolkitextensions/Runtime/Assets/Icons/Information-icon.svg");
+	-unity-background-image-tint-color: rgba(236, 240, 252, 1);
+}
+
+/* Sound toggle (action 4) — override the control's default left placement to the right edge */
+.screenHeaderDemo__header .screenHeader__action4Toggle.toggleButton {
+	left: auto;
+	right: 16px;
+}
+
+/* Unselected = sound on */
+.screenHeaderDemo__header .screenHeader__action4Toggle .toggleButton__image {
+	background-image: url("project://database/Packages/com.unity.uitoolkitextensions/Runtime/Assets/Icons/Volume-on.svg");
+	-unity-background-image-tint-color: rgba(124, 230, 200, 1);
+}
+
+/* Selected = muted */
+.screenHeaderDemo__header .screenHeader__action4Toggle.toggleButton--selected .toggleButton__image {
+	background-image: url("project://database/Packages/com.unity.uitoolkitextensions/Runtime/Assets/Icons/Volume-off.svg");
+	-unity-background-image-tint-color: rgba(255, 138, 138, 1);
+}
+
+/* Body */
+.screenHeaderDemo__body {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 40px;
+}
+
+.screenHeaderDemo__card {
+	width: 100%;
+	max-width: 580px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 28px;
+	padding-bottom: 28px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.screenHeaderDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.screenHeaderDemo__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.screenHeaderDemo__instruction {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 22px;
+	white-space: normal;
+}
+
+.screenHeaderDemo__status {
+	font-size: 14px;
+	color: rgba(124, 230, 200, 1);
+	-unity-font-style: bold;
+	white-space: normal;
+}
diff --git a/ScreenHeader/ScreenHeaderStyles.uss.meta b/ScreenHeader/ScreenHeaderStyles.uss.meta
new file mode 100644
index 0000000..b19065a
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: bd2c8d23844f4dcd84a39fc4598b01cf
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ScreenHeader/ScreenHeaderUxmlBinder.cs b/ScreenHeader/ScreenHeaderUxmlBinder.cs
new file mode 100644
index 0000000..137055d
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlBinder.cs
@@ -0,0 +1,37 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class ScreenHeaderUxmlBinder : MonoBehaviour
+    {
+        private Label statusLabel;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ScreenHeaderUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            statusLabel = root.Q<Label>("status-label");
+
+            ScreenHeader header = root.Q<ScreenHeader>("screen-header");
+            header.Action1Clicked += () => SetStatus("Back tapped — a real app would pop this screen.");
+            header.Action3Clicked += () => SetStatus("Info tapped — show help or an about panel here.");
+            header.Action4Toggled += isMuted => SetStatus(isMuted ? "Sound muted." : "Sound on.");
+        }
+
+        private void SetStatus(string message)
+        {
+            if (statusLabel != null)
+            {
+                statusLabel.text = message;
+            }
+        }
+    }
+}
diff --git a/ScreenHeader/ScreenHeaderUxmlBinder.cs.meta b/ScreenHeader/ScreenHeaderUxmlBinder.cs.meta
new file mode 100644
index 0000000..5929232
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: e1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScreenHeader/ScreenHeaderUxmlDemo.unity b/ScreenHeader/ScreenHeaderUxmlDemo.unity
new file mode 100644
index 0000000..d2cd7f0
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlDemo.unity
@@ -0,0 +1,106 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: Screen Header (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: e1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: e1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ScreenHeader/ScreenHeaderUxmlDemo.unity.meta b/ScreenHeader/ScreenHeaderUxmlDemo.unity.meta
new file mode 100644
index 0000000..a22b490
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: e1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScreenHeader/ScreenHeaderUxmlView.uxml b/ScreenHeader/ScreenHeaderUxmlView.uxml
new file mode 100644
index 0000000..2b35b07
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlView.uxml
@@ -0,0 +1,18 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ScreenHeaderStyles.uss" />
+
+    <ui:VisualElement class="screenHeaderDemo__screen">
+        <ext:ScreenHeader name="screen-header" class="screenHeaderDemo__header" title="header"
+            show-action1="true" show-action2="false" show-action3="true" show-action4-toggle="true" />
+
+        <ui:VisualElement class="screenHeaderDemo__body">
+            <ui:VisualElement class="screenHeaderDemo__card">
+                <ui:Label text="Toolkit Sample" class="screenHeaderDemo__eyebrow" />
+                <ui:Label text="Screen Header" class="screenHeaderDemo__title" />
+                <ui:Label text="A configurable top bar with edge action buttons. Tap the back or info buttons, or flip the sound toggle, to see the header report each interaction below." class="screenHeaderDemo__instruction" />
+                <ui:Label name="status-label" text="Interact with the header above." class="screenHeaderDemo__status" />
+            </ui:VisualElement>
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ScreenHeader/ScreenHeaderUxmlView.uxml.meta b/ScreenHeader/ScreenHeaderUxmlView.uxml.meta
new file mode 100644
index 0000000..f563b22
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: e1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ScrollSnapAndDots.meta b/ScrollSnapAndDots.meta
new file mode 100644
index 0000000..3271ab9
--- /dev/null
+++ b/ScrollSnapAndDots.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 88b4d6fef07c9ef47960a39a5cb6d7d9
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
new file mode 100644
index 0000000..9aff86e
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
@@ -0,0 +1,199 @@
+// Examples~/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
+// Demonstrates: ScrollSnap, PageDotIndicator, ComingSoonMessage
+//
+// Scene setup:
+//   1. A scene is provided for this example.
+//   2. This component lives on a GameObject alongside a UIDocument; the demo
+//      retrieves it via GetComponent<UIDocument>() on the same GameObject.
+//   3. The Panel Settings are already configured in the provided scene
+//      (Scale With Screen Size, 1080x1920).
+//   4. Press Play — five swipeable pages appear with a dot indicator and prev/next buttons.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Full demo of the <see cref="ScrollSnap"/> paging control paired with
+    /// <see cref="PageDotIndicator"/> and <see cref="ComingSoonMessage"/>.
+    ///
+    /// What you will see:
+    /// - A header label at the top.
+    /// - Five horizontally swipeable pages (solid background colors + centered labels).
+    /// - Page 4 (index 3) is replaced by a <see cref="ComingSoonMessage"/> widget.
+    /// - A row at the bottom containing a "back" arrow, the dot indicator, and a "next" arrow.
+    /// - The dot indicator updates in real time as pages change.
+    /// </summary>
+    public class ScrollSnapAndDotsDemo : MonoBehaviour
+    {
+        /// <summary>
+        /// Per-page background modifier classes (colors defined in the USS).
+        /// </summary>
+        private static readonly string[] PageModifiers =
+        {
+            "scrollSnapDemo__page--one",
+            "scrollSnapDemo__page--two",
+            "scrollSnapDemo__page--three",
+            "scrollSnapDemo__page--four",
+            "scrollSnapDemo__page--five",
+        };
+
+        /// <summary>
+        /// Labels shown on pages that are NOT the coming-soon page.
+        /// </summary>
+        private static readonly string[] PageLabels =
+        {
+            "Welcome",
+            "Explore",
+            "Discover",
+            "Coming Soon",
+            "Get Started",
+        };
+
+        /// <summary>
+        /// Index of the page that should show a <see cref="ComingSoonMessage"/>.
+        /// </summary>
+        private const int ComingSoonPageIndex = 3;
+
+        private UIDocument uiDocument;
+        private ScrollSnap scrollSnap;
+        private PageDotIndicator dotIndicator;
+        private PillButton prevButton;
+        private PillButton nextButton;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ScrollSnapAndDotsDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "scrollSnapDemo__screen");
+
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "scrollSnapDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "scrollSnapDemo__title");
+            titleLabel.text = "Scroll Snap And Dots";
+
+            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "scrollSnapDemo__subtitle");
+            subtitleLabel.text = "Swipe through the sample pages below or use the controls to move through the demo content.";
+
+            VisualElement carouselSurface = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__carouselSurface");
+
+            scrollSnap = new ScrollSnap();
+            scrollSnap.AddToClassList("scrollSnapDemo__scrollSnap");
+            scrollSnap.ManualMovementEnabled = true;
+            carouselSurface.Add(scrollSnap);
+
+            for (var i = 0; i < PageModifiers.Length; i++)
+            {
+                var page = BuildPage(i);
+                scrollSnap.Add(page);
+            }
+
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__bottomBar");
+
+            prevButton = new PillButton();
+            prevButton.AddToClassList("scrollSnapDemo__navButton");
+            prevButton.Text = "←";
+            prevButton.SetInnerColor("#465062");
+            prevButton.SetOuterColor("#5C667A");
+            prevButton.Clicked += OnPreviousClicked;
+            bottomBar.Add(prevButton);
+
+            dotIndicator = new PageDotIndicator();
+            dotIndicator.AddToClassList("scrollSnapDemo__dotIndicator");
+            dotIndicator.SetColors("#FFFFFF", "#44506A");
+            dotIndicator.SetProgress(0, PageModifiers.Length);
+            bottomBar.Add(dotIndicator);
+
+            nextButton = new PillButton();
+            nextButton.AddToClassList("scrollSnapDemo__navButton");
+            nextButton.Text = "→";
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
+            nextButton.Clicked += OnNextClicked;
+            bottomBar.Add(nextButton);
+
+            scrollSnap.PageChanged += OnPageChanged;
+
+            UpdateNavButtons();
+        }
+
+        private VisualElement BuildPage(int index)
+        {
+            var page = new VisualElement();
+            page.AddToClassList("scrollSnapDemo__page");
+            page.AddToClassList(PageModifiers[index]);
+
+            if (index == ComingSoonPageIndex)
+            {
+                var comingSoon = new ComingSoonMessage();
+                comingSoon.AddToClassList("scrollSnapDemo__comingSoon");
+                comingSoon.Title = "Coming Soon";
+                comingSoon.SetMessage("More controls are on their way! Stay tuned for the next update.");
+                page.Add(comingSoon);
+            }
+            else
+            {
+                VisualElement badge = UIToolkitExtensions.CreateVisualElement(page, "scrollSnapDemo__badge");
+
+                Label badgeLabel = UIToolkitExtensions.CreateVisualElement<Label>(badge, "scrollSnapDemo__badgeLabel");
+                badgeLabel.text = (index + 1).ToString();
+
+                Label pageLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageLabel");
+                pageLabel.text = PageLabels[index];
+
+                Label subLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageSubLabel");
+                subLabel.text = $"Page {index + 1} of {PageModifiers.Length}";
+            }
+
+            return page;
+        }
+
+        private void OnPageChanged(int newIndex)
+        {
+            dotIndicator.SetProgress(newIndex, PageModifiers.Length);
+            UpdateNavButtons();
+        }
+
+        private void OnPreviousClicked()
+        {
+            scrollSnap.MovePrevious();
+        }
+
+        private void OnNextClicked()
+        {
+            scrollSnap.MoveNext();
+        }
+
+        /// <summary>
+        /// Dim the prev/next arrow to hint at boundary conditions.
+        /// </summary>
+        private void UpdateNavButtons()
+        {
+            bool atStart = scrollSnap.CurrentPageIndex <= 0;
+            bool atEnd = scrollSnap.CurrentPageIndex >= scrollSnap.PageCount - 1;
+
+            prevButton.SetInnerColor(atStart ? "#333344" : "#555566");
+            prevButton.SetOuterColor(atStart ? "#444455" : "#777788");
+
+            nextButton.SetInnerColor(atEnd ? "#2A5090" : "#4A90E2");
+            nextButton.SetOuterColor(atEnd ? "#4A449A" : "#7B68EE");
+        }
+    }
+}
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs.meta b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs.meta
new file mode 100644
index 0000000..ddd847d
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 2acfaf5c72831704d8a1692a9e209842
\ No newline at end of file
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity
new file mode 100644
index 0000000..4a777ae
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Scroll Snap And Dots Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 2acfaf5c72831704d8a1692a9e209842, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity.meta b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity.meta
new file mode 100644
index 0000000..ed6e458
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 1c4089c816754f49add6b1d0cfc9a1a2
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
new file mode 100644
index 0000000..5f54358
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
@@ -0,0 +1,137 @@
+.scrollSnapDemo__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.scrollSnapDemo__card {
+	width: 100%;
+	max-width: 620px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.scrollSnapDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.scrollSnapDemo__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.scrollSnapDemo__subtitle {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 24px;
+	white-space: normal;
+}
+
+.scrollSnapDemo__carouselSurface {
+	height: 420px;
+	margin-bottom: 18px;
+	overflow: hidden;
+	background-color: rgba(255, 255, 255, 0.045);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-radius: 24px;
+}
+
+.scrollSnapDemo__scrollSnap {
+	flex-grow: 1;
+}
+
+.scrollSnapDemo__page {
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-left: 14px;
+	margin-right: 14px;
+	margin-top: 14px;
+	margin-bottom: 14px;
+	border-radius: 22px;
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+}
+
+.scrollSnapDemo__page--one { background-color: rgba(87, 128, 188, 0.42); }
+.scrollSnapDemo__page--two { background-color: rgba(68, 160, 189, 0.38); }
+.scrollSnapDemo__page--three { background-color: rgba(92, 141, 114, 0.42); }
+.scrollSnapDemo__page--four { background-color: rgba(101, 89, 166, 0.42); }
+.scrollSnapDemo__page--five { background-color: rgba(187, 134, 69, 0.42); }
+
+.scrollSnapDemo__comingSoon {
+	flex-grow: 1;
+	align-self: stretch;
+}
+
+.scrollSnapDemo__badge {
+	width: 48px;
+	height: 48px;
+	border-top-left-radius: 24px;
+	border-top-right-radius: 24px;
+	border-bottom-left-radius: 24px;
+	border-bottom-right-radius: 24px;
+	background-color: rgba(0, 0, 0, 0.25);
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 16px;
+}
+
+.scrollSnapDemo__badgeLabel {
+	font-size: 20px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+}
+
+.scrollSnapDemo__pageLabel {
+	font-size: 32px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	-unity-text-align: middle-center;
+}
+
+.scrollSnapDemo__pageSubLabel {
+	font-size: 15px;
+	color: rgba(255, 255, 255, 0.75);
+	margin-top: 8px;
+	-unity-text-align: middle-center;
+}
+
+.scrollSnapDemo__bottomBar {
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 4px;
+}
+
+.scrollSnapDemo__navButton {
+	width: 56px;
+	height: 46px;
+}
+
+.scrollSnapDemo__dotIndicator {
+	flex-grow: 1;
+	margin-left: 8px;
+	margin-right: 8px;
+	height: 12px;
+	align-items: center;
+}
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss.meta b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss.meta
new file mode 100644
index 0000000..0485107
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 8ab8ed0858824d34bcc7a1e899265df0
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs
new file mode 100644
index 0000000..416fbcf
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs
@@ -0,0 +1,68 @@
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class ScrollSnapAndDotsUxmlBinder : MonoBehaviour
+    {
+        private ScrollSnap scrollSnap;
+        private PageDotIndicator dotIndicator;
+        private PillButton prevButton;
+        private PillButton nextButton;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ScrollSnapAndDotsUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            scrollSnap = root.Q<ScrollSnap>("scroll-snap");
+            dotIndicator = root.Q<PageDotIndicator>("dot-indicator");
+            prevButton = root.Q<PillButton>("prev-button");
+            nextButton = root.Q<PillButton>("next-button");
+
+            scrollSnap.PageChanged += OnPageChanged;
+            prevButton.SetTextColor(Color.white);
+            nextButton.SetTextColor(Color.white);
+            prevButton.Clicked += OnPreviousClicked;
+            nextButton.Clicked += OnNextClicked;
+
+            dotIndicator.SetProgress(0, scrollSnap.PageCount);
+            UpdateNavButtons();
+        }
+
+        private void OnPageChanged(int newIndex)
+        {
+            dotIndicator.SetProgress(newIndex, scrollSnap.PageCount);
+            UpdateNavButtons();
+        }
+
+        private void OnPreviousClicked()
+        {
+            scrollSnap.MovePrevious();
+        }
+
+        private void OnNextClicked()
+        {
+            scrollSnap.MoveNext();
+        }
+
+        private void UpdateNavButtons()
+        {
+            bool atStart = scrollSnap.CurrentPageIndex <= 0;
+            bool atEnd = scrollSnap.CurrentPageIndex >= scrollSnap.PageCount - 1;
+
+            prevButton.SetInnerColor(atStart ? "#374152" : "#465062");
+            prevButton.SetOuterColor(atStart ? "#465062" : "#5C667A");
+            nextButton.SetInnerColor(atEnd ? "#305E9A" : "#4A90E2");
+            nextButton.SetOuterColor(atEnd ? "#5B57B2" : "#7B68EE");
+        }
+    }
+}
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs.meta b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs.meta
new file mode 100644
index 0000000..4b326db
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: c1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity
new file mode 100644
index 0000000..9b13e20
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity
@@ -0,0 +1,106 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: ScrollSnap And Dots (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: c1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: c1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity.meta b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity.meta
new file mode 100644
index 0000000..7d0f5ba
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: c1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml
new file mode 100644
index 0000000..023bf8d
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml
@@ -0,0 +1,46 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ScrollSnapAndDotsStyles.uss" />
+
+    <ui:VisualElement class="scrollSnapDemo__screen">
+        <ui:VisualElement class="scrollSnapDemo__card">
+            <ui:Label text="Toolkit Sample" class="scrollSnapDemo__eyebrow" />
+            <ui:Label text="Scroll Snap And Dots" class="scrollSnapDemo__title" />
+            <ui:Label text="Swipe through the sample pages below or use the controls to move through the demo content." class="scrollSnapDemo__subtitle" />
+
+            <ui:VisualElement class="scrollSnapDemo__carouselSurface">
+                <ext:ScrollSnap name="scroll-snap" class="scrollSnapDemo__scrollSnap" manual-movement-enabled="true">
+                    <ui:VisualElement class="scrollSnapDemo__page scrollSnapDemo__page--one">
+                        <ui:VisualElement class="scrollSnapDemo__badge"><ui:Label text="1" class="scrollSnapDemo__badgeLabel" /></ui:VisualElement>
+                        <ui:Label text="Welcome" class="scrollSnapDemo__pageLabel" />
+                        <ui:Label text="Page 1 of 5" class="scrollSnapDemo__pageSubLabel" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="scrollSnapDemo__page scrollSnapDemo__page--two">
+                        <ui:VisualElement class="scrollSnapDemo__badge"><ui:Label text="2" class="scrollSnapDemo__badgeLabel" /></ui:VisualElement>
+                        <ui:Label text="Explore" class="scrollSnapDemo__pageLabel" />
+                        <ui:Label text="Page 2 of 5" class="scrollSnapDemo__pageSubLabel" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="scrollSnapDemo__page scrollSnapDemo__page--three">
+                        <ui:VisualElement class="scrollSnapDemo__badge"><ui:Label text="3" class="scrollSnapDemo__badgeLabel" /></ui:VisualElement>
+                        <ui:Label text="Discover" class="scrollSnapDemo__pageLabel" />
+                        <ui:Label text="Page 3 of 5" class="scrollSnapDemo__pageSubLabel" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="scrollSnapDemo__page scrollSnapDemo__page--four">
+                        <ext:ComingSoonMessage class="scrollSnapDemo__comingSoon" title="Coming Soon" message="More controls are on their way! Stay tuned for the next update." />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="scrollSnapDemo__page scrollSnapDemo__page--five">
+                        <ui:VisualElement class="scrollSnapDemo__badge"><ui:Label text="5" class="scrollSnapDemo__badgeLabel" /></ui:VisualElement>
+                        <ui:Label text="Get Started" class="scrollSnapDemo__pageLabel" />
+                        <ui:Label text="Page 5 of 5" class="scrollSnapDemo__pageSubLabel" />
+                    </ui:VisualElement>
+                </ext:ScrollSnap>
+            </ui:VisualElement>
+
+            <ui:VisualElement class="scrollSnapDemo__bottomBar">
+                <ext:PillButton name="prev-button" class="scrollSnapDemo__navButton" text="←" inner-color="#465062" outer-color="#5C667A" />
+                <ext:PageDotIndicator name="dot-indicator" class="scrollSnapDemo__dotIndicator" current-page="0" total-pages="5" completed-color="#FFFFFF" pending-color="#44506A" />
+                <ext:PillButton name="next-button" class="scrollSnapDemo__navButton" text="→" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml.meta b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml.meta
new file mode 100644
index 0000000..b83ce36
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: c1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ScrollSnapSplit.meta b/ScrollSnapSplit.meta
new file mode 100644
index 0000000..94dfbe5
--- /dev/null
+++ b/ScrollSnapSplit.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 63f3297a96b644359a16da91d4316d8d
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
new file mode 100644
index 0000000..152fb93
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
@@ -0,0 +1,128 @@
+// Examples~/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
+// Demonstrates: ScrollSnap — built entirely in C# (the "classic" instantiation path).
+//
+// This is the LEFT half of the ScrollSnapSplitDemo scene. The RIGHT half
+// (ScrollSnapSplitUxmlView) builds the *identical* control from a UXML asset, so the
+// two panels prove that the same ScrollSnap control is usable from both C# and UXML.
+//
+// Scene setup:
+//   1. Add this component to a GameObject alongside a UIDocument.
+//   2. Assign that UIDocument to the 'uiDocument' field.
+//   3. The UIDocument shares the example PanelSettings with the UXML panel; this script
+//      sizes its own root to the LEFT 50% of the screen.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Builds a five-page <see cref="ScrollSnap"/> in pure C#. Each page is a solid colour
+    /// with a centred "Page N" label. A header label reports the current page live via the
+    /// <see cref="ScrollSnap.PageChanged"/> event.
+    /// </summary>
+    public class ScrollSnapSplitCSharpView : MonoBehaviour
+    {
+        [SerializeField] private UIDocument uiDocument;
+
+        private static readonly string[] PageColors =
+        {
+            "#E74C3C",
+            "#3498DB",
+            "#2ECC71",
+            "#9B59B6",
+            "#F39C12",
+        };
+
+        private ScrollSnap scrollSnap;
+        private Label readoutLabel;
+
+        private void Start()
+        {
+            var root = uiDocument.rootVisualElement;
+            root.Clear();
+
+            ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: true);
+
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            var screen = UIToolkitExtensions.CreateVisualElement(root, "screen");
+            screen.style.flexGrow = 1;
+            screen.style.flexDirection = FlexDirection.Column;
+            screen.style.backgroundColor = new Color(0.13f, 0.13f, 0.16f, 1f);
+
+            var header = UIToolkitExtensions.CreateVisualElement(screen, "header");
+            header.style.paddingTop = 28;
+            header.style.paddingBottom = 12;
+            header.style.paddingLeft = 20;
+            header.style.paddingRight = 20;
+            header.style.alignItems = Align.Center;
+
+            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "header__title");
+            titleLabel.text = "Built in C#";
+            titleLabel.style.fontSize = 22;
+            titleLabel.style.color = Color.white;
+            titleLabel.style.unityFontStyleAndWeight = FontStyle.Bold;
+
+            readoutLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "header__readout");
+            readoutLabel.style.fontSize = 13;
+            readoutLabel.style.color = new Color(0.7f, 0.7f, 0.78f, 1f);
+            readoutLabel.style.marginTop = 4;
+
+            scrollSnap = new ScrollSnap();
+            scrollSnap.style.flexGrow = 1;
+            scrollSnap.ManualMovementEnabled = true;
+            screen.Add(scrollSnap);
+
+            for (var i = 0; i < PageColors.Length; i++)
+            {
+                scrollSnap.Add(BuildPage(i, PageColors.Length));
+            }
+
+            var hint = UIToolkitExtensions.CreateVisualElement<Label>(screen, "footer__hint");
+            hint.text = "Swipe ← / →";
+            hint.style.unityTextAlign = TextAnchor.MiddleCenter;
+            hint.style.fontSize = 12;
+            hint.style.color = new Color(0.5f, 0.5f, 0.56f, 1f);
+            hint.style.paddingTop = 8;
+            hint.style.paddingBottom = 20;
+
+            scrollSnap.PageChanged += UpdateReadout;
+            UpdateReadout(scrollSnap.CurrentPageIndex);
+        }
+
+        private static VisualElement BuildPage(int index, int total)
+        {
+            var page = new VisualElement();
+            page.style.justifyContent = Justify.Center;
+            page.style.alignItems = Align.Center;
+
+            ColorUtility.TryParseHtmlString(PageColors[index], out var bg);
+            page.style.backgroundColor = bg;
+
+            var label = UIToolkitExtensions.CreateVisualElement<Label>(page, "page__label");
+            label.text = $"Page {index + 1}";
+            label.style.fontSize = 40;
+            label.style.color = Color.white;
+            label.style.unityFontStyleAndWeight = FontStyle.Bold;
+            label.style.unityTextAlign = TextAnchor.MiddleCenter;
+
+            var subLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "page__sub");
+            subLabel.text = $"{index + 1} of {total}";
+            subLabel.style.fontSize = 14;
+            subLabel.style.color = new Color(1f, 1f, 1f, 0.8f);
+            subLabel.style.marginTop = 6;
+
+            return page;
+        }
+
+        private void UpdateReadout(int pageIndex)
+        {
+            readoutLabel.text = $"Showing page {pageIndex + 1} of {scrollSnap.PageCount}";
+        }
+    }
+}
diff --git a/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs.meta b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs.meta
new file mode 100644
index 0000000..ffc744e
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: f3a0308bab0145a9af81593e327be701
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapSplit/ScrollSnapSplitDemo.unity b/ScrollSnapSplit/ScrollSnapSplitDemo.unity
new file mode 100644
index 0000000..3549651
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitDemo.unity
@@ -0,0 +1,358 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 1
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.02, g: 0.05, b: 0.09, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: ScrollSnap (C# - Left)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: f3a0308bab0145a9af81593e327be701, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+  uiDocument: {fileID: 2001}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &3000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 3003}
+  - component: {fileID: 3001}
+  - component: {fileID: 3002}
+  m_Layer: 0
+  m_Name: ScrollSnap (UXML - Right)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &3001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 3000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: bd2557672717452b8a572577fb257081, type: 3}
+  m_SortingOrder: 1
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &3002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 3000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 344ac630478240bdb05d4a6372f036b8, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+  uiDocument: {fileID: 3001}
+--- !u!4 &3003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 3000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
+  - {fileID: 3003}
diff --git a/ScrollSnapSplit/ScrollSnapSplitDemo.unity.meta b/ScrollSnapSplit/ScrollSnapSplitDemo.unity.meta
new file mode 100644
index 0000000..13b5ae9
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 2543811f2c73407d8323ee9b99b8506c
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapSplit/ScrollSnapSplitLayout.cs b/ScrollSnapSplit/ScrollSnapSplitLayout.cs
new file mode 100644
index 0000000..8ae44c0
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitLayout.cs
@@ -0,0 +1,37 @@
+// Examples~/ScrollSnapSplit/ScrollSnapSplitLayout.cs
+// Small shared helper used by both halves of the ScrollSnapSplitDemo scene.
+
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Helper that pins a UIDocument root to one half of a shared panel.
+    ///
+    /// Both demo panels share a single PanelSettings, so without this each document's
+    /// root would stretch across the whole screen and overlap the other. Sizing each
+    /// root to an exact 50% slot keeps them side-by-side with no overlap (and therefore
+    /// no pointer-event contention between the two panels).
+    /// </summary>
+    internal static class ScrollSnapSplitLayout
+    {
+        public static void OccupyHalf(VisualElement root, bool leftHalf)
+        {
+            root.style.position = Position.Absolute;
+            root.style.top = 0;
+            root.style.bottom = 0;
+            root.style.width = Length.Percent(50);
+
+            if (leftHalf)
+            {
+                root.style.left = 0;
+                root.style.right = StyleKeyword.Auto;
+            }
+            else
+            {
+                root.style.left = Length.Percent(50);
+                root.style.right = StyleKeyword.Auto;
+            }
+        }
+    }
+}
diff --git a/ScrollSnapSplit/ScrollSnapSplitLayout.cs.meta b/ScrollSnapSplit/ScrollSnapSplitLayout.cs.meta
new file mode 100644
index 0000000..1216230
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitLayout.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: e862b2fa2dc64f41822c2d26a02bd3ab
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
new file mode 100644
index 0000000..854e98d
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
@@ -0,0 +1,67 @@
+// Examples~/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
+// Demonstrates: ScrollSnap — authored in UXML, driven from C# (the UI Document path).
+//
+// This is the RIGHT half of the ScrollSnapSplitDemo scene. The layout (the ScrollSnap and
+// its five colour pages) lives entirely in ScrollSnapSplitView.uxml. This script does only
+// what UXML cannot: it positions the document on the right 50% of the screen, then queries
+// the cloned tree to wire the live "current page" readout — the classic
+// "layout in UXML, behaviour in C#" division of labour.
+//
+// Scene setup:
+//   1. Add this component to a GameObject alongside a UIDocument.
+//   2. Set the UIDocument's Source Asset to ScrollSnapSplitView.uxml.
+//   3. Assign that UIDocument to the 'uiDocument' field.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Binds behaviour onto a <see cref="ScrollSnap"/> that was instantiated from UXML,
+    /// proving the same control is fully usable through a UI Document.
+    /// </summary>
+    public class ScrollSnapSplitUxmlView : MonoBehaviour
+    {
+        [SerializeField] private UIDocument uiDocument;
+
+        private ScrollSnap scrollSnap;
+        private Label readoutLabel;
+
+        private void Start()
+        {
+            var root = uiDocument.rootVisualElement;
+
+            ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: false);
+
+            scrollSnap = root.Q<ScrollSnap>();
+            readoutLabel = root.Q<Label>("page-readout");
+
+            if (scrollSnap == null)
+            {
+                Debug.LogWarning($"{nameof(ScrollSnapSplitUxmlView)}: no ScrollSnap found in the UXML source asset.");
+                return;
+            }
+
+            scrollSnap.PageChanged += UpdateReadout;
+            UpdateReadout(scrollSnap.CurrentPageIndex);
+        }
+
+        private void OnDisable()
+        {
+            if (scrollSnap != null)
+            {
+                scrollSnap.PageChanged -= UpdateReadout;
+            }
+        }
+
+        private void UpdateReadout(int pageIndex)
+        {
+            if (readoutLabel != null)
+            {
+                readoutLabel.text = $"Showing page {pageIndex + 1} of {scrollSnap.PageCount}";
+            }
+        }
+    }
+}
diff --git a/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs.meta b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs.meta
new file mode 100644
index 0000000..f54ba49
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 344ac630478240bdb05d4a6372f036b8
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ScrollSnapSplit/ScrollSnapSplitView.uxml b/ScrollSnapSplit/ScrollSnapSplitView.uxml
new file mode 100644
index 0000000..1d08caf
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitView.uxml
@@ -0,0 +1,47 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <!--
+      The RIGHT half of the ScrollSnapSplitDemo.
+
+      The ScrollSnap control is declared with the <ext:ScrollSnap> tag (mapped to the
+      C# namespace UnityUIToolkit.Extensions via the xmlns:ext prefix above). Because
+      ScrollSnap is decorated with [UxmlElement] and exposes [UxmlAttribute] properties,
+      it is fully authorable here — no C# layout code required.
+
+      Each child VisualElement of <ext:ScrollSnap> automatically becomes a page:
+      ScrollSnap class-tags and page-sizes its children at layout time, so we only
+      style their background colour and centre the label.
+    -->
+    <ui:VisualElement name="screen" style="flex-grow: 1; flex-direction: column; background-color: rgb(33, 33, 41);">
+
+        <ui:VisualElement name="header" style="padding-top: 28px; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; align-items: center;">
+            <ui:Label text="Built in UXML" style="font-size: 22px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+            <ui:Label name="page-readout" text="Showing page 1 of 5" style="font-size: 13px; color: rgb(178, 178, 199); margin-top: 4px;" />
+        </ui:VisualElement>
+
+        <ext:ScrollSnap manual-movement-enabled="true" style="flex-grow: 1;">
+            <ui:VisualElement style="background-color: #E74C3C; justify-content: center; align-items: center;">
+                <ui:Label text="Page 1" style="font-size: 40px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+                <ui:Label text="1 of 5" style="font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 6px;" />
+            </ui:VisualElement>
+            <ui:VisualElement style="background-color: #3498DB; justify-content: center; align-items: center;">
+                <ui:Label text="Page 2" style="font-size: 40px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+                <ui:Label text="2 of 5" style="font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 6px;" />
+            </ui:VisualElement>
+            <ui:VisualElement style="background-color: #2ECC71; justify-content: center; align-items: center;">
+                <ui:Label text="Page 3" style="font-size: 40px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+                <ui:Label text="3 of 5" style="font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 6px;" />
+            </ui:VisualElement>
+            <ui:VisualElement style="background-color: #9B59B6; justify-content: center; align-items: center;">
+                <ui:Label text="Page 4" style="font-size: 40px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+                <ui:Label text="4 of 5" style="font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 6px;" />
+            </ui:VisualElement>
+            <ui:VisualElement style="background-color: #F39C12; justify-content: center; align-items: center;">
+                <ui:Label text="Page 5" style="font-size: 40px; color: rgb(255, 255, 255); -unity-font-style: bold;" />
+                <ui:Label text="5 of 5" style="font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 6px;" />
+            </ui:VisualElement>
+        </ext:ScrollSnap>
+
+        <ui:Label text="Swipe &#8592; / &#8594;" style="-unity-text-align: middle-center; font-size: 12px; color: rgb(128, 128, 143); padding-top: 8px; padding-bottom: 20px;" />
+
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ScrollSnapSplit/ScrollSnapSplitView.uxml.meta b/ScrollSnapSplit/ScrollSnapSplitView.uxml.meta
new file mode 100644
index 0000000..b460d34
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: bd2557672717452b8a572577fb257081
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/Shared.meta b/Shared.meta
new file mode 100644
index 0000000..3d7371e
--- /dev/null
+++ b/Shared.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 1f4c1a9c1e7f4ea1b6dc1c8fa5e9b1a2
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Shared/SampleStyles.uss b/Shared/SampleStyles.uss
new file mode 100644
index 0000000..948ac11
--- /dev/null
+++ b/Shared/SampleStyles.uss
@@ -0,0 +1,102 @@
+/* ============================================================
+   SampleStyles.uss
+   Shared styles for all UI Toolkit Extensions sample scenes.
+   Dark-themed demo environment.
+   ============================================================ */
+
+.sample-root {
+    flex-grow: 1;
+    flex-direction: column;
+    background-color: #1a1a2e;
+    padding: 0;
+}
+
+.sample-header {
+    background-color: #16213e;
+    padding: 16px;
+}
+
+.sample-title {
+    font-size: 22px;
+    color: #e94560;
+    -unity-text-align: middle-center;
+    -unity-font-style: bold;
+}
+
+.sample-subtitle {
+    font-size: 13px;
+    color: #a8a8b3;
+    -unity-text-align: middle-center;
+}
+
+.sample-content {
+    flex-grow: 1;
+    flex-direction: column;
+    padding: 16px;
+}
+
+.sample-footer {
+    background-color: #16213e;
+    padding: 12px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sample-label {
+    font-size: 14px;
+    color: #e2e2e2;
+}
+
+.sample-status {
+    font-size: 12px;
+    color: #a8a8b3;
+    -unity-text-align: middle-center;
+    margin-top: 8px;
+}
+
+.sample-page {
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.sample-page--blue {
+    background-color: #0f3460;
+}
+
+.sample-page--teal {
+    background-color: #1a4a4a;
+}
+
+.sample-page--purple {
+    background-color: #2a1a4a;
+}
+
+.sample-page--green {
+    background-color: #1a4a2a;
+}
+
+.sample-page--warm {
+    background-color: #4a2a1a;
+}
+
+.sample-swatch {
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    margin: 8px;
+}
+
+.sample-divider {
+    height: 1px;
+    background-color: #333333;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
+.sample-button-row {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 8px;
+}
diff --git a/Shared/SampleStyles.uss.meta b/Shared/SampleStyles.uss.meta
new file mode 100644
index 0000000..83c4241
--- /dev/null
+++ b/Shared/SampleStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 7989203d0e2d666408fd59ce044da9d0
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/Shared/UIToolkitExtensionsExamplePanelSettings.asset b/Shared/UIToolkitExtensionsExamplePanelSettings.asset
new file mode 100644
index 0000000..c6ced4e
--- /dev/null
+++ b/Shared/UIToolkitExtensionsExamplePanelSettings.asset
@@ -0,0 +1,52 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!114 &11400000
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 0}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19101, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: UIToolkitExtensionsExamplePanelSettings
+  m_EditorClassIdentifier: UnityEngine.dll::UnityEngine.UIElements.PanelSettings
+  themeUss: {fileID: -4733365628477956816, guid: c0d0c62f1a9d4890b0fdc95b9817098c, type: 3}
+  m_DisableNoThemeWarning: 0
+  m_TargetTexture: {fileID: 0}
+  m_RenderMode: 0
+  m_ColliderUpdateMode: 0
+  m_ColliderIsTrigger: 1
+  m_ScaleMode: 2
+  m_ReferenceSpritePixelsPerUnit: 100
+  m_PixelsPerUnit: 100
+  m_Scale: 1
+  m_ReferenceDpi: 96
+  m_FallbackDpi: 96
+  m_ReferenceResolution: {x: 1080, y: 1920}
+  m_ScreenMatchMode: 0
+  m_Match: 0.5
+  m_SortingOrder: 0
+  m_TargetDisplay: 0
+  m_BindingLogLevel: 0
+  m_ClearDepthStencil: 1
+  m_ClearColor: 0
+  m_ColorClearValue: {r: 0, g: 0, b: 0, a: 0}
+  m_VertexBudget: 0
+  m_TextureSlotCount: 8
+  m_DynamicAtlasSettings:
+    m_MinAtlasSize: 64
+    m_MaxAtlasSize: 4096
+    m_MaxSubTextureSize: 64
+    m_ActiveFilters: -1
+  m_AtlasBlitShader: {fileID: 9101, guid: 0000000000000000f000000000000000, type: 0}
+  m_DefaultShader: {fileID: 9100, guid: 0000000000000000f000000000000000, type: 0}
+  m_RuntimeGaussianBlurShader: {fileID: 20300, guid: 0000000000000000f000000000000000, type: 0}
+  m_RuntimeColorEffectShader: {fileID: 20301, guid: 0000000000000000f000000000000000, type: 0}
+  m_SDFShader: {fileID: 19011, guid: 0000000000000000f000000000000000, type: 0}
+  m_BitmapShader: {fileID: 9001, guid: 0000000000000000f000000000000000, type: 0}
+  m_SpriteShader: {fileID: 19012, guid: 0000000000000000f000000000000000, type: 0}
+  m_ICUDataAsset: {fileID: 0}
+  forceGammaRendering: 0
+  textSettings: {fileID: 0}
diff --git a/Shared/UIToolkitExtensionsExamplePanelSettings.asset.meta b/Shared/UIToolkitExtensionsExamplePanelSettings.asset.meta
new file mode 100644
index 0000000..91884e8
--- /dev/null
+++ b/Shared/UIToolkitExtensionsExamplePanelSettings.asset.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 4b8f1c0c4a814fd59bf309a69520e29b
+NativeFormatImporter:
+  externalObjects: {}
+  mainObjectFileID: 11400000
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
\ No newline at end of file
diff --git a/Shared/UIToolkitExtensionsExamplesTheme.tss b/Shared/UIToolkitExtensionsExamplesTheme.tss
new file mode 100644
index 0000000..e19fd43
--- /dev/null
+++ b/Shared/UIToolkitExtensionsExamplesTheme.tss
@@ -0,0 +1,14 @@
+@import url("unity-theme://default");
+
+@import url("/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ImageCropOverlay/ImageCropOverlayDemoStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ContentExplorer/ContentExplorerStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/RegistrationForm/RegistrationFormStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/StepWizard/StepWizardStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ToastNotifications/ToastNotificationsStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ProfileEditor/ProfileEditorStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/ScreenHeader/ScreenHeaderStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/NotificationList/NotificationListStyles.uss");
+@import url("/Assets/Samples/Unity UI Toolkit Extensions/1.0.0/UI Toolkit Extensions Samples/SocialLinks/SocialLinksStyles.uss");
diff --git a/Shared/UIToolkitExtensionsExamplesTheme.tss.meta b/Shared/UIToolkitExtensionsExamplesTheme.tss.meta
new file mode 100644
index 0000000..72b0a6a
--- /dev/null
+++ b/Shared/UIToolkitExtensionsExamplesTheme.tss.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: c0d0c62f1a9d4890b0fdc95b9817098c
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12388, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
diff --git a/SocialLinks.meta b/SocialLinks.meta
new file mode 100644
index 0000000..9202f9a
--- /dev/null
+++ b/SocialLinks.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 1691a547efae4bcdb444d74fd41cda27
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/SocialLinks/SocialLinksDemo.cs b/SocialLinks/SocialLinksDemo.cs
new file mode 100644
index 0000000..0d0a745
--- /dev/null
+++ b/SocialLinks/SocialLinksDemo.cs
@@ -0,0 +1,101 @@
+// Examples~/SocialLinks/SocialLinksDemo.cs
+// Demonstrates: SocialLinkContainer
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the same
+//   GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - The SocialLinkContainer is shown in edit mode, so the "+ Add Social" button and a
+//        per-row remove (✕) button are visible.
+//      - Tap "+ Add Social", pick a platform from the wheel picker, then type a handle/URL.
+//        Only platforms not already in the list are offered.
+//      - "Show Entered Links" reads the rows back via GetSocials() and lists them below.
+
+using System.Collections.Generic;
+using System.Text;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Social links demo using <see cref="SocialLinkContainer"/> "as is": an editable list of
+    /// platform-labelled URL fields. The demo turns on edit mode so rows can be added and removed,
+    /// supplies a placeholder resolver, seeds a couple of rows, and reads the entered links back
+    /// out with <see cref="SocialLinkContainer.GetSocials"/>.
+    /// </summary>
+    public class SocialLinksDemo : MonoBehaviour
+    {
+        private SocialLinkContainer socialLinks;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("SocialLinksDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "socialLinksDemo__screen");
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "socialLinksDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "socialLinksDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label title = UIToolkitExtensions.CreateVisualElement<Label>(card, "socialLinksDemo__title");
+            title.text = "Social Links";
+
+            Label instruction = UIToolkitExtensions.CreateVisualElement<Label>(card, "socialLinksDemo__instruction");
+            instruction.text = "Add as many social links as you like. Tap \"+ Add Social\", pick a platform from the " +
+                "wheel, then type your handle. Remove a row with its ✕ button.";
+
+            socialLinks = UIToolkitExtensions.CreateVisualElement<SocialLinkContainer>(card, "socialLinksDemo__container");
+            socialLinks.Label = "Your Profiles";
+            socialLinks.IsInEditMode = true;
+            socialLinks.PlatformPlaceholderResolver = platform => $"Enter your {platform} handle or URL";
+
+            socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.Instagram, "@uitoolkit.extensions");
+            socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.YouTube, "UnityUIExtensions");
+
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "socialLinksDemo__bottomBar");
+
+            PillButton showButton = UIToolkitExtensions.CreateVisualElement<PillButton>(bottomBar, "socialLinksDemo__showButton");
+            showButton.Text = "Show Entered Links";
+            showButton.SetInnerColor("#4A90E2");
+            showButton.SetOuterColor("#7B68EE");
+            showButton.SetTextColor(Color.white);
+            showButton.SetFontSize(15f);
+            showButton.Clicked += OnShowClicked;
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "socialLinksDemo__status");
+            statusLabel.text = "Your entered links will be listed here.";
+        }
+
+        private void OnShowClicked()
+        {
+            List<SocialLink> socials = socialLinks.GetSocials();
+            if (socials.Count == 0)
+            {
+                statusLabel.text = "No links entered yet.";
+                return;
+            }
+
+            var builder = new StringBuilder();
+            foreach (SocialLink social in socials)
+            {
+                builder.AppendLine($"{social.platform}: {social.url}");
+            }
+
+            statusLabel.text = builder.ToString().TrimEnd();
+        }
+    }
+}
diff --git a/SocialLinks/SocialLinksDemo.cs.meta b/SocialLinks/SocialLinksDemo.cs.meta
new file mode 100644
index 0000000..98b6d3a
--- /dev/null
+++ b/SocialLinks/SocialLinksDemo.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: a069356b5e3e4f11b899d8f55ad67972
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/SocialLinks/SocialLinksDemo.unity b/SocialLinks/SocialLinksDemo.unity
new file mode 100644
index 0000000..3e5d626
--- /dev/null
+++ b/SocialLinks/SocialLinksDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Social Links Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: a069356b5e3e4f11b899d8f55ad67972, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/SocialLinks/SocialLinksDemo.unity.meta b/SocialLinks/SocialLinksDemo.unity.meta
new file mode 100644
index 0000000..4737fbe
--- /dev/null
+++ b/SocialLinks/SocialLinksDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 291e1a69bffc4337a3cd522f60748900
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/SocialLinks/SocialLinksStyles.uss b/SocialLinks/SocialLinksStyles.uss
new file mode 100644
index 0000000..529c677
--- /dev/null
+++ b/SocialLinks/SocialLinksStyles.uss
@@ -0,0 +1,87 @@
+.socialLinksDemo__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: flex-start;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 40px;
+	padding-bottom: 40px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.socialLinksDemo__card {
+	width: 100%;
+	max-width: 580px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 28px;
+	padding-bottom: 28px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.socialLinksDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.socialLinksDemo__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.socialLinksDemo__instruction {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 22px;
+	white-space: normal;
+}
+
+.socialLinksDemo__container {
+	margin-bottom: 8px;
+}
+
+/* Make the container's text legible on the dark card */
+.socialLinksDemo__container .socialLinkContainer__label {
+	color: rgba(255, 255, 255, 1);
+}
+
+.socialLinksDemo__container .socialLinkContainer__addButton {
+	color: rgba(132, 173, 255, 1);
+}
+
+.socialLinksDemo__container .socialLinkContainer__containerChildRemoveButton {
+	color: rgba(255, 138, 138, 1);
+}
+
+.socialLinksDemo__container .unity-text-field__input {
+	color: rgba(236, 240, 252, 1);
+}
+
+.socialLinksDemo__container .unity-base-field__label {
+	color: rgba(202, 211, 232, 0.9);
+}
+
+.socialLinksDemo__bottomBar {
+	align-items: center;
+	margin-top: 4px;
+}
+
+.socialLinksDemo__showButton {
+	height: 52px;
+	align-self: stretch;
+}
+
+.socialLinksDemo__status {
+	margin-top: 16px;
+	font-size: 13px;
+	color: rgba(124, 230, 200, 1);
+	white-space: normal;
+}
diff --git a/SocialLinks/SocialLinksStyles.uss.meta b/SocialLinks/SocialLinksStyles.uss.meta
new file mode 100644
index 0000000..906b750
--- /dev/null
+++ b/SocialLinks/SocialLinksStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 34ea5f78c68b485c843fe12802106ab5
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/SocialLinks/SocialLinksUxmlBinder.cs b/SocialLinks/SocialLinksUxmlBinder.cs
new file mode 100644
index 0000000..72a0947
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlBinder.cs
@@ -0,0 +1,56 @@
+using System.Collections.Generic;
+using System.Text;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class SocialLinksUxmlBinder : MonoBehaviour
+    {
+        private SocialLinkContainer socialLinks;
+        private Label statusLabel;
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("SocialLinksUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+
+            statusLabel = root.Q<Label>("status-label");
+
+            socialLinks = root.Q<SocialLinkContainer>("social-links");
+            socialLinks.PlatformPlaceholderResolver = platform => $"Enter your {platform} handle or URL";
+
+            socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.Instagram, "@uitoolkit.extensions");
+            socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.YouTube, "UnityUIExtensions");
+
+            PillButton showButton = root.Q<PillButton>("show-button");
+            showButton.SetTextColor(Color.white);
+            showButton.Clicked += OnShowClicked;
+        }
+
+        private void OnShowClicked()
+        {
+            List<SocialLink> socials = socialLinks.GetSocials();
+            if (socials.Count == 0)
+            {
+                statusLabel.text = "No links entered yet.";
+                return;
+            }
+
+            var builder = new StringBuilder();
+            foreach (SocialLink social in socials)
+            {
+                builder.AppendLine($"{social.platform}: {social.url}");
+            }
+
+            statusLabel.text = builder.ToString().TrimEnd();
+        }
+    }
+}
diff --git a/SocialLinks/SocialLinksUxmlBinder.cs.meta b/SocialLinks/SocialLinksUxmlBinder.cs.meta
new file mode 100644
index 0000000..43dd602
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: a2010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/SocialLinks/SocialLinksUxmlDemo.unity b/SocialLinks/SocialLinksUxmlDemo.unity
new file mode 100644
index 0000000..f6fca42
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlDemo.unity
@@ -0,0 +1,106 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: Social Links (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: a2020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: a2010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/SocialLinks/SocialLinksUxmlDemo.unity.meta b/SocialLinks/SocialLinksUxmlDemo.unity.meta
new file mode 100644
index 0000000..e9121a0
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: a2030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/SocialLinks/SocialLinksUxmlView.uxml b/SocialLinks/SocialLinksUxmlView.uxml
new file mode 100644
index 0000000..73b5e41
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlView.uxml
@@ -0,0 +1,20 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="SocialLinksStyles.uss" />
+
+    <ui:VisualElement class="socialLinksDemo__screen">
+        <ui:VisualElement class="socialLinksDemo__card">
+            <ui:Label text="Toolkit Sample" class="socialLinksDemo__eyebrow" />
+            <ui:Label text="Social Links" class="socialLinksDemo__title" />
+            <ui:Label text="Add as many social links as you like. Tap &quot;+ Add Social&quot;, pick a platform from the wheel, then type your handle. Remove a row with its ✕ button." class="socialLinksDemo__instruction" />
+
+            <ext:SocialLinkContainer name="social-links" class="socialLinksDemo__container" label="Your Profiles" edit-mode="true" />
+
+            <ui:VisualElement class="socialLinksDemo__bottomBar">
+                <ext:PillButton name="show-button" class="socialLinksDemo__showButton" text="Show Entered Links" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+
+            <ui:Label name="status-label" text="Your entered links will be listed here." class="socialLinksDemo__status" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/SocialLinks/SocialLinksUxmlView.uxml.meta b/SocialLinks/SocialLinksUxmlView.uxml.meta
new file mode 100644
index 0000000..4c3de93
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: a2020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/StepWizard.meta b/StepWizard.meta
new file mode 100644
index 0000000..9c3f66a
--- /dev/null
+++ b/StepWizard.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 69de7809eebb6474d85d80c0b97f3487
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/StepWizard/StepWizardDemo.cs b/StepWizard/StepWizardDemo.cs
new file mode 100644
index 0000000..d6d6849
--- /dev/null
+++ b/StepWizard/StepWizardDemo.cs
@@ -0,0 +1,311 @@
+// Examples~/StepWizard/StepWizardDemo.cs
+// Demonstrates: QuadrantStepper, StepProgressBar, PillButton
+//
+// Scene setup:
+//   1. Open the bundled scene (or add this component to a GameObject that also
+//      has a UIDocument). The demo calls GetComponent<UIDocument>() on the same
+//      GameObject at runtime.
+//   2. Press Play — a 4-step wizard with a progress bar, animated stepper overlay,
+//      and Back/Next/Finish buttons appears.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Four-step onboarding wizard demonstrating the <see cref="QuadrantStepper"/>,
+    /// <see cref="StepProgressBar"/>, and <see cref="PillButton"/> controls.
+    ///
+    /// Steps:
+    ///   0 — About      : name and role selection.
+    ///   1 — Goals      : checkbox-style goal cards.
+    ///   2 — Settings   : notification and privacy toggles.
+    ///   3 — Done       : confirmation summary.
+    ///
+    /// Tapping a stepper segment navigates directly to that step.
+    /// The progress bar fills proportionally as steps advance.
+    /// Back is hidden on step 0; Next becomes Finish on step 3.
+    /// </summary>
+    public class StepWizardDemo : MonoBehaviour
+    {
+        private static readonly string[] StepNames = { "About", "Goals", "Settings", "Done" };
+
+        private static readonly string[] StepDescriptions =
+        {
+            "Tell us a bit about yourself so we can personalise your experience.",
+            "Pick the goals that matter most to you right now.",
+            "Configure notifications and privacy to suit your preferences.",
+            "You're all set! Review your choices below before finishing.",
+        };
+
+        private UIDocument uiDocument;
+        private QuadrantStepper stepper;
+        private StepProgressBar progressBar;
+        private VisualElement contentArea;
+        private VisualElement[] stepPanels;
+        private PillButton backButton;
+        private PillButton nextButton;
+        private Label stepCounterLabel;
+
+        private int currentStep = 0;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("StepWizardDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            var screen = UIToolkitExtensions.CreateVisualElement(root, "stepWizard__screen");
+
+            var card = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__card");
+
+            var eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__title");
+            titleLabel.text = "Step Wizard Demo";
+
+            var subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__subtitle");
+            subtitleLabel.text = "Move through the sample steps below, adjust your preferences, and finish with a compact summary.";
+
+            stepCounterLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__counter");
+
+            var stepperWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__stepperWrapper");
+
+            stepper = new QuadrantStepper(StepNames);
+            stepper.AddToClassList("stepWizard__stepper");
+            stepper.SelectionChanged += OnStepperSelectionChanged;
+            stepperWrapper.Add(stepper);
+
+            var progressWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__progressWrapper");
+
+            progressBar = new StepProgressBar();
+            progressBar.AddToClassList("stepWizard__progressBar");
+            progressBar.SetGradientColors("#4A90E2", "#7B68EE");
+            progressWrapper.Add(progressBar);
+
+            contentArea = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__content");
+
+            stepPanels = new VisualElement[StepNames.Length];
+            stepPanels[0] = BuildAboutPanel();
+            stepPanels[1] = BuildGoalsPanel();
+            stepPanels[2] = BuildSettingsPanel();
+            stepPanels[3] = BuildDonePanel();
+
+            foreach (var panel in stepPanels)
+            {
+                panel.style.display = DisplayStyle.None;
+                contentArea.Add(panel);
+            }
+
+            var navBar = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__navBar");
+
+            backButton = new PillButton();
+            backButton.AddToClassList("stepWizard__navButton");
+            backButton.Text = "Back";
+            backButton.SetInnerColor("#465062");
+            backButton.SetOuterColor("#5C667A");
+            backButton.SetTextColor(Color.white);
+            backButton.Clicked += OnBackClicked;
+            navBar.Add(backButton);
+
+            nextButton = new PillButton();
+            nextButton.AddToClassList("stepWizard__navButton");
+            nextButton.Text = "Next";
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
+            nextButton.SetTextColor(Color.white);
+            nextButton.Clicked += OnNextClicked;
+            navBar.Add(nextButton);
+
+            GoToStep(0, notify: false);
+        }
+
+        private VisualElement BuildAboutPanel()
+        {
+            var panel = CreateStepPanel("About You", StepDescriptions[0]);
+
+            AddFieldRow(panel, "Full Name", "e.g. Alex Johnson");
+            AddFieldRow(panel, "Role", "e.g. Athlete, Coach, Student…");
+
+            var roleHint = UIToolkitExtensions.CreateVisualElement<Label>(panel, "stepWizard__hint");
+            roleHint.text = "This helps us show you the most relevant content.";
+
+            return panel;
+        }
+
+        private VisualElement BuildGoalsPanel()
+        {
+            var panel = CreateStepPanel("Your Goals", StepDescriptions[1]);
+
+            string[] goals =
+            {
+                "Improve fitness & strength",
+                "Eat healthier every day",
+                "Reduce stress and anxiety",
+                "Build better sleep habits",
+            };
+
+            foreach (var goal in goals)
+            {
+                AddGoalCard(panel, goal);
+            }
+
+            return panel;
+        }
+
+        private VisualElement BuildSettingsPanel()
+        {
+            var panel = CreateStepPanel("Preferences", StepDescriptions[2]);
+
+            AddToggleRow(panel, "Push Notifications", "Receive reminders and tips");
+            AddToggleRow(panel, "Weekly Summary", "Get a progress report each Monday");
+            AddToggleRow(panel, "Personalised Ads", "Help support the app");
+            AddToggleRow(panel, "Data Sharing",      "Anonymous usage analytics");
+
+            return panel;
+        }
+
+        private VisualElement BuildDonePanel()
+        {
+            var panel = CreateStepPanel("All Done!", StepDescriptions[3]);
+
+            var summaryBox = UIToolkitExtensions.CreateVisualElement(panel, "stepWizard__summaryBox");
+
+            AddSummaryRow(summaryBox, "Steps completed", "4 / 4");
+            AddSummaryRow(summaryBox, "Profile",          "Ready");
+            AddSummaryRow(summaryBox, "Goals",            "Selected");
+            AddSummaryRow(summaryBox, "Preferences",      "Saved");
+
+            return panel;
+        }
+
+        private VisualElement CreateStepPanel(string heading, string description)
+        {
+            var panel = UIToolkitExtensions.CreateVisualElement("stepWizard__panel");
+
+            var h = UIToolkitExtensions.CreateVisualElement<Label>(panel, "stepWizard__panelHeading");
+            h.text = heading;
+
+            var desc = UIToolkitExtensions.CreateVisualElement<Label>(panel, "stepWizard__panelDescription");
+            desc.text = description;
+
+            return panel;
+        }
+
+        private void AddFieldRow(VisualElement parent, string label, string placeholder)
+        {
+            var row = UIToolkitExtensions.CreateVisualElement(parent, "stepWizard__fieldRow");
+
+            var lbl = UIToolkitExtensions.CreateVisualElement<Label>(row, "stepWizard__fieldLabel");
+            lbl.text = label;
+
+            var field = new RoundedInputField();
+            field.AddToClassList("stepWizard__field");
+            field.Placeholder = placeholder;
+            field.SetBackgroundColor(Color.white);
+            field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            field.SetPlaceholderColor(new Color(0.65f, 0.65f, 0.7f, 1f));
+            field.SetFontSize(14f);
+            row.Add(field);
+        }
+
+        private void AddGoalCard(VisualElement parent, string goalText)
+        {
+            var card = UIToolkitExtensions.CreateVisualElement(parent, "stepWizard__goalCard");
+
+            UIToolkitExtensions.CreateVisualElement(card, "stepWizard__goalCheckbox");
+
+            var lbl = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__goalText");
+            lbl.text = goalText;
+        }
+
+        private void AddToggleRow(VisualElement parent, string label, string detail)
+        {
+            var row = UIToolkitExtensions.CreateVisualElement(parent, "stepWizard__toggleRow");
+
+            var textBlock = UIToolkitExtensions.CreateVisualElement(row, "stepWizard__toggleText");
+
+            var lbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "stepWizard__toggleLabel");
+            lbl.text = label;
+
+            var detailLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "stepWizard__toggleDetail");
+            detailLbl.text = detail;
+
+            UIToolkitExtensions.CreateVisualElement(row, "stepWizard__toggleIndicator");
+        }
+
+        private void AddSummaryRow(VisualElement parent, string key, string value)
+        {
+            var row = UIToolkitExtensions.CreateVisualElement(parent, "stepWizard__summaryRow");
+
+            var keyLbl = UIToolkitExtensions.CreateVisualElement<Label>(row, "stepWizard__summaryKey");
+            keyLbl.text = key;
+
+            var valueLbl = UIToolkitExtensions.CreateVisualElement<Label>(row, "stepWizard__summaryValue");
+            valueLbl.text = value;
+        }
+
+        private void OnStepperSelectionChanged(int index, string text)
+        {
+            GoToStep(index, notify: false);
+        }
+
+        private void OnBackClicked()
+        {
+            if (currentStep > 0)
+            {
+                GoToStep(currentStep - 1, notify: true);
+            }
+        }
+
+        private void OnNextClicked()
+        {
+            if (currentStep < StepNames.Length - 1)
+            {
+                GoToStep(currentStep + 1, notify: true);
+            }
+            else
+            {
+                Debug.Log("[StepWizardDemo] Wizard finished.");
+                GoToStep(0, notify: true);
+            }
+        }
+
+        /// <summary>
+        /// Switch the active step panel and synchronise the stepper and progress bar.
+        /// </summary>
+        private void GoToStep(int index, bool notify)
+        {
+            index = Mathf.Clamp(index, 0, StepNames.Length - 1);
+            currentStep = index;
+
+            for (var i = 0; i < stepPanels.Length; i++)
+            {
+                stepPanels[i].style.display = i == currentStep ? DisplayStyle.Flex : DisplayStyle.None;
+            }
+
+            stepper.SetSelectedIndex(currentStep, notify: false, animate: notify);
+
+            progressBar.SetProgress(currentStep + 1, StepNames.Length);
+
+            stepCounterLabel.text = $"Step {currentStep + 1} of {StepNames.Length}";
+
+            backButton.style.display = currentStep == 0 ? DisplayStyle.None : DisplayStyle.Flex;
+
+            nextButton.Text = currentStep == StepNames.Length - 1 ? "Finish" : "Next";
+        }
+    }
+}
diff --git a/StepWizard/StepWizardDemo.cs.meta b/StepWizard/StepWizardDemo.cs.meta
new file mode 100644
index 0000000..c82a5e4
--- /dev/null
+++ b/StepWizard/StepWizardDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: cb3a23f6e62cc854b8ceb8058eb0caaa
\ No newline at end of file
diff --git a/StepWizard/StepWizardDemo.unity b/StepWizard/StepWizardDemo.unity
new file mode 100644
index 0000000..51c8562
--- /dev/null
+++ b/StepWizard/StepWizardDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Step Wizard Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: cb3a23f6e62cc854b8ceb8058eb0caaa, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/StepWizard/StepWizardDemo.unity.meta b/StepWizard/StepWizardDemo.unity.meta
new file mode 100644
index 0000000..c7e863a
--- /dev/null
+++ b/StepWizard/StepWizardDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 7ef0ae0451fd40d5a38302ab4fa6b1c9
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/StepWizard/StepWizardStyles.uss b/StepWizard/StepWizardStyles.uss
new file mode 100644
index 0000000..22f6aeb
--- /dev/null
+++ b/StepWizard/StepWizardStyles.uss
@@ -0,0 +1,272 @@
+/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
+
+.stepWizard__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.stepWizard__card {
+	width: 100%;
+	max-width: 620px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.stepWizard__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.stepWizard__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.stepWizard__subtitle {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 20px;
+	white-space: normal;
+}
+
+.stepWizard__counter {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 0.95);
+	margin-bottom: 16px;
+}
+
+.stepWizard__stepperWrapper {
+	padding-left: 10px;
+	padding-right: 10px;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	margin-bottom: 10px;
+	background-color: rgba(255, 255, 255, 0.045);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-radius: 22px;
+}
+
+.stepWizard__stepper {
+	height: 42px;
+	border-top-left-radius: 21px;
+	border-top-right-radius: 21px;
+	border-bottom-left-radius: 21px;
+	border-bottom-right-radius: 21px;
+	background-color: rgba(255, 255, 255, 0.07);
+}
+
+.stepWizard__progressWrapper {
+	padding-top: 4px;
+	padding-bottom: 10px;
+}
+
+.stepWizard__progressBar {
+	height: 6px;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+}
+
+.stepWizard__content {
+	flex-grow: 1;
+	padding-top: 12px;
+	padding-bottom: 18px;
+}
+
+.stepWizard__navBar {
+	flex-direction: row;
+	justify-content: space-between;
+	padding-top: 12px;
+	padding-bottom: 0;
+}
+
+.stepWizard__navButton {
+	width: 100px;
+	height: 48px;
+}
+
+.stepWizard__panel {
+	flex-grow: 1;
+	flex-direction: column;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	padding-left: 18px;
+	padding-right: 18px;
+	background-color: rgba(255, 255, 255, 0.07);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-radius: 22px;
+}
+
+.stepWizard__panelHeading {
+	font-size: 20px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 6px;
+}
+
+.stepWizard__panelDescription {
+	font-size: 14px;
+	color: rgba(173, 183, 210, 0.85);
+	margin-bottom: 20px;
+	white-space: normal;
+}
+
+.stepWizard__hint {
+	font-size: 12px;
+	color: rgba(150, 160, 188, 0.8);
+	margin-top: 8px;
+	white-space: normal;
+}
+
+.stepWizard__fieldRow {
+	margin-bottom: 12px;
+}
+
+.stepWizard__fieldLabel {
+	font-size: 12px;
+	color: rgba(173, 183, 210, 0.85);
+	margin-bottom: 4px;
+}
+
+.stepWizard__field {
+	height: 44px;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+}
+
+.stepWizard__goalCard {
+	flex-direction: row;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	padding-left: 14px;
+	padding-right: 14px;
+	margin-bottom: 8px;
+}
+
+.stepWizard__goalCheckbox {
+	width: 22px;
+	height: 22px;
+	border-top-left-radius: 11px;
+	border-top-right-radius: 11px;
+	border-bottom-left-radius: 11px;
+	border-bottom-right-radius: 11px;
+	background-color: rgba(255, 255, 255, 0.08);
+	border-left-width: 1.5px;
+	border-right-width: 1.5px;
+	border-top-width: 1.5px;
+	border-bottom-width: 1.5px;
+	border-left-color: rgba(255, 255, 255, 0.25);
+	border-right-color: rgba(255, 255, 255, 0.25);
+	border-top-color: rgba(255, 255, 255, 0.25);
+	border-bottom-color: rgba(255, 255, 255, 0.25);
+	margin-right: 12px;
+	flex-shrink: 0;
+}
+
+.stepWizard__goalText {
+	font-size: 14px;
+	color: rgba(225, 230, 240, 1);
+	flex-grow: 1;
+	white-space: normal;
+}
+
+.stepWizard__toggleRow {
+	flex-direction: row;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	padding-left: 14px;
+	padding-right: 14px;
+	margin-bottom: 8px;
+}
+
+.stepWizard__toggleText {
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.stepWizard__toggleLabel {
+	font-size: 14px;
+	color: rgba(225, 230, 240, 1);
+}
+
+.stepWizard__toggleDetail {
+	font-size: 12px;
+	color: rgba(150, 160, 188, 0.85);
+}
+
+.stepWizard__toggleIndicator {
+	width: 36px;
+	height: 20px;
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+	border-bottom-left-radius: 10px;
+	border-bottom-right-radius: 10px;
+	background-color: rgba(46, 204, 112, 1);
+	flex-shrink: 0;
+}
+
+.stepWizard__summaryBox {
+	background-color: rgba(255, 255, 255, 0.045);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
+	padding-top: 16px;
+	padding-bottom: 16px;
+	padding-left: 16px;
+	padding-right: 16px;
+	margin-top: 12px;
+}
+
+.stepWizard__summaryRow {
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 8px;
+}
+
+.stepWizard__summaryKey {
+	font-size: 14px;
+	color: rgba(190, 200, 220, 1);
+}
+
+.stepWizard__summaryValue {
+	font-size: 14px;
+	color: rgba(132, 173, 255, 0.95);
+	-unity-font-style: bold;
+}
diff --git a/StepWizard/StepWizardStyles.uss.meta b/StepWizard/StepWizardStyles.uss.meta
new file mode 100644
index 0000000..ed02faf
--- /dev/null
+++ b/StepWizard/StepWizardStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: 04ae7554ff0344e0be4f2714464d3ce5
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/StepWizard/StepWizardUxmlBinder.cs b/StepWizard/StepWizardUxmlBinder.cs
new file mode 100644
index 0000000..5898439
--- /dev/null
+++ b/StepWizard/StepWizardUxmlBinder.cs
@@ -0,0 +1,129 @@
+// Examples~/StepWizard/StepWizardUxmlBinder.cs
+// UXML counterpart of StepWizardDemo.cs. Layout lives in StepWizardUxmlView.uxml;
+// this binder drives navigation, panel visibility, the stepper and the progress bar.
+
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Behaviour binder for the UXML-authored StepWizard demo.
+    /// </summary>
+    public class StepWizardUxmlBinder : MonoBehaviour
+    {
+        private const int StepCount = 4;
+
+        private UIDocument uiDocument;
+        private QuadrantStepper stepper;
+        private StepProgressBar progressBar;
+        private Label stepCounterLabel;
+        private PillButton backButton;
+        private PillButton nextButton;
+        private readonly VisualElement[] panels = new VisualElement[StepCount];
+
+        private int currentStep;
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("StepWizardUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            stepper = root.Q<QuadrantStepper>("stepper");
+            progressBar = root.Q<StepProgressBar>("progress-bar");
+            stepCounterLabel = root.Q<Label>("step-counter");
+            backButton = root.Q<PillButton>("back-button");
+            nextButton = root.Q<PillButton>("next-button");
+            for (var i = 0; i < StepCount; i++)
+            {
+                panels[i] = root.Q<VisualElement>($"panel-{i}");
+            }
+
+            if (stepper == null || progressBar == null || backButton == null || nextButton == null)
+            {
+                Debug.LogWarning("StepWizardUxmlBinder: one or more named elements were not found in the UXML.", this);
+                return;
+            }
+
+            root.Query<RoundedInputField>().ForEach(field =>
+            {
+                field.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+                field.SetTextColor(Color.white);
+                field.SetPlaceholderColor(new Color(0.71f, 0.75f, 0.86f, 0.65f));
+                field.SetFontSize(14f);
+            });
+
+            backButton.SetTextColor(Color.white);
+            nextButton.SetTextColor(Color.white);
+
+            stepper.SelectionChanged += OnStepperSelectionChanged;
+            backButton.Clicked += OnBackClicked;
+            nextButton.Clicked += OnNextClicked;
+
+            GoToStep(0, notify: false);
+        }
+
+        private void OnStepperSelectionChanged(int index, string text)
+        {
+            GoToStep(index, notify: false);
+        }
+
+        private void OnBackClicked()
+        {
+            if (currentStep > 0)
+            {
+                GoToStep(currentStep - 1, notify: true);
+            }
+        }
+
+        private void OnNextClicked()
+        {
+            if (currentStep < StepCount - 1)
+            {
+                GoToStep(currentStep + 1, notify: true);
+            }
+            else
+            {
+                Debug.Log("[StepWizardUxmlBinder] Wizard finished.");
+                GoToStep(0, notify: true);
+            }
+        }
+
+        private void GoToStep(int index, bool notify)
+        {
+            index = Mathf.Clamp(index, 0, StepCount - 1);
+            currentStep = index;
+
+            for (var i = 0; i < panels.Length; i++)
+            {
+                if (panels[i] != null)
+                {
+                    panels[i].style.display = i == currentStep ? DisplayStyle.Flex : DisplayStyle.None;
+                }
+            }
+
+            stepper.SetSelectedIndex(currentStep, notify: false, animate: notify);
+            progressBar.SetProgress(currentStep + 1, StepCount);
+
+            if (stepCounterLabel != null)
+            {
+                stepCounterLabel.text = $"Step {currentStep + 1} of {StepCount}";
+            }
+
+            backButton.style.display = currentStep == 0 ? DisplayStyle.None : DisplayStyle.Flex;
+
+            bool isLast = currentStep == StepCount - 1;
+            nextButton.Text = isLast ? "Finish" : "Next";
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
+        }
+    }
+}
diff --git a/StepWizard/StepWizardUxmlBinder.cs.meta b/StepWizard/StepWizardUxmlBinder.cs.meta
new file mode 100644
index 0000000..fe0d8fc
--- /dev/null
+++ b/StepWizard/StepWizardUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 6dd66dd1792a499291ee21499c17da5b
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/StepWizard/StepWizardUxmlDemo.unity b/StepWizard/StepWizardUxmlDemo.unity
new file mode 100644
index 0000000..a314742
--- /dev/null
+++ b/StepWizard/StepWizardUxmlDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.14, g: 0.14, b: 0.16, a: 1}
+  m_AmbientEquatorColor: {r: 0.12, g: 0.12, b: 0.14, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.1, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 3
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 1
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 5
+    m_PVRFilteringGaussRadiusAO: 2
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Step Wizard (UXML)
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name:
+  m_EditorClassIdentifier:
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: be68b9a1ee864e128264ebfbf2b8bd6a, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 6dd66dd1792a499291ee21499c17da5b, type: 3}
+  m_Name:
+  m_EditorClassIdentifier:
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/StepWizard/StepWizardUxmlDemo.unity.meta b/StepWizard/StepWizardUxmlDemo.unity.meta
new file mode 100644
index 0000000..6094d17
--- /dev/null
+++ b/StepWizard/StepWizardUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 4670a4fd64324f9182dc875d73f9159d
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/StepWizard/StepWizardUxmlView.uxml b/StepWizard/StepWizardUxmlView.uxml
new file mode 100644
index 0000000..a25f3e8
--- /dev/null
+++ b/StepWizard/StepWizardUxmlView.uxml
@@ -0,0 +1,119 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="StepWizardStyles.uss" />
+
+    <ui:VisualElement name="screen" class="stepWizard__screen">
+        <ui:VisualElement name="card" class="stepWizard__card">
+            <ui:Label text="Toolkit Sample" class="stepWizard__eyebrow" />
+            <ui:Label text="Step Wizard Demo" class="stepWizard__title" />
+            <ui:Label text="Move through the sample steps below, adjust your preferences, and finish with a compact summary." class="stepWizard__subtitle" />
+            <ui:Label name="step-counter" class="stepWizard__counter" />
+
+            <ui:VisualElement name="stepper-wrapper" class="stepWizard__stepperWrapper">
+                <ext:QuadrantStepper name="stepper" class="stepWizard__stepper" options="About,Goals,Settings,Done" />
+            </ui:VisualElement>
+
+            <ui:VisualElement name="progress-wrapper" class="stepWizard__progressWrapper">
+                <ext:StepProgressBar name="progress-bar" class="stepWizard__progressBar" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+
+            <ui:VisualElement name="content-area" class="stepWizard__content">
+            <ui:VisualElement name="panel-0" class="stepWizard__panel" style="display: none;">
+                <ui:Label text="About You" class="stepWizard__panelHeading" />
+                <ui:Label text="Tell us a bit about yourself so we can personalise your experience." class="stepWizard__panelDescription" />
+                <ui:VisualElement class="stepWizard__fieldRow">
+                    <ui:Label text="Full Name" class="stepWizard__fieldLabel" />
+                    <ext:RoundedInputField class="stepWizard__field" placeholder="e.g. Alex Johnson" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__fieldRow">
+                    <ui:Label text="Role" class="stepWizard__fieldLabel" />
+                    <ext:RoundedInputField class="stepWizard__field" placeholder="e.g. Athlete, Coach, Student…" />
+                </ui:VisualElement>
+                <ui:Label text="This helps us show you the most relevant content." class="stepWizard__hint" />
+            </ui:VisualElement>
+
+            <ui:VisualElement name="panel-1" class="stepWizard__panel" style="display: none;">
+                <ui:Label text="Your Goals" class="stepWizard__panelHeading" />
+                <ui:Label text="Pick the goals that matter most to you right now." class="stepWizard__panelDescription" />
+                <ui:VisualElement class="stepWizard__goalCard">
+                    <ui:VisualElement class="stepWizard__goalCheckbox" />
+                    <ui:Label text="Improve fitness &amp; strength" class="stepWizard__goalText" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__goalCard">
+                    <ui:VisualElement class="stepWizard__goalCheckbox" />
+                    <ui:Label text="Eat healthier every day" class="stepWizard__goalText" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__goalCard">
+                    <ui:VisualElement class="stepWizard__goalCheckbox" />
+                    <ui:Label text="Reduce stress and anxiety" class="stepWizard__goalText" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__goalCard">
+                    <ui:VisualElement class="stepWizard__goalCheckbox" />
+                    <ui:Label text="Build better sleep habits" class="stepWizard__goalText" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+
+            <ui:VisualElement name="panel-2" class="stepWizard__panel" style="display: none;">
+                <ui:Label text="Preferences" class="stepWizard__panelHeading" />
+                <ui:Label text="Configure notifications and privacy to suit your preferences." class="stepWizard__panelDescription" />
+                <ui:VisualElement class="stepWizard__toggleRow">
+                    <ui:VisualElement class="stepWizard__toggleText">
+                        <ui:Label text="Push Notifications" class="stepWizard__toggleLabel" />
+                        <ui:Label text="Receive reminders and tips" class="stepWizard__toggleDetail" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__toggleIndicator" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__toggleRow">
+                    <ui:VisualElement class="stepWizard__toggleText">
+                        <ui:Label text="Weekly Summary" class="stepWizard__toggleLabel" />
+                        <ui:Label text="Get a progress report each Monday" class="stepWizard__toggleDetail" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__toggleIndicator" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__toggleRow">
+                    <ui:VisualElement class="stepWizard__toggleText">
+                        <ui:Label text="Personalised Ads" class="stepWizard__toggleLabel" />
+                        <ui:Label text="Help support the app" class="stepWizard__toggleDetail" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__toggleIndicator" />
+                </ui:VisualElement>
+                <ui:VisualElement class="stepWizard__toggleRow">
+                    <ui:VisualElement class="stepWizard__toggleText">
+                        <ui:Label text="Data Sharing" class="stepWizard__toggleLabel" />
+                        <ui:Label text="Anonymous usage analytics" class="stepWizard__toggleDetail" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__toggleIndicator" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+
+            <ui:VisualElement name="panel-3" class="stepWizard__panel" style="display: none;">
+                <ui:Label text="All Done!" class="stepWizard__panelHeading" />
+                <ui:Label text="You're all set! Review your choices below before finishing." class="stepWizard__panelDescription" />
+                <ui:VisualElement class="stepWizard__summaryBox">
+                    <ui:VisualElement class="stepWizard__summaryRow">
+                        <ui:Label text="Steps completed" class="stepWizard__summaryKey" />
+                        <ui:Label text="4 / 4" class="stepWizard__summaryValue" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__summaryRow">
+                        <ui:Label text="Profile" class="stepWizard__summaryKey" />
+                        <ui:Label text="Ready" class="stepWizard__summaryValue" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__summaryRow">
+                        <ui:Label text="Goals" class="stepWizard__summaryKey" />
+                        <ui:Label text="Selected" class="stepWizard__summaryValue" />
+                    </ui:VisualElement>
+                    <ui:VisualElement class="stepWizard__summaryRow">
+                        <ui:Label text="Preferences" class="stepWizard__summaryKey" />
+                        <ui:Label text="Saved" class="stepWizard__summaryValue" />
+                    </ui:VisualElement>
+                </ui:VisualElement>
+            </ui:VisualElement>
+            </ui:VisualElement>
+
+            <ui:VisualElement name="nav-bar" class="stepWizard__navBar">
+                <ext:PillButton name="back-button" class="stepWizard__navButton" text="Back" inner-color="#465062" outer-color="#5C667A" />
+                <ext:PillButton name="next-button" class="stepWizard__navButton" text="Next" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/StepWizard/StepWizardUxmlView.uxml.meta b/StepWizard/StepWizardUxmlView.uxml.meta
new file mode 100644
index 0000000..f0ea722
--- /dev/null
+++ b/StepWizard/StepWizardUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: be68b9a1ee864e128264ebfbf2b8bd6a
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
diff --git a/ToastNotifications.meta b/ToastNotifications.meta
new file mode 100644
index 0000000..cf4b2b5
--- /dev/null
+++ b/ToastNotifications.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 1f0532939aeec1f4d9585a626b32dde7
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ToastNotifications/ToastNotificationsDemo.cs b/ToastNotifications/ToastNotificationsDemo.cs
new file mode 100644
index 0000000..a332afc
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsDemo.cs
@@ -0,0 +1,321 @@
+// Examples~/ToastNotifications/ToastNotificationsDemo.cs
+// Demonstrates: ToastSwipeDismissManipulator
+//
+// Scene setup:
+//   A scene for this example is provided. The demo grabs the UIDocument from the
+//   same GameObject via GetComponent<UIDocument>(), so no manual assignment is needed.
+//      - Tap "Add Toast" to spawn toast notifications (max 5; oldest auto-removed).
+//      - Each toast fades away on its own after the default time if left untouched.
+//      - Swipe left or right on any toast to dismiss it with an animated slide-out.
+//      - Tap a toast (no swipe) to dismiss it with a fade-out.
+
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityEngine.UIElements.Experimental;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    /// <summary>
+    /// Toast notification demo using <see cref="ToastSwipeDismissManipulator"/>.
+    ///
+    /// Architecture:
+    ///   - A vertical container stacks active toasts.
+    ///   - Each toast is a <see cref="ToastData"/> record holding its VisualElement
+    ///     and its <see cref="ToastSwipeDismissManipulator"/> instance.
+    ///   - The manipulator's callbacks handle swipe-dismiss (slide + fade) and
+    ///     tap-dismiss (fade only) using UI Toolkit experimental animations.
+    ///   - Every toast also auto-dismisses after the default time
+    ///     (<see cref="AutoDismissSeconds"/>) unless the user taps or swipes it first;
+    ///     the pending timer is cancelled when the toast is dismissed by any path.
+    ///   - When dismissed the element is removed from the hierarchy and the
+    ///     <see cref="ToastData"/> is removed from the active list.
+    /// </summary>
+    public class ToastNotificationsDemo : MonoBehaviour
+    {
+        private const int MaxToasts = 5;
+        private const int FadeDurationMs = 260;
+
+        private const float AutoDismissSeconds = 4f;
+
+        private static readonly (string title, string subtitle)[] ToastTemplates =
+        {
+            ("Workout Complete",      "You finished your 30-min run. Great job!"),
+            ("New Message",           "Alex sent you a new message."),
+            ("Goal Reached",          "You hit your daily step target of 10,000."),
+            ("Weekly Summary Ready",  "Your progress report is available to view."),
+            ("Reminder",             "Don't forget to log your meals today."),
+            ("Achievement Unlocked",  "7-day streak — keep it up!"),
+            ("Sync Complete",         "Your data has been synced across devices."),
+            ("Low Water Intake",      "You've only had 2 of your 8 glasses today."),
+        };
+
+        private static readonly Color[] ToastColors =
+        {
+            new Color(0.96f, 0.95f, 1.00f, 1f),
+            new Color(0.95f, 1.00f, 0.97f, 1f),
+            new Color(1.00f, 0.97f, 0.93f, 1f),
+            new Color(0.93f, 0.97f, 1.00f, 1f),
+            new Color(1.00f, 0.95f, 0.95f, 1f),
+        };
+
+        private UIDocument uiDocument;
+        private VisualElement toastContainer;
+        private int toastCounter = 0;
+        private int templateIndex = 0;
+        private int colorIndex = 0;
+
+        /// <summary>
+        /// Tracks each active toast alongside its manipulator.
+        /// </summary>
+        private sealed class ToastData
+        {
+            public VisualElement Root;
+            public ToastSwipeDismissManipulator Manipulator;
+            public bool IsDismissing;
+            public IVisualElementScheduledItem AutoDismissTimer;
+        }
+
+        private readonly List<ToastData> activeToasts = new();
+
+        private void Start()
+        {
+            uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ToastNotificationsDemo requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.Clear();
+            BuildUI(root);
+        }
+
+        private void BuildUI(VisualElement root)
+        {
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "toastDemo__screen");
+
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
+
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__headerTitle");
+            titleLabel.text = "Toast Notifications";
+
+            Label instructionLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__instruction");
+            instructionLabel.text = "Add sample notifications below, dismiss them with a swipe, or tap a toast to clear it instantly.";
+
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "toastDemo__bottomBar");
+
+            PillButton addButton = UIToolkitExtensions.CreateVisualElement<PillButton>(bottomBar, "toastDemo__addButton");
+            addButton.Text = "Add Toast";
+            addButton.SetInnerColor("#4A90E2");
+            addButton.SetOuterColor("#7B68EE");
+            addButton.SetTextColor(Color.white);
+            addButton.SetFontSize(15f);
+            addButton.Clicked += OnAddToastClicked;
+
+            VisualElement overlay = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__overlay");
+            overlay.pickingMode = PickingMode.Ignore;
+
+            toastContainer = UIToolkitExtensions.CreateVisualElement(overlay, "toastDemo__container");
+            toastContainer.pickingMode = PickingMode.Ignore;
+        }
+
+        private void OnAddToastClicked()
+        {
+            if (activeToasts.Count >= MaxToasts)
+            {
+                RemoveOldestToast();
+            }
+
+            SpawnToast();
+        }
+
+        private void SpawnToast()
+        {
+            toastCounter++;
+            var (title, subtitle) = ToastTemplates[templateIndex % ToastTemplates.Length];
+            templateIndex++;
+            var bgColor = ToastColors[colorIndex % ToastColors.Length];
+            colorIndex++;
+
+            var toast = UIToolkitExtensions.CreateVisualElement(toastContainer, "toastDemo__toast");
+            toast.style.backgroundColor = bgColor;
+
+            var accentBar = UIToolkitExtensions.CreateVisualElement(toast, "toastDemo__accent");
+            Color.RGBToHSV(bgColor, out var h, out var s, out var v);
+            accentBar.style.backgroundColor = Color.HSVToRGB((h + 0.5f) % 1f, 0.65f, 0.65f);
+
+            var textBlock = UIToolkitExtensions.CreateVisualElement(toast, "toastDemo__textBlock");
+
+            var titleLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "toastDemo__title");
+            titleLbl.text = title;
+
+            var subtitleLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "toastDemo__subtitle");
+            subtitleLbl.text = subtitle;
+
+            var dismissIcon = UIToolkitExtensions.CreateVisualElement<Label>(toast, "toastDemo__dismiss");
+            dismissIcon.text = "×";
+            dismissIcon.pickingMode = PickingMode.Ignore;
+
+            toast.style.translate = new Translate(0, 40, 0);
+            toast.style.opacity = 0f;
+
+            var toastData = new ToastData { Root = toast };
+
+            toast.schedule.Execute(() =>
+            {
+                AnimateToastEntrance(toast);
+                ScheduleAutoDismiss(toastData);
+            }).StartingIn(10);
+
+            var manipulator = new ToastSwipeDismissManipulator(
+                canInteract: () => !toastData.IsDismissing,
+                canStartAtPosition: _ => true,
+                getHorizontalDismissTravelDistance: () => toast.resolvedStyle.width > 0
+                    ? toast.resolvedStyle.width + 32f
+                    : 400f,
+                getVerticalDismissTravelDistance: () => toast.resolvedStyle.height > 0
+                    ? toast.resolvedStyle.height + 16f
+                    : 80f,
+                getOffsetTarget: () => toast,
+                onInteractionStarted: null,
+                onInteractionAborted: null,
+                onTapped: () => OnToastTapped(toastData),
+                onDismissed: () => OnToastDismissedBySwipe(toastData)
+            );
+
+            toast.AddManipulator(manipulator);
+            toastData.Manipulator = manipulator;
+            activeToasts.Add(toastData);
+        }
+
+        private static void AnimateToastEntrance(VisualElement toast)
+        {
+            var propNames = new List<StylePropertyName>
+            {
+                new("opacity"),
+                new("translate"),
+            };
+
+            var durations = new List<TimeValue>
+            {
+                new(300, TimeUnit.Millisecond),
+                new(300, TimeUnit.Millisecond),
+            };
+
+            var easings = new List<EasingFunction>
+            {
+                new(EasingMode.EaseOut),
+                new(EasingMode.EaseOut),
+            };
+
+            toast.style.transitionProperty = new StyleList<StylePropertyName>(propNames);
+            toast.style.transitionDuration = new StyleList<TimeValue>(durations);
+            toast.style.transitionTimingFunction = new StyleList<EasingFunction>(easings);
+
+            toast.style.opacity = 1f;
+            toast.style.translate = new Translate(0, 0, 0);
+        }
+
+        /// <summary>
+        /// Arm the timer that fades the toast away after the default time.
+        /// </summary>
+        private void ScheduleAutoDismiss(ToastData toastData)
+        {
+            toastData.AutoDismissTimer = toastData.Root.schedule
+                .Execute(() => AutoDismiss(toastData))
+                .StartingIn((long)(AutoDismissSeconds * 1000));
+        }
+
+        private void AutoDismiss(ToastData toastData)
+        {
+            if (toastData.IsDismissing) return;
+
+            OnToastTapped(toastData);
+        }
+
+        /// <summary>
+        /// Stop a pending auto-dismiss timer so it never fires after removal.
+        /// </summary>
+        private static void CancelAutoDismiss(ToastData toastData)
+        {
+            toastData.AutoDismissTimer?.Pause();
+            toastData.AutoDismissTimer = null;
+        }
+
+        private void OnToastTapped(ToastData toastData)
+        {
+            if (toastData.IsDismissing) return;
+            toastData.IsDismissing = true;
+
+            CancelAutoDismiss(toastData);
+            StartCoroutine(FadeOutAndRemoveToast(toastData));
+        }
+
+        private IEnumerator FadeOutAndRemoveToast(ToastData toastData)
+        {
+            var toast = toastData.Root;
+
+            toast.style.transitionProperty = new StyleList<StylePropertyName>(
+                new List<StylePropertyName> { new("opacity") });
+            toast.style.transitionDuration = new StyleList<TimeValue>(
+                new List<TimeValue> { new(FadeDurationMs, TimeUnit.Millisecond) });
+            toast.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new List<EasingFunction> { new(EasingMode.EaseOut) });
+            toast.style.opacity = 0f;
+
+            yield return new WaitForSeconds(FadeDurationMs / 1000f + 0.02f);
+
+            RemoveToastFromHierarchy(toastData);
+        }
+
+        private void OnToastDismissedBySwipe(ToastData toastData)
+        {
+            if (toastData.IsDismissing) return;
+            toastData.IsDismissing = true;
+
+            CancelAutoDismiss(toastData);
+
+            var toast = toastData.Root;
+            var anim = toast.experimental.animation.Start(1f, 0f, FadeDurationMs, (_, v) =>
+            {
+                toast.style.opacity = v;
+            });
+            anim.KeepAlive();
+            anim.onAnimationCompleted += () =>
+            {
+                RemoveToastFromHierarchy(toastData);
+            };
+        }
+
+        private void RemoveToastFromHierarchy(ToastData toastData)
+        {
+            activeToasts.Remove(toastData);
+
+            if (toastData.Root.parent != null)
+            {
+                toastData.Root.RemoveFromHierarchy();
+            }
+        }
+
+        /// <summary>
+        /// Remove the oldest toast immediately (when cap is exceeded).
+        /// </summary>
+        private void RemoveOldestToast()
+        {
+            if (activeToasts.Count == 0) return;
+
+            var oldest = activeToasts[0];
+            oldest.IsDismissing = true;
+            CancelAutoDismiss(oldest);
+            oldest.Manipulator?.ResetState();
+            RemoveToastFromHierarchy(oldest);
+        }
+    }
+}
diff --git a/ToastNotifications/ToastNotificationsDemo.cs.meta b/ToastNotifications/ToastNotificationsDemo.cs.meta
new file mode 100644
index 0000000..be563d0
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsDemo.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 21f5a6ca9d1243041bdf95fa2925ccf7
\ No newline at end of file
diff --git a/ToastNotifications/ToastNotificationsDemo.unity b/ToastNotifications/ToastNotificationsDemo.unity
new file mode 100644
index 0000000..4b92bef
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsDemo.unity
@@ -0,0 +1,287 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionBakeSettings:
+    smallestOccluder: 5
+    smallestHole: 0.25
+    backfaceThreshold: 100
+  m_SceneGUID: 00000000000000000000000000000000
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+  m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
+  m_FogMode: 3
+  m_FogDensity: 0.01
+  m_LinearFogStart: 0
+  m_LinearFogEnd: 300
+  m_AmbientSkyColor: {r: 0.22, g: 0.24, b: 0.28, a: 1}
+  m_AmbientEquatorColor: {r: 0.14, g: 0.15, b: 0.18, a: 1}
+  m_AmbientGroundColor: {r: 0.08, g: 0.08, b: 0.09, a: 1}
+  m_AmbientIntensity: 1
+  m_AmbientMode: 0
+  m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
+  m_SkyboxMaterial: {fileID: 0}
+  m_HaloStrength: 0.5
+  m_FlareStrength: 1
+  m_FlareFadeSpeed: 3
+  m_HaloTexture: {fileID: 0}
+  m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
+  m_DefaultReflectionMode: 0
+  m_DefaultReflectionResolution: 128
+  m_ReflectionBounces: 1
+  m_ReflectionIntensity: 1
+  m_CustomReflection: {fileID: 0}
+  m_Sun: {fileID: 0}
+  m_UseRadianceAmbientProbe: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+  m_BakeOnSceneLoad: 0
+  m_GISettings:
+    serializedVersion: 2
+    m_BounceScale: 1
+    m_IndirectOutputScale: 1
+    m_AlbedoBoost: 1
+    m_EnvironmentLightingMode: 0
+    m_EnableBakedLightmaps: 1
+    m_EnableRealtimeLightmaps: 0
+  m_LightmapEditorSettings:
+    serializedVersion: 12
+    m_Resolution: 2
+    m_BakeResolution: 40
+    m_AtlasSize: 1024
+    m_AO: 0
+    m_AOMaxDistance: 1
+    m_CompAOExponent: 1
+    m_CompAOExponentDirect: 0
+    m_ExtractAmbientOcclusion: 0
+    m_Padding: 2
+    m_LightmapParameters: {fileID: 0}
+    m_LightmapsBakeMode: 1
+    m_TextureCompression: 1
+    m_ReflectionCompression: 2
+    m_MixedBakeMode: 2
+    m_BakeBackend: 2
+    m_PVRSampling: 1
+    m_PVRDirectSampleCount: 32
+    m_PVRSampleCount: 512
+    m_PVRBounces: 2
+    m_PVREnvironmentSampleCount: 256
+    m_PVREnvironmentReferencePointCount: 2048
+    m_PVRFilteringMode: 1
+    m_PVRDenoiserTypeDirect: 1
+    m_PVRDenoiserTypeIndirect: 1
+    m_PVRDenoiserTypeAO: 1
+    m_PVRFilterTypeDirect: 0
+    m_PVRFilterTypeIndirect: 0
+    m_PVRFilterTypeAO: 0
+    m_PVREnvironmentMIS: 1
+    m_PVRCulling: 1
+    m_PVRFilteringGaussRadiusDirect: 1
+    m_PVRFilteringGaussRadiusIndirect: 1
+    m_PVRFilteringGaussRadiusAO: 1
+    m_PVRFilteringAtrousPositionSigmaDirect: 0.5
+    m_PVRFilteringAtrousPositionSigmaIndirect: 2
+    m_PVRFilteringAtrousPositionSigmaAO: 1
+    m_ExportTrainingData: 0
+    m_TrainingDataDestination: TrainingData
+    m_LightProbeSampleCountMultiplier: 4
+  m_LightingDataAsset: {fileID: 0}
+  m_LightingSettings: {fileID: 0}
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+  m_BuildSettings:
+    serializedVersion: 3
+    agentTypeID: 0
+    agentRadius: 0.5
+    agentHeight: 2
+    agentSlope: 45
+    agentClimb: 0.4
+    ledgeDropHeight: 0
+    maxJumpAcrossDistance: 0
+    minRegionArea: 2
+    manualCellSize: 0
+    cellSize: 0.16666667
+    manualTileSize: 0
+    tileSize: 256
+    buildHeightMesh: 0
+    maxJobWorkers: 0
+    preserveTilesOutsideBounds: 0
+    debug:
+      m_Flags: 0
+  m_NavMeshData: {fileID: 0}
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Layer: 0
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.043137256, g: 0.06666667, b: 0.11764706, a: 0}
+  m_projectionMatrixMode: 1
+  m_GateFitMode: 2
+  m_FOVAxisMode: 0
+  m_Iso: 200
+  m_ShutterSpeed: 0.005
+  m_Aperture: 16
+  m_FocusDistance: 10
+  m_FocalLength: 50
+  m_BladeCount: 5
+  m_Curvature: {x: 2, y: 11}
+  m_BarrelClipping: 0.25
+  m_Anamorphism: 0
+  m_SensorSize: {x: 36, y: 24}
+  m_LensShift: {x: 0, y: 0}
+  m_NormalizedViewPortRect:
+    serializedVersion: 2
+    x: 0
+    y: 0
+    width: 1
+    height: 1
+  near clip plane: 0.3
+  far clip plane: 1000
+  field of view: 60
+  orthographic: 0
+  orthographic size: 5
+  m_Depth: -1
+  m_CullingMask:
+    serializedVersion: 2
+    m_Bits: 4294967295
+  m_RenderingPath: -1
+  m_TargetTexture: {fileID: 0}
+  m_TargetDisplay: 0
+  m_TargetEye: 3
+  m_HDR: 1
+  m_AllowMSAA: 1
+  m_AllowDynamicResolution: 0
+  m_ForceIntoRT: 0
+  m_OcclusionCulling: 1
+  m_StereoConvergence: 10
+  m_StereoSeparation: 0.022
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Layer: 0
+  m_Name: Toast Notifications Demo
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 0}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 21f5a6ca9d1243041bdf95fa2925ccf7, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ToastNotifications/ToastNotificationsDemo.unity.meta b/ToastNotifications/ToastNotificationsDemo.unity.meta
new file mode 100644
index 0000000..cdf86b7
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: c1e3eb7143234141b48d1a173fa469db
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/ToastNotifications/ToastNotificationsStyles.uss b/ToastNotifications/ToastNotificationsStyles.uss
new file mode 100644
index 0000000..e5106cb
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsStyles.uss
@@ -0,0 +1,132 @@
+.toastDemo__screen {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 48px;
+	padding-bottom: 48px;
+	background-color: rgba(9, 15, 27, 1);
+	position: relative;
+}
+
+.toastDemo__card {
+	width: 100%;
+	max-width: 580px;
+	padding-left: 28px;
+	padding-right: 28px;
+	padding-top: 34px;
+	padding-bottom: 32px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.08);
+	border-radius: 28px;
+}
+
+.toastDemo__eyebrow {
+	font-size: 13px;
+	color: rgba(132, 173, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 12px;
+}
+
+.toastDemo__headerTitle {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
+}
+
+.toastDemo__instruction {
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 22px;
+	white-space: normal;
+}
+
+/* Full-screen layer the notifications stack into. It sits above the card but is
+   non-interactive itself (picking ignored in the demo/binder) so the card's
+   "Add Toast" button stays clickable — only the toasts capture pointer input. */
+.toastDemo__overlay {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-start;
+	padding-top: 40px;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.toastDemo__container {
+	width: 100%;
+	max-width: 440px;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.toastDemo__bottomBar {
+	margin-top: 6px;
+	padding-top: 0;
+	align-items: center;
+}
+
+.toastDemo__addButton {
+	height: 52px;
+	align-self: stretch;
+}
+
+.toastDemo__toast {
+	flex-direction: row;
+	align-items: center;
+	border-top-left-radius: 14px;
+	border-top-right-radius: 14px;
+	border-bottom-left-radius: 14px;
+	border-bottom-right-radius: 14px;
+	padding-top: 14px;
+	padding-bottom: 14px;
+	padding-left: 16px;
+	padding-right: 12px;
+	margin-bottom: 10px;
+	overflow: hidden;
+}
+
+.toastDemo__accent {
+	width: 4px;
+	align-self: stretch;
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+	margin-right: 12px;
+	flex-shrink: 0;
+}
+
+.toastDemo__textBlock {
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.toastDemo__title {
+	font-size: 14px;
+	color: rgba(26, 26, 38, 1);
+	-unity-font-style: bold;
+}
+
+.toastDemo__subtitle {
+	font-size: 12px;
+	color: rgba(102, 102, 128, 1);
+	margin-top: 2px;
+	white-space: normal;
+}
+
+.toastDemo__dismiss {
+	font-size: 22px;
+	color: rgba(128, 128, 140, 0.8);
+	margin-left: 8px;
+	flex-shrink: 0;
+	-unity-text-align: middle-center;
+	width: 24px;
+}
diff --git a/ToastNotifications/ToastNotificationsStyles.uss.meta b/ToastNotifications/ToastNotificationsStyles.uss.meta
new file mode 100644
index 0000000..9058e36
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsStyles.uss.meta
@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: a7fdcb073ba24171897d0cfb76fdc10a
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
+  unsupportedSelectorAction: 0
diff --git a/ToastNotifications/ToastNotificationsUxmlBinder.cs b/ToastNotifications/ToastNotificationsUxmlBinder.cs
new file mode 100644
index 0000000..9617651
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlBinder.cs
@@ -0,0 +1,192 @@
+using System.Collections;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityEngine.UIElements.Experimental;
+using UnityUIToolkit.Extensions;
+
+namespace UnityUIToolkit.Extensions.Examples
+{
+    public class ToastNotificationsUxmlBinder : MonoBehaviour
+    {
+        private const int MaxToasts = 5;
+        private const int FadeDurationMs = 260;
+
+        private static readonly (string title, string subtitle)[] ToastTemplates =
+        {
+            ("Workout Complete", "You finished your 30-min run. Great job!"),
+            ("New Message", "Alex sent you a new message."),
+            ("Goal Reached", "You hit your daily step target of 10,000."),
+            ("Weekly Summary Ready", "Your progress report is available to view."),
+            ("Reminder", "Don't forget to log your meals today."),
+            ("Achievement Unlocked", "7-day streak — keep it up!"),
+            ("Sync Complete", "Your data has been synced across devices."),
+            ("Low Water Intake", "You've only had 2 of your 8 glasses today."),
+        };
+
+        private static readonly Color[] ToastColors =
+        {
+            new(0.96f, 0.95f, 1.00f, 1f),
+            new(0.95f, 1.00f, 0.97f, 1f),
+            new(1.00f, 0.97f, 0.93f, 1f),
+            new(0.93f, 0.97f, 1.00f, 1f),
+            new(1.00f, 0.95f, 0.95f, 1f),
+        };
+
+        private VisualElement toastContainer;
+        private int templateIndex;
+        private int colorIndex;
+        private readonly List<ToastData> activeToasts = new();
+
+        private sealed class ToastData
+        {
+            public VisualElement Root;
+            public ToastSwipeDismissManipulator Manipulator;
+            public bool IsDismissing;
+        }
+
+        private void Start()
+        {
+            UIDocument uiDocument = GetComponent<UIDocument>();
+            if (uiDocument == null)
+            {
+                Debug.LogError("ToastNotificationsUxmlBinder requires a UIDocument on the same GameObject.", this);
+                return;
+            }
+
+            VisualElement root = uiDocument.rootVisualElement;
+            root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
+
+            toastContainer = root.Q<VisualElement>("toast-container");
+            PillButton addButton = root.Q<PillButton>("add-button");
+            addButton.SetTextColor(Color.white);
+            addButton.Clicked += OnAddToastClicked;
+        }
+
+        private void OnAddToastClicked()
+        {
+            if (activeToasts.Count >= MaxToasts)
+            {
+                RemoveOldestToast();
+            }
+
+            SpawnToast();
+        }
+
+        private void SpawnToast()
+        {
+            var (title, subtitle) = ToastTemplates[templateIndex % ToastTemplates.Length];
+            templateIndex++;
+            var bgColor = ToastColors[colorIndex % ToastColors.Length];
+            colorIndex++;
+
+            var toast = new VisualElement();
+            toast.AddToClassList("toastDemo__toast");
+            toast.style.backgroundColor = bgColor;
+            toastContainer.Add(toast);
+
+            var accentBar = new VisualElement();
+            accentBar.AddToClassList("toastDemo__accent");
+            Color.RGBToHSV(bgColor, out var h, out _, out _);
+            accentBar.style.backgroundColor = Color.HSVToRGB((h + 0.5f) % 1f, 0.65f, 0.65f);
+            toast.Add(accentBar);
+
+            var textBlock = new VisualElement();
+            textBlock.AddToClassList("toastDemo__textBlock");
+            toast.Add(textBlock);
+
+            var titleLabel = new Label(title);
+            titleLabel.AddToClassList("toastDemo__title");
+            textBlock.Add(titleLabel);
+
+            var subtitleLabel = new Label(subtitle);
+            subtitleLabel.AddToClassList("toastDemo__subtitle");
+            textBlock.Add(subtitleLabel);
+
+            var dismissIcon = new Label("×");
+            dismissIcon.AddToClassList("toastDemo__dismiss");
+            dismissIcon.pickingMode = PickingMode.Ignore;
+            toast.Add(dismissIcon);
+
+            toast.style.translate = new Translate(0, 40, 0);
+            toast.style.opacity = 0f;
+            toast.schedule.Execute(() => AnimateToastEntrance(toast)).StartingIn(10);
+
+            var toastData = new ToastData { Root = toast };
+            var manipulator = new ToastSwipeDismissManipulator(
+                canInteract: () => !toastData.IsDismissing,
+                canStartAtPosition: _ => true,
+                getHorizontalDismissTravelDistance: () => toast.resolvedStyle.width > 0 ? toast.resolvedStyle.width + 32f : 400f,
+                getVerticalDismissTravelDistance: () => toast.resolvedStyle.height > 0 ? toast.resolvedStyle.height + 16f : 80f,
+                getOffsetTarget: () => toast,
+                onInteractionStarted: null,
+                onInteractionAborted: null,
+                onTapped: () => OnToastTapped(toastData),
+                onDismissed: () => OnToastDismissedBySwipe(toastData));
+
+            toast.AddManipulator(manipulator);
+            toastData.Manipulator = manipulator;
+            activeToasts.Add(toastData);
+        }
+
+        private static void AnimateToastEntrance(VisualElement toast)
+        {
+            toast.style.transitionProperty = new StyleList<StylePropertyName>(new List<StylePropertyName> { new("opacity"), new("translate") });
+            toast.style.transitionDuration = new StyleList<TimeValue>(new List<TimeValue> { new(300, TimeUnit.Millisecond), new(300, TimeUnit.Millisecond) });
+            toast.style.transitionTimingFunction = new StyleList<EasingFunction>(new List<EasingFunction> { new(EasingMode.EaseOut), new(EasingMode.EaseOut) });
+            toast.style.opacity = 1f;
+            toast.style.translate = new Translate(0, 0, 0);
+        }
+
+        private void OnToastTapped(ToastData toastData)
+        {
+            if (toastData.IsDismissing) return;
+            toastData.IsDismissing = true;
+            StartCoroutine(FadeOutAndRemoveToast(toastData));
+        }
+
+        private IEnumerator FadeOutAndRemoveToast(ToastData toastData)
+        {
+            var toast = toastData.Root;
+            toast.style.transitionProperty = new StyleList<StylePropertyName>(new List<StylePropertyName> { new("opacity") });
+            toast.style.transitionDuration = new StyleList<TimeValue>(new List<TimeValue> { new(FadeDurationMs, TimeUnit.Millisecond) });
+            toast.style.transitionTimingFunction = new StyleList<EasingFunction>(new List<EasingFunction> { new(EasingMode.EaseOut) });
+            toast.style.opacity = 0f;
+
+            yield return new WaitForSeconds(FadeDurationMs / 1000f + 0.02f);
+            RemoveToastFromHierarchy(toastData);
+        }
+
+        private void OnToastDismissedBySwipe(ToastData toastData)
+        {
+            if (toastData.IsDismissing) return;
+            toastData.IsDismissing = true;
+
+            var toast = toastData.Root;
+            var anim = toast.experimental.animation.Start(1f, 0f, FadeDurationMs, (_, value) =>
+            {
+                toast.style.opacity = value;
+            });
+            anim.KeepAlive();
+            anim.onAnimationCompleted += () => RemoveToastFromHierarchy(toastData);
+        }
+
+        private void RemoveToastFromHierarchy(ToastData toastData)
+        {
+            activeToasts.Remove(toastData);
+            if (toastData.Root.parent != null)
+            {
+                toastData.Root.RemoveFromHierarchy();
+            }
+        }
+
+        private void RemoveOldestToast()
+        {
+            if (activeToasts.Count == 0) return;
+            var oldest = activeToasts[0];
+            oldest.IsDismissing = true;
+            oldest.Manipulator?.ResetState();
+            RemoveToastFromHierarchy(oldest);
+        }
+    }
+}
diff --git a/ToastNotifications/ToastNotificationsUxmlBinder.cs.meta b/ToastNotifications/ToastNotificationsUxmlBinder.cs.meta
new file mode 100644
index 0000000..8346999
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlBinder.cs.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: d1010000000000000000000000000001
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ToastNotifications/ToastNotificationsUxmlDemo.unity b/ToastNotifications/ToastNotificationsUxmlDemo.unity
new file mode 100644
index 0000000..8fe852a
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlDemo.unity
@@ -0,0 +1,106 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!29 &1
+OcclusionCullingSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 2
+  m_OcclusionCullingData: {fileID: 0}
+--- !u!104 &2
+RenderSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 10
+  m_Fog: 0
+--- !u!157 &3
+LightmapSettings:
+  m_ObjectHideFlags: 0
+  serializedVersion: 13
+--- !u!196 &4
+NavMeshSettings:
+  serializedVersion: 2
+  m_ObjectHideFlags: 0
+--- !u!1 &1000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 1003}
+  - component: {fileID: 1001}
+  - component: {fileID: 1002}
+  m_Name: Main Camera
+  m_TagString: MainCamera
+  m_IsActive: 1
+--- !u!20 &1001
+Camera:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+  serializedVersion: 2
+  m_ClearFlags: 2
+  m_BackGroundColor: {r: 0.035, g: 0.059, b: 0.106, a: 1}
+  orthographic: 1
+  orthographic size: 5
+  m_Depth: -1
+--- !u!81 &1002
+AudioListener:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  m_Enabled: 1
+--- !u!4 &1003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 1000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: -10}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1 &2000
+GameObject:
+  m_ObjectHideFlags: 0
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2003}
+  - component: {fileID: 2001}
+  - component: {fileID: 2002}
+  m_Name: Toast Notifications (UXML)
+  m_IsActive: 1
+--- !u!114 &2001
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_PanelSettings: {fileID: 11400000, guid: 4b8f1c0c4a814fd59bf309a69520e29b, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: d1020000000000000000000000000002, type: 3}
+  m_SortingOrder: 0
+  m_Position: 0
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+  m_PivotReferenceSize: 0
+  m_Pivot: 0
+  m_WorldSpaceCollider: {fileID: 0}
+--- !u!114 &2002
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  m_Enabled: 1
+  m_Script: {fileID: 11500000, guid: d1010000000000000000000000000001, type: 3}
+--- !u!4 &2003
+Transform:
+  m_ObjectHideFlags: 0
+  m_GameObject: {fileID: 2000}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_Children: []
+  m_Father: {fileID: 0}
+--- !u!1660057539 &9223372036854775807
+SceneRoots:
+  m_ObjectHideFlags: 0
+  m_Roots:
+  - {fileID: 1003}
+  - {fileID: 2003}
diff --git a/ToastNotifications/ToastNotificationsUxmlDemo.unity.meta b/ToastNotifications/ToastNotificationsUxmlDemo.unity.meta
new file mode 100644
index 0000000..43fd06c
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlDemo.unity.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: d1030000000000000000000000000003
+DefaultImporter:
+  externalObjects: {}
+  userData:
+  assetBundleName:
+  assetBundleVariant:
diff --git a/ToastNotifications/ToastNotificationsUxmlView.uxml b/ToastNotifications/ToastNotificationsUxmlView.uxml
new file mode 100644
index 0000000..1f27be8
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlView.uxml
@@ -0,0 +1,20 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <Style src="project://database/Packages/com.unity.uitoolkitextensions/Runtime/Styles/UIToolkitExtensionsControlStyles.uss" />
+    <Style src="ToastNotificationsStyles.uss" />
+
+    <ui:VisualElement class="toastDemo__screen">
+        <ui:VisualElement class="toastDemo__card">
+            <ui:Label text="Toolkit Sample" class="toastDemo__eyebrow" />
+            <ui:Label text="Toast Notifications" class="toastDemo__headerTitle" />
+            <ui:Label text="Add sample notifications below, dismiss them with a swipe, or tap a toast to clear it instantly." class="toastDemo__instruction" />
+
+            <ui:VisualElement class="toastDemo__bottomBar">
+                <ext:PillButton name="add-button" class="toastDemo__addButton" text="Add Toast" inner-color="#4A90E2" outer-color="#7B68EE" />
+            </ui:VisualElement>
+        </ui:VisualElement>
+
+        <ui:VisualElement name="toast-overlay" class="toastDemo__overlay" picking-mode="Ignore">
+            <ui:VisualElement name="toast-container" class="toastDemo__container" picking-mode="Ignore" />
+        </ui:VisualElement>
+    </ui:VisualElement>
+</ui:UXML>
diff --git a/ToastNotifications/ToastNotificationsUxmlView.uxml.meta b/ToastNotifications/ToastNotificationsUxmlView.uxml.meta
new file mode 100644
index 0000000..483c3d4
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: d1020000000000000000000000000002
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData:
+  assetBundleName:
+  assetBundleVariant:
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}