From e868aee0aeefca3d2f0ebce94780b0ddb55cbfa7 Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Tue, 23 Jun 2026 10:27:35 +0100
Subject: [PATCH 1/6] Stable

---
 ContentExplorer.meta                          |   8 +
 ContentExplorer/ContentExplorerDemo.cs        | 230 +++++++++++
 ContentExplorer/ContentExplorerDemo.cs.meta   |   2 +
 ContentExplorer/ContentExplorerDemo.unity     | 287 ++++++++++++++
 .../ContentExplorerDemo.unity.meta            |   7 +
 ContentExplorer/ContentExplorerStyles.uss     | 101 +++++
 .../ContentExplorerStyles.uss.meta            |  12 +
 ContentExplorer/ContentExplorerUxmlBinder.cs  |  88 +++++
 .../ContentExplorerUxmlBinder.cs.meta         |  11 +
 ContentExplorer/ContentExplorerUxmlDemo.unity | 287 ++++++++++++++
 .../ContentExplorerUxmlDemo.unity.meta        |   7 +
 ContentExplorer/ContentExplorerUxmlView.uxml  |  48 +++
 .../ContentExplorerUxmlView.uxml.meta         |  10 +
 DropDownPhoneEntry.meta                       |   8 +
 DropDownPhoneEntry/DropDownPhoneEntryDemo.cs  | 191 +++++++++
 .../DropDownPhoneEntryDemo.cs.meta            |   2 +
 .../DropDownPhoneEntryDemo.unity              | 287 ++++++++++++++
 .../DropDownPhoneEntryDemo.unity.meta         |   7 +
 .../DropDownPhoneEntryStyles.uss              | 168 ++++++++
 .../DropDownPhoneEntryStyles.uss.meta         |  12 +
 .../DropDownPhoneEntryUxmlBinder.cs           | 163 ++++++++
 .../DropDownPhoneEntryUxmlBinder.cs.meta      |  11 +
 .../DropDownPhoneEntryUxmlDemo.unity          | 287 ++++++++++++++
 .../DropDownPhoneEntryUxmlDemo.unity.meta     |   7 +
 .../DropDownPhoneEntryUxmlView.uxml           |  30 ++
 .../DropDownPhoneEntryUxmlView.uxml.meta      |  10 +
 ImageCropOverlay.meta                         |   8 +
 ImageCropOverlay/ImageCropOverlayDemo.cs      | 254 ++++++++++++
 ImageCropOverlay/ImageCropOverlayDemo.cs.meta |   2 +
 ImageCropOverlay/ImageCropOverlayDemo.unity   | 287 ++++++++++++++
 .../ImageCropOverlayDemo.unity.meta           |   7 +
 .../ImageCropOverlayDemoStyles.uss            | 122 ++++++
 .../ImageCropOverlayDemoStyles.uss.meta       |  12 +
 LICENSE.meta                                  |   7 +
 ProfileEditor.meta                            |   8 +
 ProfileEditor/ProfileEditorDemo.cs            | 248 ++++++++++++
 ProfileEditor/ProfileEditorDemo.cs.meta       |   2 +
 ProfileEditor/ProfileEditorDemo.unity         | 287 ++++++++++++++
 ProfileEditor/ProfileEditorDemo.unity.meta    |   7 +
 ProfileEditor/ProfileEditorStyles.uss         | 182 +++++++++
 ProfileEditor/ProfileEditorStyles.uss.meta    |  12 +
 README.md.meta                                |   7 +
 RegistrationForm.meta                         |   8 +
 RegistrationForm/RegistrationFormDemo.cs      | 285 ++++++++++++++
 RegistrationForm/RegistrationFormDemo.cs.meta |   2 +
 RegistrationForm/RegistrationFormDemo.unity   | 287 ++++++++++++++
 .../RegistrationFormDemo.unity.meta           |   7 +
 RegistrationForm/RegistrationFormStyles.uss   | 122 ++++++
 .../RegistrationFormStyles.uss.meta           |  12 +
 .../RegistrationFormUxmlBinder.cs             | 188 +++++++++
 .../RegistrationFormUxmlBinder.cs.meta        |  11 +
 .../RegistrationFormUxmlDemo.unity            | 287 ++++++++++++++
 .../RegistrationFormUxmlDemo.unity.meta       |   7 +
 .../RegistrationFormUxmlView.uxml             |  35 ++
 .../RegistrationFormUxmlView.uxml.meta        |  10 +
 ScrollSnapAndDots.meta                        |   8 +
 ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs    | 213 +++++++++++
 .../ScrollSnapAndDotsDemo.cs.meta             |   2 +
 ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity | 287 ++++++++++++++
 .../ScrollSnapAndDotsDemo.unity.meta          |   7 +
 ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss | 101 +++++
 .../ScrollSnapAndDotsStyles.uss.meta          |  12 +
 ScrollSnapSplit.meta                          |   8 +
 ScrollSnapSplit/ScrollSnapSplitCSharpView.cs  | 141 +++++++
 .../ScrollSnapSplitCSharpView.cs.meta         |  11 +
 ScrollSnapSplit/ScrollSnapSplitDemo.unity     | 358 +++++++++++++++++
 .../ScrollSnapSplitDemo.unity.meta            |   7 +
 ScrollSnapSplit/ScrollSnapSplitLayout.cs      |  37 ++
 ScrollSnapSplit/ScrollSnapSplitLayout.cs.meta |  11 +
 ScrollSnapSplit/ScrollSnapSplitUxmlView.cs    |  74 ++++
 .../ScrollSnapSplitUxmlView.cs.meta           |  11 +
 ScrollSnapSplit/ScrollSnapSplitView.uxml      |  47 +++
 ScrollSnapSplit/ScrollSnapSplitView.uxml.meta |  10 +
 Shared.meta                                   |   8 +
 Shared/SampleStyles.uss                       | 102 +++++
 Shared/SampleStyles.uss.meta                  |  12 +
 ...oolkitExtensionsExamplePanelSettings.asset |  52 +++
 ...tExtensionsExamplePanelSettings.asset.meta |   8 +
 Shared/UIToolkitExtensionsExamplesTheme.tss   |  11 +
 .../UIToolkitExtensionsExamplesTheme.tss.meta |  11 +
 StepWizard.meta                               |   8 +
 StepWizard/StepWizardDemo.cs                  | 345 +++++++++++++++++
 StepWizard/StepWizardDemo.cs.meta             |   2 +
 StepWizard/StepWizardDemo.unity               | 287 ++++++++++++++
 StepWizard/StepWizardDemo.unity.meta          |   7 +
 StepWizard/StepWizardStyles.uss               | 237 ++++++++++++
 StepWizard/StepWizardStyles.uss.meta          |  12 +
 StepWizard/StepWizardUxmlBinder.cs            | 128 +++++++
 StepWizard/StepWizardUxmlBinder.cs.meta       |  11 +
 StepWizard/StepWizardUxmlDemo.unity           | 287 ++++++++++++++
 StepWizard/StepWizardUxmlDemo.unity.meta      |   7 +
 StepWizard/StepWizardUxmlView.uxml            | 122 ++++++
 StepWizard/StepWizardUxmlView.uxml.meta       |  10 +
 ToastNotifications.meta                       |   8 +
 ToastNotifications/ToastNotificationsDemo.cs  | 361 ++++++++++++++++++
 .../ToastNotificationsDemo.cs.meta            |   2 +
 .../ToastNotificationsDemo.unity              | 287 ++++++++++++++
 .../ToastNotificationsDemo.unity.meta         |   7 +
 .../ToastNotificationsStyles.uss              | 111 ++++++
 .../ToastNotificationsStyles.uss.meta         |  12 +
 100 files changed, 8794 insertions(+)
 create mode 100644 ContentExplorer.meta
 create mode 100644 ContentExplorer/ContentExplorerDemo.cs
 create mode 100644 ContentExplorer/ContentExplorerDemo.cs.meta
 create mode 100644 ContentExplorer/ContentExplorerDemo.unity
 create mode 100644 ContentExplorer/ContentExplorerDemo.unity.meta
 create mode 100644 ContentExplorer/ContentExplorerStyles.uss
 create mode 100644 ContentExplorer/ContentExplorerStyles.uss.meta
 create mode 100644 ContentExplorer/ContentExplorerUxmlBinder.cs
 create mode 100644 ContentExplorer/ContentExplorerUxmlBinder.cs.meta
 create mode 100644 ContentExplorer/ContentExplorerUxmlDemo.unity
 create mode 100644 ContentExplorer/ContentExplorerUxmlDemo.unity.meta
 create mode 100644 ContentExplorer/ContentExplorerUxmlView.uxml
 create mode 100644 ContentExplorer/ContentExplorerUxmlView.uxml.meta
 create mode 100644 DropDownPhoneEntry.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryDemo.cs.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryDemo.unity
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryDemo.unity.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryStyles.uss.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlDemo.unity.meta
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml
 create mode 100644 DropDownPhoneEntry/DropDownPhoneEntryUxmlView.uxml.meta
 create mode 100644 ImageCropOverlay.meta
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemo.cs
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemo.cs.meta
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemo.unity
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemo.unity.meta
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemoStyles.uss
 create mode 100644 ImageCropOverlay/ImageCropOverlayDemoStyles.uss.meta
 create mode 100644 LICENSE.meta
 create mode 100644 ProfileEditor.meta
 create mode 100644 ProfileEditor/ProfileEditorDemo.cs
 create mode 100644 ProfileEditor/ProfileEditorDemo.cs.meta
 create mode 100644 ProfileEditor/ProfileEditorDemo.unity
 create mode 100644 ProfileEditor/ProfileEditorDemo.unity.meta
 create mode 100644 ProfileEditor/ProfileEditorStyles.uss
 create mode 100644 ProfileEditor/ProfileEditorStyles.uss.meta
 create mode 100644 README.md.meta
 create mode 100644 RegistrationForm.meta
 create mode 100644 RegistrationForm/RegistrationFormDemo.cs
 create mode 100644 RegistrationForm/RegistrationFormDemo.cs.meta
 create mode 100644 RegistrationForm/RegistrationFormDemo.unity
 create mode 100644 RegistrationForm/RegistrationFormDemo.unity.meta
 create mode 100644 RegistrationForm/RegistrationFormStyles.uss
 create mode 100644 RegistrationForm/RegistrationFormStyles.uss.meta
 create mode 100644 RegistrationForm/RegistrationFormUxmlBinder.cs
 create mode 100644 RegistrationForm/RegistrationFormUxmlBinder.cs.meta
 create mode 100644 RegistrationForm/RegistrationFormUxmlDemo.unity
 create mode 100644 RegistrationForm/RegistrationFormUxmlDemo.unity.meta
 create mode 100644 RegistrationForm/RegistrationFormUxmlView.uxml
 create mode 100644 RegistrationForm/RegistrationFormUxmlView.uxml.meta
 create mode 100644 ScrollSnapAndDots.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsDemo.unity.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss.meta
 create mode 100644 ScrollSnapSplit.meta
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitCSharpView.cs.meta
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitDemo.unity
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitDemo.unity.meta
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitLayout.cs
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitLayout.cs.meta
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitUxmlView.cs.meta
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitView.uxml
 create mode 100644 ScrollSnapSplit/ScrollSnapSplitView.uxml.meta
 create mode 100644 Shared.meta
 create mode 100644 Shared/SampleStyles.uss
 create mode 100644 Shared/SampleStyles.uss.meta
 create mode 100644 Shared/UIToolkitExtensionsExamplePanelSettings.asset
 create mode 100644 Shared/UIToolkitExtensionsExamplePanelSettings.asset.meta
 create mode 100644 Shared/UIToolkitExtensionsExamplesTheme.tss
 create mode 100644 Shared/UIToolkitExtensionsExamplesTheme.tss.meta
 create mode 100644 StepWizard.meta
 create mode 100644 StepWizard/StepWizardDemo.cs
 create mode 100644 StepWizard/StepWizardDemo.cs.meta
 create mode 100644 StepWizard/StepWizardDemo.unity
 create mode 100644 StepWizard/StepWizardDemo.unity.meta
 create mode 100644 StepWizard/StepWizardStyles.uss
 create mode 100644 StepWizard/StepWizardStyles.uss.meta
 create mode 100644 StepWizard/StepWizardUxmlBinder.cs
 create mode 100644 StepWizard/StepWizardUxmlBinder.cs.meta
 create mode 100644 StepWizard/StepWizardUxmlDemo.unity
 create mode 100644 StepWizard/StepWizardUxmlDemo.unity.meta
 create mode 100644 StepWizard/StepWizardUxmlView.uxml
 create mode 100644 StepWizard/StepWizardUxmlView.uxml.meta
 create mode 100644 ToastNotifications.meta
 create mode 100644 ToastNotifications/ToastNotificationsDemo.cs
 create mode 100644 ToastNotifications/ToastNotificationsDemo.cs.meta
 create mode 100644 ToastNotifications/ToastNotificationsDemo.unity
 create mode 100644 ToastNotifications/ToastNotificationsDemo.unity.meta
 create mode 100644 ToastNotifications/ToastNotificationsStyles.uss
 create mode 100644 ToastNotifications/ToastNotificationsStyles.uss.meta

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..ecbce6c
--- /dev/null
+++ b/ContentExplorer/ContentExplorerDemo.cs
@@ -0,0 +1,230 @@
+// 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
+    {
+        // ── Section data ──────────────────────────────────────────────────────────
+        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",
+                }
+            ),
+        };
+
+        // ── Runtime references ────────────────────────────────────────────────────
+        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)
+        {
+            // ── Screen wrapper ────────────────────────────────────────────────────
+            // position: relative is needed for the absolute loading overlay
+            var screen = UIToolkitExtensions.CreateVisualElement(root, "contentExplorer__screen");
+
+            // ── Header ────────────────────────────────────────────────────────────
+            var header = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__header");
+
+            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "contentExplorer__title");
+            titleLabel.text = "Content Explorer";
+
+            var subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "contentExplorer__subtitle");
+            subtitleLabel.text = "Tap a section to expand it, then tap an item to select it.";
+
+            // ── Scrollable content ────────────────────────────────────────────────
+            contentScroll = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__contentScroll");
+            // Start invisible — revealed after load finishes (runtime state)
+            contentScroll.style.opacity = 0f;
+
+            // Build collapsible sections
+            foreach (var (sectionTitle, items) in SectionData)
+            {
+                BuildSection(contentScroll, sectionTitle, items);
+            }
+
+            // ── Status bar ────────────────────────────────────────────────────────
+            var statusBar = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__statusBar");
+
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(statusBar, "contentExplorer__statusLabel");
+            statusLabel.text = "Loading content…";
+
+            // ── Loading overlay (absolute, full-screen, on top) ───────────────────
+            BuildLoadingOverlay(screen);
+
+            // ── Kick off async load simulation ────────────────────────────────────
+            StartCoroutine(SimulateAsyncLoad());
+        }
+
+        // ── Section builder ───────────────────────────────────────────────────────
+
+        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)
+            {
+                // Capture loop variable for the lambda
+                var capturedText = itemText;
+
+                var btn = new IconLabelButton();
+                btn.Text = capturedText;
+                btn.AddToClassList("contentExplorer__itemButton");
+                btn.Clicked += () => OnItemClicked(capturedText);
+
+                section.AddBodyContent(btn);
+            }
+
+            parent.Add(section);
+        }
+
+        // ── Loading overlay ───────────────────────────────────────────────────────
+
+        private void BuildLoadingOverlay(VisualElement screen)
+        {
+            // Semi-transparent backdrop positioned absolutely over the full screen
+            var overlay = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__loadingOverlay");
+
+            // LoadingIcon — centered inside the overlay.
+            // Uses ProceduralTextureUtility to generate a runtime spinner arc texture,
+            // demonstrating the utility. The package USS default (LoadingSpinner.svg) would
+            // also work if SetIcon is not called.
+            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…";
+
+            // Start the spinner — block pointer events while loading
+            loadingIcon.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
+        }
+
+        // ── Async load simulation ─────────────────────────────────────────────────
+
+        private IEnumerator SimulateAsyncLoad()
+        {
+            yield return new WaitForSeconds(1.5f);
+
+            // Stop and hide the loading icon
+            loadingIcon.StopLoading();
+
+            // Fade the loading overlay's parent — hide the overlay's parent visually
+            // by setting its display to none after the spinner fades
+            var overlay = loadingIcon.parent;
+            if (overlay != null)
+            {
+                overlay.style.display = DisplayStyle.None;
+            }
+
+            // Fade in the content scroll area (runtime-driven transition)
+            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;
+
+            // Update status label
+            statusLabel.text = "Tap any item to select it.";
+        }
+
+        // ── Event handlers ────────────────────────────────────────────────────────
+
+        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..b02c23c
--- /dev/null
+++ b/ContentExplorer/ContentExplorerStyles.uss
@@ -0,0 +1,101 @@
+/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
+
+.contentExplorer__screen {
+	flex-grow: 1;
+	flex-direction: column;
+	position: relative;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.contentExplorer__header {
+	padding-top: 48px;
+	padding-bottom: 16px;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.contentExplorer__title {
+	font-size: 24px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+}
+
+.contentExplorer__subtitle {
+	font-size: 13px;
+	color: rgba(173, 183, 210, 0.85);
+	margin-top: 4px;
+	white-space: normal;
+}
+
+.contentExplorer__contentScroll {
+	flex-grow: 1;
+	flex-direction: column;
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.contentExplorer__section {
+	margin-bottom: 10px;
+	overflow: hidden;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
+}
+
+/* Keep the collapsible header/title readable on the dark section card. */
+.contentExplorer__section .collapsibleSection__title {
+	color: rgba(235, 238, 245, 1);
+}
+
+.contentExplorer__itemButton {
+	margin-top: 2px;
+	margin-bottom: 2px;
+}
+
+/* Keep the icon-label rows readable on the dark section card. */
+.contentExplorer__itemButton .iconLabelButton__label {
+	color: rgba(210, 216, 230, 1);
+}
+
+.contentExplorer__statusBar {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 12px;
+	padding-bottom: 24px;
+	background-color: rgba(20, 28, 44, 0.94);
+	border-top-width: 1px;
+	border-top-color: rgba(255, 255, 255, 0.08);
+}
+
+.contentExplorer__statusLabel {
+	font-size: 13px;
+	color: rgba(173, 183, 210, 0.9);
+	-unity-text-align: middle-center;
+}
+
+.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.92);
+}
+
+.contentExplorer__loadingIcon {
+	width: 64px;
+	height: 64px;
+}
+
+.contentExplorer__loadingLabel {
+	font-size: 14px;
+	color: rgba(173, 183, 210, 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..433ee8e
--- /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");
+
+            // Wire every authored row's click to the status label.
+            root.Query<IconLabelButton>().ForEach(button =>
+            {
+                button.Clicked += () => OnItemClicked(button.Text);
+            });
+
+            // Block interaction and spin while "loading", then reveal content.
+            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..a9b71d0
--- /dev/null
+++ b/ContentExplorer/ContentExplorerUxmlView.uxml
@@ -0,0 +1,48 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <!--
+      UXML version of the ContentExplorer demo. The CollapsibleSection control routes its
+      authored children into the collapsible body (contentContainer override), so the
+      IconLabelButton rows below sit inside each section. ContentExplorerUxmlBinder.cs wires
+      the loading sequence and item-selection behaviour.
+    -->
+    <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="header" class="contentExplorer__header">
+            <ui:Label text="Content Explorer" class="contentExplorer__title" />
+            <ui:Label text="Tap a section to expand it, then tap an item to select it." class="contentExplorer__subtitle" />
+        </ui:VisualElement>
+
+        <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:VisualElement name="status-bar" class="contentExplorer__statusBar">
+            <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..29c6474
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
@@ -0,0 +1,191 @@
+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..21b918f
--- /dev/null
+++ b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
@@ -0,0 +1,168 @@
+.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;
+	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
+}
+
+.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;
+	line-height: 22px;
+	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;
+	box-shadow: none;
+}
+
+.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;
+	line-height: 20px;
+	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;
+	line-height: 18px;
+	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..c72f70f
--- /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;
+
+            // Robust dark backdrop even if the stylesheet fails to resolve.
+            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;
+            }
+
+            // Items are declared in UXML; just pick a sensible default and subscribe.
+            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..9fff7d8
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemo.cs
@@ -0,0 +1,254 @@
+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.unityBackgroundScaleMode = ScaleMode.ScaleAndCrop;
+
+            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..f069184
--- /dev/null
+++ b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
@@ -0,0 +1,122 @@
+.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;
+	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
+}
+
+.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;
+	line-height: 22px;
+	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;
+	line-height: 18px;
+	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/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/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..205224f
--- /dev/null
+++ b/ProfileEditor/ProfileEditorDemo.cs
@@ -0,0 +1,248 @@
+// 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.";
+
+            // ── Avatar row ────────────────────────────────────────────────────────
+            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.";
+
+            // ── Sample image + B&W toggle ─────────────────────────────────────────
+            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;
+
+            // ── Theme color group ─────────────────────────────────────────────────
+            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;
+
+            // ColorToggleButton tints a background image; the package ships none, so supply a
+            // white circle for each generated swatch to tint.
+            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.";
+
+            // Preselect the first theme color so the swatch starts populated.
+            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);
+            }
+        }
+    }
+}
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..3a67edc
--- /dev/null
+++ b/ProfileEditor/ProfileEditorStyles.uss
@@ -0,0 +1,182 @@
+.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;
+	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
+}
+
+.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;
+	line-height: 22px;
+	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;
+	line-height: 20px;
+	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;
+	line-height: 18px;
+	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/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..f7bd37f
--- /dev/null
+++ b/RegistrationForm/RegistrationFormDemo.cs
@@ -0,0 +1,285 @@
+// Examples~/RegistrationForm/RegistrationFormDemo.cs
+// Demonstrates: PillInputField, RoundedInputField, PillButton, PillSelector,
+//               VisualElementShakeUtility (validation shake)
+//
+// Scene setup:
+//   A companion scene already wires this component to a GameObject that carries a
+//   UIDocument. The demo resolves that UIDocument via GetComponent<UIDocument>()
+//   on the same GameObject, so no manual assignment is required.
+//   Press Play — fill in the form and tap "Create Account".
+//   Invalid fields shake and highlight. Valid submission shows a success screen.
+
+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
+    {
+        // ── Category options ──────────────────────────────────────────────────────
+        private static readonly string[] CategoryOptions =
+        {
+            "Fitness",
+            "Nutrition",
+            "Wellness",
+            "Mindfulness",
+        };
+
+        private int currentCategoryIndex = 0;
+
+        // ── Runtime field references ───────────────────────────────────────────────
+        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)
+        {
+            // Full-screen scroll container
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "registrationForm__screen");
+
+            // ── Form container ────────────────────────────────────────────────────
+            formContainer = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__formContainer");
+
+            // Title
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__title");
+            titleLabel.text = "Create Account";
+
+            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__subtitle");
+            subtitleLabel.text = "Join us today — it only takes a moment.";
+
+            // ── Full Name — PillInputField ─────────────────────────────────────────
+            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);
+
+            // ── Email — PillInputField ────────────────────────────────────────────
+            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);
+
+            // ── Password — PillInputField (password mode) ─────────────────────────
+            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);
+
+            // ── Bio — RoundedInputField (multiline) ───────────────────────────────
+            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.SetBackgroundColor(Color.white);
+            bioField.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            bioField.SetPlaceholderColor(new Color(0.65f, 0.65f, 0.7f, 1f));
+            bioField.SetFontSize(14f);
+            bioField.AddToClassList("registrationForm__bioField");
+            formContainer.Add(bioField);
+
+            // ── Category — PillSelector ───────────────────────────────────────────
+            categorySelector = new PillSelector();
+            categorySelector.Label = "Category";
+            categorySelector.Value = CategoryOptions[currentCategoryIndex];
+            categorySelector.AddToClassList("registrationForm__categorySelector");
+            categorySelector.Clicked += OnCategorySelectorClicked;
+            formContainer.Add(categorySelector);
+
+            // ── Submit button — PillButton ────────────────────────────────────────
+            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);
+
+            // ── Success container (hidden until form submitted) ────────────────────
+            BuildSuccessContainer(screen);
+        }
+
+        // ── Success screen ─────────────────────────────────────────────────────────
+        private void BuildSuccessContainer(VisualElement screen)
+        {
+            successContainer = UIToolkitExtensions.CreateVisualElement(screen, "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.";
+        }
+
+        // ── Helpers ───────────────────────────────────────────────────────────────
+
+        /// <summary>Apply consistent control-API styles to a PillInputField.</summary>
+        private static void ApplyPillInputStyle(PillInputField field)
+        {
+            field.SetBackgroundColor(Color.white);
+            field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            field.SetFontSize(15f);
+        }
+
+        // ── Event handlers ────────────────────────────────────────────────────────
+
+        private void OnCategorySelectorClicked()
+        {
+            // Advance through options in a cycle — simulates a picker result
+            currentCategoryIndex = (currentCategoryIndex + 1) % CategoryOptions.Length;
+            categorySelector.Value = CategoryOptions[currentCategoryIndex];
+        }
+
+        private void OnSubmitClicked()
+        {
+            if (!ValidateForm())
+            {
+                // Validation failed — individual field shakes were applied inside ValidateForm
+                return;
+            }
+
+            // All valid — transition to success
+            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;
+
+            // Full Name — must not be empty
+            if (string.IsNullOrWhiteSpace(nameField.Value))
+            {
+                VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                nameField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                nameField.SetBackgroundColor(Color.white);
+            }
+
+            // Email — must contain '@'
+            if (!emailField.Value.Contains("@"))
+            {
+                VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                emailField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                emailField.SetBackgroundColor(Color.white);
+            }
+
+            // Password — minimum 6 characters
+            if (passwordField.Value.Length < 6)
+            {
+                VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                passwordField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                passwordField.SetBackgroundColor(Color.white);
+            }
+
+            return isValid;
+        }
+
+        /// <summary>
+        /// Fades the form out, waits briefly, then reveals the success message.
+        /// </summary>
+        private IEnumerator ShowSuccessTransition()
+        {
+            // Animate form opacity to 0 via inline style transitions
+            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;
+
+            // Fade success container in
+            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) });
+
+            // Force a frame so the initial opacity=0 is applied before we set it to 1
+            yield return null;
+
+            successContainer.style.opacity = 1f;
+        }
+    }
+}
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..276c822
--- /dev/null
+++ b/RegistrationForm/RegistrationFormStyles.uss
@@ -0,0 +1,122 @@
+/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
+
+.registrationForm__screen {
+	flex-grow: 1;
+	flex-direction: column;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.registrationForm__formContainer {
+	flex-grow: 1;
+	flex-direction: column;
+	padding-left: 24px;
+	padding-right: 24px;
+	padding-top: 48px;
+	padding-bottom: 32px;
+}
+
+.registrationForm__title {
+	font-size: 28px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 8px;
+}
+
+.registrationForm__subtitle {
+	font-size: 14px;
+	color: rgba(173, 183, 210, 0.85);
+	margin-bottom: 32px;
+}
+
+.registrationForm__nameField {
+	margin-bottom: 16px;
+	border-top-left-radius: 24px;
+	border-top-right-radius: 24px;
+	border-bottom-left-radius: 24px;
+	border-bottom-right-radius: 24px;
+}
+
+.registrationForm__emailField {
+	margin-bottom: 16px;
+	border-top-left-radius: 24px;
+	border-top-right-radius: 24px;
+	border-bottom-left-radius: 24px;
+	border-bottom-right-radius: 24px;
+}
+
+.registrationForm__passwordField {
+	margin-bottom: 16px;
+	border-top-left-radius: 24px;
+	border-top-right-radius: 24px;
+	border-bottom-left-radius: 24px;
+	border-bottom-right-radius: 24px;
+}
+
+.registrationForm__sectionLabel {
+	font-size: 12px;
+	color: rgba(132, 173, 255, 0.9);
+	-unity-font-style: bold;
+	margin-bottom: 6px;
+}
+
+.registrationForm__bioField {
+	height: 96px;
+	margin-bottom: 16px;
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
+}
+
+.registrationForm__categorySelector {
+	margin-bottom: 32px;
+}
+
+.registrationForm__submitButton {
+	height: 52px;
+	margin-bottom: 16px;
+}
+
+.registrationForm__successContainer {
+	display: none;
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-left: 32px;
+	padding-right: 32px;
+}
+
+.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..b01e205
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlBinder.cs
@@ -0,0 +1,188 @@
+// Examples~/RegistrationForm/RegistrationFormUxmlBinder.cs
+// UXML counterpart of RegistrationFormDemo.cs. Layout lives in RegistrationFormUxmlView.uxml;
+// this binder wires validation (with shake feedback) and the success transition.
+
+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 RegistrationForm demo.</summary>
+    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;
+            }
+
+            // Field appearance is configured through the controls' runtime API.
+            ApplyPillInputStyle(nameField);
+            ApplyPillInputStyle(emailField);
+            ApplyPillInputStyle(passwordField);
+
+            if (bioField != null)
+            {
+                bioField.SetBackgroundColor(Color.white);
+                bioField.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+                bioField.SetPlaceholderColor(new Color(0.65f, 0.65f, 0.7f, 1f));
+                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.SetBackgroundColor(Color.white);
+            field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            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.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                nameField.SetBackgroundColor(Color.white);
+            }
+
+            if (!emailField.Value.Contains("@"))
+            {
+                VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                emailField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                emailField.SetBackgroundColor(Color.white);
+            }
+
+            if (passwordField.Value.Length < 6)
+            {
+                VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
+                passwordField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                isValid = false;
+            }
+            else
+            {
+                passwordField.SetBackgroundColor(Color.white);
+            }
+
+            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;
+        }
+    }
+}
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..8cdf1d5
--- /dev/null
+++ b/RegistrationForm/RegistrationFormUxmlView.uxml
@@ -0,0 +1,35 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <!--
+      UXML version of the RegistrationForm demo. PillInputField, RoundedInputField, PillSelector
+      and PillButton are declared with their UXML attributes (label, placeholder, keyboard-type,
+      password-mode, multiline…). RegistrationFormUxmlBinder.cs wires validation and submission.
+    -->
+    <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="form-container" class="registrationForm__formContainer">
+            <ui:Label text="Create Account" class="registrationForm__title" />
+            <ui:Label text="Join us today — it only takes a moment." class="registrationForm__subtitle" />
+
+            <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: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/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..383a933
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
@@ -0,0 +1,213 @@
+// 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
+    {
+        // ── Page configuration ────────────────────────────────────────────────────
+
+        /// <summary>Background colors for each page (hex strings).</summary>
+        private static readonly string[] PageColors =
+        {
+            "#E74C3C", // red
+            "#3498DB", // blue
+            "#2ECC71", // green
+            "#9B59B6", // purple  → ComingSoonMessage page
+            "#F39C12", // orange
+        };
+
+        /// <summary>Labels shown on pages that are NOT the coming-soon page.</summary>
+        private static readonly string[] PageLabels =
+        {
+            "Welcome",
+            "Explore",
+            "Discover",
+            "Coming Soon", // replaced at runtime — label is set but hidden under the widget
+            "Get Started",
+        };
+
+        /// <summary>Index of the page that should show a <see cref="ComingSoonMessage"/>.</summary>
+        private const int ComingSoonPageIndex = 3;
+
+        // ── Runtime references ────────────────────────────────────────────────────
+        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)
+        {
+            // ── Root container — full screen, dark background ─────────────────────
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "scrollSnapDemo__screen");
+
+            // ── Header ────────────────────────────────────────────────────────────
+            VisualElement header = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__header");
+
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "scrollSnapDemo__title");
+            titleLabel.text = "ScrollSnap Demo";
+
+            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "scrollSnapDemo__subtitle");
+            subtitleLabel.text = "Swipe left/right or use the arrows below";
+
+            // ── ScrollSnap ────────────────────────────────────────────────────────
+            scrollSnap = new ScrollSnap();
+            scrollSnap.AddToClassList("scrollSnapDemo__scrollSnap");
+            scrollSnap.ManualMovementEnabled = true;
+            screen.Add(scrollSnap);
+
+            // ── Build pages ───────────────────────────────────────────────────────
+            for (var i = 0; i < PageColors.Length; i++)
+            {
+                var page = BuildPage(i);
+                scrollSnap.Add(page);
+            }
+
+            // ── Bottom bar ─────────────────────────────────────────────────────────
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__bottomBar");
+
+            // Previous button
+            prevButton = new PillButton();
+            prevButton.AddToClassList("scrollSnapDemo__navButton");
+            prevButton.Text = "←";
+            prevButton.SetInnerColor("#555566");
+            prevButton.SetOuterColor("#777788");
+            prevButton.Clicked += OnPreviousClicked;
+            bottomBar.Add(prevButton);
+
+            // Dot indicator
+            dotIndicator = new PageDotIndicator();
+            dotIndicator.AddToClassList("scrollSnapDemo__dotIndicator");
+            dotIndicator.SetColors("#FFFFFF", "#555566");
+            dotIndicator.SetProgress(0, PageColors.Length);
+            bottomBar.Add(dotIndicator);
+
+            // Next button
+            nextButton = new PillButton();
+            nextButton.AddToClassList("scrollSnapDemo__navButton");
+            nextButton.Text = "→";
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
+            nextButton.Clicked += OnNextClicked;
+            bottomBar.Add(nextButton);
+
+            // ── Wire up PageChanged ────────────────────────────────────────────────
+            scrollSnap.PageChanged += OnPageChanged;
+
+            // Seed the initial dot state
+            UpdateNavButtons();
+        }
+
+        // ── Page factory ──────────────────────────────────────────────────────────
+        private VisualElement BuildPage(int index)
+        {
+            // Outer container — fills the page slot assigned by ScrollSnap
+            var page = new VisualElement();
+            page.AddToClassList("scrollSnapDemo__page");
+
+            // Parse the page background color (data-driven — stays in C#)
+            Color bg = Color.gray;
+            ColorUtility.TryParseHtmlString(PageColors[index], out bg);
+            page.style.backgroundColor = bg;
+
+            if (index == ComingSoonPageIndex)
+            {
+                // Replace page content with the ComingSoonMessage widget
+                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
+            {
+                // Page number badge
+                VisualElement badge = UIToolkitExtensions.CreateVisualElement(page, "scrollSnapDemo__badge");
+
+                Label badgeLabel = UIToolkitExtensions.CreateVisualElement<Label>(badge, "scrollSnapDemo__badgeLabel");
+                badgeLabel.text = (index + 1).ToString();
+
+                // Main label
+                Label pageLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageLabel");
+                pageLabel.text = PageLabels[index];
+
+                // Sub-label
+                Label subLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageSubLabel");
+                subLabel.text = $"Page {index + 1} of {PageColors.Length}";
+            }
+
+            return page;
+        }
+
+        // ── Event handlers ────────────────────────────────────────────────────────
+
+        private void OnPageChanged(int newIndex)
+        {
+            dotIndicator.SetProgress(newIndex, PageColors.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..f86ca03
--- /dev/null
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
@@ -0,0 +1,101 @@
+.scrollSnapDemo__screen {
+	flex-grow: 1;
+	flex-direction: column;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.scrollSnapDemo__header {
+	padding-top: 48px;
+	padding-bottom: 16px;
+	padding-left: 24px;
+	padding-right: 24px;
+	align-items: center;
+}
+
+.scrollSnapDemo__title {
+	font-size: 22px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+}
+
+.scrollSnapDemo__subtitle {
+	font-size: 13px;
+	color: rgba(179, 179, 179, 1);
+	margin-top: 4px;
+}
+
+.scrollSnapDemo__scrollSnap {
+	flex-grow: 1;
+}
+
+.scrollSnapDemo__page {
+	flex-grow: 1;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	border-top-left-radius: 16px;
+	border-top-right-radius: 16px;
+	border-bottom-left-radius: 16px;
+	border-bottom-right-radius: 16px;
+}
+
+.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-left: 16px;
+	padding-right: 16px;
+	padding-top: 12px;
+	padding-bottom: 32px;
+}
+
+.scrollSnapDemo__navButton {
+	width: 56px;
+	height: 40px;
+}
+
+.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/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..4a0cee3
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
@@ -0,0 +1,141 @@
+// 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
+    {
+        // ── Inspector ─────────────────────────────────────────────────────────────
+        [SerializeField] private UIDocument uiDocument;
+
+        // ── Page configuration (shared, intentionally, with the UXML view) ─────────
+        private static readonly string[] PageColors =
+        {
+            "#E74C3C", // red
+            "#3498DB", // blue
+            "#2ECC71", // green
+            "#9B59B6", // purple
+            "#F39C12", // orange
+        };
+
+        private ScrollSnap scrollSnap;
+        private Label readoutLabel;
+
+        // ──────────────────────────────────────────────────────────────────────────
+        private void Start()
+        {
+            var root = uiDocument.rootVisualElement;
+            root.Clear();
+
+            // Occupy the LEFT half of the shared panel.
+            ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: true);
+
+            BuildUI(root);
+        }
+
+        // ──────────────────────────────────────────────────────────────────────────
+        private void BuildUI(VisualElement root)
+        {
+            // ── Screen ────────────────────────────────────────────────────────────
+            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);
+
+            // ── Header ────────────────────────────────────────────────────────────
+            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 ────────────────────────────────────────────────────────
+            scrollSnap = new ScrollSnap();
+            scrollSnap.style.flexGrow = 1;
+            scrollSnap.ManualMovementEnabled = true; // enable swipe paging
+            screen.Add(scrollSnap);
+
+            for (var i = 0; i < PageColors.Length; i++)
+            {
+                scrollSnap.Add(BuildPage(i, PageColors.Length));
+            }
+
+            // ── Footer hint ───────────────────────────────────────────────────────
+            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;
+
+            // ── Live readout ──────────────────────────────────────────────────────
+            scrollSnap.PageChanged += UpdateReadout;
+            UpdateReadout(scrollSnap.CurrentPageIndex);
+        }
+
+        // ── Page factory ──────────────────────────────────────────────────────────
+        private static VisualElement BuildPage(int index, int total)
+        {
+            var page = new VisualElement();
+            // ScrollSnap sizes and class-tags each child page itself; we only style content.
+            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..5043b83
--- /dev/null
+++ b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
@@ -0,0 +1,74 @@
+// 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
+    {
+        // ── Inspector ─────────────────────────────────────────────────────────────
+        [SerializeField] private UIDocument uiDocument;
+
+        private ScrollSnap scrollSnap;
+        private Label readoutLabel;
+
+        // ──────────────────────────────────────────────────────────────────────────
+        // Use Start (not OnEnable): it runs after every component's OnEnable, so the
+        // UIDocument has already cloned its source UXML into rootVisualElement by now.
+        private void Start()
+        {
+            var root = uiDocument.rootVisualElement;
+
+            // Occupy the RIGHT half of the shared panel.
+            ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: false);
+
+            // Query the UXML-authored elements by type / name.
+            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..ca2557d
--- /dev/null
+++ b/Shared/UIToolkitExtensionsExamplesTheme.tss
@@ -0,0 +1,11 @@
+@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");
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/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..7a780cb
--- /dev/null
+++ b/StepWizard/StepWizardDemo.cs
@@ -0,0 +1,345 @@
+// 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
+    {
+        // ── Step metadata ─────────────────────────────────────────────────────────
+        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.",
+        };
+
+        // ── Runtime references ────────────────────────────────────────────────────
+        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)
+        {
+            // ── Full-screen wrapper ───────────────────────────────────────────────
+            var screen = UIToolkitExtensions.CreateVisualElement(root, "stepWizard__screen");
+
+            // ── Header ────────────────────────────────────────────────────────────
+            var header = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__header");
+
+            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "stepWizard__title");
+            titleLabel.text = "Quick Setup";
+
+            stepCounterLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "stepWizard__counter");
+
+            // ── Stepper ───────────────────────────────────────────────────────────
+            var stepperWrapper = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__stepperWrapper");
+
+            stepper = new QuadrantStepper(StepNames);
+            stepper.AddToClassList("stepWizard__stepper");
+            stepper.SelectionChanged += OnStepperSelectionChanged;
+            stepperWrapper.Add(stepper);
+
+            // ── Progress bar ──────────────────────────────────────────────────────
+            var progressWrapper = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__progressWrapper");
+
+            progressBar = new StepProgressBar();
+            progressBar.AddToClassList("stepWizard__progressBar");
+            // Gradient colours are part of the control's runtime API, not USS.
+            progressBar.SetGradientColors("#4CAF50", "#8BC34A");
+            progressWrapper.Add(progressBar);
+
+            // ── Content area ──────────────────────────────────────────────────────
+            contentArea = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__content");
+
+            // Build all four step panels (only one visible at a time)
+            stepPanels = new VisualElement[StepNames.Length];
+            stepPanels[0] = BuildAboutPanel();
+            stepPanels[1] = BuildGoalsPanel();
+            stepPanels[2] = BuildSettingsPanel();
+            stepPanels[3] = BuildDonePanel();
+
+            foreach (var panel in stepPanels)
+            {
+                // Start hidden; GoToStep reveals the active panel (runtime state).
+                panel.style.display = DisplayStyle.None;
+                contentArea.Add(panel);
+            }
+
+            // ── Navigation bar ────────────────────────────────────────────────────
+            var navBar = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__navBar");
+
+            backButton = new PillButton();
+            backButton.AddToClassList("stepWizard__navButton");
+            backButton.Text = "Back";
+            backButton.SetInnerColor("#777777");
+            backButton.SetOuterColor("#999999");
+            backButton.SetTextColor(Color.white);
+            backButton.Clicked += OnBackClicked;
+            navBar.Add(backButton);
+
+            nextButton = new PillButton();
+            nextButton.AddToClassList("stepWizard__navButton");
+            nextButton.Text = "Next";
+            nextButton.SetInnerColor("#4CAF50");
+            nextButton.SetOuterColor("#8BC34A");
+            nextButton.SetTextColor(Color.white);
+            nextButton.Clicked += OnNextClicked;
+            navBar.Add(nextButton);
+
+            screen.Add(navBar);
+
+            // Navigate to the first step without notifying the stepper event
+            // (avoids double-navigation on init)
+            GoToStep(0, notify: false);
+        }
+
+        // ── Step panel builders ───────────────────────────────────────────────────
+
+        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;
+        }
+
+        // ── Reusable sub-builders ─────────────────────────────────────────────────
+
+        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 appearance is configured through the control's runtime API.
+            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;
+
+            // Simple visual indicator for the "toggle" state (green pill)
+            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;
+        }
+
+        // ── Navigation ────────────────────────────────────────────────────────────
+
+        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
+            {
+                // Finish — log and reset for demo purposes
+                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;
+
+            // Show only the active panel (runtime state — stays in C#)
+            for (var i = 0; i < stepPanels.Length; i++)
+            {
+                stepPanels[i].style.display = i == currentStep ? DisplayStyle.Flex : DisplayStyle.None;
+            }
+
+            // Sync stepper (animate when the user tapped a segment themselves)
+            stepper.SetSelectedIndex(currentStep, notify: false, animate: notify);
+
+            // Progress = steps *completed* (i.e. index+1 out of total)
+            progressBar.SetProgress(currentStep + 1, StepNames.Length);
+
+            // Update step counter label
+            stepCounterLabel.text = $"Step {currentStep + 1} of {StepNames.Length}";
+
+            // Back button — hidden on first step (runtime state — stays in C#)
+            backButton.style.display = currentStep == 0 ? DisplayStyle.None : DisplayStyle.Flex;
+
+            // Next button label changes on the last step
+            nextButton.Text = currentStep == StepNames.Length - 1 ? "Finish" : "Next";
+            if (currentStep == StepNames.Length - 1)
+            {
+                nextButton.SetInnerColor("#4A90E2");
+                nextButton.SetOuterColor("#7B68EE");
+            }
+            else
+            {
+                nextButton.SetInnerColor("#4CAF50");
+                nextButton.SetOuterColor("#8BC34A");
+            }
+        }
+    }
+}
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..4ba3d51
--- /dev/null
+++ b/StepWizard/StepWizardStyles.uss
@@ -0,0 +1,237 @@
+/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
+
+.stepWizard__screen {
+	flex-grow: 1;
+	flex-direction: column;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.stepWizard__header {
+	padding-top: 48px;
+	padding-bottom: 12px;
+	padding-left: 20px;
+	padding-right: 20px;
+	align-items: center;
+}
+
+.stepWizard__title {
+	font-size: 22px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 4px;
+}
+
+.stepWizard__counter {
+	font-size: 13px;
+	color: rgba(173, 183, 210, 0.85);
+}
+
+.stepWizard__stepperWrapper {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.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.08);
+}
+
+.stepWizard__progressWrapper {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+.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-left: 20px;
+	padding-right: 20px;
+	padding-top: 16px;
+	padding-bottom: 16px;
+}
+
+.stepWizard__navBar {
+	flex-direction: row;
+	justify-content: space-between;
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 12px;
+	padding-bottom: 32px;
+}
+
+.stepWizard__navButton {
+	width: 100px;
+	height: 48px;
+}
+
+.stepWizard__panel {
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.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(132, 173, 255, 0.9);
+	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(46, 204, 112, 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(86, 222, 150, 1);
+	-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..2b3742e
--- /dev/null
+++ b/StepWizard/StepWizardUxmlBinder.cs
@@ -0,0 +1,128 @@
+// 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;
+            }
+
+            // Field appearance is part of the control's runtime API (kept out of UXML/USS here).
+            root.Query<RoundedInputField>().ForEach(field =>
+            {
+                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);
+            });
+
+            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(isLast ? "#4A90E2" : "#4CAF50");
+            nextButton.SetOuterColor(isLast ? "#7B68EE" : "#8BC34A");
+        }
+    }
+}
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..02ee2b7
--- /dev/null
+++ b/StepWizard/StepWizardUxmlView.uxml
@@ -0,0 +1,122 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
+    <!--
+      UXML version of the StepWizard demo. QuadrantStepper, StepProgressBar and PillButton are
+      declared here with their UXML attributes (options, inner-color/outer-color, text…).
+      StepWizardUxmlBinder.cs drives navigation, panel visibility and progress.
+    -->
+    <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="header" class="stepWizard__header">
+            <ui:Label text="Quick Setup" class="stepWizard__title" />
+            <ui:Label name="step-counter" class="stepWizard__counter" />
+        </ui:VisualElement>
+
+        <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="#4CAF50" outer-color="#8BC34A" />
+        </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="#777777" outer-color="#999999" />
+            <ext:PillButton name="next-button" class="stepWizard__navButton" text="Next" inner-color="#4CAF50" outer-color="#8BC34A" />
+        </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..0eed780
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsDemo.cs
@@ -0,0 +1,361 @@
+// 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
+    {
+        // ── Constants ─────────────────────────────────────────────────────────────
+        private const int MaxToasts = 5;
+        private const int FadeDurationMs = 260;
+
+        // Toasts left untouched fade away after this many seconds.
+        private const float AutoDismissSeconds = 4f;
+
+        // ── Toast content templates ───────────────────────────────────────────────
+        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."),
+        };
+
+        // Soft pastel background colors cycling per toast
+        private static readonly Color[] ToastColors =
+        {
+            new Color(0.96f, 0.95f, 1.00f, 1f), // lavender
+            new Color(0.95f, 1.00f, 0.97f, 1f), // mint
+            new Color(1.00f, 0.97f, 0.93f, 1f), // peach
+            new Color(0.93f, 0.97f, 1.00f, 1f), // sky
+            new Color(1.00f, 0.95f, 0.95f, 1f), // rose
+        };
+
+        // ── Internal state ────────────────────────────────────────────────────────
+        private UIDocument uiDocument;
+        private VisualElement toastContainer;
+        private Label emptyLabel;
+        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)
+        {
+            // ── Screen ────────────────────────────────────────────────────────────
+            VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "toastDemo__screen");
+
+            // ── Header ────────────────────────────────────────────────────────────
+            VisualElement header = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__header");
+
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "toastDemo__headerTitle");
+            titleLabel.text = "Toast Notifications";
+
+            Label instructionLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "toastDemo__instruction");
+            instructionLabel.text = "Swipe left or right to dismiss, or tap a toast.";
+
+            // ── Toast container ───────────────────────────────────────────────────
+            VisualElement scrollWrapper = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__scrollWrapper");
+
+            toastContainer = UIToolkitExtensions.CreateVisualElement(scrollWrapper, "toastDemo__container");
+
+            // Placeholder shown when no toasts exist
+            emptyLabel = UIToolkitExtensions.CreateVisualElement<Label>(toastContainer, "toastDemo__empty");
+            emptyLabel.text = "No notifications yet.\nTap \"Add Toast\" to create one.";
+
+            // ── Bottom bar ────────────────────────────────────────────────────────
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(screen, "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;
+        }
+
+        // ── Toast creation ────────────────────────────────────────────────────────
+
+        private void OnAddToastClicked()
+        {
+            // Enforce maximum: remove oldest toast if at cap
+            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++;
+
+            // Hide the empty-state label once the first toast appears
+            emptyLabel.style.display = DisplayStyle.None;
+
+            // ── Toast root element ────────────────────────────────────────────────
+            var toast = UIToolkitExtensions.CreateVisualElement(toastContainer, "toastDemo__toast");
+            // Runtime/data-driven: background color comes from the ToastColors array
+            toast.style.backgroundColor = bgColor;
+
+            // Color accent bar on the left
+            var accentBar = UIToolkitExtensions.CreateVisualElement(toast, "toastDemo__accent");
+            // Runtime/data-driven: accent is computed complementary to the background
+            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);
+
+            // Text block
+            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;
+
+            // Dismiss "×" button (visual only — tap also handled by manipulator)
+            var dismissIcon = UIToolkitExtensions.CreateVisualElement<Label>(toast, "toastDemo__dismiss");
+            dismissIcon.text = "×";
+            dismissIcon.pickingMode = PickingMode.Ignore;
+
+            // Slide-in entrance animation (translate from below)
+            toast.style.translate = new Translate(0, 40, 0);
+            toast.style.opacity = 0f;
+
+            // ── Attach manipulator ─────────────────────────────────────────────────
+            var toastData = new ToastData { Root = toast };
+
+            // Apply entrance on next frame, then arm the auto-dismiss timer
+            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);
+        }
+
+        // ── Entrance animation ────────────────────────────────────────────────────
+
+        private static void AnimateToastEntrance(VisualElement toast)
+        {
+            // Slide up from 40 px below and fade in using inline CSS transitions
+            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);
+        }
+
+        // ── Auto-dismiss after default time ────────────────────────────────────────
+
+        /// <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)
+        {
+            // Skip if the user already tapped or swiped this toast away.
+            if (toastData.IsDismissing) return;
+
+            // Reuse the tap fade-out path so behaviour matches "fades away after the default time".
+            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;
+        }
+
+        // ── Dismiss: tap (fade out) ───────────────────────────────────────────────
+
+        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;
+
+            // Fade to transparent
+            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);
+        }
+
+        // ── Dismiss: swipe (manipulator calls back after animation) ───────────────
+
+        private void OnToastDismissedBySwipe(ToastData toastData)
+        {
+            // The manipulator has already played the slide-out animation.
+            // Fade the element to zero then remove it so there is no pop.
+            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);
+            };
+        }
+
+        // ── Shared removal logic ──────────────────────────────────────────────────
+
+        private void RemoveToastFromHierarchy(ToastData toastData)
+        {
+            activeToasts.Remove(toastData);
+
+            if (toastData.Root.parent != null)
+            {
+                toastData.Root.RemoveFromHierarchy();
+            }
+
+            // Show the empty-state label again when all toasts are gone
+            if (activeToasts.Count == 0)
+            {
+                emptyLabel.style.display = DisplayStyle.Flex;
+            }
+        }
+
+        /// <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..0ecd243
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsStyles.uss
@@ -0,0 +1,111 @@
+.toastDemo__screen {
+	flex-grow: 1;
+	flex-direction: column;
+	background-color: rgba(9, 15, 27, 1);
+}
+
+.toastDemo__header {
+	padding-top: 48px;
+	padding-bottom: 12px;
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.toastDemo__headerTitle {
+	font-size: 22px;
+	color: rgba(255, 255, 255, 1);
+	-unity-font-style: bold;
+	margin-bottom: 4px;
+}
+
+.toastDemo__instruction {
+	font-size: 13px;
+	color: rgba(166, 166, 179, 1);
+	white-space: normal;
+}
+
+.toastDemo__scrollWrapper {
+	flex-grow: 1;
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+	overflow: hidden;
+}
+
+.toastDemo__container {
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.toastDemo__empty {
+	flex-grow: 1;
+	-unity-text-align: middle-center;
+	font-size: 14px;
+	color: rgba(102, 102, 115, 1);
+	white-space: normal;
+}
+
+.toastDemo__bottomBar {
+	padding-left: 20px;
+	padding-right: 20px;
+	padding-top: 12px;
+	padding-bottom: 32px;
+	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

From b0abe01a53b5c2b530aae348d00694af04958bd3 Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Tue, 23 Jun 2026 13:02:31 +0100
Subject: [PATCH 2/6] Common styling path

---
 ContentExplorer/ContentExplorerDemo.cs        |  21 +-
 ContentExplorer/ContentExplorerStyles.uss     |  96 ++++----
 ContentExplorer/ContentExplorerUxmlView.uxml  |  51 ++--
 .../DropDownPhoneEntryStyles.uss              |   5 -
 ImageCropOverlay/ImageCropOverlayDemo.cs      |   3 +-
 .../ImageCropOverlayDemoStyles.uss            |   3 -
 .../ImageCropOverlayUxmlBinder.cs             | 220 ++++++++++++++++++
 .../ImageCropOverlayUxmlBinder.cs.meta        |  11 +
 .../ImageCropOverlayUxmlDemo.unity            | 151 ++++++++++++
 .../ImageCropOverlayUxmlDemo.unity.meta       |   7 +
 .../ImageCropOverlayUxmlView.uxml             |  28 +++
 .../ImageCropOverlayUxmlView.uxml.meta        |  10 +
 ProfileEditor/ProfileEditorStyles.uss         |   4 -
 ProfileEditor/ProfileEditorUxmlBinder.cs      | 187 +++++++++++++++
 ProfileEditor/ProfileEditorUxmlBinder.cs.meta |  11 +
 ProfileEditor/ProfileEditorUxmlDemo.unity     | 110 +++++++++
 .../ProfileEditorUxmlDemo.unity.meta          |   7 +
 ProfileEditor/ProfileEditorUxmlView.uxml      |  35 +++
 ProfileEditor/ProfileEditorUxmlView.uxml.meta |  10 +
 RegistrationForm/RegistrationFormDemo.cs      |  29 ++-
 RegistrationForm/RegistrationFormStyles.uss   |  54 +++--
 .../RegistrationFormUxmlBinder.cs             |  22 +-
 .../RegistrationFormUxmlView.uxml             |  40 ++--
 ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs    |  59 ++---
 ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss |  76 ++++--
 .../ScrollSnapAndDotsUxmlBinder.cs            |  68 ++++++
 .../ScrollSnapAndDotsUxmlBinder.cs.meta       |  11 +
 .../ScrollSnapAndDotsUxmlDemo.unity           | 106 +++++++++
 .../ScrollSnapAndDotsUxmlDemo.unity.meta      |   7 +
 .../ScrollSnapAndDotsUxmlView.uxml            |  46 ++++
 .../ScrollSnapAndDotsUxmlView.uxml.meta       |  10 +
 StepWizard/StepWizardDemo.cs                  |  48 ++--
 StepWizard/StepWizardStyles.uss               |  91 +++++---
 StepWizard/StepWizardUxmlBinder.cs            |  10 +-
 StepWizard/StepWizardUxmlView.uxml            |  35 ++-
 ToastNotifications/ToastNotificationsDemo.cs  |  44 ++--
 .../ToastNotificationsStyles.uss              |  81 ++++---
 .../ToastNotificationsUxmlBinder.cs           | 192 +++++++++++++++
 .../ToastNotificationsUxmlBinder.cs.meta      |  11 +
 .../ToastNotificationsUxmlDemo.unity          | 106 +++++++++
 .../ToastNotificationsUxmlDemo.unity.meta     |   7 +
 .../ToastNotificationsUxmlView.uxml           |  22 ++
 .../ToastNotificationsUxmlView.uxml.meta      |  10 +
 43 files changed, 1820 insertions(+), 335 deletions(-)
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlBinder.cs
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlBinder.cs.meta
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlDemo.unity
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlDemo.unity.meta
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlView.uxml
 create mode 100644 ImageCropOverlay/ImageCropOverlayUxmlView.uxml.meta
 create mode 100644 ProfileEditor/ProfileEditorUxmlBinder.cs
 create mode 100644 ProfileEditor/ProfileEditorUxmlBinder.cs.meta
 create mode 100644 ProfileEditor/ProfileEditorUxmlDemo.unity
 create mode 100644 ProfileEditor/ProfileEditorUxmlDemo.unity.meta
 create mode 100644 ProfileEditor/ProfileEditorUxmlView.uxml
 create mode 100644 ProfileEditor/ProfileEditorUxmlView.uxml.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlBinder.cs.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlDemo.unity.meta
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml
 create mode 100644 ScrollSnapAndDots/ScrollSnapAndDotsUxmlView.uxml.meta
 create mode 100644 ToastNotifications/ToastNotificationsUxmlBinder.cs
 create mode 100644 ToastNotifications/ToastNotificationsUxmlBinder.cs.meta
 create mode 100644 ToastNotifications/ToastNotificationsUxmlDemo.unity
 create mode 100644 ToastNotifications/ToastNotificationsUxmlDemo.unity.meta
 create mode 100644 ToastNotifications/ToastNotificationsUxmlView.uxml
 create mode 100644 ToastNotifications/ToastNotificationsUxmlView.uxml.meta

diff --git a/ContentExplorer/ContentExplorerDemo.cs b/ContentExplorer/ContentExplorerDemo.cs
index ecbce6c..e78c91f 100644
--- a/ContentExplorer/ContentExplorerDemo.cs
+++ b/ContentExplorer/ContentExplorerDemo.cs
@@ -98,17 +98,20 @@ private void BuildUI(VisualElement root)
             // position: relative is needed for the absolute loading overlay
             var screen = UIToolkitExtensions.CreateVisualElement(root, "contentExplorer__screen");
 
-            // ── Header ────────────────────────────────────────────────────────────
-            var header = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__header");
+            // ── Example card (shared rounded container) ────────────────────────────
+            var card = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__card");
 
-            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "contentExplorer__title");
+            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>(header, "contentExplorer__subtitle");
-            subtitleLabel.text = "Tap a section to expand it, then tap an item to select it.";
+            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.";
 
             // ── Scrollable content ────────────────────────────────────────────────
-            contentScroll = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__contentScroll");
+            contentScroll = UIToolkitExtensions.CreateVisualElement(card, "contentExplorer__contentScroll");
             // Start invisible — revealed after load finishes (runtime state)
             contentScroll.style.opacity = 0f;
 
@@ -118,10 +121,8 @@ private void BuildUI(VisualElement root)
                 BuildSection(contentScroll, sectionTitle, items);
             }
 
-            // ── Status bar ────────────────────────────────────────────────────────
-            var statusBar = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__statusBar");
-
-            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(statusBar, "contentExplorer__statusLabel");
+            // ── Status line ───────────────────────────────────────────────────────
+            statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__statusLabel");
             statusLabel.text = "Loading content…";
 
             // ── Loading overlay (absolute, full-screen, on top) ───────────────────
diff --git a/ContentExplorer/ContentExplorerStyles.uss b/ContentExplorer/ContentExplorerStyles.uss
index b02c23c..c79ec4b 100644
--- a/ContentExplorer/ContentExplorerStyles.uss
+++ b/ContentExplorer/ContentExplorerStyles.uss
@@ -1,80 +1,94 @@
-/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
-
 .contentExplorer__screen {
 	flex-grow: 1;
-	flex-direction: column;
+	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__header {
-	padding-top: 48px;
-	padding-bottom: 16px;
-	padding-left: 20px;
-	padding-right: 20px;
+.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: 24px;
+	font-size: 30px;
 	color: rgba(255, 255, 255, 1);
 	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
 }
 
 .contentExplorer__subtitle {
-	font-size: 13px;
-	color: rgba(173, 183, 210, 0.85);
-	margin-top: 4px;
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 24px;
 	white-space: normal;
 }
 
 .contentExplorer__contentScroll {
-	flex-grow: 1;
 	flex-direction: column;
-	padding-left: 16px;
-	padding-right: 16px;
-	padding-top: 8px;
-	padding-bottom: 8px;
+	margin-bottom: 18px;
 }
 
 .contentExplorer__section {
-	margin-bottom: 10px;
+	margin-bottom: 12px;
+	padding-bottom: 6px;
 	overflow: hidden;
-	background-color: rgba(255, 255, 255, 0.05);
-	border-top-left-radius: 12px;
-	border-top-right-radius: 12px;
-	border-bottom-left-radius: 12px;
-	border-bottom-right-radius: 12px;
+	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);
 }
 
-/* Keep the collapsible header/title readable on the dark section card. */
 .contentExplorer__section .collapsibleSection__title {
 	color: rgba(235, 238, 245, 1);
 }
 
 .contentExplorer__itemButton {
-	margin-top: 2px;
-	margin-bottom: 2px;
+	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;
 }
 
-/* Keep the icon-label rows readable on the dark section card. */
 .contentExplorer__itemButton .iconLabelButton__label {
 	color: rgba(210, 216, 230, 1);
 }
 
-.contentExplorer__statusBar {
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 12px;
-	padding-bottom: 24px;
-	background-color: rgba(20, 28, 44, 0.94);
-	border-top-width: 1px;
-	border-top-color: rgba(255, 255, 255, 0.08);
-}
-
 .contentExplorer__statusLabel {
 	font-size: 13px;
-	color: rgba(173, 183, 210, 0.9);
-	-unity-text-align: middle-center;
+	color: rgba(132, 173, 255, 0.95);
+	white-space: normal;
 }
 
 .contentExplorer__loadingOverlay {
@@ -86,7 +100,7 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	background-color: rgba(9, 15, 27, 0.92);
+	background-color: rgba(9, 15, 27, 0.94);
 }
 
 .contentExplorer__loadingIcon {
@@ -96,6 +110,6 @@
 
 .contentExplorer__loadingLabel {
 	font-size: 14px;
-	color: rgba(173, 183, 210, 0.9);
+	color: rgba(202, 211, 232, 0.9);
 	margin-top: 12px;
 }
diff --git a/ContentExplorer/ContentExplorerUxmlView.uxml b/ContentExplorer/ContentExplorerUxmlView.uxml
index a9b71d0..f0e9f88 100644
--- a/ContentExplorer/ContentExplorerUxmlView.uxml
+++ b/ContentExplorer/ContentExplorerUxmlView.uxml
@@ -1,42 +1,35 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
-    <!--
-      UXML version of the ContentExplorer demo. The CollapsibleSection control routes its
-      authored children into the collapsible body (contentContainer override), so the
-      IconLabelButton rows below sit inside each section. ContentExplorerUxmlBinder.cs wires
-      the loading sequence and item-selection behaviour.
-    -->
     <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="header" class="contentExplorer__header">
+        <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="Tap a section to expand it, then tap an item to select it." class="contentExplorer__subtitle" />
-        </ui:VisualElement>
+            <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>
+            <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="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>
+                <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:VisualElement name="status-bar" class="contentExplorer__statusBar">
             <ui:Label name="status-label" text="Loading content…" class="contentExplorer__statusLabel" />
         </ui:VisualElement>
 
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
index 21b918f..b7f736c 100644
--- a/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
+++ b/DropDownPhoneEntry/DropDownPhoneEntryStyles.uss
@@ -20,7 +20,6 @@
 	border-width: 1px;
 	border-color: rgba(255, 255, 255, 0.08);
 	border-radius: 28px;
-	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
 }
 
 .phoneVerificationExample__eyebrow {
@@ -42,7 +41,6 @@
 
 .phoneVerificationExample__description {
 	font-size: 15px;
-	line-height: 22px;
 	color: rgba(202, 211, 232, 0.9);
 	-unity-text-align: upper-left;
 	white-space: normal;
@@ -80,7 +78,6 @@
 	border-radius: 0;
 	background-color: rgba(0, 0, 0, 0);
 	justify-content: flex-end;
-	box-shadow: none;
 }
 
 .phoneVerificationExample__dialCodePicker .dropDownControl__triggerLabel {
@@ -146,7 +143,6 @@
 
 .phoneVerificationExample__info {
 	font-size: 14px;
-	line-height: 20px;
 	color: rgba(173, 183, 210, 0.85);
 	-unity-text-align: upper-left;
 	white-space: normal;
@@ -161,7 +157,6 @@
 
 .phoneVerificationExample__status {
 	font-size: 13px;
-	line-height: 18px;
 	color: rgba(132, 173, 255, 0.95);
 	-unity-text-align: upper-left;
 	white-space: normal;
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.cs b/ImageCropOverlay/ImageCropOverlayDemo.cs
index 9fff7d8..c0c2c03 100644
--- a/ImageCropOverlay/ImageCropOverlayDemo.cs
+++ b/ImageCropOverlay/ImageCropOverlayDemo.cs
@@ -72,7 +72,8 @@ private void BuildUI(VisualElement root)
             previewTitle.text = "Saved Preview";
 
             savedPreview = UIToolkitExtensions.CreateVisualElement(previewCard, "imageCropOverlayDemo__previewImage");
-            savedPreview.style.unityBackgroundScaleMode = ScaleMode.ScaleAndCrop;
+            // Scale-and-crop to fill the preview box (unityBackgroundScaleMode is deprecated).
+            savedPreview.style.backgroundSize = new BackgroundSize(BackgroundSizeType.Cover);
 
             VisualElement buttonRow = UIToolkitExtensions.CreateVisualElement(card, "imageCropOverlayDemo__buttonRow");
 
diff --git a/ImageCropOverlay/ImageCropOverlayDemoStyles.uss b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
index f069184..9b2e0d3 100644
--- a/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
+++ b/ImageCropOverlay/ImageCropOverlayDemoStyles.uss
@@ -20,7 +20,6 @@
 	border-width: 1px;
 	border-color: rgba(255, 255, 255, 0.08);
 	border-radius: 28px;
-	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
 }
 
 .imageCropOverlayDemo__eyebrow {
@@ -42,7 +41,6 @@
 
 .imageCropOverlayDemo__description {
 	font-size: 15px;
-	line-height: 22px;
 	color: rgba(202, 211, 232, 0.9);
 	-unity-text-align: upper-left;
 	white-space: normal;
@@ -115,7 +113,6 @@
 
 .imageCropOverlayDemo__status {
 	font-size: 13px;
-	line-height: 18px;
 	color: rgba(122, 232, 199, 0.95);
 	-unity-text-align: upper-left;
 	white-space: normal;
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/ProfileEditor/ProfileEditorStyles.uss b/ProfileEditor/ProfileEditorStyles.uss
index 3a67edc..d0c6ce5 100644
--- a/ProfileEditor/ProfileEditorStyles.uss
+++ b/ProfileEditor/ProfileEditorStyles.uss
@@ -20,7 +20,6 @@
 	border-width: 1px;
 	border-color: rgba(255, 255, 255, 0.08);
 	border-radius: 28px;
-	box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
 }
 
 .profileEditor__eyebrow {
@@ -42,7 +41,6 @@
 
 .profileEditor__description {
 	font-size: 15px;
-	line-height: 22px;
 	color: rgba(202, 211, 232, 0.9);
 	-unity-text-align: upper-left;
 	white-space: normal;
@@ -66,7 +64,6 @@
 	flex-grow: 1;
 	flex-shrink: 1;
 	font-size: 14px;
-	line-height: 20px;
 	color: rgba(173, 183, 210, 0.85);
 	-unity-text-align: upper-left;
 	white-space: normal;
@@ -175,7 +172,6 @@
 
 .profileEditor__status {
 	font-size: 13px;
-	line-height: 18px;
 	color: rgba(132, 173, 255, 0.95);
 	-unity-text-align: upper-left;
 	white-space: normal;
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/RegistrationForm/RegistrationFormDemo.cs b/RegistrationForm/RegistrationFormDemo.cs
index f7bd37f..112e159 100644
--- a/RegistrationForm/RegistrationFormDemo.cs
+++ b/RegistrationForm/RegistrationFormDemo.cs
@@ -73,18 +73,25 @@ private void Start()
         // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // Full-screen scroll container
+            // Full-screen dark backdrop, centered
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "registrationForm__screen");
 
-            // ── Form container ────────────────────────────────────────────────────
-            formContainer = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__formContainer");
+            // ── Example card (shared rounded container) ────────────────────────────
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__card");
+
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__eyebrow");
+            eyebrow.text = "Toolkit Sample";
 
-            // Title
-            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__title");
-            titleLabel.text = "Create Account";
+            // Title and subtitle live on the card itself so they stay visible when the
+            // form fades out and the success message takes its place.
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__title");
+            titleLabel.text = "Registration Form";
 
-            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__subtitle");
-            subtitleLabel.text = "Join us today — it only takes a moment.";
+            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.";
+
+            // ── Form container ────────────────────────────────────────────────────
+            formContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__formContainer");
 
             // ── Full Name — PillInputField ─────────────────────────────────────────
             nameField = new PillInputField();
@@ -149,13 +156,13 @@ private void BuildUI(VisualElement root)
             formContainer.Add(submitButton);
 
             // ── Success container (hidden until form submitted) ────────────────────
-            BuildSuccessContainer(screen);
+            BuildSuccessContainer(card);
         }
 
         // ── Success screen ─────────────────────────────────────────────────────────
-        private void BuildSuccessContainer(VisualElement screen)
+        private void BuildSuccessContainer(VisualElement card)
         {
-            successContainer = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__successContainer");
+            successContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__successContainer");
 
             VisualElement icon = UIToolkitExtensions.CreateVisualElement(successContainer, "registrationForm__successIcon");
 
diff --git a/RegistrationForm/RegistrationFormStyles.uss b/RegistrationForm/RegistrationFormStyles.uss
index 276c822..dd20ff9 100644
--- a/RegistrationForm/RegistrationFormStyles.uss
+++ b/RegistrationForm/RegistrationFormStyles.uss
@@ -2,30 +2,52 @@
 
 .registrationForm__screen {
 	flex-grow: 1;
-	flex-direction: column;
+	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-grow: 1;
 	flex-direction: column;
-	padding-left: 24px;
-	padding-right: 24px;
-	padding-top: 48px;
-	padding-bottom: 32px;
 }
 
 .registrationForm__title {
-	font-size: 28px;
+	font-size: 30px;
 	color: rgba(255, 255, 255, 1);
 	-unity-font-style: bold;
-	margin-bottom: 8px;
+	margin-bottom: 10px;
+	white-space: normal;
 }
 
 .registrationForm__subtitle {
-	font-size: 14px;
-	color: rgba(173, 183, 210, 0.85);
-	margin-bottom: 32px;
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 28px;
+	white-space: normal;
 }
 
 .registrationForm__nameField {
@@ -54,8 +76,7 @@
 
 .registrationForm__sectionLabel {
 	font-size: 12px;
-	color: rgba(132, 173, 255, 0.9);
-	-unity-font-style: bold;
+	color: rgba(173, 183, 210, 0.85);
 	margin-bottom: 6px;
 }
 
@@ -79,12 +100,13 @@
 
 .registrationForm__successContainer {
 	display: none;
-	flex-grow: 1;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	padding-left: 32px;
-	padding-right: 32px;
+	padding-top: 20px;
+	padding-bottom: 8px;
+	padding-left: 16px;
+	padding-right: 16px;
 }
 
 .registrationForm__successIcon {
diff --git a/RegistrationForm/RegistrationFormUxmlBinder.cs b/RegistrationForm/RegistrationFormUxmlBinder.cs
index b01e205..c19af08 100644
--- a/RegistrationForm/RegistrationFormUxmlBinder.cs
+++ b/RegistrationForm/RegistrationFormUxmlBinder.cs
@@ -67,9 +67,9 @@ private void Start()
 
             if (bioField != null)
             {
-                bioField.SetBackgroundColor(Color.white);
-                bioField.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
-                bioField.SetPlaceholderColor(new Color(0.65f, 0.65f, 0.7f, 1f));
+                bioField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+                bioField.SetTextColor(Color.white);
+                bioField.SetPlaceholderColor(new Color(0.71f, 0.75f, 0.86f, 0.65f));
                 bioField.SetFontSize(14f);
             }
 
@@ -85,8 +85,8 @@ private void Start()
 
         private static void ApplyPillInputStyle(PillInputField field)
         {
-            field.SetBackgroundColor(Color.white);
-            field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            field.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+            field.SetTextColor(Color.white);
             field.SetFontSize(15f);
         }
 
@@ -113,34 +113,34 @@ private bool ValidateForm()
             if (string.IsNullOrWhiteSpace(nameField.Value))
             {
                 VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                nameField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                nameField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
                 isValid = false;
             }
             else
             {
-                nameField.SetBackgroundColor(Color.white);
+                nameField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
             }
 
             if (!emailField.Value.Contains("@"))
             {
                 VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                emailField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                emailField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
                 isValid = false;
             }
             else
             {
-                emailField.SetBackgroundColor(Color.white);
+                emailField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
             }
 
             if (passwordField.Value.Length < 6)
             {
                 VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                passwordField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                passwordField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
                 isValid = false;
             }
             else
             {
-                passwordField.SetBackgroundColor(Color.white);
+                passwordField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
             }
 
             return isValid;
diff --git a/RegistrationForm/RegistrationFormUxmlView.uxml b/RegistrationForm/RegistrationFormUxmlView.uxml
index 8cdf1d5..d5b362e 100644
--- a/RegistrationForm/RegistrationFormUxmlView.uxml
+++ b/RegistrationForm/RegistrationFormUxmlView.uxml
@@ -1,35 +1,33 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
-    <!--
-      UXML version of the RegistrationForm demo. PillInputField, RoundedInputField, PillSelector
-      and PillButton are declared with their UXML attributes (label, placeholder, keyboard-type,
-      password-mode, multiline…). RegistrationFormUxmlBinder.cs wires validation and submission.
-    -->
     <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="form-container" class="registrationForm__formContainer">
-            <ui:Label text="Create Account" class="registrationForm__title" />
-            <ui:Label text="Join us today — it only takes a moment." class="registrationForm__subtitle" />
+        <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" />
 
-            <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: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" />
+                <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: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>
+                <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 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: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:UXML>
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
index 383a933..321bef3 100644
--- a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
@@ -30,14 +30,14 @@ public class ScrollSnapAndDotsDemo : MonoBehaviour
     {
         // ── Page configuration ────────────────────────────────────────────────────
 
-        /// <summary>Background colors for each page (hex strings).</summary>
-        private static readonly string[] PageColors =
+        /// <summary>Per-page background modifier classes (colors defined in the USS).</summary>
+        private static readonly string[] PageModifiers =
         {
-            "#E74C3C", // red
-            "#3498DB", // blue
-            "#2ECC71", // green
-            "#9B59B6", // purple  → ComingSoonMessage page
-            "#F39C12", // orange
+            "scrollSnapDemo__page--one",
+            "scrollSnapDemo__page--two",
+            "scrollSnapDemo__page--three",
+            "scrollSnapDemo__page--four", // → ComingSoonMessage page
+            "scrollSnapDemo__page--five",
         };
 
         /// <summary>Labels shown on pages that are NOT the coming-soon page.</summary>
@@ -81,45 +81,51 @@ private void BuildUI(VisualElement root)
             // ── Root container — full screen, dark background ─────────────────────
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "scrollSnapDemo__screen");
 
-            // ── Header ────────────────────────────────────────────────────────────
-            VisualElement header = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__header");
+            // ── Example card (shared rounded container) ────────────────────────────
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__card");
 
-            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "scrollSnapDemo__title");
-            titleLabel.text = "ScrollSnap Demo";
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "scrollSnapDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
 
-            Label subtitleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "scrollSnapDemo__subtitle");
-            subtitleLabel.text = "Swipe left/right or use the arrows below";
+            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.";
+
+            // ── Carousel surface (frames the pager inside the card) ────────────────
+            VisualElement carouselSurface = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__carouselSurface");
 
             // ── ScrollSnap ────────────────────────────────────────────────────────
             scrollSnap = new ScrollSnap();
             scrollSnap.AddToClassList("scrollSnapDemo__scrollSnap");
             scrollSnap.ManualMovementEnabled = true;
-            screen.Add(scrollSnap);
+            carouselSurface.Add(scrollSnap);
 
             // ── Build pages ───────────────────────────────────────────────────────
-            for (var i = 0; i < PageColors.Length; i++)
+            for (var i = 0; i < PageModifiers.Length; i++)
             {
                 var page = BuildPage(i);
                 scrollSnap.Add(page);
             }
 
             // ── Bottom bar ─────────────────────────────────────────────────────────
-            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__bottomBar");
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__bottomBar");
 
             // Previous button
             prevButton = new PillButton();
             prevButton.AddToClassList("scrollSnapDemo__navButton");
             prevButton.Text = "←";
-            prevButton.SetInnerColor("#555566");
-            prevButton.SetOuterColor("#777788");
+            prevButton.SetInnerColor("#465062");
+            prevButton.SetOuterColor("#5C667A");
             prevButton.Clicked += OnPreviousClicked;
             bottomBar.Add(prevButton);
 
             // Dot indicator
             dotIndicator = new PageDotIndicator();
             dotIndicator.AddToClassList("scrollSnapDemo__dotIndicator");
-            dotIndicator.SetColors("#FFFFFF", "#555566");
-            dotIndicator.SetProgress(0, PageColors.Length);
+            dotIndicator.SetColors("#FFFFFF", "#44506A");
+            dotIndicator.SetProgress(0, PageModifiers.Length);
             bottomBar.Add(dotIndicator);
 
             // Next button
@@ -141,14 +147,11 @@ private void BuildUI(VisualElement root)
         // ── Page factory ──────────────────────────────────────────────────────────
         private VisualElement BuildPage(int index)
         {
-            // Outer container — fills the page slot assigned by ScrollSnap
+            // Outer container — fills the page slot assigned by ScrollSnap.
+            // Background color comes from the per-page modifier class (USS).
             var page = new VisualElement();
             page.AddToClassList("scrollSnapDemo__page");
-
-            // Parse the page background color (data-driven — stays in C#)
-            Color bg = Color.gray;
-            ColorUtility.TryParseHtmlString(PageColors[index], out bg);
-            page.style.backgroundColor = bg;
+            page.AddToClassList(PageModifiers[index]);
 
             if (index == ComingSoonPageIndex)
             {
@@ -173,7 +176,7 @@ private VisualElement BuildPage(int index)
 
                 // Sub-label
                 Label subLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageSubLabel");
-                subLabel.text = $"Page {index + 1} of {PageColors.Length}";
+                subLabel.text = $"Page {index + 1} of {PageModifiers.Length}";
             }
 
             return page;
@@ -183,7 +186,7 @@ private VisualElement BuildPage(int index)
 
         private void OnPageChanged(int newIndex)
         {
-            dotIndicator.SetProgress(newIndex, PageColors.Length);
+            dotIndicator.SetProgress(newIndex, PageModifiers.Length);
             UpdateNavButtons();
         }
 
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
index f86ca03..5f54358 100644
--- a/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsStyles.uss
@@ -1,27 +1,57 @@
 .scrollSnapDemo__screen {
 	flex-grow: 1;
-	flex-direction: column;
+	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__header {
-	padding-top: 48px;
-	padding-bottom: 16px;
-	padding-left: 24px;
-	padding-right: 24px;
-	align-items: center;
+.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: 22px;
+	font-size: 30px;
 	color: rgba(255, 255, 255, 1);
 	-unity-font-style: bold;
+	margin-bottom: 10px;
+	white-space: normal;
 }
 
 .scrollSnapDemo__subtitle {
-	font-size: 13px;
-	color: rgba(179, 179, 179, 1);
-	margin-top: 4px;
+	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 {
@@ -33,12 +63,21 @@
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
-	border-top-left-radius: 16px;
-	border-top-right-radius: 16px;
-	border-bottom-left-radius: 16px;
-	border-bottom-right-radius: 16px;
+	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;
@@ -81,15 +120,12 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	padding-left: 16px;
-	padding-right: 16px;
-	padding-top: 12px;
-	padding-bottom: 32px;
+	padding-top: 4px;
 }
 
 .scrollSnapDemo__navButton {
 	width: 56px;
-	height: 40px;
+	height: 46px;
 }
 
 .scrollSnapDemo__dotIndicator {
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/StepWizard/StepWizardDemo.cs b/StepWizard/StepWizardDemo.cs
index 7a780cb..6ecdcd2 100644
--- a/StepWizard/StepWizardDemo.cs
+++ b/StepWizard/StepWizardDemo.cs
@@ -74,16 +74,22 @@ private void BuildUI(VisualElement root)
             // ── Full-screen wrapper ───────────────────────────────────────────────
             var screen = UIToolkitExtensions.CreateVisualElement(root, "stepWizard__screen");
 
-            // ── Header ────────────────────────────────────────────────────────────
-            var header = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__header");
+            // ── Example card (shared rounded container) ────────────────────────────
+            var card = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__card");
 
-            var titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "stepWizard__title");
-            titleLabel.text = "Quick Setup";
+            var eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__eyebrow");
+            eyebrow.text = "Toolkit Sample";
 
-            stepCounterLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "stepWizard__counter");
+            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");
 
             // ── Stepper ───────────────────────────────────────────────────────────
-            var stepperWrapper = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__stepperWrapper");
+            var stepperWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__stepperWrapper");
 
             stepper = new QuadrantStepper(StepNames);
             stepper.AddToClassList("stepWizard__stepper");
@@ -91,16 +97,16 @@ private void BuildUI(VisualElement root)
             stepperWrapper.Add(stepper);
 
             // ── Progress bar ──────────────────────────────────────────────────────
-            var progressWrapper = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__progressWrapper");
+            var progressWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__progressWrapper");
 
             progressBar = new StepProgressBar();
             progressBar.AddToClassList("stepWizard__progressBar");
             // Gradient colours are part of the control's runtime API, not USS.
-            progressBar.SetGradientColors("#4CAF50", "#8BC34A");
+            progressBar.SetGradientColors("#4A90E2", "#7B68EE");
             progressWrapper.Add(progressBar);
 
             // ── Content area ──────────────────────────────────────────────────────
-            contentArea = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__content");
+            contentArea = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__content");
 
             // Build all four step panels (only one visible at a time)
             stepPanels = new VisualElement[StepNames.Length];
@@ -117,13 +123,13 @@ private void BuildUI(VisualElement root)
             }
 
             // ── Navigation bar ────────────────────────────────────────────────────
-            var navBar = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__navBar");
+            var navBar = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__navBar");
 
             backButton = new PillButton();
             backButton.AddToClassList("stepWizard__navButton");
             backButton.Text = "Back";
-            backButton.SetInnerColor("#777777");
-            backButton.SetOuterColor("#999999");
+            backButton.SetInnerColor("#465062");
+            backButton.SetOuterColor("#5C667A");
             backButton.SetTextColor(Color.white);
             backButton.Clicked += OnBackClicked;
             navBar.Add(backButton);
@@ -131,14 +137,12 @@ private void BuildUI(VisualElement root)
             nextButton = new PillButton();
             nextButton.AddToClassList("stepWizard__navButton");
             nextButton.Text = "Next";
-            nextButton.SetInnerColor("#4CAF50");
-            nextButton.SetOuterColor("#8BC34A");
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
             nextButton.SetTextColor(Color.white);
             nextButton.Clicked += OnNextClicked;
             navBar.Add(nextButton);
 
-            screen.Add(navBar);
-
             // Navigate to the first step without notifying the stepper event
             // (avoids double-navigation on init)
             GoToStep(0, notify: false);
@@ -328,18 +332,8 @@ private void GoToStep(int index, bool notify)
             // Back button — hidden on first step (runtime state — stays in C#)
             backButton.style.display = currentStep == 0 ? DisplayStyle.None : DisplayStyle.Flex;
 
-            // Next button label changes on the last step
+            // Next button label changes on the last step (colour stays consistent).
             nextButton.Text = currentStep == StepNames.Length - 1 ? "Finish" : "Next";
-            if (currentStep == StepNames.Length - 1)
-            {
-                nextButton.SetInnerColor("#4A90E2");
-                nextButton.SetOuterColor("#7B68EE");
-            }
-            else
-            {
-                nextButton.SetInnerColor("#4CAF50");
-                nextButton.SetOuterColor("#8BC34A");
-            }
         }
     }
 }
diff --git a/StepWizard/StepWizardStyles.uss b/StepWizard/StepWizardStyles.uss
index 4ba3d51..22f6aeb 100644
--- a/StepWizard/StepWizardStyles.uss
+++ b/StepWizard/StepWizardStyles.uss
@@ -2,35 +2,66 @@
 
 .stepWizard__screen {
 	flex-grow: 1;
-	flex-direction: column;
+	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__header {
-	padding-top: 48px;
-	padding-bottom: 12px;
-	padding-left: 20px;
-	padding-right: 20px;
-	align-items: center;
+.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: 22px;
+	font-size: 30px;
 	color: rgba(255, 255, 255, 1);
 	-unity-font-style: bold;
-	margin-bottom: 4px;
+	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(173, 183, 210, 0.85);
+	color: rgba(132, 173, 255, 0.95);
+	margin-bottom: 16px;
 }
 
 .stepWizard__stepperWrapper {
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 8px;
-	padding-bottom: 8px;
+	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 {
@@ -39,14 +70,12 @@
 	border-top-right-radius: 21px;
 	border-bottom-left-radius: 21px;
 	border-bottom-right-radius: 21px;
-	background-color: rgba(255, 255, 255, 0.08);
+	background-color: rgba(255, 255, 255, 0.07);
 }
 
 .stepWizard__progressWrapper {
-	padding-left: 20px;
-	padding-right: 20px;
 	padding-top: 4px;
-	padding-bottom: 4px;
+	padding-bottom: 10px;
 }
 
 .stepWizard__progressBar {
@@ -59,19 +88,15 @@
 
 .stepWizard__content {
 	flex-grow: 1;
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 16px;
-	padding-bottom: 16px;
+	padding-top: 12px;
+	padding-bottom: 18px;
 }
 
 .stepWizard__navBar {
 	flex-direction: row;
 	justify-content: space-between;
-	padding-left: 20px;
-	padding-right: 20px;
 	padding-top: 12px;
-	padding-bottom: 32px;
+	padding-bottom: 0;
 }
 
 .stepWizard__navButton {
@@ -82,6 +107,14 @@
 .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 {
@@ -111,7 +144,7 @@
 
 .stepWizard__fieldLabel {
 	font-size: 12px;
-	color: rgba(132, 173, 255, 0.9);
+	color: rgba(173, 183, 210, 0.85);
 	margin-bottom: 4px;
 }
 
@@ -207,7 +240,9 @@
 }
 
 .stepWizard__summaryBox {
-	background-color: rgba(46, 204, 112, 0.12);
+	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;
@@ -232,6 +267,6 @@
 
 .stepWizard__summaryValue {
 	font-size: 14px;
-	color: rgba(86, 222, 150, 1);
+	color: rgba(132, 173, 255, 0.95);
 	-unity-font-style: bold;
 }
diff --git a/StepWizard/StepWizardUxmlBinder.cs b/StepWizard/StepWizardUxmlBinder.cs
index 2b3742e..5d88775 100644
--- a/StepWizard/StepWizardUxmlBinder.cs
+++ b/StepWizard/StepWizardUxmlBinder.cs
@@ -54,9 +54,9 @@ private void Start()
             // Field appearance is part of the control's runtime API (kept out of UXML/USS here).
             root.Query<RoundedInputField>().ForEach(field =>
             {
-                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.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);
             });
 
@@ -121,8 +121,8 @@ private void GoToStep(int index, bool notify)
 
             bool isLast = currentStep == StepCount - 1;
             nextButton.Text = isLast ? "Finish" : "Next";
-            nextButton.SetInnerColor(isLast ? "#4A90E2" : "#4CAF50");
-            nextButton.SetOuterColor(isLast ? "#7B68EE" : "#8BC34A");
+            nextButton.SetInnerColor("#4A90E2");
+            nextButton.SetOuterColor("#7B68EE");
         }
     }
 }
diff --git a/StepWizard/StepWizardUxmlView.uxml b/StepWizard/StepWizardUxmlView.uxml
index 02ee2b7..a25f3e8 100644
--- a/StepWizard/StepWizardUxmlView.uxml
+++ b/StepWizard/StepWizardUxmlView.uxml
@@ -1,27 +1,23 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:ext="UnityUIToolkit.Extensions" editor-extension-mode="False">
-    <!--
-      UXML version of the StepWizard demo. QuadrantStepper, StepProgressBar and PillButton are
-      declared here with their UXML attributes (options, inner-color/outer-color, text…).
-      StepWizardUxmlBinder.cs drives navigation, panel visibility and progress.
-    -->
     <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="header" class="stepWizard__header">
-            <ui:Label text="Quick Setup" class="stepWizard__title" />
+        <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>
 
-        <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="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="#4CAF50" outer-color="#8BC34A" />
-        </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="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" />
@@ -112,11 +108,12 @@
                     </ui:VisualElement>
                 </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="#777777" outer-color="#999999" />
-            <ext:PillButton name="next-button" class="stepWizard__navButton" text="Next" inner-color="#4CAF50" outer-color="#8BC34A" />
+            <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/ToastNotifications/ToastNotificationsDemo.cs b/ToastNotifications/ToastNotificationsDemo.cs
index 0eed780..251db01 100644
--- a/ToastNotifications/ToastNotificationsDemo.cs
+++ b/ToastNotifications/ToastNotificationsDemo.cs
@@ -68,7 +68,6 @@ private static readonly (string title, string subtitle)[] ToastTemplates =
         // ── Internal state ────────────────────────────────────────────────────────
         private UIDocument uiDocument;
         private VisualElement toastContainer;
-        private Label emptyLabel;
         private int toastCounter = 0;
         private int templateIndex = 0;
         private int colorIndex = 0;
@@ -105,26 +104,19 @@ private void BuildUI(VisualElement root)
             // ── Screen ────────────────────────────────────────────────────────────
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "toastDemo__screen");
 
-            // ── Header ────────────────────────────────────────────────────────────
-            VisualElement header = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__header");
+            // ── Example card (shared rounded container): title, description, button ─
+            VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__card");
 
-            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "toastDemo__headerTitle");
-            titleLabel.text = "Toast Notifications";
-
-            Label instructionLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, "toastDemo__instruction");
-            instructionLabel.text = "Swipe left or right to dismiss, or tap a toast.";
-
-            // ── Toast container ───────────────────────────────────────────────────
-            VisualElement scrollWrapper = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__scrollWrapper");
+            Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__eyebrow");
+            eyebrow.text = "Toolkit Sample";
 
-            toastContainer = UIToolkitExtensions.CreateVisualElement(scrollWrapper, "toastDemo__container");
+            Label titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__headerTitle");
+            titleLabel.text = "Toast Notifications";
 
-            // Placeholder shown when no toasts exist
-            emptyLabel = UIToolkitExtensions.CreateVisualElement<Label>(toastContainer, "toastDemo__empty");
-            emptyLabel.text = "No notifications yet.\nTap \"Add Toast\" to create one.";
+            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.";
 
-            // ── Bottom bar ────────────────────────────────────────────────────────
-            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__bottomBar");
+            VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "toastDemo__bottomBar");
 
             PillButton addButton = UIToolkitExtensions.CreateVisualElement<PillButton>(bottomBar, "toastDemo__addButton");
             addButton.Text = "Add Toast";
@@ -133,6 +125,15 @@ private void BuildUI(VisualElement root)
             addButton.SetTextColor(Color.white);
             addButton.SetFontSize(15f);
             addButton.Clicked += OnAddToastClicked;
+
+            // ── Full-screen overlay the toasts stack into (drawn above the card) ────
+            // The overlay and its container ignore picking so the card's button stays
+            // clickable; each toast re-enables picking for its own swipe/tap input.
+            VisualElement overlay = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__overlay");
+            overlay.pickingMode = PickingMode.Ignore;
+
+            toastContainer = UIToolkitExtensions.CreateVisualElement(overlay, "toastDemo__container");
+            toastContainer.pickingMode = PickingMode.Ignore;
         }
 
         // ── Toast creation ────────────────────────────────────────────────────────
@@ -156,9 +157,6 @@ private void SpawnToast()
             var bgColor = ToastColors[colorIndex % ToastColors.Length];
             colorIndex++;
 
-            // Hide the empty-state label once the first toast appears
-            emptyLabel.style.display = DisplayStyle.None;
-
             // ── Toast root element ────────────────────────────────────────────────
             var toast = UIToolkitExtensions.CreateVisualElement(toastContainer, "toastDemo__toast");
             // Runtime/data-driven: background color comes from the ToastColors array
@@ -338,12 +336,6 @@ private void RemoveToastFromHierarchy(ToastData toastData)
             {
                 toastData.Root.RemoveFromHierarchy();
             }
-
-            // Show the empty-state label again when all toasts are gone
-            if (activeToasts.Count == 0)
-            {
-                emptyLabel.style.display = DisplayStyle.Flex;
-            }
         }
 
         /// <summary>Remove the oldest toast immediately (when cap is exceeded).</summary>
diff --git a/ToastNotifications/ToastNotificationsStyles.uss b/ToastNotifications/ToastNotificationsStyles.uss
index 0ecd243..e5106cb 100644
--- a/ToastNotifications/ToastNotificationsStyles.uss
+++ b/ToastNotifications/ToastNotificationsStyles.uss
@@ -1,56 +1,77 @@
 .toastDemo__screen {
 	flex-grow: 1;
-	flex-direction: column;
+	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__header {
-	padding-top: 48px;
-	padding-bottom: 12px;
-	padding-left: 20px;
-	padding-right: 20px;
+.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: 22px;
+	font-size: 30px;
 	color: rgba(255, 255, 255, 1);
 	-unity-font-style: bold;
-	margin-bottom: 4px;
+	margin-bottom: 10px;
+	white-space: normal;
 }
 
 .toastDemo__instruction {
-	font-size: 13px;
-	color: rgba(166, 166, 179, 1);
+	font-size: 15px;
+	color: rgba(202, 211, 232, 0.9);
+	margin-bottom: 22px;
 	white-space: normal;
 }
 
-.toastDemo__scrollWrapper {
-	flex-grow: 1;
-	padding-left: 16px;
-	padding-right: 16px;
-	padding-top: 12px;
-	padding-bottom: 12px;
-	overflow: hidden;
+/* 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 {
-	flex-grow: 1;
+	width: 100%;
+	max-width: 440px;
 	flex-direction: column;
-}
-
-.toastDemo__empty {
-	flex-grow: 1;
-	-unity-text-align: middle-center;
-	font-size: 14px;
-	color: rgba(102, 102, 115, 1);
-	white-space: normal;
+	align-items: stretch;
 }
 
 .toastDemo__bottomBar {
-	padding-left: 20px;
-	padding-right: 20px;
-	padding-top: 12px;
-	padding-bottom: 32px;
+	margin-top: 6px;
+	padding-top: 0;
 	align-items: center;
 }
 
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..f4db0f2
--- /dev/null
+++ b/ToastNotifications/ToastNotificationsUxmlView.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="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>
+
+        <!-- Notifications render full screen, above the card. The overlay ignores
+             picking so the card's button stays clickable; each toast handles its own. -->
+        <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}

From 04c24dcd6c0cd17bc41ca805d77918c26613c471 Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Tue, 23 Jun 2026 15:02:53 +0100
Subject: [PATCH 3/6] Patch styling on registration form

---
 RegistrationForm/RegistrationFormDemo.cs      |  64 ++--------
 RegistrationForm/RegistrationFormStyles.uss   | 114 ++++++++++++++----
 .../RegistrationFormUxmlBinder.cs             |  23 ++--
 3 files changed, 109 insertions(+), 92 deletions(-)

diff --git a/RegistrationForm/RegistrationFormDemo.cs b/RegistrationForm/RegistrationFormDemo.cs
index 112e159..d5808c7 100644
--- a/RegistrationForm/RegistrationFormDemo.cs
+++ b/RegistrationForm/RegistrationFormDemo.cs
@@ -1,14 +1,3 @@
-// Examples~/RegistrationForm/RegistrationFormDemo.cs
-// Demonstrates: PillInputField, RoundedInputField, PillButton, PillSelector,
-//               VisualElementShakeUtility (validation shake)
-//
-// Scene setup:
-//   A companion scene already wires this component to a GameObject that carries a
-//   UIDocument. The demo resolves that UIDocument via GetComponent<UIDocument>()
-//   on the same GameObject, so no manual assignment is required.
-//   Press Play — fill in the form and tap "Create Account".
-//   Invalid fields shake and highlight. Valid submission shows a success screen.
-
 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
@@ -34,7 +23,6 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class RegistrationFormDemo : MonoBehaviour
     {
-        // ── Category options ──────────────────────────────────────────────────────
         private static readonly string[] CategoryOptions =
         {
             "Fitness",
@@ -45,7 +33,6 @@ public class RegistrationFormDemo : MonoBehaviour
 
         private int currentCategoryIndex = 0;
 
-        // ── Runtime field references ───────────────────────────────────────────────
         private UIDocument uiDocument;
         private PillInputField nameField;
         private PillInputField emailField;
@@ -55,7 +42,6 @@ public class RegistrationFormDemo : MonoBehaviour
         private VisualElement formContainer;
         private VisualElement successContainer;
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             uiDocument = GetComponent<UIDocument>();
@@ -70,30 +56,23 @@ private void Start()
             BuildUI(root);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // Full-screen dark backdrop, centered
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "registrationForm__screen");
 
-            // ── Example card (shared rounded container) ────────────────────────────
             VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "registrationForm__card");
 
             Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "registrationForm__eyebrow");
             eyebrow.text = "Toolkit Sample";
 
-            // Title and subtitle live on the card itself so they stay visible when the
-            // form fades out and the success message takes its place.
             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.";
 
-            // ── Form container ────────────────────────────────────────────────────
             formContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__formContainer");
 
-            // ── Full Name — PillInputField ─────────────────────────────────────────
             nameField = new PillInputField();
             nameField.Label = "Full Name";
             nameField.SetPlaceholder("Your full name");
@@ -102,7 +81,6 @@ private void BuildUI(VisualElement root)
             ApplyPillInputStyle(nameField);
             formContainer.Add(nameField);
 
-            // ── Email — PillInputField ────────────────────────────────────────────
             emailField = new PillInputField();
             emailField.Label = "Email Address";
             emailField.SetPlaceholder("you@example.com");
@@ -111,7 +89,6 @@ private void BuildUI(VisualElement root)
             ApplyPillInputStyle(emailField);
             formContainer.Add(emailField);
 
-            // ── Password — PillInputField (password mode) ─────────────────────────
             passwordField = new PillInputField();
             passwordField.Label = "Password";
             passwordField.SetPlaceholder("Min. 6 characters");
@@ -121,7 +98,6 @@ private void BuildUI(VisualElement root)
             ApplyPillInputStyle(passwordField);
             formContainer.Add(passwordField);
 
-            // ── Bio — RoundedInputField (multiline) ───────────────────────────────
             Label bioSectionLabel = UIToolkitExtensions.CreateVisualElement<Label>(formContainer, "registrationForm__sectionLabel");
             bioSectionLabel.text = "Bio (optional)";
 
@@ -129,14 +105,11 @@ private void BuildUI(VisualElement root)
             bioField.Placeholder = "Tell us a little about yourself…";
             bioField.Multiline = true;
             bioField.MaxLength = 280;
-            bioField.SetBackgroundColor(Color.white);
-            bioField.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
-            bioField.SetPlaceholderColor(new Color(0.65f, 0.65f, 0.7f, 1f));
+            bioField.SetTextColor(Color.white);
             bioField.SetFontSize(14f);
             bioField.AddToClassList("registrationForm__bioField");
             formContainer.Add(bioField);
 
-            // ── Category — PillSelector ───────────────────────────────────────────
             categorySelector = new PillSelector();
             categorySelector.Label = "Category";
             categorySelector.Value = CategoryOptions[currentCategoryIndex];
@@ -144,7 +117,6 @@ private void BuildUI(VisualElement root)
             categorySelector.Clicked += OnCategorySelectorClicked;
             formContainer.Add(categorySelector);
 
-            // ── Submit button — PillButton ────────────────────────────────────────
             PillButton submitButton = new PillButton();
             submitButton.Text = "Create Account";
             submitButton.SetInnerColor("#4A90E2");
@@ -155,11 +127,9 @@ private void BuildUI(VisualElement root)
             submitButton.Clicked += OnSubmitClicked;
             formContainer.Add(submitButton);
 
-            // ── Success container (hidden until form submitted) ────────────────────
             BuildSuccessContainer(card);
         }
 
-        // ── Success screen ─────────────────────────────────────────────────────────
         private void BuildSuccessContainer(VisualElement card)
         {
             successContainer = UIToolkitExtensions.CreateVisualElement(card, "registrationForm__successContainer");
@@ -176,21 +146,16 @@ private void BuildSuccessContainer(VisualElement card)
             successMessage.text = "Welcome aboard! Your account has been successfully created. You can now explore all features.";
         }
 
-        // ── Helpers ───────────────────────────────────────────────────────────────
-
-        /// <summary>Apply consistent control-API styles to a PillInputField.</summary>
         private static void ApplyPillInputStyle(PillInputField field)
         {
-            field.SetBackgroundColor(Color.white);
-            field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+            // Field background, border and inner-input chrome come from the USS
+            // overrides; the runtime API only sets the typed-text colour and size.
+            field.SetTextColor(Color.white);
             field.SetFontSize(15f);
         }
 
-        // ── Event handlers ────────────────────────────────────────────────────────
-
         private void OnCategorySelectorClicked()
         {
-            // Advance through options in a cycle — simulates a picker result
             currentCategoryIndex = (currentCategoryIndex + 1) % CategoryOptions.Length;
             categorySelector.Value = CategoryOptions[currentCategoryIndex];
         }
@@ -199,11 +164,9 @@ private void OnSubmitClicked()
         {
             if (!ValidateForm())
             {
-                // Validation failed — individual field shakes were applied inside ValidateForm
                 return;
             }
 
-            // All valid — transition to success
             StartCoroutine(ShowSuccessTransition());
         }
 
@@ -216,40 +179,37 @@ private bool ValidateForm()
         {
             var isValid = true;
 
-            // Full Name — must not be empty
             if (string.IsNullOrWhiteSpace(nameField.Value))
             {
                 VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                nameField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                nameField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                nameField.SetBackgroundColor(Color.white);
+                nameField.EnableInClassList("registrationForm__field--error", false);
             }
 
-            // Email — must contain '@'
             if (!emailField.Value.Contains("@"))
             {
                 VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                emailField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                emailField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                emailField.SetBackgroundColor(Color.white);
+                emailField.EnableInClassList("registrationForm__field--error", false);
             }
 
-            // Password — minimum 6 characters
             if (passwordField.Value.Length < 6)
             {
                 VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                passwordField.SetBackgroundColor(new Color(1f, 0.93f, 0.93f, 1f));
+                passwordField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                passwordField.SetBackgroundColor(Color.white);
+                passwordField.EnableInClassList("registrationForm__field--error", false);
             }
 
             return isValid;
@@ -274,7 +234,6 @@ private IEnumerator ShowSuccessTransition()
             formContainer.style.display = DisplayStyle.None;
             successContainer.style.display = DisplayStyle.Flex;
 
-            // Fade success container in
             successContainer.style.opacity = 0f;
             successContainer.style.transitionProperty = new StyleList<StylePropertyName>(
                 new List<StylePropertyName> { new("opacity") });
@@ -283,10 +242,9 @@ private IEnumerator ShowSuccessTransition()
             successContainer.style.transitionTimingFunction = new StyleList<EasingFunction>(
                 new List<EasingFunction> { new(EasingMode.EaseOut) });
 
-            // Force a frame so the initial opacity=0 is applied before we set it to 1
             yield return null;
 
             successContainer.style.opacity = 1f;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/RegistrationForm/RegistrationFormStyles.uss b/RegistrationForm/RegistrationFormStyles.uss
index dd20ff9..5ce468b 100644
--- a/RegistrationForm/RegistrationFormStyles.uss
+++ b/RegistrationForm/RegistrationFormStyles.uss
@@ -1,5 +1,3 @@
-/* Dark theme — matches the DropDownPhoneEntry demo (screen rgba(9,15,27,1)). */
-
 .registrationForm__screen {
 	flex-grow: 1;
 	align-items: center;
@@ -50,28 +48,49 @@
 	white-space: normal;
 }
 
-.registrationForm__nameField {
+.registrationForm__nameField,
+.registrationForm__emailField,
+.registrationForm__passwordField {
 	margin-bottom: 16px;
-	border-top-left-radius: 24px;
-	border-top-right-radius: 24px;
-	border-bottom-left-radius: 24px;
-	border-bottom-right-radius: 24px;
 }
 
-.registrationForm__emailField {
-	margin-bottom: 16px;
-	border-top-left-radius: 24px;
-	border-top-right-radius: 24px;
-	border-bottom-left-radius: 24px;
-	border-bottom-right-radius: 24px;
+.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__passwordField {
-	margin-bottom: 16px;
-	border-top-left-radius: 24px;
-	border-top-right-radius: 24px;
-	border-bottom-left-radius: 24px;
-	border-bottom-right-radius: 24px;
+.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 {
@@ -83,16 +102,65 @@
 .registrationForm__bioField {
 	height: 96px;
 	margin-bottom: 16px;
-	border-top-left-radius: 12px;
-	border-top-right-radius: 12px;
-	border-bottom-left-radius: 12px;
-	border-bottom-right-radius: 12px;
+	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;
diff --git a/RegistrationForm/RegistrationFormUxmlBinder.cs b/RegistrationForm/RegistrationFormUxmlBinder.cs
index c19af08..b8c2d48 100644
--- a/RegistrationForm/RegistrationFormUxmlBinder.cs
+++ b/RegistrationForm/RegistrationFormUxmlBinder.cs
@@ -1,7 +1,3 @@
-// Examples~/RegistrationForm/RegistrationFormUxmlBinder.cs
-// UXML counterpart of RegistrationFormDemo.cs. Layout lives in RegistrationFormUxmlView.uxml;
-// this binder wires validation (with shake feedback) and the success transition.
-
 using System.Collections;
 using System.Collections.Generic;
 using UnityEngine;
@@ -10,7 +6,6 @@
 
 namespace UnityUIToolkit.Extensions.Examples
 {
-    /// <summary>Behaviour binder for the UXML-authored RegistrationForm demo.</summary>
     public class RegistrationFormUxmlBinder : MonoBehaviour
     {
         private static readonly string[] CategoryOptions =
@@ -60,16 +55,13 @@ private void Start()
                 return;
             }
 
-            // Field appearance is configured through the controls' runtime API.
             ApplyPillInputStyle(nameField);
             ApplyPillInputStyle(emailField);
             ApplyPillInputStyle(passwordField);
 
             if (bioField != null)
             {
-                bioField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
                 bioField.SetTextColor(Color.white);
-                bioField.SetPlaceholderColor(new Color(0.71f, 0.75f, 0.86f, 0.65f));
                 bioField.SetFontSize(14f);
             }
 
@@ -85,7 +77,6 @@ private void Start()
 
         private static void ApplyPillInputStyle(PillInputField field)
         {
-            field.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
             field.SetTextColor(Color.white);
             field.SetFontSize(15f);
         }
@@ -113,34 +104,34 @@ private bool ValidateForm()
             if (string.IsNullOrWhiteSpace(nameField.Value))
             {
                 VisualElementShakeUtility.Shake(nameField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                nameField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
+                nameField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                nameField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+                nameField.EnableInClassList("registrationForm__field--error", false);
             }
 
             if (!emailField.Value.Contains("@"))
             {
                 VisualElementShakeUtility.Shake(emailField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                emailField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
+                emailField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                emailField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+                emailField.EnableInClassList("registrationForm__field--error", false);
             }
 
             if (passwordField.Value.Length < 6)
             {
                 VisualElementShakeUtility.Shake(passwordField, wobbleCount: 4, wobbleDurationMs: 65, amplitudePixels: 10f);
-                passwordField.SetBackgroundColor(new Color(0.46f, 0.14f, 0.22f, 0.9f));
+                passwordField.EnableInClassList("registrationForm__field--error", true);
                 isValid = false;
             }
             else
             {
-                passwordField.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
+                passwordField.EnableInClassList("registrationForm__field--error", false);
             }
 
             return isValid;
@@ -185,4 +176,4 @@ private IEnumerator ShowSuccessTransition()
             successContainer.style.opacity = 1f;
         }
     }
-}
+}
\ No newline at end of file

From cffe86a732feb9e05592bcda43c58ac50adeafd4 Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Tue, 23 Jun 2026 17:47:55 +0100
Subject: [PATCH 4/6] Added newer examples

---
 ScreenHeader.meta                            |   8 +
 ScreenHeader/ScreenHeaderDemo.cs             |  90 ++++++
 ScreenHeader/ScreenHeaderDemo.cs.meta        |  11 +
 ScreenHeader/ScreenHeaderDemo.unity          | 287 +++++++++++++++++++
 ScreenHeader/ScreenHeaderDemo.unity.meta     |   7 +
 ScreenHeader/ScreenHeaderStyles.uss          | 101 +++++++
 ScreenHeader/ScreenHeaderStyles.uss.meta     |  12 +
 ScreenHeader/ScreenHeaderUxmlBinder.cs       |  37 +++
 ScreenHeader/ScreenHeaderUxmlBinder.cs.meta  |  11 +
 ScreenHeader/ScreenHeaderUxmlDemo.unity      | 106 +++++++
 ScreenHeader/ScreenHeaderUxmlDemo.unity.meta |   7 +
 ScreenHeader/ScreenHeaderUxmlView.uxml       |  18 ++
 ScreenHeader/ScreenHeaderUxmlView.uxml.meta  |  10 +
 Shared/UIToolkitExtensionsExamplesTheme.tss  |   3 +
 SocialLinks.meta                             |   8 +
 SocialLinks/SocialLinksDemo.cs               | 103 +++++++
 SocialLinks/SocialLinksDemo.cs.meta          |  11 +
 SocialLinks/SocialLinksDemo.unity            | 287 +++++++++++++++++++
 SocialLinks/SocialLinksDemo.unity.meta       |   7 +
 SocialLinks/SocialLinksStyles.uss            |  87 ++++++
 SocialLinks/SocialLinksStyles.uss.meta       |  12 +
 SocialLinks/SocialLinksUxmlBinder.cs         |  57 ++++
 SocialLinks/SocialLinksUxmlBinder.cs.meta    |  11 +
 SocialLinks/SocialLinksUxmlDemo.unity        | 106 +++++++
 SocialLinks/SocialLinksUxmlDemo.unity.meta   |   7 +
 SocialLinks/SocialLinksUxmlView.uxml         |  20 ++
 SocialLinks/SocialLinksUxmlView.uxml.meta    |  10 +
 27 files changed, 1434 insertions(+)
 create mode 100644 ScreenHeader.meta
 create mode 100644 ScreenHeader/ScreenHeaderDemo.cs
 create mode 100644 ScreenHeader/ScreenHeaderDemo.cs.meta
 create mode 100644 ScreenHeader/ScreenHeaderDemo.unity
 create mode 100644 ScreenHeader/ScreenHeaderDemo.unity.meta
 create mode 100644 ScreenHeader/ScreenHeaderStyles.uss
 create mode 100644 ScreenHeader/ScreenHeaderStyles.uss.meta
 create mode 100644 ScreenHeader/ScreenHeaderUxmlBinder.cs
 create mode 100644 ScreenHeader/ScreenHeaderUxmlBinder.cs.meta
 create mode 100644 ScreenHeader/ScreenHeaderUxmlDemo.unity
 create mode 100644 ScreenHeader/ScreenHeaderUxmlDemo.unity.meta
 create mode 100644 ScreenHeader/ScreenHeaderUxmlView.uxml
 create mode 100644 ScreenHeader/ScreenHeaderUxmlView.uxml.meta
 create mode 100644 SocialLinks.meta
 create mode 100644 SocialLinks/SocialLinksDemo.cs
 create mode 100644 SocialLinks/SocialLinksDemo.cs.meta
 create mode 100644 SocialLinks/SocialLinksDemo.unity
 create mode 100644 SocialLinks/SocialLinksDemo.unity.meta
 create mode 100644 SocialLinks/SocialLinksStyles.uss
 create mode 100644 SocialLinks/SocialLinksStyles.uss.meta
 create mode 100644 SocialLinks/SocialLinksUxmlBinder.cs
 create mode 100644 SocialLinks/SocialLinksUxmlBinder.cs.meta
 create mode 100644 SocialLinks/SocialLinksUxmlDemo.unity
 create mode 100644 SocialLinks/SocialLinksUxmlDemo.unity.meta
 create mode 100644 SocialLinks/SocialLinksUxmlView.uxml
 create mode 100644 SocialLinks/SocialLinksUxmlView.uxml.meta

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..995a569
--- /dev/null
+++ b/ScreenHeader/ScreenHeaderDemo.cs
@@ -0,0 +1,90 @@
+// 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 bar: back (left), title, info + sound toggle (right) ─────────
+            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.");
+
+            // ── Body card explaining the control ───────────────────────────────────
+            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/Shared/UIToolkitExtensionsExamplesTheme.tss b/Shared/UIToolkitExtensionsExamplesTheme.tss
index ca2557d..e19fd43 100644
--- a/Shared/UIToolkitExtensionsExamplesTheme.tss
+++ b/Shared/UIToolkitExtensionsExamplesTheme.tss
@@ -9,3 +9,6 @@
 @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/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..0c0e378
--- /dev/null
+++ b/SocialLinks/SocialLinksDemo.cs
@@ -0,0 +1,103 @@
+// 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; // show the add button and per-row remove buttons
+            socialLinks.PlatformPlaceholderResolver = platform => $"Enter your {platform} handle or URL";
+
+            // Seed a couple of rows so the list starts with multiple lines. Edit mode is on first,
+            // so these seeded rows also get their remove buttons.
+            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..ca40cde
--- /dev/null
+++ b/SocialLinks/SocialLinksUxmlBinder.cs
@@ -0,0 +1,57 @@
+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";
+
+            // Edit mode is enabled in the UXML, so seeded rows also get their remove buttons.
+            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}

From 23e2bfbcd0f0c2ee02510738380158b72741d37a Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Tue, 23 Jun 2026 19:41:38 +0100
Subject: [PATCH 5/6] Updated current example checkouts

---
 ContentExplorer/ContentExplorerDemo.cs        |  33 --
 ContentExplorer/ContentExplorerUxmlBinder.cs  |   6 +-
 DropDownPhoneEntry/DropDownPhoneEntryDemo.cs  |  13 +
 .../DropDownPhoneEntryUxmlBinder.cs           |   6 +-
 ImageCropOverlay/ImageCropOverlayDemo.cs      |  14 +-
 NotificationList.meta                         |   8 +
 NotificationList/NotificationListDemo.cs      | 181 +++++++++++
 NotificationList/NotificationListDemo.cs.meta |  11 +
 NotificationList/NotificationListDemo.unity   | 287 ++++++++++++++++++
 .../NotificationListDemo.unity.meta           |   7 +
 NotificationList/NotificationListStyles.uss   | 121 ++++++++
 .../NotificationListStyles.uss.meta           |  12 +
 .../NotificationListUxmlBinder.cs             | 139 +++++++++
 .../NotificationListUxmlBinder.cs.meta        |  11 +
 .../NotificationListUxmlDemo.unity            | 106 +++++++
 .../NotificationListUxmlDemo.unity.meta       |   7 +
 .../NotificationListUxmlView.uxml             |  22 ++
 .../NotificationListUxmlView.uxml.meta        |  10 +
 ProfileEditor/ProfileEditorDemo.cs            |   8 +-
 RegistrationForm/RegistrationFormDemo.cs      |  17 +-
 ScreenHeader/ScreenHeaderDemo.cs              |   2 -
 ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs    |  45 +--
 ScrollSnapSplit/ScrollSnapSplitCSharpView.cs  |  25 +-
 ScrollSnapSplit/ScrollSnapSplitUxmlView.cs    |   7 -
 SocialLinks/SocialLinksDemo.cs                |   4 +-
 SocialLinks/SocialLinksUxmlBinder.cs          |   1 -
 StepWizard/StepWizardDemo.cs                  |  34 +--
 StepWizard/StepWizardUxmlBinder.cs            |   5 +-
 ToastNotifications/ToastNotificationsDemo.cs  |  66 ++--
 .../ToastNotificationsUxmlView.uxml           |   2 -
 30 files changed, 1013 insertions(+), 197 deletions(-)
 create mode 100644 NotificationList.meta
 create mode 100644 NotificationList/NotificationListDemo.cs
 create mode 100644 NotificationList/NotificationListDemo.cs.meta
 create mode 100644 NotificationList/NotificationListDemo.unity
 create mode 100644 NotificationList/NotificationListDemo.unity.meta
 create mode 100644 NotificationList/NotificationListStyles.uss
 create mode 100644 NotificationList/NotificationListStyles.uss.meta
 create mode 100644 NotificationList/NotificationListUxmlBinder.cs
 create mode 100644 NotificationList/NotificationListUxmlBinder.cs.meta
 create mode 100644 NotificationList/NotificationListUxmlDemo.unity
 create mode 100644 NotificationList/NotificationListUxmlDemo.unity.meta
 create mode 100644 NotificationList/NotificationListUxmlView.uxml
 create mode 100644 NotificationList/NotificationListUxmlView.uxml.meta

diff --git a/ContentExplorer/ContentExplorerDemo.cs b/ContentExplorer/ContentExplorerDemo.cs
index e78c91f..5b127e4 100644
--- a/ContentExplorer/ContentExplorerDemo.cs
+++ b/ContentExplorer/ContentExplorerDemo.cs
@@ -29,7 +29,6 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class ContentExplorerDemo : MonoBehaviour
     {
-        // ── Section data ──────────────────────────────────────────────────────────
         private static readonly (string section, string[] items)[] SectionData =
         {
             (
@@ -63,14 +62,12 @@ private static readonly (string section, string[] items)[] SectionData =
             ),
         };
 
-        // ── Runtime references ────────────────────────────────────────────────────
         private UIDocument uiDocument;
         private LoadingIcon loadingIcon;
         private VisualElement contentScroll;
         private Label statusLabel;
         private Texture2D spinnerTexture;
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             uiDocument = GetComponent<UIDocument>();
@@ -91,14 +88,10 @@ private void OnDestroy()
                 Destroy(spinnerTexture);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // ── Screen wrapper ────────────────────────────────────────────────────
-            // position: relative is needed for the absolute loading overlay
             var screen = UIToolkitExtensions.CreateVisualElement(root, "contentExplorer__screen");
 
-            // ── Example card (shared rounded container) ────────────────────────────
             var card = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__card");
 
             var eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__eyebrow");
@@ -110,30 +103,22 @@ private void BuildUI(VisualElement root)
             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.";
 
-            // ── Scrollable content ────────────────────────────────────────────────
             contentScroll = UIToolkitExtensions.CreateVisualElement(card, "contentExplorer__contentScroll");
-            // Start invisible — revealed after load finishes (runtime state)
             contentScroll.style.opacity = 0f;
 
-            // Build collapsible sections
             foreach (var (sectionTitle, items) in SectionData)
             {
                 BuildSection(contentScroll, sectionTitle, items);
             }
 
-            // ── Status line ───────────────────────────────────────────────────────
             statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "contentExplorer__statusLabel");
             statusLabel.text = "Loading content…";
 
-            // ── Loading overlay (absolute, full-screen, on top) ───────────────────
             BuildLoadingOverlay(screen);
 
-            // ── Kick off async load simulation ────────────────────────────────────
             StartCoroutine(SimulateAsyncLoad());
         }
 
-        // ── Section builder ───────────────────────────────────────────────────────
-
         private void BuildSection(VisualElement parent, string sectionTitle, string[] items)
         {
             var section = new CollapsibleSection();
@@ -142,7 +127,6 @@ private void BuildSection(VisualElement parent, string sectionTitle, string[] it
 
             foreach (var itemText in items)
             {
-                // Capture loop variable for the lambda
                 var capturedText = itemText;
 
                 var btn = new IconLabelButton();
@@ -156,17 +140,10 @@ private void BuildSection(VisualElement parent, string sectionTitle, string[] it
             parent.Add(section);
         }
 
-        // ── Loading overlay ───────────────────────────────────────────────────────
-
         private void BuildLoadingOverlay(VisualElement screen)
         {
-            // Semi-transparent backdrop positioned absolutely over the full screen
             var overlay = UIToolkitExtensions.CreateVisualElement(screen, "contentExplorer__loadingOverlay");
 
-            // LoadingIcon — centered inside the overlay.
-            // Uses ProceduralTextureUtility to generate a runtime spinner arc texture,
-            // demonstrating the utility. The package USS default (LoadingSpinner.svg) would
-            // also work if SetIcon is not called.
             loadingIcon = new LoadingIcon();
             loadingIcon.AddToClassList("contentExplorer__loadingIcon");
             spinnerTexture = ProceduralTextureUtility.CreateSpinnerArc(64, new Color(0.27f, 0.55f, 0.87f));
@@ -176,28 +153,21 @@ private void BuildLoadingOverlay(VisualElement screen)
             var loadingLabel = UIToolkitExtensions.CreateVisualElement<Label>(overlay, "contentExplorer__loadingLabel");
             loadingLabel.text = "Loading content…";
 
-            // Start the spinner — block pointer events while loading
             loadingIcon.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
         }
 
-        // ── Async load simulation ─────────────────────────────────────────────────
-
         private IEnumerator SimulateAsyncLoad()
         {
             yield return new WaitForSeconds(1.5f);
 
-            // Stop and hide the loading icon
             loadingIcon.StopLoading();
 
-            // Fade the loading overlay's parent — hide the overlay's parent visually
-            // by setting its display to none after the spinner fades
             var overlay = loadingIcon.parent;
             if (overlay != null)
             {
                 overlay.style.display = DisplayStyle.None;
             }
 
-            // Fade in the content scroll area (runtime-driven transition)
             contentScroll.style.transitionProperty = new StyleList<StylePropertyName>(
                 new System.Collections.Generic.List<StylePropertyName>
                 {
@@ -215,12 +185,9 @@ private IEnumerator SimulateAsyncLoad()
                 });
             contentScroll.style.opacity = 1f;
 
-            // Update status label
             statusLabel.text = "Tap any item to select it.";
         }
 
-        // ── Event handlers ────────────────────────────────────────────────────────
-
         private void OnItemClicked(string itemText)
         {
             statusLabel.text = $"Selected: {itemText}";
diff --git a/ContentExplorer/ContentExplorerUxmlBinder.cs b/ContentExplorer/ContentExplorerUxmlBinder.cs
index 433ee8e..af33c3b 100644
--- a/ContentExplorer/ContentExplorerUxmlBinder.cs
+++ b/ContentExplorer/ContentExplorerUxmlBinder.cs
@@ -10,7 +10,9 @@
 
 namespace UnityUIToolkit.Extensions.Examples
 {
-    /// <summary>Behaviour binder for the UXML-authored ContentExplorer demo.</summary>
+    /// <summary>
+    /// Behaviour binder for the UXML-authored ContentExplorer demo.
+    /// </summary>
     public class ContentExplorerUxmlBinder : MonoBehaviour
     {
         private UIDocument uiDocument;
@@ -36,13 +38,11 @@ private void Start()
             contentScroll = root.Q<VisualElement>("content-scroll");
             statusLabel = root.Q<Label>("status-label");
 
-            // Wire every authored row's click to the status label.
             root.Query<IconLabelButton>().ForEach(button =>
             {
                 button.Clicked += () => OnItemClicked(button.Text);
             });
 
-            // Block interaction and spin while "loading", then reveal content.
             loadingIcon?.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
             StartCoroutine(SimulateAsyncLoad());
         }
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
index 29c6474..f0df558 100644
--- a/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
+++ b/DropDownPhoneEntry/DropDownPhoneEntryDemo.cs
@@ -1,3 +1,16 @@
+// 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;
diff --git a/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
index c72f70f..eba7eff 100644
--- a/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
+++ b/DropDownPhoneEntry/DropDownPhoneEntryUxmlBinder.cs
@@ -12,7 +12,9 @@
 
 namespace UnityUIToolkit.Extensions.Examples
 {
-    /// <summary>Behaviour binder for the UXML-authored DropDownPhoneEntry demo.</summary>
+    /// <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.";
@@ -34,7 +36,6 @@ private void Start()
 
             VisualElement root = uiDocument.rootVisualElement;
 
-            // Robust dark backdrop even if the stylesheet fails to resolve.
             root.style.backgroundColor = new Color(0.035f, 0.059f, 0.106f, 1f);
 
             dialCodePicker = root.Q<DropDownControl>("dial-code-picker");
@@ -48,7 +49,6 @@ private void Start()
                 return;
             }
 
-            // Items are declared in UXML; just pick a sensible default and subscribe.
             dialCodePicker.SetDefault("+44");
             dialCodePicker.OpenStateChanged += HandlePickerOpenStateChanged;
             dialCodePicker.ValueChanged += HandleDialCodeChanged;
diff --git a/ImageCropOverlay/ImageCropOverlayDemo.cs b/ImageCropOverlay/ImageCropOverlayDemo.cs
index c0c2c03..05551a4 100644
--- a/ImageCropOverlay/ImageCropOverlayDemo.cs
+++ b/ImageCropOverlay/ImageCropOverlayDemo.cs
@@ -1,3 +1,16 @@
+// 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;
 
@@ -72,7 +85,6 @@ private void BuildUI(VisualElement root)
             previewTitle.text = "Saved Preview";
 
             savedPreview = UIToolkitExtensions.CreateVisualElement(previewCard, "imageCropOverlayDemo__previewImage");
-            // Scale-and-crop to fill the preview box (unityBackgroundScaleMode is deprecated).
             savedPreview.style.backgroundSize = new BackgroundSize(BackgroundSizeType.Cover);
 
             VisualElement buttonRow = UIToolkitExtensions.CreateVisualElement(card, "imageCropOverlayDemo__buttonRow");
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/ProfileEditorDemo.cs b/ProfileEditor/ProfileEditorDemo.cs
index 205224f..61ea836 100644
--- a/ProfileEditor/ProfileEditorDemo.cs
+++ b/ProfileEditor/ProfileEditorDemo.cs
@@ -116,7 +116,6 @@ private void BuildUI(VisualElement root)
             Label description = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__description");
             description.text = "Avatar display, image processing, and theme color selection working together in one screen.";
 
-            // ── Avatar row ────────────────────────────────────────────────────────
             VisualElement avatarRow = UIToolkitExtensions.CreateVisualElement(card, "profileEditor__avatarRow");
 
             avatarButton = UIToolkitExtensions.CreateVisualElement<CircularImageButton>(avatarRow, "profileEditor__avatar");
@@ -126,7 +125,6 @@ private void BuildUI(VisualElement root)
             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.";
 
-            // ── Sample image + B&W toggle ─────────────────────────────────────────
             Label imageLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__sectionLabel");
             imageLabel.text = "Sample Image";
 
@@ -145,7 +143,6 @@ private void BuildUI(VisualElement root)
             blackWhiteToggle = UIToolkitExtensions.CreateVisualElement<ToggleButton>(bwBlock, "profileEditor__bwToggle");
             blackWhiteToggle.OnClicked += OnBlackWhiteToggled;
 
-            // ── Theme color group ─────────────────────────────────────────────────
             Label colorLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__sectionLabel");
             colorLabel.text = "Theme Color";
 
@@ -159,8 +156,6 @@ private void BuildUI(VisualElement root)
             }
             colorGroup.Colors = colorValues;
 
-            // ColorToggleButton tints a background image; the package ships none, so supply a
-            // white circle for each generated swatch to tint.
             colorGroup.Query(className: "toggleButton__icon")
                 .ForEach(icon => icon.style.backgroundImage = new StyleBackground(circleTexture));
 
@@ -176,7 +171,6 @@ private void BuildUI(VisualElement root)
             statusLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "profileEditor__status");
             statusLabel.text = "Pick a theme color, toggle B&W, or tap the avatar.";
 
-            // Preselect the first theme color so the swatch starts populated.
             colorGroup.SelectColor(ThemeColors[0].Value);
         }
 
@@ -245,4 +239,4 @@ private static void DestroyTexture(Texture2D texture)
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/RegistrationForm/RegistrationFormDemo.cs b/RegistrationForm/RegistrationFormDemo.cs
index d5808c7..6adb69f 100644
--- a/RegistrationForm/RegistrationFormDemo.cs
+++ b/RegistrationForm/RegistrationFormDemo.cs
@@ -1,3 +1,17 @@
+// 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;
@@ -148,8 +162,6 @@ private void BuildSuccessContainer(VisualElement card)
 
         private static void ApplyPillInputStyle(PillInputField field)
         {
-            // Field background, border and inner-input chrome come from the USS
-            // overrides; the runtime API only sets the typed-text colour and size.
             field.SetTextColor(Color.white);
             field.SetFontSize(15f);
         }
@@ -220,7 +232,6 @@ private bool ValidateForm()
         /// </summary>
         private IEnumerator ShowSuccessTransition()
         {
-            // Animate form opacity to 0 via inline style transitions
             formContainer.style.transitionProperty = new StyleList<StylePropertyName>(
                 new List<StylePropertyName> { new("opacity") });
             formContainer.style.transitionDuration = new StyleList<TimeValue>(
diff --git a/ScreenHeader/ScreenHeaderDemo.cs b/ScreenHeader/ScreenHeaderDemo.cs
index 995a569..957605b 100644
--- a/ScreenHeader/ScreenHeaderDemo.cs
+++ b/ScreenHeader/ScreenHeaderDemo.cs
@@ -51,7 +51,6 @@ private void BuildUI(VisualElement root)
         {
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "screenHeaderDemo__screen");
 
-            // ── Header bar: back (left), title, info + sound toggle (right) ─────────
             header = UIToolkitExtensions.CreateVisualElement<ScreenHeader>(screen, "screenHeaderDemo__header");
             header.Title = "header";
             header.Configure(showAction1: true, showTitle: true, showAction2: false,
@@ -61,7 +60,6 @@ private void BuildUI(VisualElement root)
             header.Action3Clicked += () => SetStatus("Info tapped — show help or an about panel here.");
             header.Action4Toggled += isMuted => SetStatus(isMuted ? "Sound muted." : "Sound on.");
 
-            // ── Body card explaining the control ───────────────────────────────────
             VisualElement body = UIToolkitExtensions.CreateVisualElement(screen, "screenHeaderDemo__body");
             VisualElement card = UIToolkitExtensions.CreateVisualElement(body, "screenHeaderDemo__card");
 
diff --git a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
index 321bef3..9aff86e 100644
--- a/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
+++ b/ScrollSnapAndDots/ScrollSnapAndDotsDemo.cs
@@ -28,39 +28,41 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class ScrollSnapAndDotsDemo : MonoBehaviour
     {
-        // ── Page configuration ────────────────────────────────────────────────────
-
-        /// <summary>Per-page background modifier classes (colors defined in the USS).</summary>
+        /// <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", // → ComingSoonMessage page
+            "scrollSnapDemo__page--four",
             "scrollSnapDemo__page--five",
         };
 
-        /// <summary>Labels shown on pages that are NOT the coming-soon page.</summary>
+        /// <summary>
+        /// Labels shown on pages that are NOT the coming-soon page.
+        /// </summary>
         private static readonly string[] PageLabels =
         {
             "Welcome",
             "Explore",
             "Discover",
-            "Coming Soon", // replaced at runtime — label is set but hidden under the widget
+            "Coming Soon",
             "Get Started",
         };
 
-        /// <summary>Index of the page that should show a <see cref="ComingSoonMessage"/>.</summary>
+        /// <summary>
+        /// Index of the page that should show a <see cref="ComingSoonMessage"/>.
+        /// </summary>
         private const int ComingSoonPageIndex = 3;
 
-        // ── Runtime references ────────────────────────────────────────────────────
         private UIDocument uiDocument;
         private ScrollSnap scrollSnap;
         private PageDotIndicator dotIndicator;
         private PillButton prevButton;
         private PillButton nextButton;
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             uiDocument = GetComponent<UIDocument>();
@@ -75,13 +77,10 @@ private void Start()
             BuildUI(root);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // ── Root container — full screen, dark background ─────────────────────
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "scrollSnapDemo__screen");
 
-            // ── Example card (shared rounded container) ────────────────────────────
             VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "scrollSnapDemo__card");
 
             Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "scrollSnapDemo__eyebrow");
@@ -93,26 +92,21 @@ private void BuildUI(VisualElement root)
             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.";
 
-            // ── Carousel surface (frames the pager inside the card) ────────────────
             VisualElement carouselSurface = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__carouselSurface");
 
-            // ── ScrollSnap ────────────────────────────────────────────────────────
             scrollSnap = new ScrollSnap();
             scrollSnap.AddToClassList("scrollSnapDemo__scrollSnap");
             scrollSnap.ManualMovementEnabled = true;
             carouselSurface.Add(scrollSnap);
 
-            // ── Build pages ───────────────────────────────────────────────────────
             for (var i = 0; i < PageModifiers.Length; i++)
             {
                 var page = BuildPage(i);
                 scrollSnap.Add(page);
             }
 
-            // ── Bottom bar ─────────────────────────────────────────────────────────
             VisualElement bottomBar = UIToolkitExtensions.CreateVisualElement(card, "scrollSnapDemo__bottomBar");
 
-            // Previous button
             prevButton = new PillButton();
             prevButton.AddToClassList("scrollSnapDemo__navButton");
             prevButton.Text = "←";
@@ -121,14 +115,12 @@ private void BuildUI(VisualElement root)
             prevButton.Clicked += OnPreviousClicked;
             bottomBar.Add(prevButton);
 
-            // Dot indicator
             dotIndicator = new PageDotIndicator();
             dotIndicator.AddToClassList("scrollSnapDemo__dotIndicator");
             dotIndicator.SetColors("#FFFFFF", "#44506A");
             dotIndicator.SetProgress(0, PageModifiers.Length);
             bottomBar.Add(dotIndicator);
 
-            // Next button
             nextButton = new PillButton();
             nextButton.AddToClassList("scrollSnapDemo__navButton");
             nextButton.Text = "→";
@@ -137,25 +129,19 @@ private void BuildUI(VisualElement root)
             nextButton.Clicked += OnNextClicked;
             bottomBar.Add(nextButton);
 
-            // ── Wire up PageChanged ────────────────────────────────────────────────
             scrollSnap.PageChanged += OnPageChanged;
 
-            // Seed the initial dot state
             UpdateNavButtons();
         }
 
-        // ── Page factory ──────────────────────────────────────────────────────────
         private VisualElement BuildPage(int index)
         {
-            // Outer container — fills the page slot assigned by ScrollSnap.
-            // Background color comes from the per-page modifier class (USS).
             var page = new VisualElement();
             page.AddToClassList("scrollSnapDemo__page");
             page.AddToClassList(PageModifiers[index]);
 
             if (index == ComingSoonPageIndex)
             {
-                // Replace page content with the ComingSoonMessage widget
                 var comingSoon = new ComingSoonMessage();
                 comingSoon.AddToClassList("scrollSnapDemo__comingSoon");
                 comingSoon.Title = "Coming Soon";
@@ -164,17 +150,14 @@ private VisualElement BuildPage(int index)
             }
             else
             {
-                // Page number badge
                 VisualElement badge = UIToolkitExtensions.CreateVisualElement(page, "scrollSnapDemo__badge");
 
                 Label badgeLabel = UIToolkitExtensions.CreateVisualElement<Label>(badge, "scrollSnapDemo__badgeLabel");
                 badgeLabel.text = (index + 1).ToString();
 
-                // Main label
                 Label pageLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageLabel");
                 pageLabel.text = PageLabels[index];
 
-                // Sub-label
                 Label subLabel = UIToolkitExtensions.CreateVisualElement<Label>(page, "scrollSnapDemo__pageSubLabel");
                 subLabel.text = $"Page {index + 1} of {PageModifiers.Length}";
             }
@@ -182,8 +165,6 @@ private VisualElement BuildPage(int index)
             return page;
         }
 
-        // ── Event handlers ────────────────────────────────────────────────────────
-
         private void OnPageChanged(int newIndex)
         {
             dotIndicator.SetProgress(newIndex, PageModifiers.Length);
@@ -200,7 +181,9 @@ private void OnNextClicked()
             scrollSnap.MoveNext();
         }
 
-        /// <summary>Dim the prev/next arrow to hint at boundary conditions.</summary>
+        /// <summary>
+        /// Dim the prev/next arrow to hint at boundary conditions.
+        /// </summary>
         private void UpdateNavButtons()
         {
             bool atStart = scrollSnap.CurrentPageIndex <= 0;
diff --git a/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
index 4a0cee3..152fb93 100644
--- a/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
+++ b/ScrollSnapSplit/ScrollSnapSplitCSharpView.cs
@@ -24,44 +24,37 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class ScrollSnapSplitCSharpView : MonoBehaviour
     {
-        // ── Inspector ─────────────────────────────────────────────────────────────
         [SerializeField] private UIDocument uiDocument;
 
-        // ── Page configuration (shared, intentionally, with the UXML view) ─────────
         private static readonly string[] PageColors =
         {
-            "#E74C3C", // red
-            "#3498DB", // blue
-            "#2ECC71", // green
-            "#9B59B6", // purple
-            "#F39C12", // orange
+            "#E74C3C",
+            "#3498DB",
+            "#2ECC71",
+            "#9B59B6",
+            "#F39C12",
         };
 
         private ScrollSnap scrollSnap;
         private Label readoutLabel;
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             var root = uiDocument.rootVisualElement;
             root.Clear();
 
-            // Occupy the LEFT half of the shared panel.
             ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: true);
 
             BuildUI(root);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // ── Screen ────────────────────────────────────────────────────────────
             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);
 
-            // ── Header ────────────────────────────────────────────────────────────
             var header = UIToolkitExtensions.CreateVisualElement(screen, "header");
             header.style.paddingTop = 28;
             header.style.paddingBottom = 12;
@@ -80,10 +73,9 @@ private void BuildUI(VisualElement root)
             readoutLabel.style.color = new Color(0.7f, 0.7f, 0.78f, 1f);
             readoutLabel.style.marginTop = 4;
 
-            // ── ScrollSnap ────────────────────────────────────────────────────────
             scrollSnap = new ScrollSnap();
             scrollSnap.style.flexGrow = 1;
-            scrollSnap.ManualMovementEnabled = true; // enable swipe paging
+            scrollSnap.ManualMovementEnabled = true;
             screen.Add(scrollSnap);
 
             for (var i = 0; i < PageColors.Length; i++)
@@ -91,7 +83,6 @@ private void BuildUI(VisualElement root)
                 scrollSnap.Add(BuildPage(i, PageColors.Length));
             }
 
-            // ── Footer hint ───────────────────────────────────────────────────────
             var hint = UIToolkitExtensions.CreateVisualElement<Label>(screen, "footer__hint");
             hint.text = "Swipe ← / →";
             hint.style.unityTextAlign = TextAnchor.MiddleCenter;
@@ -100,16 +91,13 @@ private void BuildUI(VisualElement root)
             hint.style.paddingTop = 8;
             hint.style.paddingBottom = 20;
 
-            // ── Live readout ──────────────────────────────────────────────────────
             scrollSnap.PageChanged += UpdateReadout;
             UpdateReadout(scrollSnap.CurrentPageIndex);
         }
 
-        // ── Page factory ──────────────────────────────────────────────────────────
         private static VisualElement BuildPage(int index, int total)
         {
             var page = new VisualElement();
-            // ScrollSnap sizes and class-tags each child page itself; we only style content.
             page.style.justifyContent = Justify.Center;
             page.style.alignItems = Align.Center;
 
@@ -132,7 +120,6 @@ private static VisualElement BuildPage(int index, int total)
             return page;
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void UpdateReadout(int pageIndex)
         {
             readoutLabel.text = $"Showing page {pageIndex + 1} of {scrollSnap.PageCount}";
diff --git a/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
index 5043b83..854e98d 100644
--- a/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
+++ b/ScrollSnapSplit/ScrollSnapSplitUxmlView.cs
@@ -24,23 +24,17 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class ScrollSnapSplitUxmlView : MonoBehaviour
     {
-        // ── Inspector ─────────────────────────────────────────────────────────────
         [SerializeField] private UIDocument uiDocument;
 
         private ScrollSnap scrollSnap;
         private Label readoutLabel;
 
-        // ──────────────────────────────────────────────────────────────────────────
-        // Use Start (not OnEnable): it runs after every component's OnEnable, so the
-        // UIDocument has already cloned its source UXML into rootVisualElement by now.
         private void Start()
         {
             var root = uiDocument.rootVisualElement;
 
-            // Occupy the RIGHT half of the shared panel.
             ScrollSnapSplitLayout.OccupyHalf(root, leftHalf: false);
 
-            // Query the UXML-authored elements by type / name.
             scrollSnap = root.Q<ScrollSnap>();
             readoutLabel = root.Q<Label>("page-readout");
 
@@ -62,7 +56,6 @@ private void OnDisable()
             }
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void UpdateReadout(int pageIndex)
         {
             if (readoutLabel != null)
diff --git a/SocialLinks/SocialLinksDemo.cs b/SocialLinks/SocialLinksDemo.cs
index 0c0e378..0d0a745 100644
--- a/SocialLinks/SocialLinksDemo.cs
+++ b/SocialLinks/SocialLinksDemo.cs
@@ -60,11 +60,9 @@ private void BuildUI(VisualElement root)
 
             socialLinks = UIToolkitExtensions.CreateVisualElement<SocialLinkContainer>(card, "socialLinksDemo__container");
             socialLinks.Label = "Your Profiles";
-            socialLinks.IsInEditMode = true; // show the add button and per-row remove buttons
+            socialLinks.IsInEditMode = true;
             socialLinks.PlatformPlaceholderResolver = platform => $"Enter your {platform} handle or URL";
 
-            // Seed a couple of rows so the list starts with multiple lines. Edit mode is on first,
-            // so these seeded rows also get their remove buttons.
             socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.Instagram, "@uitoolkit.extensions");
             socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.YouTube, "UnityUIExtensions");
 
diff --git a/SocialLinks/SocialLinksUxmlBinder.cs b/SocialLinks/SocialLinksUxmlBinder.cs
index ca40cde..72a0947 100644
--- a/SocialLinks/SocialLinksUxmlBinder.cs
+++ b/SocialLinks/SocialLinksUxmlBinder.cs
@@ -27,7 +27,6 @@ private void Start()
             socialLinks = root.Q<SocialLinkContainer>("social-links");
             socialLinks.PlatformPlaceholderResolver = platform => $"Enter your {platform} handle or URL";
 
-            // Edit mode is enabled in the UXML, so seeded rows also get their remove buttons.
             socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.Instagram, "@uitoolkit.extensions");
             socialLinks.CreateSocial(SocialLinkContainer.SocialPlatform.YouTube, "UnityUIExtensions");
 
diff --git a/StepWizard/StepWizardDemo.cs b/StepWizard/StepWizardDemo.cs
index 6ecdcd2..d6d6849 100644
--- a/StepWizard/StepWizardDemo.cs
+++ b/StepWizard/StepWizardDemo.cs
@@ -30,7 +30,6 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class StepWizardDemo : MonoBehaviour
     {
-        // ── Step metadata ─────────────────────────────────────────────────────────
         private static readonly string[] StepNames = { "About", "Goals", "Settings", "Done" };
 
         private static readonly string[] StepDescriptions =
@@ -41,7 +40,6 @@ public class StepWizardDemo : MonoBehaviour
             "You're all set! Review your choices below before finishing.",
         };
 
-        // ── Runtime references ────────────────────────────────────────────────────
         private UIDocument uiDocument;
         private QuadrantStepper stepper;
         private StepProgressBar progressBar;
@@ -53,7 +51,6 @@ public class StepWizardDemo : MonoBehaviour
 
         private int currentStep = 0;
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             uiDocument = GetComponent<UIDocument>();
@@ -68,13 +65,10 @@ private void Start()
             BuildUI(root);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // ── Full-screen wrapper ───────────────────────────────────────────────
             var screen = UIToolkitExtensions.CreateVisualElement(root, "stepWizard__screen");
 
-            // ── Example card (shared rounded container) ────────────────────────────
             var card = UIToolkitExtensions.CreateVisualElement(screen, "stepWizard__card");
 
             var eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__eyebrow");
@@ -88,7 +82,6 @@ private void BuildUI(VisualElement root)
 
             stepCounterLabel = UIToolkitExtensions.CreateVisualElement<Label>(card, "stepWizard__counter");
 
-            // ── Stepper ───────────────────────────────────────────────────────────
             var stepperWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__stepperWrapper");
 
             stepper = new QuadrantStepper(StepNames);
@@ -96,19 +89,15 @@ private void BuildUI(VisualElement root)
             stepper.SelectionChanged += OnStepperSelectionChanged;
             stepperWrapper.Add(stepper);
 
-            // ── Progress bar ──────────────────────────────────────────────────────
             var progressWrapper = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__progressWrapper");
 
             progressBar = new StepProgressBar();
             progressBar.AddToClassList("stepWizard__progressBar");
-            // Gradient colours are part of the control's runtime API, not USS.
             progressBar.SetGradientColors("#4A90E2", "#7B68EE");
             progressWrapper.Add(progressBar);
 
-            // ── Content area ──────────────────────────────────────────────────────
             contentArea = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__content");
 
-            // Build all four step panels (only one visible at a time)
             stepPanels = new VisualElement[StepNames.Length];
             stepPanels[0] = BuildAboutPanel();
             stepPanels[1] = BuildGoalsPanel();
@@ -117,12 +106,10 @@ private void BuildUI(VisualElement root)
 
             foreach (var panel in stepPanels)
             {
-                // Start hidden; GoToStep reveals the active panel (runtime state).
                 panel.style.display = DisplayStyle.None;
                 contentArea.Add(panel);
             }
 
-            // ── Navigation bar ────────────────────────────────────────────────────
             var navBar = UIToolkitExtensions.CreateVisualElement(card, "stepWizard__navBar");
 
             backButton = new PillButton();
@@ -143,13 +130,9 @@ private void BuildUI(VisualElement root)
             nextButton.Clicked += OnNextClicked;
             navBar.Add(nextButton);
 
-            // Navigate to the first step without notifying the stepper event
-            // (avoids double-navigation on init)
             GoToStep(0, notify: false);
         }
 
-        // ── Step panel builders ───────────────────────────────────────────────────
-
         private VisualElement BuildAboutPanel()
         {
             var panel = CreateStepPanel("About You", StepDescriptions[0]);
@@ -209,8 +192,6 @@ private VisualElement BuildDonePanel()
             return panel;
         }
 
-        // ── Reusable sub-builders ─────────────────────────────────────────────────
-
         private VisualElement CreateStepPanel(string heading, string description)
         {
             var panel = UIToolkitExtensions.CreateVisualElement("stepWizard__panel");
@@ -233,7 +214,6 @@ private void AddFieldRow(VisualElement parent, string label, string placeholder)
 
             var field = new RoundedInputField();
             field.AddToClassList("stepWizard__field");
-            // Field appearance is configured through the control's runtime API.
             field.Placeholder = placeholder;
             field.SetBackgroundColor(Color.white);
             field.SetTextColor(new Color(0.15f, 0.15f, 0.2f, 1f));
@@ -264,7 +244,6 @@ private void AddToggleRow(VisualElement parent, string label, string detail)
             var detailLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "stepWizard__toggleDetail");
             detailLbl.text = detail;
 
-            // Simple visual indicator for the "toggle" state (green pill)
             UIToolkitExtensions.CreateVisualElement(row, "stepWizard__toggleIndicator");
         }
 
@@ -279,8 +258,6 @@ private void AddSummaryRow(VisualElement parent, string key, string value)
             valueLbl.text = value;
         }
 
-        // ── Navigation ────────────────────────────────────────────────────────────
-
         private void OnStepperSelectionChanged(int index, string text)
         {
             GoToStep(index, notify: false);
@@ -302,37 +279,32 @@ private void OnNextClicked()
             }
             else
             {
-                // Finish — log and reset for demo purposes
                 Debug.Log("[StepWizardDemo] Wizard finished.");
                 GoToStep(0, notify: true);
             }
         }
 
-        /// <summary>Switch the active step panel and synchronise the stepper and progress bar.</summary>
+        /// <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;
 
-            // Show only the active panel (runtime state — stays in C#)
             for (var i = 0; i < stepPanels.Length; i++)
             {
                 stepPanels[i].style.display = i == currentStep ? DisplayStyle.Flex : DisplayStyle.None;
             }
 
-            // Sync stepper (animate when the user tapped a segment themselves)
             stepper.SetSelectedIndex(currentStep, notify: false, animate: notify);
 
-            // Progress = steps *completed* (i.e. index+1 out of total)
             progressBar.SetProgress(currentStep + 1, StepNames.Length);
 
-            // Update step counter label
             stepCounterLabel.text = $"Step {currentStep + 1} of {StepNames.Length}";
 
-            // Back button — hidden on first step (runtime state — stays in C#)
             backButton.style.display = currentStep == 0 ? DisplayStyle.None : DisplayStyle.Flex;
 
-            // Next button label changes on the last step (colour stays consistent).
             nextButton.Text = currentStep == StepNames.Length - 1 ? "Finish" : "Next";
         }
     }
diff --git a/StepWizard/StepWizardUxmlBinder.cs b/StepWizard/StepWizardUxmlBinder.cs
index 5d88775..5898439 100644
--- a/StepWizard/StepWizardUxmlBinder.cs
+++ b/StepWizard/StepWizardUxmlBinder.cs
@@ -8,7 +8,9 @@
 
 namespace UnityUIToolkit.Extensions.Examples
 {
-    /// <summary>Behaviour binder for the UXML-authored StepWizard demo.</summary>
+    /// <summary>
+    /// Behaviour binder for the UXML-authored StepWizard demo.
+    /// </summary>
     public class StepWizardUxmlBinder : MonoBehaviour
     {
         private const int StepCount = 4;
@@ -51,7 +53,6 @@ private void Start()
                 return;
             }
 
-            // Field appearance is part of the control's runtime API (kept out of UXML/USS here).
             root.Query<RoundedInputField>().ForEach(field =>
             {
                 field.SetBackgroundColor(new Color(1f, 1f, 1f, 0.03f));
diff --git a/ToastNotifications/ToastNotificationsDemo.cs b/ToastNotifications/ToastNotificationsDemo.cs
index 251db01..a332afc 100644
--- a/ToastNotifications/ToastNotificationsDemo.cs
+++ b/ToastNotifications/ToastNotificationsDemo.cs
@@ -35,14 +35,11 @@ namespace UnityUIToolkit.Extensions.Examples
     /// </summary>
     public class ToastNotificationsDemo : MonoBehaviour
     {
-        // ── Constants ─────────────────────────────────────────────────────────────
         private const int MaxToasts = 5;
         private const int FadeDurationMs = 260;
 
-        // Toasts left untouched fade away after this many seconds.
         private const float AutoDismissSeconds = 4f;
 
-        // ── Toast content templates ───────────────────────────────────────────────
         private static readonly (string title, string subtitle)[] ToastTemplates =
         {
             ("Workout Complete",      "You finished your 30-min run. Great job!"),
@@ -55,24 +52,24 @@ private static readonly (string title, string subtitle)[] ToastTemplates =
             ("Low Water Intake",      "You've only had 2 of your 8 glasses today."),
         };
 
-        // Soft pastel background colors cycling per toast
         private static readonly Color[] ToastColors =
         {
-            new Color(0.96f, 0.95f, 1.00f, 1f), // lavender
-            new Color(0.95f, 1.00f, 0.97f, 1f), // mint
-            new Color(1.00f, 0.97f, 0.93f, 1f), // peach
-            new Color(0.93f, 0.97f, 1.00f, 1f), // sky
-            new Color(1.00f, 0.95f, 0.95f, 1f), // rose
+            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),
         };
 
-        // ── Internal state ────────────────────────────────────────────────────────
         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>
+        /// <summary>
+        /// Tracks each active toast alongside its manipulator.
+        /// </summary>
         private sealed class ToastData
         {
             public VisualElement Root;
@@ -83,7 +80,6 @@ private sealed class ToastData
 
         private readonly List<ToastData> activeToasts = new();
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void Start()
         {
             uiDocument = GetComponent<UIDocument>();
@@ -98,13 +94,10 @@ private void Start()
             BuildUI(root);
         }
 
-        // ──────────────────────────────────────────────────────────────────────────
         private void BuildUI(VisualElement root)
         {
-            // ── Screen ────────────────────────────────────────────────────────────
             VisualElement screen = UIToolkitExtensions.CreateVisualElement(root, "toastDemo__screen");
 
-            // ── Example card (shared rounded container): title, description, button ─
             VisualElement card = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__card");
 
             Label eyebrow = UIToolkitExtensions.CreateVisualElement<Label>(card, "toastDemo__eyebrow");
@@ -126,9 +119,6 @@ private void BuildUI(VisualElement root)
             addButton.SetFontSize(15f);
             addButton.Clicked += OnAddToastClicked;
 
-            // ── Full-screen overlay the toasts stack into (drawn above the card) ────
-            // The overlay and its container ignore picking so the card's button stays
-            // clickable; each toast re-enables picking for its own swipe/tap input.
             VisualElement overlay = UIToolkitExtensions.CreateVisualElement(screen, "toastDemo__overlay");
             overlay.pickingMode = PickingMode.Ignore;
 
@@ -136,11 +126,8 @@ private void BuildUI(VisualElement root)
             toastContainer.pickingMode = PickingMode.Ignore;
         }
 
-        // ── Toast creation ────────────────────────────────────────────────────────
-
         private void OnAddToastClicked()
         {
-            // Enforce maximum: remove oldest toast if at cap
             if (activeToasts.Count >= MaxToasts)
             {
                 RemoveOldestToast();
@@ -157,18 +144,13 @@ private void SpawnToast()
             var bgColor = ToastColors[colorIndex % ToastColors.Length];
             colorIndex++;
 
-            // ── Toast root element ────────────────────────────────────────────────
             var toast = UIToolkitExtensions.CreateVisualElement(toastContainer, "toastDemo__toast");
-            // Runtime/data-driven: background color comes from the ToastColors array
             toast.style.backgroundColor = bgColor;
 
-            // Color accent bar on the left
             var accentBar = UIToolkitExtensions.CreateVisualElement(toast, "toastDemo__accent");
-            // Runtime/data-driven: accent is computed complementary to the background
             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);
 
-            // Text block
             var textBlock = UIToolkitExtensions.CreateVisualElement(toast, "toastDemo__textBlock");
 
             var titleLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "toastDemo__title");
@@ -177,19 +159,15 @@ private void SpawnToast()
             var subtitleLbl = UIToolkitExtensions.CreateVisualElement<Label>(textBlock, "toastDemo__subtitle");
             subtitleLbl.text = subtitle;
 
-            // Dismiss "×" button (visual only — tap also handled by manipulator)
             var dismissIcon = UIToolkitExtensions.CreateVisualElement<Label>(toast, "toastDemo__dismiss");
             dismissIcon.text = "×";
             dismissIcon.pickingMode = PickingMode.Ignore;
 
-            // Slide-in entrance animation (translate from below)
             toast.style.translate = new Translate(0, 40, 0);
             toast.style.opacity = 0f;
 
-            // ── Attach manipulator ─────────────────────────────────────────────────
             var toastData = new ToastData { Root = toast };
 
-            // Apply entrance on next frame, then arm the auto-dismiss timer
             toast.schedule.Execute(() =>
             {
                 AnimateToastEntrance(toast);
@@ -217,11 +195,8 @@ private void SpawnToast()
             activeToasts.Add(toastData);
         }
 
-        // ── Entrance animation ────────────────────────────────────────────────────
-
         private static void AnimateToastEntrance(VisualElement toast)
         {
-            // Slide up from 40 px below and fade in using inline CSS transitions
             var propNames = new List<StylePropertyName>
             {
                 new("opacity"),
@@ -248,9 +223,9 @@ private static void AnimateToastEntrance(VisualElement toast)
             toast.style.translate = new Translate(0, 0, 0);
         }
 
-        // ── Auto-dismiss after default time ────────────────────────────────────────
-
-        /// <summary>Arm the timer that fades the toast away after the default time.</summary>
+        /// <summary>
+        /// Arm the timer that fades the toast away after the default time.
+        /// </summary>
         private void ScheduleAutoDismiss(ToastData toastData)
         {
             toastData.AutoDismissTimer = toastData.Root.schedule
@@ -260,22 +235,20 @@ private void ScheduleAutoDismiss(ToastData toastData)
 
         private void AutoDismiss(ToastData toastData)
         {
-            // Skip if the user already tapped or swiped this toast away.
             if (toastData.IsDismissing) return;
 
-            // Reuse the tap fade-out path so behaviour matches "fades away after the default time".
             OnToastTapped(toastData);
         }
 
-        /// <summary>Stop a pending auto-dismiss timer so it never fires after removal.</summary>
+        /// <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;
         }
 
-        // ── Dismiss: tap (fade out) ───────────────────────────────────────────────
-
         private void OnToastTapped(ToastData toastData)
         {
             if (toastData.IsDismissing) return;
@@ -289,7 +262,6 @@ private IEnumerator FadeOutAndRemoveToast(ToastData toastData)
         {
             var toast = toastData.Root;
 
-            // Fade to transparent
             toast.style.transitionProperty = new StyleList<StylePropertyName>(
                 new List<StylePropertyName> { new("opacity") });
             toast.style.transitionDuration = new StyleList<TimeValue>(
@@ -303,12 +275,8 @@ private IEnumerator FadeOutAndRemoveToast(ToastData toastData)
             RemoveToastFromHierarchy(toastData);
         }
 
-        // ── Dismiss: swipe (manipulator calls back after animation) ───────────────
-
         private void OnToastDismissedBySwipe(ToastData toastData)
         {
-            // The manipulator has already played the slide-out animation.
-            // Fade the element to zero then remove it so there is no pop.
             if (toastData.IsDismissing) return;
             toastData.IsDismissing = true;
 
@@ -326,8 +294,6 @@ private void OnToastDismissedBySwipe(ToastData toastData)
             };
         }
 
-        // ── Shared removal logic ──────────────────────────────────────────────────
-
         private void RemoveToastFromHierarchy(ToastData toastData)
         {
             activeToasts.Remove(toastData);
@@ -338,7 +304,9 @@ private void RemoveToastFromHierarchy(ToastData toastData)
             }
         }
 
-        /// <summary>Remove the oldest toast immediately (when cap is exceeded).</summary>
+        /// <summary>
+        /// Remove the oldest toast immediately (when cap is exceeded).
+        /// </summary>
         private void RemoveOldestToast()
         {
             if (activeToasts.Count == 0) return;
diff --git a/ToastNotifications/ToastNotificationsUxmlView.uxml b/ToastNotifications/ToastNotificationsUxmlView.uxml
index f4db0f2..1f27be8 100644
--- a/ToastNotifications/ToastNotificationsUxmlView.uxml
+++ b/ToastNotifications/ToastNotificationsUxmlView.uxml
@@ -13,8 +13,6 @@
             </ui:VisualElement>
         </ui:VisualElement>
 
-        <!-- Notifications render full screen, above the card. The overlay ignores
-             picking so the card's button stays clickable; each toast handles its own. -->
         <ui:VisualElement name="toast-overlay" class="toastDemo__overlay" picking-mode="Ignore">
             <ui:VisualElement name="toast-container" class="toastDemo__container" picking-mode="Ignore" />
         </ui:VisualElement>

From e6ab227c534dc041a786ac01ce1e902baec49197 Mon Sep 17 00:00:00 2001
From: "Simon (Darkside) Jackson" <darkside@zenithmoon.com>
Date: Mon, 20 Jul 2026 13:26:26 +0100
Subject: [PATCH 6/6] Update readme for examples with details

---
 README.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

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|