diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14b74ab..61a3a7e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,3 +7,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 ## Release 1.0.0 - Launch - tbc
 
 Coming Soon.
+
+### Added
+
+- Added `DropDownControl`, a wheel-style modal picker suitable for dial-code and similar compact selection flows.
+- Added `ImageCropOverlayControl`, a move-and-scale square crop overlay for `Texture2D` exports.
+- Added package sample scenes for a phone-entry dial-code flow and a profile-image crop flow under `Examples~`.
diff --git a/Documentation~/Controls/CircularImageButton.md b/Documentation~/Controls/CircularImageButton.md
new file mode 100644
index 0000000..2b76b42
--- /dev/null
+++ b/Documentation~/Controls/CircularImageButton.md
@@ -0,0 +1,100 @@
+# CircularImageButton
+
+## Summary
+
+`CircularImageButton` is a circular button that displays an image or sprite at full bleed with a 50% border-radius. When no image is set it shows a centered overlay (typically an upload icon and label) to prompt the user to select a photo.
+
+Typical use cases:
+
+- Avatar display and photo selection in profile screens
+- Circular media thumbnails in lists or grids
+- Any tap target that must hold a user-supplied image
+
+## Properties
+
+This control has no data properties. Configure it through method calls and respond to the `Clicked` event.
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `circularImageButton` | Root element. Applies circular clip via `border-radius: 50%`. |
+| `circularImageButton__image` | The image layer. Absolutely positioned, fills the button, `border-radius: 50%`. |
+| `circularImageButton__noImageOverlay` | Overlay shown when no image is set. Absolutely positioned and centered. |
+| `circularImageButton__icon` | Icon inside the no-image overlay (typically an upload/camera glyph). |
+| `circularImageButton__uploadLabel` | Text label inside the no-image overlay. |
+| `circularImageButton--hasImage` | Modifier applied to the root when an image is present. Hides the no-image overlay. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `Clicked` | Fired when the button receives a pointer-up event inside its bounds. | none |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetImage(Texture2D texture, bool isDefault = false)` | Sets the displayed image from a `Texture2D`. Pass `isDefault = true` to treat the image as a placeholder (does not apply the `--hasImage` modifier). |
+| `SetImage(Sprite sprite, bool isDefault = false)` | Sets the displayed image from a `Sprite`. Same `isDefault` semantics. |
+| `SetUploadLabel(string text)` | Updates the text shown inside the no-image overlay. |
+| `ClearImage()` | Removes the current image and restores the no-image overlay. |
+| `SetImageTint(Color color)` | Applies a tint color to the image element. |
+
+## Using the Control
+
+### Basic Setup
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class AvatarController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+    [SerializeField] private Texture2D _defaultAvatar;
+
+    private CircularImageButton _avatarButton;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        _avatarButton = new CircularImageButton();
+
+        // Show a default placeholder image without hiding the overlay
+        _avatarButton.SetImage(_defaultAvatar, isDefault: true);
+        _avatarButton.SetUploadLabel("Tap to change");
+
+        _avatarButton.Clicked += OnAvatarTapped;
+        root.Add(_avatarButton);
+    }
+
+    private void OnAvatarTapped()
+    {
+        // Open native photo picker, then call SetImage with the result
+        Debug.Log("Avatar tapped — open photo picker");
+    }
+
+    private void ApplyPickedPhoto(Texture2D picked)
+    {
+        // isDefault: false — hides the overlay and marks the button as having an image
+        _avatarButton.SetImage(picked, isDefault: false);
+    }
+
+    private void ResetAvatar()
+    {
+        _avatarButton.ClearImage();
+    }
+}
+```
+
+### Tint and Dynamic Color
+
+```csharp
+// Grey-out the avatar when the profile is locked
+_avatarButton.SetImageTint(new Color(1f, 1f, 1f, 0.4f));
+
+// Restore full color
+_avatarButton.SetImageTint(Color.white);
+```
diff --git a/Documentation~/Controls/CollapsibleSection.md b/Documentation~/Controls/CollapsibleSection.md
new file mode 100644
index 0000000..79ee6be
--- /dev/null
+++ b/Documentation~/Controls/CollapsibleSection.md
@@ -0,0 +1,97 @@
+# CollapsibleSection
+
+## Summary
+
+`CollapsibleSection` is a container with a tappable header that expands or collapses its body content. The body transition is driven by a `max-height` animation (0 → 2000 px, 250 ms ease-out) triggered by the `collapsibleSection--expanded` modifier class, so no code-side animation is required for the open/close motion.
+
+Typical use cases:
+
+- FAQ accordion panels
+- Collapsible settings groups
+- Nested content trees inside scroll containers
+- Any section where body content should be hidden by default
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `IsExpanded` | Gets or sets the current expanded state. Setting this value animates the body and fires `OnExpandedChanged`. | `bool` |
+| `TitleText` | Gets or sets the header label text. | `string` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `collapsibleSection` | Root element. |
+| `collapsibleSection__header` | Tappable header row. Contains the title and chevron. |
+| `collapsibleSection__title` | Label element inside the header. |
+| `collapsibleSection__chevron` | Chevron/arrow icon that rotates to indicate state. |
+| `collapsibleSection__body` | Outer body wrapper. Has `max-height` transition for the open/close animation. |
+| `collapsibleSection__bodyContent` | Inner content container. Receives children added via `AddBodyContent`. |
+| `collapsibleSection--expanded` | Modifier applied to the root when expanded. Drives the `max-height` transition and chevron rotation. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `OnExpandedChanged` | Fired after the expanded state changes. | `bool isExpanded` |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `AddBodyContent(VisualElement element)` | Appends a child element to the inner body content container. |
+| `SetBodyText(string text) : Label` | Convenience method that creates and appends a `Label` with the given text. Returns the created label. |
+| `Toggle()` | Toggles the expanded state. Equivalent to `IsExpanded = !IsExpanded`. |
+
+## Using the Control
+
+### Basic Setup
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class FaqController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        var section = new CollapsibleSection();
+        section.TitleText = "What is this app?";
+
+        // Add plain text body
+        section.SetBodyText(
+            "This app helps you track your daily habits and review progress over time.");
+
+        // Add a richer body element
+        var linkLabel = new Label("Learn more at example.com");
+        linkLabel.style.color = new StyleColor(new Color(0.35f, 0.65f, 1f));
+        section.AddBodyContent(linkLabel);
+
+        section.OnExpandedChanged += isExpanded =>
+        {
+            Debug.Log($"Section is now {(isExpanded ? "open" : "closed")}");
+        };
+
+        root.Add(section);
+    }
+}
+```
+
+### Programmatic Expand / Collapse
+
+```csharp
+// Open all sections on first visit
+foreach (var section in _faqSections)
+{
+    section.IsExpanded = true;
+}
+
+// Toggle a section from an external button
+_toggleButton.clicked += () => _detailsSection.Toggle();
+```
diff --git a/Documentation~/Controls/ColorToggleButton.md b/Documentation~/Controls/ColorToggleButton.md
new file mode 100644
index 0000000..0170144
--- /dev/null
+++ b/Documentation~/Controls/ColorToggleButton.md
@@ -0,0 +1,105 @@
+# ColorToggleButton
+
+## Summary
+
+`ColorToggleButton` extends `ToggleButton` with per-instance tint colors, a ripple press animation, and a selection overlay. The background color is driven entirely by the tint values, making it straightforward to build color-coded toggle grids without USS variants.
+
+Typical use cases:
+
+- Color picker palette items
+- Labeled color-coded category toggles
+- Any toggle grid where each item has a distinct brand or theme color
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `IsSelected` | Inherited from `ToggleButton`. Gets or sets the selected state. | `bool` |
+| `TintColor` | The background tint used when the button is in its default (unselected) state. | `Color` (read-only; use `SetTintColor` to change) |
+| `SelectedTintColor` | The background tint used when the button is selected. | `Color` (read-only; use `SetSelectedTintColor` to change) |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `toggleButton` | Root element (inherited from `ToggleButton`). |
+| `toggleButton__image` | Image layer, 100% size, scale-to-fit (inherited). |
+| `toggleButton--selected` | Modifier applied when selected (inherited). |
+| `toggleButton__icon` | Optional icon element overlaid on the colored background. |
+| `toggleButton__ripple` | Primary ripple circle that expands on press. |
+| `toggleButton__rippleSecondary` | Secondary ripple circle for the layered ripple effect. |
+| `toggleButton__selectedOverlay` | Overlay element shown when selected. |
+| `toggleButton__selectedOverlay--visible` | Modifier that makes the selected overlay visible. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `OnClicked` | Inherited from `ToggleButton`. Fired on every pointer-down regardless of current state. | none |
+
+## Constructors
+
+| Signature | Description |
+| --- | --- |
+| `ColorToggleButton(Color tintColor)` | Creates a button with the same tint color for both selected and unselected states. |
+| `ColorToggleButton(Color tintColor, Color selectedTintColor)` | Creates a button with distinct tints for each state. |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetTintColor(Color color)` | Updates the unselected background tint at runtime. |
+| `SetSelectedTintColor(Color color)` | Updates the selected background tint at runtime. |
+| `SetImage(Texture2D texture)` | Inherited. Sets the icon/image on the button. |
+| `ForceSelect()` | Inherited. Sets `IsSelected = true` without firing `OnClicked`. |
+| `ForceDeselect()` | Inherited. Sets `IsSelected = false` without firing `OnClicked`. |
+
+## Using the Control
+
+### Color Palette Grid
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class ColorPaletteController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private static readonly Color[] PaletteColors = new[]
+    {
+        new Color(0.91f, 0.27f, 0.38f),   // red
+        new Color(0.25f, 0.56f, 0.96f),   // blue
+        new Color(0.18f, 0.80f, 0.44f),   // green
+        new Color(0.98f, 0.75f, 0.18f),   // yellow
+    };
+
+    private ColorToggleButton _activeButton;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        var row = root.Q<VisualElement>("paletteRow");
+
+        foreach (var color in PaletteColors)
+        {
+            // Slightly lighter shade for selected state
+            var selectedColor = Color.Lerp(color, Color.white, 0.25f);
+            var btn = new ColorToggleButton(color, selectedColor);
+
+            btn.OnClicked += () =>
+            {
+                // Deselect previous
+                if (_activeButton != null && _activeButton != btn)
+                    _activeButton.ForceDeselect();
+
+                _activeButton = btn;
+                Debug.Log($"Selected color: {color}");
+            };
+
+            row.Add(btn);
+        }
+    }
+}
+```
diff --git a/Documentation~/Controls/ColorToggleGroup.md b/Documentation~/Controls/ColorToggleGroup.md
new file mode 100644
index 0000000..e2d1de4
--- /dev/null
+++ b/Documentation~/Controls/ColorToggleGroup.md
@@ -0,0 +1,92 @@
+# ColorToggleGroup
+
+## Summary
+
+`ColorToggleGroup` manages a set of `ColorToggleButton` items as a single-selection group. It supports both tap-to-select and drag-to-select gestures, ensuring that only one color is selected at a time. Selection state is coordinated internally; consumers only need to respond to `OnColorSelected`.
+
+Typical use cases:
+
+- Full-screen or inline color pickers
+- Theme or accent color selectors
+- Tag or category color selectors
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Colors` | Gets or sets the array of colors represented by the group. Changing this value rebuilds all child buttons. | `Color[]` |
+| `SelectedColor` | Gets the currently selected color. `null` if nothing is selected. | `Color?` (nullable) |
+| `Alignment` | Controls the flex direction of the buttons container. | `FlexDirection` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `colorToggleGroup` | Root element. |
+| `colorToggleGroup__container` | Flex container that holds all `ColorToggleButton` children. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `OnColorSelected` | Fired when the user selects a color by tap or drag. Not fired when selection changes programmatically via `SelectColor(color, propagateEvent: false)`. | `Color selectedColor` |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `DeselectAll()` | Clears the current selection without firing `OnColorSelected`. |
+| `SelectColor(Color color, bool propagateEvent = true)` | Programmatically selects the button whose color matches. Pass `propagateEvent: false` to suppress `OnColorSelected`. |
+
+## Using the Control
+
+### Inline Color Picker
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class ThemeSelectorController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private ColorToggleGroup _colorGroup;
+    private Color _currentThemeColor = Color.white;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _colorGroup = new ColorToggleGroup();
+        _colorGroup.Colors = new[]
+        {
+            new Color(0.91f, 0.27f, 0.38f),
+            new Color(0.25f, 0.56f, 0.96f),
+            new Color(0.18f, 0.80f, 0.44f),
+            new Color(0.98f, 0.75f, 0.18f),
+            new Color(0.60f, 0.20f, 0.80f),
+        };
+        _colorGroup.Alignment = FlexDirection.Row;
+
+        _colorGroup.OnColorSelected += OnThemeColorPicked;
+
+        root.Q<VisualElement>("colorPickerContainer").Add(_colorGroup);
+
+        // Pre-select the saved theme color without firing the event
+        _colorGroup.SelectColor(_currentThemeColor, propagateEvent: false);
+    }
+
+    private void OnThemeColorPicked(Color color)
+    {
+        _currentThemeColor = color;
+        Debug.Log($"Theme color changed to {color}");
+        // Apply color to your UI here
+    }
+
+    private void ResetSelection()
+    {
+        _colorGroup.DeselectAll();
+    }
+}
+```
diff --git a/Documentation~/Controls/ComingSoonMessage.md b/Documentation~/Controls/ComingSoonMessage.md
new file mode 100644
index 0000000..1e267d3
--- /dev/null
+++ b/Documentation~/Controls/ComingSoonMessage.md
@@ -0,0 +1,91 @@
+# ComingSoonMessage
+
+## Summary
+
+`ComingSoonMessage` is a simple full-area placeholder element that fills its container and communicates that a feature or screen is not yet available. It renders a background layer, a prominent title, and a descriptive message label.
+
+Typical use cases:
+
+- Placeholder screens during development or staged rollouts
+- Stub pages inside a `ScrollSnap` onboarding flow
+- In-progress feature sections within a settings or navigation layout
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Title` | Gets or sets the large heading text. | `string` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `comingSoonMessage` | Root element. Fills its parent and centers its contents. |
+| `comingSoonMessage__background` | Decorative background layer (may carry color or texture). |
+| `comingSoonMessage__title` | Large heading label. |
+| `comingSoonMessage__label` | Secondary descriptive message label below the title. |
+
+## Events
+
+This control does not emit events.
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetMessage(string text)` | Sets the secondary descriptive message shown below the title. |
+
+## Using the Control
+
+### Stub Page in a ScrollSnap
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class OnboardingController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        var scrollSnap = root.Q<ScrollSnap>("onboardingSnap");
+
+        // Page 1 — real content
+        var welcomePage = new VisualElement();
+        welcomePage.AddToClassList("sample-page");
+        welcomePage.AddToClassList("sample-page--blue");
+        scrollSnap.Add(welcomePage);
+
+        // Page 2 — placeholder
+        var placeholder = new ComingSoonMessage();
+        placeholder.Title = "Social Features";
+        placeholder.SetMessage("Connect with friends and share your progress. Launching soon.");
+        scrollSnap.Add(placeholder);
+
+        // Page 3 — another placeholder
+        var placeholder2 = new ComingSoonMessage();
+        placeholder2.Title = "Challenges";
+        placeholder2.SetMessage("Weekly challenges and leaderboards are on their way.");
+        scrollSnap.Add(placeholder2);
+    }
+}
+```
+
+### Dynamic Title Update
+
+```csharp
+// Swap placeholder text based on user role
+if (user.IsPremium)
+{
+    _comingSoon.Title = "Advanced Analytics";
+    _comingSoon.SetMessage("Your detailed stats dashboard is being prepared.");
+}
+else
+{
+    _comingSoon.Title = "Premium Feature";
+    _comingSoon.SetMessage("Upgrade to unlock this section.");
+}
+```
diff --git a/Documentation~/Controls/DropDownControl.md b/Documentation~/Controls/DropDownControl.md
new file mode 100644
index 0000000..96d3cb3
--- /dev/null
+++ b/Documentation~/Controls/DropDownControl.md
@@ -0,0 +1,77 @@
+# DropDownControl
+
+## Summary
+
+`DropDownControl` is a wheel-style dropdown picker that opens from an inline trigger and lets the user confirm a single value from a vertically scrollable modal list.
+
+Typical use cases:
+
+- Dial-code or country-code selection before a phone field
+- Compact selectors that need a touch-friendly modal confirmation step
+- Any workflow where a finite string list should feel like a native mobile picker rather than a standard menu
+
+## Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `Items` | `IReadOnlyList<string>` | Ordered values shown in the picker. Updating the list refreshes the trigger label and open list content. |
+| `Value` | `string` | The currently selected value, or an empty string when `Items` is empty. |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `dropDownControl` | Root element for the control. |
+| `dropDownControl__trigger` | Closed-state trigger element. |
+| `dropDownControl__triggerLabel` | Label showing the current selection. |
+| `dropDownControl__triggerIcon` | Chevron icon inside the trigger. |
+| `dropDownControl__backdrop` | Full-screen backdrop injected while the picker is open. |
+| `dropDownControl__panel` | Floating modal panel that contains the picker list. |
+| `dropDownControl__viewport` | Clipped viewport used to display the visible rows. |
+| `dropDownControl__list` | Scrolling row container translated by the control logic. |
+| `dropDownControl__row` | A single rendered picker row. |
+| `dropDownControl__selectionLane` | Highlight lane showing the centred selection. |
+| `dropDownControl__fadeTop` | Top fade overlay used to de-emphasize off-centre rows. |
+| `dropDownControl__fadeBottom` | Bottom fade overlay used to de-emphasize off-centre rows. |
+| `dropDownControl--open` | Root modifier applied while the modal picker is visible. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `ValueChanged` | Fired after the user confirms a new selection. | `string selectedValue` |
+| `OpenStateChanged` | Fired when the modal picker is opened or closed. | `bool isOpen` |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetDefault(string value)` | Sets the selected item when the supplied value exists in `Items`. |
+
+## Using the Control
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class DialCodePickerExample : MonoBehaviour
+{
+    [SerializeField] private UIDocument document;
+
+    private void OnEnable()
+    {
+        var root = document.rootVisualElement;
+
+        var picker = new DropDownControl
+        {
+            Items = new[] { "+1", "+33", "+44", "+49" },
+        };
+
+        picker.SetDefault("+44");
+        picker.ValueChanged += selected => Debug.Log($"Selected {selected}");
+
+        root.Add(picker);
+    }
+}
+```
\ No newline at end of file
diff --git a/Documentation~/Controls/GrayscaleImage.md b/Documentation~/Controls/GrayscaleImage.md
new file mode 100644
index 0000000..4df031e
--- /dev/null
+++ b/Documentation~/Controls/GrayscaleImage.md
@@ -0,0 +1,92 @@
+# GrayscaleImage
+
+## Summary
+
+`GrayscaleImage` is an `ImmediateModeElement` that renders a sprite or texture using `Graphics.DrawTexture` and supports toggling a greyscale effect via a material property. The greyscale effect requires a custom `Material` that exposes `_MainTex` and `_GreyscaleEnabled` shader properties; without a compatible material the image renders in full color only.
+
+Typical use cases:
+
+- Profile or media images that switch to greyscale when disabled or locked
+- Toggling greyscale on achievement/badge imagery for locked states
+- Any image that needs a shader-driven color/greyscale toggle without a separate texture asset
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `SpriteProperty` | The `Sprite` to render. Mutually exclusive with `TextureProperty`. | `Sprite` |
+| `TextureProperty` | The `Texture` to render. Mutually exclusive with `SpriteProperty`. | `Texture` |
+| `scaleMode` | How the image is scaled within its bounds. | `ScaleMode` |
+| `Material` | The material used for rendering. Must expose `_MainTex` and `_GreyscaleEnabled` for the greyscale feature. | `Material` |
+| `GreyscaleEnabled` | Gets or sets whether the greyscale shader effect is active. Only functional when a compatible material is assigned. | `bool` |
+| `MainTextureProperty` | The shader property name for the main texture. | `string` (default `"_MainTex"`) |
+| `GreyscaleToggleProperty` | The shader property name for the greyscale toggle. | `string` (default `"_GreyscaleEnabled"`) |
+
+### Constants
+
+| Name | Value | Description |
+| --- | --- | --- |
+| `DefaultMainTextureProperty` | `"_MainTex"` | Default shader property name for the main texture. |
+| `DefaultGreyscaleToggleProperty` | `"_GreyscaleEnabled"` | Default shader property name for the greyscale toggle. |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `grayscaleImage` | Root element. Dimensions should be set via USS or inline style; the element uses its resolved layout rect for `Graphics.DrawTexture`. |
+
+## Events
+
+This control does not emit events. Repaint is triggered automatically by the immediate-mode element lifecycle.
+
+## Public Methods
+
+This control exposes its API entirely through properties. No additional public methods are defined beyond those inherited from `ImmediateModeElement`.
+
+## Using the Control
+
+### Toggle Greyscale on a Locked Achievement
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class AchievementBadgeController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+    [SerializeField] private Sprite _badgeSprite;
+    [SerializeField] private Material _greyscaleMaterial; // shader with _MainTex + _GreyscaleEnabled
+
+    private GrayscaleImage _badgeImage;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _badgeImage = new GrayscaleImage();
+        _badgeImage.style.width = 80;
+        _badgeImage.style.height = 80;
+        _badgeImage.SpriteProperty = _badgeSprite;
+        _badgeImage.Material = _greyscaleMaterial;
+        _badgeImage.scaleMode = ScaleMode.ScaleToFit;
+
+        root.Q<VisualElement>("badgeContainer").Add(_badgeImage);
+    }
+
+    public void SetLocked(bool locked)
+    {
+        _badgeImage.GreyscaleEnabled = locked;
+    }
+}
+```
+
+### Texture-Based Rendering with Custom Property Names
+
+```csharp
+// If your shader uses different property names:
+_badgeImage.MainTextureProperty = "_BaseMap";
+_badgeImage.GreyscaleToggleProperty = "_UseGreyscale";
+_badgeImage.TextureProperty = _photoTexture;
+_badgeImage.GreyscaleEnabled = true;
+```
diff --git a/Documentation~/Controls/IconLabelButton.md b/Documentation~/Controls/IconLabelButton.md
new file mode 100644
index 0000000..221d312
--- /dev/null
+++ b/Documentation~/Controls/IconLabelButton.md
@@ -0,0 +1,99 @@
+# IconLabelButton
+
+## Summary
+
+`IconLabelButton` is a full-width row button that pairs a 24 × 24 px icon on the left with a text label. It provides hover and pressed state modifier classes for visual feedback without custom USS.
+
+Typical use cases:
+
+- Menu and navigation row items
+- Action list rows (share, delete, report, etc.)
+- Settings list entries with a leading icon
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Text` | Gets or sets the button label text. | `string` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `iconLabelButton` | Root element. Full-width flex row. |
+| `iconLabelButton__button` | Inner button element that wraps icon and label. |
+| `iconLabelButton__icon` | Icon element. Fixed at 24 × 24 px. |
+| `iconLabelButton__label` | Text label element next to the icon. |
+| `iconLabelButton--hover` | Modifier applied on pointer-enter. |
+| `iconLabelButton--pressed` | Modifier applied while pointer is held down. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `Clicked` | Fired when the button is tapped or clicked. | none |
+
+## Public Methods
+
+No public methods beyond property access. Use the `Text` property and USS to configure the control.
+
+## Using the Control
+
+### Navigation Menu
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class SideMenuController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+    [SerializeField] private Texture2D _homeIcon;
+    [SerializeField] private Texture2D _profileIcon;
+    [SerializeField] private Texture2D _settingsIcon;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        var menu = root.Q<VisualElement>("sideMenu");
+
+        menu.Add(CreateMenuRow("Home", _homeIcon, () => NavigateTo("home")));
+        menu.Add(CreateMenuRow("Profile", _profileIcon, () => NavigateTo("profile")));
+        menu.Add(CreateMenuRow("Settings", _settingsIcon, () => NavigateTo("settings")));
+    }
+
+    private IconLabelButton CreateMenuRow(string label, Texture2D icon, System.Action onClicked)
+    {
+        var btn = new IconLabelButton();
+        btn.Text = label;
+
+        // Query by class name (first arg is element name — pass null; second is class name)
+        var iconEl = btn.Q(null, IconLabelButton.IconClass);
+        if (iconEl != null)
+            iconEl.style.backgroundImage = new StyleBackground(icon);
+
+        btn.Clicked += onClicked;
+        return btn;
+    }
+
+    private void NavigateTo(string screen)
+    {
+        Debug.Log($"Navigating to: {screen}");
+    }
+}
+```
+
+### USS Customization
+
+Override hover and pressed states in your project USS:
+
+```uss
+.iconLabelButton--hover {
+    background-color: rgba(255, 255, 255, 0.06);
+}
+
+.iconLabelButton--pressed {
+    background-color: rgba(255, 255, 255, 0.12);
+}
+```
diff --git a/Documentation~/Controls/ImageCropOverlayControl.md b/Documentation~/Controls/ImageCropOverlayControl.md
new file mode 100644
index 0000000..aa1d958
--- /dev/null
+++ b/Documentation~/Controls/ImageCropOverlayControl.md
@@ -0,0 +1,85 @@
+# ImageCropOverlayControl
+
+## Summary
+
+`ImageCropOverlayControl` is a full-screen modal cropper for square image exports. It displays the source image inside a movable and zoomable viewport, then exports the visible area to a new `Texture2D` when the user confirms.
+
+Typical use cases:
+
+- Profile picture editing before upload
+- Cover-image cropping with a fixed export size
+- Any UI Toolkit workflow that needs a self-contained move-and-scale image confirmation step
+
+## Nested Types
+
+### `Configuration`
+
+`Configuration` customizes the overlay title, button labels, export size, zoom limits, screen margins, viewport width ratio, and normalized corner radius used by the crop viewport mask.
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `imageCropOverlay` | Full-screen modal root. |
+| `imageCropOverlay__panel` | Centred container for the header, viewport, and footer. |
+| `imageCropOverlay__header` | Header row that hosts the title. |
+| `imageCropOverlay__title` | Title label. |
+| `imageCropOverlay__viewportHost` | Layout host used to centre the crop viewport. |
+| `imageCropOverlay__viewport` | Clipped crop viewport that receives drag, pinch, and wheel input. |
+| `imageCropOverlay__image` | Absolute-positioned image surface inside the viewport. |
+| `imageCropOverlay__footer` | Footer row for the action buttons. |
+| `imageCropOverlay__buttonSlot` | Layout slot for each footer button. |
+| `imageCropOverlay__button` | Shared button class applied to the cancel/save buttons. |
+| `imageCropOverlay__button--cancel` | Modifier for the cancel button. |
+| `imageCropOverlay__button--save` | Modifier for the save button. |
+
+## Public API
+
+| Signature | Description |
+| --- | --- |
+| `Show(VisualElement anchor, Texture2D sourceTexture, Configuration configuration, Action<Texture2D> onConfirmed, Action onCancelled = null)` | Creates and displays the overlay on the anchor's panel root. Returns the created overlay or `null` when it cannot be shown. |
+| `CreateUniformCornerRadiusPercent(float percent)` | Creates a clamped, uniform normalized corner-radius vector for the crop mask. |
+| `ResolveNormalizedCornerRadiusPercent(VisualElement sourceElement, Vector4 fallback)` | Converts the source element's resolved pixel radii into normalized percentages suitable for the crop mask. |
+
+## Using the Control
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class AvatarCropExample : MonoBehaviour
+{
+    [SerializeField] private UIDocument document;
+    [SerializeField] private Texture2D avatarSource;
+
+    private CircularImageButton avatarButton;
+
+    private void OnEnable()
+    {
+        var root = document.rootVisualElement;
+
+        avatarButton = new CircularImageButton();
+        avatarButton.SetImage(avatarSource);
+        avatarButton.Clicked += OpenCropper;
+
+        root.Add(avatarButton);
+    }
+
+    private void OpenCropper()
+    {
+        var configuration = new ImageCropOverlayControl.Configuration
+        {
+            Title = "Move and Scale",
+            ExportSize = 512,
+            CornerRadiusPercent = ImageCropOverlayControl.CircleCornerRadiusPercent,
+        };
+
+        ImageCropOverlayControl.Show(
+            avatarButton,
+            avatarSource,
+            configuration,
+            cropped => avatarButton.SetImage(cropped));
+    }
+}
+```
\ No newline at end of file
diff --git a/Documentation~/Controls/LoadingIcon.md b/Documentation~/Controls/LoadingIcon.md
new file mode 100644
index 0000000..532af68
--- /dev/null
+++ b/Documentation~/Controls/LoadingIcon.md
@@ -0,0 +1,98 @@
+# LoadingIcon
+
+## Summary
+
+`LoadingIcon` is a continuously rotating image element used to indicate background work. Rotation is driven by a scheduled callback that fires every 16 ms. An optional `blockInteraction` flag captures pointer events so the user cannot interact with elements beneath the spinner while it is active.
+
+Typical use cases:
+
+- Async operation feedback (API calls, data loading)
+- Image upload or file transfer progress indicator
+- Form submission spinner overlay
+
+## Properties
+
+This control is configured through method calls. The visibility and animation state are reflected in modifier classes.
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `loadingIcon` | Root element. |
+| `loadingIcon__image` | The rotating image. Fixed at 40 × 40 px. |
+| `loadingIcon--animating` | Modifier applied while rotation is active. |
+| `loadingIcon--visible` | Modifier applied while the icon is shown. Pair with USS to control opacity or display. |
+
+## Events
+
+This control does not emit events.
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetIcon(Texture2D texture)` | Sets the texture used for the spinning image. |
+| `PlayLoading(float customSpeed = 1f, bool blockInteraction = false)` | Starts the rotation animation. `customSpeed` is the duration of one full 360° rotation in seconds; lower values spin faster. When `blockInteraction` is `true` the control captures all pointer events. |
+| `StopLoading()` | Stops the rotation, releases pointer capture, and removes the `--animating` and `--visible` modifiers. |
+
+## Using the Control
+
+### Simple Loading Overlay
+
+```csharp
+using System.Threading.Tasks;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class UploadController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+    [SerializeField] private Texture2D _spinnerTexture;
+
+    private LoadingIcon _spinner;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _spinner = new LoadingIcon();
+        _spinner.SetIcon(_spinnerTexture);
+
+        root.Q<VisualElement>("overlayContainer").Add(_spinner);
+
+        root.Q<Button>("uploadButton").clicked += () => _ = StartUpload();
+    }
+
+    private async Task StartUpload()
+    {
+        // 0.8s per rotation, block taps on underlying UI
+        _spinner.PlayLoading(customSpeed: 0.8f, blockInteraction: true);
+
+        try
+        {
+            await UploadFileAsync();
+        }
+        finally
+        {
+            _spinner.StopLoading();
+        }
+    }
+
+    private async Task UploadFileAsync()
+    {
+        // Simulate async upload
+        await Task.Delay(2000);
+    }
+}
+```
+
+### Speed Variants
+
+```csharp
+// Slow, calm indicator — 1.5 seconds per revolution
+_spinner.PlayLoading(customSpeed: 1.5f);
+
+// Fast, urgent indicator — 0.4 seconds per revolution
+_spinner.PlayLoading(customSpeed: 0.4f);
+```
diff --git a/Documentation~/Controls/PageDotIndicator.md b/Documentation~/Controls/PageDotIndicator.md
new file mode 100644
index 0000000..a0a1e8c
--- /dev/null
+++ b/Documentation~/Controls/PageDotIndicator.md
@@ -0,0 +1,89 @@
+# PageDotIndicator
+
+## Summary
+
+`PageDotIndicator` renders a row of dot indicators that communicate the current position within a paged sequence. All dots up to and including `CurrentPage` are styled as completed. The dot list is rebuilt automatically when `TotalPages` changes. Colors can be overridden via USS custom properties or inline method calls.
+
+Typical use cases:
+
+- Onboarding flow page position dots
+- Carousel or `ScrollSnap` position indicator
+- Multi-step form or wizard step markers
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `CurrentPage` | Gets or sets the zero-based index of the current page. Updates dot completed state. | `int` |
+| `TotalPages` | Gets or sets the total number of dots to render. Changing this value rebuilds all dot elements. | `int` |
+| `NormalizedProgress` | Gets the current progress as a value in `[0, 1]`. Computed from `CurrentPage / max(TotalPages - 1, 1)`. | `float` (read-only) |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `pageDotIndicator` | Root element. |
+| `pageDotIndicator__dotsContainer` | Flex container that holds the individual dot elements. |
+| `pageDotIndicator__dot` | Individual dot element. Fixed at 8 × 8 px with 4 px margin on each side. |
+| `pageDotIndicator__dot--completed` | Modifier applied to every dot whose index is less than or equal to `CurrentPage`. |
+
+## Events
+
+This control does not emit events.
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetProgress(int currentPage, int totalPages)` | Sets both `CurrentPage` and `TotalPages` in one call. Rebuilds dots if `totalPages` changed. |
+| `SetCompletedColor(string hex)` | Sets the background color of completed dots using a hex string (e.g. `"#e94560"`). |
+| `SetPendingColor(string hex)` | Sets the background color of pending (not yet reached) dots using a hex string. |
+| `SetColors(string completedHex, string pendingHex)` | Convenience method that sets both completed and pending colors in one call. |
+
+## Using the Control
+
+### Syncing with ScrollSnap
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class OnboardingController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private ScrollSnap _scrollSnap;
+    private PageDotIndicator _dotIndicator;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        _scrollSnap = root.Q<ScrollSnap>("onboardingSnap");
+
+        _dotIndicator = new PageDotIndicator();
+        _dotIndicator.SetColors(completedHex: "#e94560", pendingHex: "#555555");
+        _dotIndicator.SetProgress(currentPage: 0, totalPages: _scrollSnap.PageCount);
+
+        root.Q<VisualElement>("footerContainer").Add(_dotIndicator);
+
+        _scrollSnap.PageChanged += pageIndex =>
+        {
+            _dotIndicator.CurrentPage = pageIndex;
+        };
+    }
+}
+```
+
+### Standalone Step Indicator
+
+```csharp
+// Set up a 5-step progress tracker, starting at step 2
+_dotIndicator.SetProgress(currentPage: 2, totalPages: 5);
+
+// Advance one step
+_dotIndicator.CurrentPage++;
+
+// Read normalized progress for use in other UI
+float progress = _dotIndicator.NormalizedProgress; // 0.0 – 1.0
+```
diff --git a/Documentation~/Controls/PillButton.md b/Documentation~/Controls/PillButton.md
new file mode 100644
index 0000000..3027f58
--- /dev/null
+++ b/Documentation~/Controls/PillButton.md
@@ -0,0 +1,101 @@
+# PillButton
+
+## Summary
+
+`PillButton` is a rounded, gradient-filled call-to-action button with a flash feedback animation on press. The gradient is generated from two colors (inner and outer) into a 256 × 1 `Texture2D` that is set as the background image. A white overlay fades in briefly on tap to provide tactile feedback. The gradient texture is destroyed when the element detaches from the panel.
+
+Typical use cases:
+
+- Primary call-to-action buttons (Continue, Submit, Get Started)
+- Form submission buttons
+- Prominent single-action navigation controls
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Text` | Gets or sets the button label text. | `string` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `pillButton` | Root element. |
+| `pillButton__background` | Gradient background layer. `border-radius: 999px`, `overflow: hidden`. Holds the gradient texture. |
+| `pillButton__flash` | White overlay element used for the press flash effect. |
+| `pillButton__flash--active` | Modifier that triggers a 100 ms opacity transition on the flash overlay. |
+| `pillButton__label` | Text label element centered over the button. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `Clicked` | Fired when the button is tapped or clicked. The flash animation plays before this event is dispatched. | none |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetInnerColor(string hex)` | Sets the inner (left-edge) gradient color using a hex string (e.g. `"#e94560"`). Rebuilds the gradient texture. |
+| `SetOuterColor(string hex)` | Sets the outer (right-edge) gradient color using a hex string. Rebuilds the gradient texture. |
+| `SetTextColor(Color color)` | Sets the label text color. |
+| `SetFontSize(float size)` | Sets the label font size in pixels. |
+
+## Using the Control
+
+### Primary CTA
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class OnboardingFooterController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private PillButton _continueButton;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _continueButton = new PillButton();
+        _continueButton.Text = "Continue";
+        _continueButton.SetInnerColor("#e94560");
+        _continueButton.SetOuterColor("#9b1d35");
+        _continueButton.SetTextColor(Color.white);
+        _continueButton.SetFontSize(16f);
+
+        _continueButton.Clicked += OnContinueTapped;
+
+        root.Q<VisualElement>("footer").Add(_continueButton);
+    }
+
+    private void OnContinueTapped()
+    {
+        Debug.Log("Continue tapped");
+    }
+}
+```
+
+### Dynamic Color Update
+
+```csharp
+// Reflect form validity through button color
+private void UpdateButtonState(bool isValid)
+{
+    if (isValid)
+    {
+        _continueButton.SetInnerColor("#18cc6e");
+        _continueButton.SetOuterColor("#0d7a42");
+        _continueButton.Text = "Submit";
+    }
+    else
+    {
+        _continueButton.SetInnerColor("#555555");
+        _continueButton.SetOuterColor("#333333");
+        _continueButton.Text = "Fill all fields";
+    }
+}
+```
diff --git a/Documentation~/Controls/PillInputField.md b/Documentation~/Controls/PillInputField.md
new file mode 100644
index 0000000..f2d9359
--- /dev/null
+++ b/Documentation~/Controls/PillInputField.md
@@ -0,0 +1,113 @@
+# PillInputField
+
+## Summary
+
+`PillInputField` is a styled text input with a floating label and pill-shaped container. It handles mobile focus correctly by tracking pointer movement to distinguish taps from drags (8 px slop threshold) before opening the on-screen keyboard. Validation fires automatically on blur via `OnValidation`. The label is hidden when empty.
+
+Typical use cases:
+
+- Login and signup forms
+- Profile editing screens
+- Any form that needs a labeled, styled input compatible with mobile keyboards
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Label` | Gets or sets the label text shown above (or inside when empty) the input. | `string` |
+| `Value` | Gets or sets the current input text. Setting this fires `OnValueChanged`. | `string` |
+| `KeyboardType` | Gets or sets the touch keyboard type for mobile platforms. | `TouchScreenKeyboardType` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `pillInputField` | Root element. |
+| `pillInputField__label` | Floating label element. Hidden automatically when `Label` is empty. |
+| `pillInputField__input` | The inner `TextField` element. |
+| `pillInputField__inputTextContent` | Internal text content element used for style overrides. |
+| `pillInputField--passwordMode` | Modifier applied when password mode is active. |
+| `pillInputField--multiline` | Modifier applied when multiline mode is active. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `OnValueChanged` | Fired whenever the input value changes. | `string newValue` |
+| `OnValidation` | Fired when the field loses focus (blur). Use this to show inline validation errors. | `string currentValue` |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `Focus()` | Programmatically focuses the input field. |
+| `Blur()` | Programmatically removes focus from the input field. |
+| `SetPlaceholder(string text)` | Sets the placeholder hint text shown when the field is empty and unfocused. |
+| `SetPasswordMode(bool enabled)` | Enables or disables password masking. Applies or removes the `--passwordMode` modifier. |
+| `SetMaxLength(int length)` | Sets the maximum number of characters allowed. |
+| `SetMultiline(bool enabled)` | Enables or disables multiline input. Applies or removes the `--multiline` modifier. |
+| `SetBackgroundColor(Color color)` | Sets the background color of the pill container. |
+| `SetTextColor(Color color)` | Sets the text color of the input. |
+| `SetFontSize(float size)` | Sets the font size of the input text. |
+| `Validate()` | Manually triggers `OnValidation` with the current value. |
+
+## Using the Control
+
+### Login Form
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class LoginController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private PillInputField _emailField;
+    private PillInputField _passwordField;
+    private string _emailError;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        var form = root.Q<VisualElement>("loginForm");
+
+        _emailField = new PillInputField();
+        _emailField.Label = "Email";
+        _emailField.SetPlaceholder("your@email.com");
+        _emailField.KeyboardType = TouchScreenKeyboardType.EmailAddress;
+        _emailField.OnValueChanged += _ => _emailError = null;
+        _emailField.OnValidation += value =>
+        {
+            if (!value.Contains("@"))
+                _emailError = "Enter a valid email address";
+        };
+
+        _passwordField = new PillInputField();
+        _passwordField.Label = "Password";
+        _passwordField.SetPlaceholder("••••••••");
+        _passwordField.SetPasswordMode(true);
+        _passwordField.SetMaxLength(64);
+
+        form.Add(_emailField);
+        form.Add(_passwordField);
+
+        root.Q<Button>("loginButton").clicked += OnLoginTapped;
+    }
+
+    private void OnLoginTapped()
+    {
+        _emailField.Validate();
+        _passwordField.Validate();
+
+        if (_emailError != null)
+        {
+            Debug.Log(_emailError);
+            return;
+        }
+
+        Debug.Log($"Login: {_emailField.Value}");
+    }
+}
+```
diff --git a/Documentation~/Controls/PillSelector.md b/Documentation~/Controls/PillSelector.md
new file mode 100644
index 0000000..eb5133f
--- /dev/null
+++ b/Documentation~/Controls/PillSelector.md
@@ -0,0 +1,101 @@
+# PillSelector
+
+## Summary
+
+`PillSelector` is a read-only pill-shaped field with a chevron icon that fires a `Clicked` event when tapped. It does not manage a picker internally; the consumer is responsible for displaying the selection UI and writing the chosen value back to the `Value` property.
+
+Typical use cases:
+
+- Inline date or time picker trigger row
+- Option selector row that opens a modal or bottom sheet
+- Any read-only labeled field that indicates a "tap to change" interaction
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Label` | Gets or sets the descriptive label shown above the selector value. | `string` |
+| `Value` | Gets or sets the currently displayed selected value text. | `string` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `pillSelector` | Root element. |
+| `pillSelector__label` | Label element shown above the value. |
+| `pillSelector__container` | Pill-shaped row containing the value label and chevron. |
+| `pillSelector__clickableLabel` | The text element inside the container that displays `Value`. |
+| `pillSelector__icon` | Chevron icon element. Fixed at 16 × 16 px. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `Clicked` | Fired when the user taps the selector row. The consumer should open a picker and update `Value` with the result. | none |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetFontSize(float size)` | Sets the font size for the value label. |
+
+## Using the Control
+
+### Date Picker Trigger
+
+```csharp
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class EventFormController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private PillSelector _dateSelector;
+    private DateTime _selectedDate = DateTime.Today;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _dateSelector = new PillSelector();
+        _dateSelector.Label = "Event Date";
+        _dateSelector.Value = _selectedDate.ToString("MMMM d, yyyy");
+
+        _dateSelector.Clicked += OnDateSelectorTapped;
+
+        root.Q<VisualElement>("eventForm").Add(_dateSelector);
+    }
+
+    private void OnDateSelectorTapped()
+    {
+        // Open your date picker UI here.
+        // When the user confirms a date, call ApplyDate().
+        Debug.Log("Open date picker");
+        ApplyDate(DateTime.Today.AddDays(7)); // example result
+    }
+
+    private void ApplyDate(DateTime date)
+    {
+        _selectedDate = date;
+        _dateSelector.Value = date.ToString("MMMM d, yyyy");
+    }
+}
+```
+
+### Country Selector Row
+
+```csharp
+_countrySelector = new PillSelector();
+_countrySelector.Label = "Country";
+_countrySelector.Value = "Select country";
+_countrySelector.SetFontSize(15f);
+
+_countrySelector.Clicked += () =>
+{
+    // Show modal country list
+    // On confirmation: _countrySelector.Value = chosenCountry;
+};
+```
diff --git a/Documentation~/Controls/QuadrantStepper.md b/Documentation~/Controls/QuadrantStepper.md
new file mode 100644
index 0000000..6dd7cdd
--- /dev/null
+++ b/Documentation~/Controls/QuadrantStepper.md
@@ -0,0 +1,118 @@
+# QuadrantStepper
+
+## Summary
+
+`QuadrantStepper` is a segmented control that divides its width into equally-sized tap targets. A sliding overlay animates between the selected segment. By default it is created with four equal segments; the option list can be replaced at any time via `SetOptions`. The overlay sits at 90% of the control's height (5% inset top and bottom) to create a floating appearance.
+
+Typical use cases:
+
+- Tab bar or mode switcher
+- Category or filter selector
+- Any fixed-option segmented navigation control
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `SelectedIndex` | Gets or sets the index of the currently selected segment. | `int` |
+| `SelectedText` | Gets the label text of the currently selected segment. | `string` (read-only) |
+
+### USS Custom Properties
+
+| Name | Description | Default |
+| --- | --- | --- |
+| `--quadrantStepper-animation-duration-ms` | Duration of the sliding overlay animation in milliseconds. | Defined in package USS |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `quadrantStepper` | Root element. |
+| `quadrantStepper__overlay` | The sliding highlight overlay. Absolutely positioned. Transitions between segments. |
+| `quadrantStepper__segments` | Flex row container holding all segment elements. |
+| `quadrantStepper__segment` | Individual segment tap target. Flex-grows equally to divide available width. |
+| `quadrantStepper__label` | Text label inside each segment. |
+| `is-selected` | Modifier applied to the currently selected segment. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `SelectionChanged` | Fired when the selected segment changes via tap or programmatic call (unless suppressed). | `int index, string text` |
+
+## Constructors
+
+| Signature | Description |
+| --- | --- |
+| `QuadrantStepper()` | Creates a stepper with four default options (`"1"`, `"2"`, `"3"`, `"4"`). |
+| `QuadrantStepper(IReadOnlyList<string> options)` | Creates a stepper with the provided option labels. |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetOptions(IReadOnlyList<string> options)` | Replaces all segment labels. Resets selection to index 0. |
+| `SetOptions(IReadOnlyList<string> options, int defaultIndex)` | Replaces all segment labels and sets the initial selection to `defaultIndex`. |
+| `bool SetOptions(IReadOnlyList<string> options, string defaultText)` | Replaces labels and attempts to select the segment matching `defaultText`. Returns `true` if the text was found and selected. |
+| `SetSelectedIndex(int index)` | Selects the segment at `index` with animation and fires `SelectionChanged`. |
+| `SetSelectedIndex(int index, bool notify, bool animate)` | Selects the segment at `index` with optional event notification and animation. |
+| `bool TrySetSelectedText(string text, bool notify, bool animate)` | Selects the segment whose label matches `text`. Returns `false` if not found. |
+| `ForceUnselect()` | Removes the selection without firing `SelectionChanged`. The overlay is hidden. |
+
+## Using the Control
+
+### Mode Switcher
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+using System.Collections.Generic;
+
+public class ModeController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private QuadrantStepper _modeStepper;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        var modes = new List<string> { "Daily", "Weekly", "Monthly", "All Time" };
+        _modeStepper = new QuadrantStepper(modes);
+
+        // Default to "Weekly" without firing the event
+        _modeStepper.SetOptions(modes, defaultIndex: 1);
+
+        _modeStepper.SelectionChanged += (index, text) =>
+        {
+            Debug.Log($"Mode changed to [{index}] {text}");
+            LoadData(text);
+        };
+
+        root.Q<VisualElement>("filterContainer").Add(_modeStepper);
+    }
+
+    private void LoadData(string period)
+    {
+        Debug.Log($"Loading data for period: {period}");
+    }
+
+    public void ResetToDefault()
+    {
+        // Restore to "Daily" silently, no animation
+        _modeStepper.SetSelectedIndex(0, notify: false, animate: false);
+    }
+}
+```
+
+### Restoring Saved State
+
+```csharp
+// Restore selection from saved preference
+string savedMode = PlayerPrefs.GetString("selectedMode", "Weekly");
+bool found = _modeStepper.TrySetSelectedText(savedMode, notify: false, animate: false);
+if (!found)
+    _modeStepper.SetSelectedIndex(0, notify: false, animate: false);
+```
diff --git a/Documentation~/Controls/RoundedInputField.md b/Documentation~/Controls/RoundedInputField.md
new file mode 100644
index 0000000..a04cd13
--- /dev/null
+++ b/Documentation~/Controls/RoundedInputField.md
@@ -0,0 +1,99 @@
+# RoundedInputField
+
+## Summary
+
+`RoundedInputField` is a text input with rounded corners and a custom placeholder implementation. The placeholder is rendered as an absolutely-positioned `Label` that is shown or hidden based on whether the current `Value` is empty. This avoids the style limitations of the built-in Unity `TextField` placeholder.
+
+Typical use cases:
+
+- Search bars and filter inputs
+- Notes or comment text areas
+- Inline editing fields within list rows
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `Value` | Gets or sets the current text value. Setting this updates the underlying `TextField` and fires `ValueChanged`. | `string` |
+| `Placeholder` | Gets or sets the placeholder hint text. Shown when `Value` is empty and the field is not focused. | `string` |
+| `IsPassword` | Gets or sets password masking. | `bool` |
+| `Multiline` | Gets or sets multiline input mode. | `bool` |
+| `MaxLength` | Gets or sets the maximum allowed character count. `-1` means no limit. | `int` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `roundedInputField` | Root element. |
+| `roundedInputField__textField` | The `TextField` element. Apply border-radius here for the rounded shape. |
+| `roundedInputField__input` | Internal input content area inside the `TextField`. |
+| `roundedInputField__placeholder` | Absolutely-positioned `Label` that renders the placeholder text. Toggled visible when `Value` is empty. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `ValueChanged` | Fired when the text value changes. | `string newValue` |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetValueWithoutNotify(string value)` | Sets the field value without firing `ValueChanged`. Useful for initializing from saved state. |
+| `SetBackgroundColor(Color color)` | Sets the background color of the text field. |
+| `SetTextColor(Color color)` | Sets the input text color. |
+| `SetPlaceholderColor(Color color)` | Sets the color of the placeholder label. |
+| `SetFontSize(float size)` | Sets the font size for both input text and placeholder. |
+| `Focus()` | Programmatically focuses the input. |
+
+## Using the Control
+
+### Search Bar
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class ContactSearchController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private RoundedInputField _searchField;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _searchField = new RoundedInputField();
+        _searchField.Placeholder = "Search contacts...";
+        _searchField.SetPlaceholderColor(new Color(0.5f, 0.5f, 0.5f, 1f));
+        _searchField.SetBackgroundColor(new Color(0.15f, 0.15f, 0.2f, 1f));
+        _searchField.SetTextColor(Color.white);
+        _searchField.SetFontSize(14f);
+
+        _searchField.ValueChanged += OnSearchChanged;
+
+        root.Q<VisualElement>("searchContainer").Add(_searchField);
+    }
+
+    private void OnSearchChanged(string query)
+    {
+        Debug.Log($"Filter contacts by: {query}");
+    }
+}
+```
+
+### Notes Field with Initial Value
+
+```csharp
+_notesField = new RoundedInputField();
+_notesField.Multiline = true;
+_notesField.MaxLength = 500;
+_notesField.Placeholder = "Add a note...";
+
+// Initialize from saved data without triggering a change event
+_notesField.SetValueWithoutNotify(savedNotes);
+
+_notesField.ValueChanged += text => _isDirty = true;
+```
diff --git a/Documentation~/Controls/StepProgressBar.md b/Documentation~/Controls/StepProgressBar.md
new file mode 100644
index 0000000..c1f5da8
--- /dev/null
+++ b/Documentation~/Controls/StepProgressBar.md
@@ -0,0 +1,90 @@
+# StepProgressBar
+
+## Summary
+
+`StepProgressBar` is a horizontal progress bar that expresses progress as a fraction of discrete steps. The fill width is `NormalizedProgress × 100%`. The gradient is generated from two colors (inner and outer) into a 256 × 1 `Texture2D`. A warning is logged and `maxSteps` is clamped to `1` when a non-positive value is passed to `SetProgress`.
+
+Typical use cases:
+
+- Onboarding flow completion indicator
+- Multi-step form or wizard progress
+- Task or challenge completion tracker
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `NormalizedProgress` | Gets the current fill fraction in `[0, 1]`. Computed from `CurrentSteps / MaxSteps`. | `float` (read-only) |
+| `CurrentSteps` | Gets the current step count. | `int` (read-only) |
+| `MaxSteps` | Gets the total number of steps. | `int` (read-only) |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `stepProgressBar` | Root element. |
+| `stepProgressBar__background` | Background track. `border-radius: 4px`, `overflow: hidden`. |
+| `stepProgressBar__fill` | Fill element. Width is driven inline as a percentage. |
+
+## Events
+
+This control does not emit events.
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetProgress(int steps, int maxSteps)` | Sets the current and maximum steps. Recomputes `NormalizedProgress` and updates the fill width. Logs a warning if `maxSteps <= 0` and clamps it to `1`. |
+| `SetInnerColor(string hex)` | Sets the inner (left-edge) gradient color. Rebuilds the gradient texture. |
+| `SetOuterColor(string hex)` | Sets the outer (right-edge) gradient color. Rebuilds the gradient texture. |
+| `SetGradientColors(string innerColorHex, string outerColorHex)` | Convenience method that sets both gradient colors in one call. |
+
+## Using the Control
+
+### Onboarding Progress
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class OnboardingProgressController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private StepProgressBar _progressBar;
+    private int _currentStep = 0;
+    private const int TotalSteps = 5;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _progressBar = new StepProgressBar();
+        _progressBar.SetGradientColors(innerColorHex: "#e94560", outerColorHex: "#9b1d35");
+        _progressBar.SetProgress(_currentStep, TotalSteps);
+
+        root.Q<VisualElement>("progressContainer").Add(_progressBar);
+    }
+
+    public void AdvanceStep()
+    {
+        _currentStep = Mathf.Min(_currentStep + 1, TotalSteps);
+        _progressBar.SetProgress(_currentStep, TotalSteps);
+        Debug.Log($"Progress: {_progressBar.NormalizedProgress:P0}");
+    }
+}
+```
+
+### Dynamic Color Feedback
+
+```csharp
+// Green when complete, default brand color otherwise
+private void RefreshBarColor()
+{
+    if (_progressBar.CurrentSteps >= _progressBar.MaxSteps)
+        _progressBar.SetGradientColors("#18cc6e", "#0d7a42");
+    else
+        _progressBar.SetGradientColors("#e94560", "#9b1d35");
+}
+```
diff --git a/Documentation~/Controls/ToastSwipeDismissManipulator.md b/Documentation~/Controls/ToastSwipeDismissManipulator.md
new file mode 100644
index 0000000..e51d4fa
--- /dev/null
+++ b/Documentation~/Controls/ToastSwipeDismissManipulator.md
@@ -0,0 +1,111 @@
+# ToastSwipeDismissManipulator
+
+## Summary
+
+`ToastSwipeDismissManipulator` is a `PointerManipulator` that adds swipe-to-dismiss gesture recognition to any `VisualElement`. It supports both horizontal and vertical dismiss axes. The gesture axis is locked after 12 px of movement along the dominant direction. Dismiss triggers when travel exceeds 80 px or velocity exceeds 1 100 px/s. Incomplete swipes snap back in 140 ms; dismissed elements animate out in 180 ms.
+
+All geometry values (dismiss travel distances, offset target) are provided as delegates evaluated lazily at gesture time, so the manipulator does not need to be re-created when layout changes.
+
+Typical use cases:
+
+- Swipe-to-dismiss notification toasts
+- Dismissible alert or info banners
+- Swipeable items in a list or feed
+
+## Behavior Constants
+
+| Constant | Value | Description |
+| --- | --- | --- |
+| Tap slop | 8 px | Maximum movement before a tap becomes a drag. |
+| Swipe axis lock threshold | 12 px | Movement required along the dominant axis before the axis is locked. |
+| Swipe dismiss threshold | 80 px | Travel distance that triggers a dismiss. |
+| Dismiss velocity threshold | 1 100 px/s | Pointer velocity that triggers a dismiss regardless of travel distance. |
+| Snap-back duration | 140 ms | Animation duration for returning to the origin position. |
+| Dismiss duration | 180 ms | Animation duration for the final dismiss slide-out. |
+
+## USS Classes
+
+This manipulator does not add USS classes. Visual feedback is applied by translating the `getOffsetTarget` element inline.
+
+## Events / Callbacks
+
+All behavior is communicated through constructor-provided delegates.
+
+| Delegate parameter | Description |
+| --- | --- |
+| `Func<bool> canInteract` | Called on pointer-down. Return `false` to ignore the gesture entirely. |
+| `Func<Vector2, bool> canStartAtPosition` | Called with the pointer position. Return `false` to suppress gesture start (e.g. when a button lives in part of the toast). |
+| `Func<float> getHorizontalDismissTravelDistance` | Returns the horizontal distance in pixels required to trigger dismiss. |
+| `Func<float> getVerticalDismissTravelDistance` | Returns the vertical distance in pixels required to trigger dismiss. |
+| `Func<VisualElement> getOffsetTarget` | Returns the element that will be translated during the swipe. Typically the root toast element. |
+| `Action onInteractionStarted` | Called when the gesture crosses tap slop and is confirmed as a drag. |
+| `Action onInteractionAborted` | Called when a drag that was started does not meet dismiss criteria and the snap-back completes. |
+| `Action onTapped` | Called when the pointer is released within tap slop (no significant movement). |
+| `Action onDismissed` | Called after the dismiss animation completes. Dispose of the toast element here. |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `ResetState()` | Cancels any in-progress gesture and immediately restores the offset target to its origin position. Call this if the toast is hidden or replaced externally while a swipe is in progress. |
+
+## Using the Control
+
+### Swipe-to-Dismiss Toast
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class ToastController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+
+    private VisualElement _toastRoot;
+    private ToastSwipeDismissManipulator _dismissManipulator;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+        ShowToast("Session saved successfully.");
+    }
+
+    private void ShowToast(string message)
+    {
+        _toastRoot = new VisualElement();
+        _toastRoot.AddToClassList("toast");
+
+        var label = new Label(message);
+        _toastRoot.Add(label);
+
+        _dismissManipulator = new ToastSwipeDismissManipulator(
+            canInteract: () => true,
+            canStartAtPosition: _ => true,
+            getHorizontalDismissTravelDistance: () => 80f,
+            getVerticalDismissTravelDistance: () => 80f,
+            getOffsetTarget: () => _toastRoot,
+            onInteractionStarted: () => Debug.Log("Swipe started"),
+            onInteractionAborted: () => Debug.Log("Swipe aborted — snapping back"),
+            onTapped: () => Debug.Log("Toast tapped"),
+            onDismissed: RemoveToast
+        );
+
+        _toastRoot.AddManipulator(_dismissManipulator);
+        _document.rootVisualElement.Q<VisualElement>("toastLayer").Add(_toastRoot);
+    }
+
+    private void RemoveToast()
+    {
+        _toastRoot?.RemoveFromHierarchy();
+        _toastRoot = null;
+    }
+
+    // Call this if you need to forcibly clear the toast without waiting for a gesture
+    public void ForceClose()
+    {
+        _dismissManipulator?.ResetState();
+        RemoveToast();
+    }
+}
+```
diff --git a/Documentation~/Controls/ToggleButton.md b/Documentation~/Controls/ToggleButton.md
new file mode 100644
index 0000000..82f3726
--- /dev/null
+++ b/Documentation~/Controls/ToggleButton.md
@@ -0,0 +1,99 @@
+# ToggleButton
+
+## Summary
+
+`ToggleButton` is a simple image button that toggles its selected state on every pointer-down event. `OnClicked` fires on every press regardless of the resulting state, making it straightforward to react to both selection and deselection in a single handler. Use `ForceSelect` and `ForceDeselect` to set state programmatically without firing the event.
+
+Typical use cases:
+
+- Audio mute / unmute toggle
+- Dark mode / light mode switch
+- Any binary feature toggle with icon feedback
+
+## Properties
+
+| Name | Description | Options |
+| --- | --- | --- |
+| `IsSelected` | Gets or sets the current selected state. Setting this directly applies or removes the `--selected` modifier but does not fire `OnClicked`. | `bool` |
+
+## USS Classes
+
+| Class | Description |
+| --- | --- |
+| `toggleButton` | Root element. |
+| `toggleButton__image` | The image element. 100% width and height, `scale-to-fit` background. |
+| `toggleButton--selected` | Modifier applied when `IsSelected` is `true`. Use in USS to swap icon or apply tint. |
+
+## Events
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| `OnClicked` | Fired on every pointer-down event, before the state is toggled. The new `IsSelected` value is already reflected when the handler runs. | none |
+
+## Public Methods
+
+| Signature | Description |
+| --- | --- |
+| `SetImage(Texture2D texture)` | Sets the background texture of the image element. |
+| `ForceSelect()` | Sets `IsSelected = true` and applies `--selected` without firing `OnClicked`. |
+| `ForceDeselect()` | Sets `IsSelected = false` and removes `--selected` without firing `OnClicked`. |
+
+## Using the Control
+
+### Audio Toggle
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class AudioToggleController : MonoBehaviour
+{
+    [SerializeField] private UIDocument _document;
+    [SerializeField] private Texture2D _audioOnIcon;
+    [SerializeField] private Texture2D _audioOffIcon;
+
+    private ToggleButton _audioToggle;
+
+    private void OnEnable()
+    {
+        var root = _document.rootVisualElement;
+
+        _audioToggle = new ToggleButton();
+        _audioToggle.SetImage(_audioOnIcon);
+
+        // Restore saved preference silently
+        bool isMuted = PlayerPrefs.GetInt("AudioMuted", 0) == 1;
+        if (isMuted)
+            _audioToggle.ForceSelect();
+
+        _audioToggle.OnClicked += OnAudioToggled;
+        root.Q<VisualElement>("toolbarContainer").Add(_audioToggle);
+    }
+
+    private void OnAudioToggled()
+    {
+        bool isMuted = _audioToggle.IsSelected;
+        AudioListener.volume = isMuted ? 0f : 1f;
+        PlayerPrefs.SetInt("AudioMuted", isMuted ? 1 : 0);
+
+        // Swap icon based on new state
+        _audioToggle.SetImage(isMuted ? _audioOffIcon : _audioOnIcon);
+        Debug.Log($"Audio {(isMuted ? "muted" : "unmuted")}");
+    }
+}
+```
+
+### USS Icon Swap via Modifier
+
+Rather than swapping the texture in code you can declare both icon states in USS:
+
+```uss
+.toggleButton__image {
+    background-image: url("audio-on.png");
+}
+
+.toggleButton--selected .toggleButton__image {
+    background-image: url("audio-off.png");
+}
+```
diff --git a/Documentation~/Examples/ContentExplorer.md b/Documentation~/Examples/ContentExplorer.md
new file mode 100644
index 0000000..b92c054
--- /dev/null
+++ b/Documentation~/Examples/ContentExplorer.md
@@ -0,0 +1,71 @@
+# Example: Content Explorer
+
+## Overview
+
+This example demonstrates deferred content loading combined with an expandable section layout. A `LoadingIcon` spinner is shown while the demo simulates a data-fetch delay; once the delay elapses the spinner is hidden and three `CollapsibleSection` containers are revealed, each populated with `IconLabelButton` items. Tapping any item updates a status label at the bottom of the screen.
+
+## Controls Featured
+
+- [CollapsibleSection](../Controls/CollapsibleSection.md) — expandable/collapsible container with a tappable header; used to group related `IconLabelButton` items
+- [IconLabelButton](../Controls/IconLabelButton.md) — button composed of an icon and a text label; represents individual selectable content items within each section
+- [LoadingIcon](../Controls/LoadingIcon.md) — animated spinner shown during the simulated loading period before content is revealed
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `ContentExplorerDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `ContentExplorerDemo` MonoBehaviour (found in `Examples~/ContentExplorer/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+On entering Play mode:
+
+1. The screen shows only the `LoadingIcon` spinner, centered vertically.
+2. After **1.5 seconds** the spinner fades out and three `CollapsibleSection` containers slide into view.
+3. Each section has a distinct header title and contains 3–4 `IconLabelButton` items.
+4. Tapping a section header toggles that section open or closed.
+5. Tapping an `IconLabelButton` item within an open section updates the status label at the bottom of the screen with the item's name.
+
+All three sections start collapsed; tap a header to expand it.
+
+## Key Code Patterns
+
+Building collapsible sections with `IconLabelButton` items after a simulated load delay:
+
+```csharp
+private IEnumerator SimulateLoad()
+{
+    loadingIcon.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
+    yield return new WaitForSeconds(1.5f);
+
+    loadingIcon.StopLoading();
+    loadingIcon.parent.style.display = DisplayStyle.None;
+
+    contentScroll.style.opacity = 1f; // triggers CSS opacity transition
+    statusLabel.text = "Tap any item to select it.";
+}
+
+private void BuildSection(VisualElement parent, string title, string[] items)
+{
+    var section = new CollapsibleSection();
+    section.TitleText = title;
+
+    foreach (var itemText in items)
+    {
+        var captured = itemText;
+        var btn = new IconLabelButton();
+        btn.Text = captured;
+        btn.Clicked += () => statusLabel.text = $"Selected: {captured}";
+        section.AddBodyContent(btn);
+    }
+
+    parent.Add(section);
+}
+```
diff --git a/Documentation~/Examples/DropDownPhoneEntry.md b/Documentation~/Examples/DropDownPhoneEntry.md
new file mode 100644
index 0000000..7d61d80
--- /dev/null
+++ b/Documentation~/Examples/DropDownPhoneEntry.md
@@ -0,0 +1,47 @@
+# Example: DropDown Phone Entry
+
+## Overview
+
+This example recreates the phone verification entry layout used in Yperea's onboarding flow, but with package-local controls only. It combines `DropDownControl` for dial-code selection and `PillInputField` for phone-number input inside a single shared shell.
+
+## Controls Featured
+
+- [DropDownControl](../Controls/DropDownControl.md) — wheel-style modal picker used for the dial code
+- [PillInputField](../Controls/PillInputField.md) — phone-number text entry field
+- [PillButton](../Controls/PillButton.md) — send-code action button
+
+## Scene Setup
+
+This package now ships a ready-made sample scene in `Examples~/DropDownPhoneEntry/DropDownPhoneEntryDemo.unity`.
+
+If you want to recreate it manually instead:
+
+1. Create a new Unity scene.
+2. Add a GameObject with a `UIDocument`.
+3. Assign the sample panel settings from `Examples~/Shared/UIToolkitExtensionsExamplePanelSettings.asset`.
+4. Add the `DropDownPhoneEntryDemo` MonoBehaviour from `Examples~/DropDownPhoneEntry/` to the same GameObject.
+5. Press Play.
+
+## What to Expect
+
+The screen presents a single verification card with:
+
+- A dial-code trigger on the left that opens the `DropDownControl` picker.
+- A `PillInputField` on the right for entering a phone number.
+- A send button that stays disabled until the input contains at least 10 digits.
+- A status label that reflects picker state, validation state, and the final sample send action.
+
+## Key Code Pattern
+
+```csharp
+dialCodePicker = new DropDownControl
+{
+    Items = new[] { "+1", "+33", "+44", "+49" },
+};
+
+phoneNumberInput.OnValueChanged += value =>
+{
+    bool isValid = ExtractDigits(value).Length >= 10;
+    sendCodeButton.SetEnabled(isValid);
+};
+```
\ No newline at end of file
diff --git a/Documentation~/Examples/ImageCropOverlayDemo.md b/Documentation~/Examples/ImageCropOverlayDemo.md
new file mode 100644
index 0000000..12c9ada
--- /dev/null
+++ b/Documentation~/Examples/ImageCropOverlayDemo.md
@@ -0,0 +1,50 @@
+# Example: Image Crop Overlay
+
+## Overview
+
+This example mirrors the Yperea profile-picture editing flow with package-local assets only. It starts with a generated portrait texture, opens `ImageCropOverlayControl` from a `CircularImageButton`, and applies the saved crop back into the screen preview.
+
+## Controls Featured
+
+- [CircularImageButton](../Controls/CircularImageButton.md) — preview and crop entry point
+- [ImageCropOverlayControl](../Controls/ImageCropOverlayControl.md) — move/scale crop overlay and texture exporter
+- [PillButton](../Controls/PillButton.md) — edit and reset actions
+
+## Scene Setup
+
+This package now ships a ready-made sample scene in `Examples~/ImageCropOverlay/ImageCropOverlayDemo.unity`.
+
+If you want to recreate it manually instead:
+
+1. Create a new Unity scene.
+2. Add a GameObject with a `UIDocument`.
+3. Assign the sample panel settings from `Examples~/Shared/UIToolkitExtensionsExamplePanelSettings.asset`.
+4. Add the `ImageCropOverlayDemo` MonoBehaviour from `Examples~/ImageCropOverlay/` to the same GameObject.
+5. Press Play.
+
+## What to Expect
+
+The sample screen shows:
+
+- A large `CircularImageButton` displaying the generated portrait.
+- A separate saved-preview card showing the current texture state.
+- An `Edit Image` button that opens the cropper.
+- A `Reset` button that restores the original generated portrait.
+- A status line describing crop, cancel, save, and reset actions.
+
+## Key Code Pattern
+
+```csharp
+var configuration = new ImageCropOverlayControl.Configuration
+{
+    Title = "Move and Scale",
+    ExportSize = 512,
+    CornerRadiusPercent = ImageCropOverlayControl.CircleCornerRadiusPercent,
+};
+
+ImageCropOverlayControl.Show(
+    imageButton,
+    ActiveTexture,
+    configuration,
+    cropped => ReplaceCroppedTexture(cropped));
+```
\ No newline at end of file
diff --git a/Documentation~/Examples/ProfileEditor.md b/Documentation~/Examples/ProfileEditor.md
new file mode 100644
index 0000000..6f85fcd
--- /dev/null
+++ b/Documentation~/Examples/ProfileEditor.md
@@ -0,0 +1,59 @@
+# Example: Profile Editor
+
+## Overview
+
+This example demonstrates avatar display, image processing, and color theme selection working together in a profile customization screen. A `CircularImageButton` shows the user's avatar; a `GrayscaleImage` control displays a sample gradient image that can be toggled between full color and black-and-white via a `ToggleButton`; a five-color `ColorToggleGroup` lets the user pick a theme color and reflects the selection as a swatch and label.
+
+## Controls Featured
+
+- [CircularImageButton](../Controls/CircularImageButton.md) — circular masked image with an optional tap action; used as the profile avatar
+- [GrayscaleImage](../Controls/GrayscaleImage.md) — image control that can render in full color or desaturated grayscale; toggled at runtime to demonstrate the effect
+- [ColorToggleGroup](../Controls/ColorToggleGroup.md) — mutually exclusive group of `ColorToggleButton` items; manages single-selection across its children
+- [ColorToggleButton](../Controls/ColorToggleButton.md) — individual colored circle button that forms part of the `ColorToggleGroup`
+- [ToggleButton](../Controls/ToggleButton.md) — two-state toggle control; switches the `GrayscaleImage` between color and grayscale modes
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `ProfileEditorDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `ProfileEditorDemo` MonoBehaviour (found in `Examples~/ProfileEditor/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+The screen is divided into three vertical sections:
+
+**Avatar row** — a `CircularImageButton` displays a placeholder avatar image. Tapping it would typically open a picker; in this demo it logs a message to the Console.
+
+**Image preview row** — a `GrayscaleImage` shows a sample gradient image in full color by default. A `ToggleButton` labeled "B&W" sits beside it. Toggling it on desaturates the image to grayscale; toggling it off restores full color.
+
+**Color theme row** — a `ColorToggleGroup` containing five `ColorToggleButton` items (pastel red, orange, yellow, green, and blue) is displayed horizontally. Tapping a color:
+
+- Marks that `ColorToggleButton` as selected (visually distinct ring or scale).
+- Updates a color swatch `VisualElement` and a text label below the group to reflect the chosen color name.
+
+Only one color may be active at a time; selecting a new color automatically deselects the previous one.
+
+## Key Code Patterns
+
+Reacting to `ColorToggleGroup` selection changes and toggling the grayscale effect:
+
+```csharp
+// ColorToggleGroup fires OnColorSelected with the chosen Color value
+_colorGroup.OnColorSelected += color =>
+{
+    _swatchElement.style.backgroundColor = color;
+};
+
+// ToggleButton fires OnClicked; read IsSelected for the new state
+_grayscaleToggle.OnClicked += () =>
+{
+    _sampleImage.GreyscaleEnabled = _grayscaleToggle.IsSelected;
+};
+```
diff --git a/Documentation~/Examples/RegistrationForm.md b/Documentation~/Examples/RegistrationForm.md
new file mode 100644
index 0000000..0bf0086
--- /dev/null
+++ b/Documentation~/Examples/RegistrationForm.md
@@ -0,0 +1,73 @@
+# Example: Registration Form
+
+## Overview
+
+This example demonstrates a complete mobile-style registration flow built entirely from package controls. It shows how styled input fields, a multi-option selector, a gradient submit button, and shake-based validation feedback can be composed into a cohesive form screen.
+
+## Controls Featured
+
+- [PillInputField](../Controls/PillInputField.md) — pill-shaped single-line input used for Name, Email, and Password fields
+- [RoundedInputField](../Controls/RoundedInputField.md) — rounded multiline input used for the Bio field
+- [PillButton](../Controls/PillButton.md) — gradient-styled pill button used as the Submit action
+- [PillSelector](../Controls/PillSelector.md) — horizontally scrollable option selector used for the Category field; tapping cycles through available options
+- [VisualElementShakeUtility](../Controls/VisualElementShakeUtility.md) — plays a horizontal shake animation on any `VisualElement`; triggered on invalid fields at submit time
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `RegistrationFormDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `RegistrationFormDemo` MonoBehaviour (found in `Examples~/RegistrationForm/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+The form presents the following fields from top to bottom:
+
+| Field | Control | Notes |
+| --- | --- | --- |
+| Name | `PillInputField` | Single-line, required |
+| Email | `PillInputField` | Single-line, validated against email regex |
+| Password | `PillInputField` | Single-line, obscured |
+| Bio | `RoundedInputField` | Multiline, optional |
+| Category | `PillSelector` | Tap to cycle options (e.g., Creator, Developer, Designer …) |
+
+Tapping **Submit** (`PillButton` with gradient background) triggers validation:
+
+- Any required field that is empty or contains an invalid value plays the `VisualElementShakeUtility` shake animation and its label turns red.
+- When all fields pass validation the form transitions to a success state: the fields are hidden and a confirmation message is displayed.
+
+## Key Code Patterns
+
+Applying a shake animation to an invalid field and marking it red:
+
+```csharp
+private void ValidateAndSubmit()
+{
+    bool isValid = true;
+
+    if (string.IsNullOrWhiteSpace(_nameField.Value))
+    {
+        VisualElementShakeUtility.Shake(_nameField);
+        isValid = false;
+    }
+
+    // Validate email format against the @ regex
+    string emailPattern = @"^[^@\s]+@[^@\s]+\.[^@\s]+$";
+    if (!System.Text.RegularExpressions.Regex.IsMatch(_emailField.Value, emailPattern))
+    {
+        VisualElementShakeUtility.Shake(_emailField);
+        isValid = false;
+    }
+
+    if (isValid)
+    {
+        ShowSuccessState();
+    }
+}
+```
diff --git a/Documentation~/Examples/ScrollSnapAndDots.md b/Documentation~/Examples/ScrollSnapAndDots.md
new file mode 100644
index 0000000..2a0f090
--- /dev/null
+++ b/Documentation~/Examples/ScrollSnapAndDots.md
@@ -0,0 +1,50 @@
+# Example: Scroll Snap and Dots
+
+## Overview
+
+This example demonstrates paged horizontal scrolling with synchronized navigation controls. A `ScrollSnap` container holds five full-width pages; a `PageDotIndicator` beneath it stays in sync as the user moves between pages. The fourth page showcases a `ComingSoonMessage` placeholder to demonstrate how unavailable content can be gracefully handled inside a paged layout.
+
+## Controls Featured
+
+- [ScrollSnap](../Controls/ScrollSnap.md) — provides snap-to-page horizontal scrolling with swipe gesture support and programmatic prev/next navigation
+- [PageDotIndicator](../Controls/PageDotIndicator.md) — renders a row of dots whose active dot mirrors the current scroll page
+- [ComingSoonMessage](../Controls/ComingSoonMessage.md) — drop-in placeholder shown on page 4 to represent content that is not yet available
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `ScrollSnapDotsDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `ScrollSnapAndDotsDemo` MonoBehaviour (found in `Examples~/ScrollSnapAndDots/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+On entering Play mode you will see a full-width, full-height paged view with five pages:
+
+- **Pages 1–3 and 5** each display a distinct solid background color and a centered page-number label.
+- **Page 4** displays a `ComingSoonMessage` in place of content.
+- A row of five dots appears below the scroll area; the dot corresponding to the active page is highlighted.
+- **Previous** and **Next** buttons flank the dot indicator. The Previous button is hidden on page 1 and the Next button is hidden on page 5.
+
+Swipe left or right anywhere on the scroll area to advance or retreat one page. The dots and buttons update immediately after each snap completes.
+
+## Key Code Patterns
+
+Wiring the `PageDotIndicator` to the `ScrollSnap` page-change event:
+
+```csharp
+_scrollSnap.OnPageChanged += pageIndex =>
+{
+    _dotIndicator.SetActiveDot(pageIndex);
+    _prevButton.style.display = pageIndex > 0
+        ? DisplayStyle.Flex : DisplayStyle.None;
+    _nextButton.style.display = pageIndex < _scrollSnap.PageCount - 1
+        ? DisplayStyle.Flex : DisplayStyle.None;
+};
+```
diff --git a/Documentation~/Examples/StepWizard.md b/Documentation~/Examples/StepWizard.md
new file mode 100644
index 0000000..f36a01f
--- /dev/null
+++ b/Documentation~/Examples/StepWizard.md
@@ -0,0 +1,67 @@
+# Example: Step Wizard
+
+## Overview
+
+This example demonstrates a multi-step onboarding wizard that coordinates a `QuadrantStepper`, a `StepProgressBar`, and dynamically swapped content panels. It shows how to drive both navigation controls from a single step index and how to swap the Finish button in at the final step.
+
+## Controls Featured
+
+- [QuadrantStepper](../Controls/QuadrantStepper.md) — displays the current step number inside a quadrant arc graphic at the top of the screen
+- [StepProgressBar](../Controls/StepProgressBar.md) — horizontal segmented bar below the stepper that fills segment by segment as steps are completed
+- [PillButton](../Controls/PillButton.md) — pill-shaped navigation buttons for Back, Next, and Finish actions
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `StepWizardDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `StepWizardDemo` MonoBehaviour (found in `Examples~/StepWizard/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+The wizard presents four steps in sequence:
+
+| Step | Title | Content |
+| --- | --- | --- |
+| 1 | About | Basic profile information panel |
+| 2 | Goals | Goal-selection panel |
+| 3 | Settings | Preference-selection panel |
+| 4 | Done | Completion confirmation panel |
+
+At the top of the screen the `QuadrantStepper` shows the current step number and total (e.g., "2 / 4"). Directly below it the `StepProgressBar` fills one additional segment each time the user advances.
+
+- **Back** (`PillButton`) is hidden on step 1.
+- **Next** (`PillButton`) is visible on steps 1–3 and hidden on step 4.
+- **Finish** (`PillButton`) is hidden on steps 1–3 and visible on step 4.
+
+Only the content panel for the current step is displayed; the others have `display: none`.
+
+## Key Code Patterns
+
+Advancing a step and updating both navigation controls:
+
+```csharp
+private void GoToStep(int stepIndex)
+{
+    _currentStep = Mathf.Clamp(stepIndex, 0, _totalSteps - 1);
+
+    _stepper.SetSelectedIndex(_currentStep);
+    _progressBar.SetProgress(_currentStep + 1, _totalSteps);
+
+    for (int i = 0; i < _contentPanels.Count; i++)
+    {
+        _contentPanels[i].style.display =
+            i == _currentStep ? DisplayStyle.Flex : DisplayStyle.None;
+    }
+
+    _backButton.style.display  = _currentStep > 0 ? DisplayStyle.Flex : DisplayStyle.None;
+    _nextButton.style.display  = _currentStep < _totalSteps - 1 ? DisplayStyle.Flex : DisplayStyle.None;
+    _finishButton.style.display = _currentStep == _totalSteps - 1 ? DisplayStyle.Flex : DisplayStyle.None;
+}
+```
diff --git a/Documentation~/Examples/ToastNotifications.md b/Documentation~/Examples/ToastNotifications.md
new file mode 100644
index 0000000..0b3ffb6
--- /dev/null
+++ b/Documentation~/Examples/ToastNotifications.md
@@ -0,0 +1,77 @@
+# Example: Toast Notifications
+
+## Overview
+
+This example demonstrates runtime-spawned dismissible notification toasts managed by `ToastSwipeDismissManipulator`. Each toast can be dismissed by swiping horizontally or by tapping it directly. An "Add Toast" button spawns a new toast at the top of the stack; when the stack reaches five toasts the oldest one is automatically removed before the new one is added. Dismissal is accompanied by a combined opacity and translate animation.
+
+## Controls Featured
+
+- [ToastSwipeDismissManipulator](../Controls/ToastSwipeDismissManipulator.md) — `IManipulator` attached to each toast element; handles swipe detection and fires the dismiss callback which drives the exit animation and removes the element from the hierarchy
+
+## Scene Setup
+
+1. Create a new Unity scene.
+2. Add an empty GameObject named `ToastNotificationsDemo` to the scene hierarchy.
+3. Add a `UIDocument` component to the GameObject.
+4. Create a `PanelSettings` asset (`Assets > Create > UI Toolkit > Panel Settings`) and configure it:
+   - **Scale Mode:** Scale With Screen Size
+   - **Reference Resolution:** 1080 × 1920
+   - **Screen Match Mode:** Match Width Or Height, blended toward Height
+5. Assign the `PanelSettings` asset to the `UIDocument` component's **Panel Settings** field.
+6. Add the `ToastNotificationsDemo` MonoBehaviour (found in `Examples~/ToastNotifications/`) to the same GameObject.
+7. Press **Play**.
+
+## What to Expect
+
+On entering Play mode, one toast is shown by default.
+
+**Adding toasts** — tap the **Add Toast** button at the bottom of the screen. Each new toast appears at the top of the stack with a randomly assigned pastel background color and an incrementing message (e.g., "Notification #3"). When a sixth toast would be added, the oldest visible toast is silently removed first so the stack never exceeds five items.
+
+**Dismissing toasts** — swipe a toast left or right past the dismiss threshold. It will animate out: opacity fades to zero and it translates in the swipe direction simultaneously. Tap the toast without swiping to dismiss it in place (translates upward and fades out). Once the animation completes the element is removed from the hierarchy.
+
+**Stack layout** — toasts are stacked vertically with a small gap; newer toasts appear above older ones.
+
+## Key Code Patterns
+
+Creating a toast element and attaching the swipe-dismiss manipulator:
+
+```csharp
+private void SpawnToast(string message)
+{
+    if (_toastStack.childCount >= MaxToasts)
+    {
+        var oldest = _toastStack.Children().Last();
+        _toastStack.Remove(oldest);
+    }
+
+    var toast = new VisualElement();
+    toast.AddToClassList("toast");
+    toast.style.backgroundColor = GetNextPastelColor();
+
+    var label = new Label(message);
+    toast.Add(label);
+
+    // All behavior is wired via constructor delegates — there are no post-construction callbacks
+    var manipulator = new ToastSwipeDismissManipulator(
+        canInteract: () => true,
+        canStartAtPosition: _ => true,
+        getHorizontalDismissTravelDistance: () => 80f,
+        getVerticalDismissTravelDistance: () => float.MaxValue,
+        getOffsetTarget: () => toast,
+        onInteractionStarted: () => { },
+        onInteractionAborted: () => { },
+        onTapped: () => AnimateAndRemove(toast),
+        onDismissed: () => AnimateAndRemove(toast)
+    );
+    toast.AddManipulator(manipulator);
+
+    _toastStack.Insert(0, toast);
+}
+
+private void AnimateAndRemove(VisualElement toast)
+{
+    toast.experimental.animation
+        .Start(new StyleValues { opacity = 0f, translateX = 300f }, DismissDurationMs)
+        .OnCompleted(() => toast.RemoveFromHierarchy());
+}
+```
diff --git a/Documentation~/Utilities/ProceduralTextureUtility.md b/Documentation~/Utilities/ProceduralTextureUtility.md
new file mode 100644
index 0000000..d6d4308
--- /dev/null
+++ b/Documentation~/Utilities/ProceduralTextureUtility.md
@@ -0,0 +1,137 @@
+# ProceduralTextureUtility
+
+**Namespace:** `UnityUIToolkit.Extensions`  
+**Type:** `static class`  
+**File:** `Runtime/Utility/ProceduralTextureUtility.cs`
+
+---
+
+## Summary
+
+Factory class for creating runtime-generated `Texture2D` objects used by UI controls and demo scenes.
+Centralises procedural texture logic so individual controls do not duplicate generation code.
+
+> **Caller responsibility:** every texture returned by this class is unmanaged — call `Object.Destroy(texture)` when it is no longer needed to avoid GPU memory leaks.
+
+---
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `CreateHorizontalGradient(startColor, endColor, width)` | `Texture2D` | 1-pixel-tall horizontal gradient from `startColor` to `endColor`. |
+| `CreateSpinnerArc(size, arcColor, sweepDegrees, ringFraction)` | `Texture2D` | Square texture with a single-color arc ring for use as a loading spinner icon. |
+| `CreateSolidCircle(size, color)` | `Texture2D` | Square texture with a soft anti-aliased filled circle. |
+
+---
+
+## Method Details
+
+### CreateHorizontalGradient
+
+```csharp
+public static Texture2D CreateHorizontalGradient(
+    Color startColor,
+    Color endColor,
+    int width = 256)
+```
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| `startColor` | — | Left-edge color. |
+| `endColor` | — | Right-edge color. |
+| `width` | `256` | Horizontal resolution in pixels. |
+
+Returns a `width × 1` RGBA32 texture with pixels linearly interpolated between the two colors.
+Used internally by `PillButton` and `StepProgressBar`.
+
+---
+
+### CreateSpinnerArc
+
+```csharp
+public static Texture2D CreateSpinnerArc(
+    int size,
+    Color arcColor,
+    float sweepDegrees = 270f,
+    float ringFraction = 0.15f)
+```
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| `size` | — | Width and height in pixels (square). |
+| `arcColor` | — | Color of the arc stroke. |
+| `sweepDegrees` | `270` | How many degrees of the ring are filled. |
+| `ringFraction` | `0.15` | Ring thickness as a fraction of the radius. |
+
+Pixels outside the ring annulus or outside the sweep angle are fully transparent.
+The arc is centered at the top of the circle (−90° axis) and sweeps symmetrically.
+Pass the returned texture to `LoadingIcon.SetIcon(texture)` to override the default SVG spinner.
+
+---
+
+### CreateSolidCircle
+
+```csharp
+public static Texture2D CreateSolidCircle(int size, Color color)
+```
+
+| Parameter | Description |
+|-----------|-------------|
+| `size` | Width and height in pixels (square). |
+| `color` | Fill color; a 1-pixel soft edge is applied for anti-aliasing. |
+
+Useful for generating circular avatar placeholders in demo scenes.
+
+---
+
+## Usage Examples
+
+### Gradient button background
+
+```csharp
+Texture2D gradient = ProceduralTextureUtility.CreateHorizontalGradient(
+    new Color(0.27f, 0.55f, 0.87f),
+    new Color(0.48f, 0.28f, 0.85f));
+background.style.backgroundImage = new StyleBackground(gradient);
+// ...later...
+Object.Destroy(gradient);
+```
+
+### Custom spinner icon on LoadingIcon
+
+```csharp
+private Texture2D spinnerTexture;
+
+void Start()
+{
+    spinnerTexture = ProceduralTextureUtility.CreateSpinnerArc(
+        size: 64,
+        arcColor: new Color(0.27f, 0.55f, 0.87f),
+        sweepDegrees: 270f);
+    loadingIcon.SetIcon(spinnerTexture);
+    loadingIcon.PlayLoading(customSpeed: 0.9f, blockInteraction: true);
+}
+
+void OnDestroy()
+{
+    if (spinnerTexture != null)
+        Destroy(spinnerTexture);
+}
+```
+
+### Avatar placeholder circle
+
+```csharp
+Texture2D avatar = ProceduralTextureUtility.CreateSolidCircle(128, new Color(0.6f, 0.4f, 0.8f));
+circularImageButton.SetImage(avatar);
+// Destroy when scene unloads
+```
+
+---
+
+## Notes
+
+- All methods use `TextureFormat.RGBA32` and `wrapMode = TextureWrapMode.Clamp`.
+- Textures are not cached — call the method once and store the result; repeated calls allocate new GPU memory each time.
+- `CreateSpinnerArc` produces a static texture; the rotation animation is applied by `LoadingIcon`'s USS transition on the image element.
diff --git a/Documentation~/Utilities/UIToolkitExtensions.md b/Documentation~/Utilities/UIToolkitExtensions.md
new file mode 100644
index 0000000..c2b91b9
--- /dev/null
+++ b/Documentation~/Utilities/UIToolkitExtensions.md
@@ -0,0 +1,153 @@
+# UIToolkitExtensions
+
+## Summary
+
+`UIToolkitExtensions` is a static helper class in the `UnityUIToolkit.Extensions` namespace that provides factory methods and extension methods for building UI Toolkit hierarchies in code. It reduces boilerplate when constructing and configuring `VisualElement` trees at runtime.
+
+Common use cases:
+
+- Programmatically building form layouts without UXML
+- Creating typed sub-elements with CSS classes in a single call
+- Generating hyperlink labels, placeholder text fields, and wired buttons
+- Validating email address inputs inline with automatic color feedback
+
+---
+
+## API Reference
+
+### CreateVisualElement
+
+| Signature | Description |
+| --- | --- |
+| `static VisualElement CreateVisualElement(params string[] classNames)` | Creates an unparented `VisualElement` and applies the given USS class names. |
+| `static VisualElement CreateVisualElement(VisualElement parent, params string[] classNames)` | Creates a `VisualElement`, adds it to `parent`, and applies the given USS class names. |
+| `static T CreateVisualElement<T>(params string[] classNames) where T : VisualElement, new()` | Typed variant — creates an unparented element of type `T` with the given USS class names. |
+| `static T CreateVisualElement<T>(VisualElement parent, params string[] classNames) where T : VisualElement, new()` | Typed variant — creates an element of type `T`, adds it to `parent`, and applies the given USS class names. |
+
+All four overloads call `AddToClassList` for every class name supplied. Passing no class names is valid and creates an element with no additional classes.
+
+---
+
+### CreateHyperlinkLabel
+
+```csharp
+static Label CreateHyperlinkLabel(VisualElement parent, string text)
+```
+
+Creates a `Label` styled as a hyperlink. The label:
+
+- Receives the USS class `link-text` for stylesheet-driven styling.
+- Wraps `text` in `<u>…</u>` rich-text tags.
+- Has `enableRichText` set to `true`.
+- Is added to `parent` before being returned.
+
+---
+
+### CreateTextInputField
+
+```csharp
+static TextField CreateTextInputField(VisualElement parent, string placeholder)
+```
+
+Creates a `TextField` with the USS class `text-field` that:
+
+- Displays `placeholder` as its initial value.
+- Sets `selectAllOnFocus = true`.
+- Registers a `FocusInEvent` callback that calls `SelectAll()` so the placeholder is instantly replaced when the user taps or clicks.
+- Is added to `parent` before being returned.
+
+> **Note:** The placeholder pattern uses the field's `value` property. Clear the value in your own code before reading user input if you need to distinguish an untouched field from a filled one.
+
+---
+
+### ValidateTextFieldEmailAddress
+
+```csharp
+static bool ValidateTextFieldEmailAddress(this TextField inputText)
+```
+
+Extension method. Validates `inputText.value` against the pattern `^[^@\s]+@[^@\s]+\.[^@\s]+$` and:
+
+- Sets `inputText.style.color` to `Color.black` when the address is valid.
+- Sets `inputText.style.color` to `Color.red` when the address is invalid.
+- Returns `true` if valid, `false` otherwise.
+
+---
+
+### CreateButton
+
+| Signature | Description |
+| --- | --- |
+| `static Button CreateButton(VisualElement parent, string text, UnityEvent onClickAction, bool isInitiallyVisible = true, string className = null)` | Creates a `Button` wired to a `UnityEvent`. |
+| `static Button CreateButton(VisualElement parent, string text, Action onClickAction, bool isInitiallyVisible = true, string className = null)` | Creates a `Button` wired to a plain `Action`. |
+
+Both overloads:
+
+- Add the button to `parent`.
+- Set `button.text` to `text`.
+- Wire `button.clicked` to invoke the supplied delegate (null-safe).
+- Apply `className` via `AddToClassList` when `className` is not null or empty.
+- Set `display` to `DisplayStyle.Flex` or `DisplayStyle.None` based on `isInitiallyVisible`.
+
+---
+
+## Usage Example
+
+The snippet below builds a simple "Sign Up" form section entirely in code.
+
+```csharp
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityUIToolkit.Extensions;
+
+public class SignUpForm : MonoBehaviour
+{
+    private void OnEnable()
+    {
+        var root = GetComponent<UIDocument>().rootVisualElement;
+
+        // Container card
+        var card = UIToolkitExtensions.CreateVisualElement(root, "form-card");
+
+        // Email row
+        var emailRow = UIToolkitExtensions.CreateVisualElement(card, "form-row");
+        UIToolkitExtensions.CreateHyperlinkLabel(emailRow, "Email address");
+        var emailField = UIToolkitExtensions.CreateTextInputField(emailRow, "you@example.com");
+
+        // Password row
+        var passwordRow = UIToolkitExtensions.CreateVisualElement(card, "form-row");
+        UIToolkitExtensions.CreateHyperlinkLabel(passwordRow, "Password");
+        UIToolkitExtensions.CreateTextInputField(passwordRow, "••••••••");
+
+        // Submit button — initially hidden until both fields are filled
+        var submitButton = UIToolkitExtensions.CreateButton(
+            parent: card,
+            text: "Create Account",
+            onClickAction: OnSubmit,
+            isInitiallyVisible: false,
+            className: "btn-primary"
+        );
+
+        // Show button only when email looks valid
+        emailField.RegisterValueChangedCallback(_ =>
+        {
+            submitButton.style.display = emailField.ValidateTextFieldEmailAddress()
+                ? DisplayStyle.Flex
+                : DisplayStyle.None;
+        });
+    }
+
+    private void OnSubmit()
+    {
+        Debug.Log("Form submitted.");
+    }
+}
+```
+
+---
+
+## Notes
+
+- All methods are `static`; no instance is required.
+- The typed `CreateVisualElement<T>` overloads require `T` to have a public parameterless constructor (`new()` constraint). Standard UI Toolkit controls (e.g., `Label`, `Button`, `ScrollView`) all satisfy this.
+- `ValidateTextFieldEmailAddress` writes directly to the element's inline style. If your USS stylesheet also sets `color`, the inline style takes precedence. Clear the inline style (`inputText.style.color = StyleKeyword.Null`) to revert to USS-driven color.
diff --git a/Documentation~/com.unity.uitoolkiyextensions.md b/Documentation~/com.unity.uitoolkiyextensions.md
index 1765b42..ac7782a 100644
--- a/Documentation~/com.unity.uitoolkiyextensions.md
+++ b/Documentation~/com.unity.uitoolkiyextensions.md
@@ -6,7 +6,7 @@ The Unity UI Toolkit Extensions project is a collection of extension scripts/eff
 
 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)
+## [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:
 >
@@ -29,10 +29,54 @@ For a full list of the controls and how they are used, please see the [online do
 
 ## Control References
 
-ScrollSnap is a page-based UI Toolkit navigation control that arranges child elements as discrete pages and snaps cleanly between them using swipe, wheel, or programmatic movement. It is designed for flows such as onboarding, step-by-step forms, and carousel-style interfaces where predictable page boundaries, optional movement validation, restricted swipe feedback, and smooth animated transitions are important.
+### Navigation & Layout
 
-- [ScrollSnap](ScrollSnap.md) - Page-based snap scroller with manual/sweep modes, validation gating, and restricted-movement events.
-- [VisualElementShakeUtility](VisualElementShakeUtility.md) - Generic UI Toolkit utility to shake a target VisualElement with configurable wobble count and wobble speed.
+- [ScrollSnap](ScrollSnap.md) — Page-based snap scroller with manual/swipe modes, validation gating, and restricted-movement events.
+- [QuadrantStepper](Controls/QuadrantStepper.md) — Segmented sliding-overlay step selector. Ideal for tab bars, mode switchers, and category filters.
+- [CollapsibleSection](Controls/CollapsibleSection.md) — Accordion panel with animated max-height expand/collapse. Ideal for FAQs and settings groups.
+- [PageDotIndicator](Controls/PageDotIndicator.md) — Row of pagination dots; all dots up to and including the current page are highlighted.
+- [StepProgressBar](Controls/StepProgressBar.md) — Horizontal gradient fill bar driven by step counts.
+
+### Inputs & Forms
+
+- [PillInputField](Controls/PillInputField.md) — Mobile-aware labeled text input with password mode, multiline support, and validation events.
+- [RoundedInputField](Controls/RoundedInputField.md) — Rounded input field with custom placeholder rendering.
+- [PillSelector](Controls/PillSelector.md) — Read-only tap-to-open selector row with chevron icon.
+- [PillButton](Controls/PillButton.md) — Pill-shaped gradient CTA button with flash feedback animation.
+- [IconLabelButton](Controls/IconLabelButton.md) — Row button with a 24 × 24 icon and label. Ideal for menu items and list actions.
+
+### Media & Images
+
+- [CircularImageButton](Controls/CircularImageButton.md) — Circular tappable image with no-image overlay. Ideal for avatars and profile photos.
+- [GrayscaleImage](Controls/GrayscaleImage.md) — Immediate-mode image renderer with a toggleable greyscale shader effect.
+- [LoadingIcon](Controls/LoadingIcon.md) — Rotating spinner with configurable speed and optional interaction blocking.
+
+### Toggles & Selection
+
+- [ToggleButton](Controls/ToggleButton.md) — Binary image toggle that fires an event on every press.
+- [ColorToggleButton](Controls/ColorToggleButton.md) — Tint-colored toggle with ripple animation and selected overlay. Extends `ToggleButton`.
+- [ColorToggleGroup](Controls/ColorToggleGroup.md) — Single-selection group of `ColorToggleButton` items with tap and drag-to-select support.
+
+### Feedback & Utility
+
+- [ToastSwipeDismissManipulator](Controls/ToastSwipeDismissManipulator.md) — Pointer manipulator that adds swipe-to-dismiss gesture handling to any element.
+- [ComingSoonMessage](Controls/ComingSoonMessage.md) — Centered placeholder panel for in-progress features.
+
+### Utilities
+
+- [VisualElementShakeUtility](VisualElementShakeUtility.md) — Horizontal shake animation for validation and attention feedback.
+- [UIToolkitExtensions](Utilities/UIToolkitExtensions.md) — Static helper for creating, parenting, and wiring VisualElements from code.
+
+## Examples
+
+Ready-to-run sample scenes demonstrating controls in realistic combinations:
+
+- [ScrollSnap + PageDotIndicator](Examples/ScrollSnapAndDots.md) — Horizontal paging with dot indicator and ComingSoonMessage page.
+- [Registration Form](Examples/RegistrationForm.md) — Full form with PillInputField, RoundedInputField, PillButton, PillSelector, and shake validation.
+- [Step Wizard](Examples/StepWizard.md) — Multi-step flow using QuadrantStepper and StepProgressBar.
+- [Content Explorer](Examples/ContentExplorer.md) — LoadingIcon reveal with CollapsibleSection and IconLabelButton items.
+- [Profile Editor](Examples/ProfileEditor.md) — CircularImageButton, GrayscaleImage, ToggleButton, and ColorToggleGroup.
+- [Toast Notifications](Examples/ToastNotifications.md) — Swipe-to-dismiss toast stack using ToastSwipeDismissManipulator.
 
 ## Technical details
 
diff --git a/Examples~ b/Examples~
index 1ac66fc..e1ab266 160000
--- a/Examples~
+++ b/Examples~
@@ -1 +1 @@
-Subproject commit 1ac66fcd76e124a9908544cb8ed50b36b8d7c95b
+Subproject commit e1ab266470ddb31c34229f4bcb3842987bb2dd83
diff --git a/Runtime/Assets.meta b/Runtime/Assets.meta
new file mode 100644
index 0000000..2ba2161
--- /dev/null
+++ b/Runtime/Assets.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: c79aa916fd5ac9245b17a43b7845edd5
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Assets/Icons.meta b/Runtime/Assets/Icons.meta
new file mode 100644
index 0000000..dea290d
--- /dev/null
+++ b/Runtime/Assets/Icons.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: d3dd50e33bb44274e965ca73061934ab
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Assets/Icons/Camera.svg b/Runtime/Assets/Icons/Camera.svg
new file mode 100644
index 0000000..18b71e1
--- /dev/null
+++ b/Runtime/Assets/Icons/Camera.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- Camera body -->
+  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
+        fill="none"
+        stroke="white"
+        stroke-width="1.5"
+        stroke-linejoin="round"/>
+  <!-- Lens -->
+  <circle cx="12" cy="13" r="4"
+          fill="none"
+          stroke="white"
+          stroke-width="1.5"/>
+</svg>
diff --git a/Runtime/Assets/Icons/Camera.svg.meta b/Runtime/Assets/Icons/Camera.svg.meta
new file mode 100644
index 0000000..96aa9ad
--- /dev/null
+++ b/Runtime/Assets/Icons/Camera.svg.meta
@@ -0,0 +1,53 @@
+fileFormatVersion: 2
+guid: 8c0cf227d9fcf3e44aa519418d91faa6
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12408, guid: 0000000000000000e000000000000000, type: 0}
+  svgType: 0
+  texturedSpriteMeshType: 0
+  svgPixelsPerUnit: 100
+  gradientResolution: 64
+  alignment: 0
+  customPivot: {x: 0, y: 0}
+  generatePhysicsShape: 0
+  viewportOptions: 0
+  preserveViewport: 0
+  advancedMode: 0
+  tessellationMode: 0
+  predefinedResolutionIndex: 1
+  targetResolution: 1080
+  resolutionMultiplier: 1
+  stepDistance: 10
+  samplingStepDistance: 100
+  maxCordDeviationEnabled: 0
+  maxCordDeviation: 1
+  maxTangentAngleEnabled: 0
+  maxTangentAngle: 5
+  keepTextureAspectRatio: 1
+  textureSize: 256
+  textureWidth: 256
+  textureHeight: 256
+  wrapMode: 0
+  filterMode: 1
+  sampleCount: 4
+  preserveSVGImageAspect: 0
+  useSVGPixelsPerUnit: 0
+  spriteData:
+    TessellationDetail: 0
+    SpriteName: CameraSprite
+    SpritePivot: {x: 0.5, y: 0.5}
+    SpriteAlignment: 0
+    SpriteBorder: {x: 0, y: 0, z: 0, w: 0}
+    SpriteRect:
+      serializedVersion: 2
+      x: 0
+      y: 0
+      width: 23.5
+      height: 19.5
+    SpriteID: 118ca26f680d45540a798dbc5d389fc7
+    PhysicsOutlines: []
diff --git a/Runtime/Assets/Icons/ChevronDown.svg b/Runtime/Assets/Icons/ChevronDown.svg
new file mode 100644
index 0000000..c8f6c08
--- /dev/null
+++ b/Runtime/Assets/Icons/ChevronDown.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M5 9 L12 16 L19 9"
+        fill="none"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>
diff --git a/Runtime/Assets/Icons/ChevronDown.svg.meta b/Runtime/Assets/Icons/ChevronDown.svg.meta
new file mode 100644
index 0000000..0281188
--- /dev/null
+++ b/Runtime/Assets/Icons/ChevronDown.svg.meta
@@ -0,0 +1,53 @@
+fileFormatVersion: 2
+guid: f638b3b44e869b84daa631ec14674d06
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12408, guid: 0000000000000000e000000000000000, type: 0}
+  svgType: 0
+  texturedSpriteMeshType: 0
+  svgPixelsPerUnit: 100
+  gradientResolution: 64
+  alignment: 0
+  customPivot: {x: 0, y: 0}
+  generatePhysicsShape: 0
+  viewportOptions: 0
+  preserveViewport: 0
+  advancedMode: 0
+  tessellationMode: 0
+  predefinedResolutionIndex: 1
+  targetResolution: 1080
+  resolutionMultiplier: 1
+  stepDistance: 10
+  samplingStepDistance: 100
+  maxCordDeviationEnabled: 0
+  maxCordDeviation: 1
+  maxTangentAngleEnabled: 0
+  maxTangentAngle: 5
+  keepTextureAspectRatio: 1
+  textureSize: 256
+  textureWidth: 256
+  textureHeight: 256
+  wrapMode: 0
+  filterMode: 1
+  sampleCount: 4
+  preserveSVGImageAspect: 0
+  useSVGPixelsPerUnit: 0
+  spriteData:
+    TessellationDetail: 0
+    SpriteName: ChevronDownSprite
+    SpritePivot: {x: 0.5, y: 0.5}
+    SpriteAlignment: 0
+    SpriteBorder: {x: 0, y: 0, z: 0, w: 0}
+    SpriteRect:
+      serializedVersion: 2
+      x: 0
+      y: 0
+      width: 16.498768
+      height: 9.499383
+    SpriteID: e374633a2ff29cf4fa6acdaadaeb3e68
+    PhysicsOutlines: []
diff --git a/Runtime/Assets/Icons/ChevronRight.svg b/Runtime/Assets/Icons/ChevronRight.svg
new file mode 100644
index 0000000..dae37cd
--- /dev/null
+++ b/Runtime/Assets/Icons/ChevronRight.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M9 5 L16 12 L9 19"
+        fill="none"
+        stroke="white"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>
diff --git a/Runtime/Assets/Icons/ChevronRight.svg.meta b/Runtime/Assets/Icons/ChevronRight.svg.meta
new file mode 100644
index 0000000..f8eb7fb
--- /dev/null
+++ b/Runtime/Assets/Icons/ChevronRight.svg.meta
@@ -0,0 +1,53 @@
+fileFormatVersion: 2
+guid: 1865e2568fd8dd14ba6a274e193765f0
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12408, guid: 0000000000000000e000000000000000, type: 0}
+  svgType: 0
+  texturedSpriteMeshType: 0
+  svgPixelsPerUnit: 100
+  gradientResolution: 64
+  alignment: 0
+  customPivot: {x: 0, y: 0}
+  generatePhysicsShape: 0
+  viewportOptions: 0
+  preserveViewport: 0
+  advancedMode: 0
+  tessellationMode: 0
+  predefinedResolutionIndex: 1
+  targetResolution: 1080
+  resolutionMultiplier: 1
+  stepDistance: 10
+  samplingStepDistance: 100
+  maxCordDeviationEnabled: 0
+  maxCordDeviation: 1
+  maxTangentAngleEnabled: 0
+  maxTangentAngle: 5
+  keepTextureAspectRatio: 1
+  textureSize: 256
+  textureWidth: 256
+  textureHeight: 256
+  wrapMode: 0
+  filterMode: 1
+  sampleCount: 4
+  preserveSVGImageAspect: 0
+  useSVGPixelsPerUnit: 0
+  spriteData:
+    TessellationDetail: 0
+    SpriteName: ChevronRightSprite
+    SpritePivot: {x: 0.5, y: 0.5}
+    SpriteAlignment: 0
+    SpriteBorder: {x: 0, y: 0, z: 0, w: 0}
+    SpriteRect:
+      serializedVersion: 2
+      x: 0
+      y: 0
+      width: 9.499383
+      height: 16.498768
+    SpriteID: 2c6135774ce725f48a021087f7283057
+    PhysicsOutlines: []
diff --git a/Runtime/Assets/Icons/ListItem.svg b/Runtime/Assets/Icons/ListItem.svg
new file mode 100644
index 0000000..aace926
--- /dev/null
+++ b/Runtime/Assets/Icons/ListItem.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- Three bullet rows -->
+  <circle cx="4" cy="7"  r="1.5" fill="white"/>
+  <path d="M8 7 H20"  fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="4" cy="12" r="1.5" fill="white"/>
+  <path d="M8 12 H20" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+  <circle cx="4" cy="17" r="1.5" fill="white"/>
+  <path d="M8 17 H20" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/Runtime/Assets/Icons/ListItem.svg.meta b/Runtime/Assets/Icons/ListItem.svg.meta
new file mode 100644
index 0000000..0c15b6b
--- /dev/null
+++ b/Runtime/Assets/Icons/ListItem.svg.meta
@@ -0,0 +1,53 @@
+fileFormatVersion: 2
+guid: 3728164e1ded6a5419a81c6c61840330
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12408, guid: 0000000000000000e000000000000000, type: 0}
+  svgType: 0
+  texturedSpriteMeshType: 0
+  svgPixelsPerUnit: 100
+  gradientResolution: 64
+  alignment: 0
+  customPivot: {x: 0, y: 0}
+  generatePhysicsShape: 0
+  viewportOptions: 0
+  preserveViewport: 0
+  advancedMode: 0
+  tessellationMode: 0
+  predefinedResolutionIndex: 1
+  targetResolution: 1080
+  resolutionMultiplier: 1
+  stepDistance: 10
+  samplingStepDistance: 100
+  maxCordDeviationEnabled: 0
+  maxCordDeviation: 1
+  maxTangentAngleEnabled: 0
+  maxTangentAngle: 5
+  keepTextureAspectRatio: 1
+  textureSize: 256
+  textureWidth: 256
+  textureHeight: 256
+  wrapMode: 0
+  filterMode: 1
+  sampleCount: 4
+  preserveSVGImageAspect: 0
+  useSVGPixelsPerUnit: 0
+  spriteData:
+    TessellationDetail: 0
+    SpriteName: ListItemSprite
+    SpritePivot: {x: 0.5, y: 0.5}
+    SpriteAlignment: 0
+    SpriteBorder: {x: 0, y: 0, z: 0, w: 0}
+    SpriteRect:
+      serializedVersion: 2
+      x: 0
+      y: 0
+      width: 18.5
+      height: 13
+    SpriteID: dda8d3e7abc40d344a2467123685ada7
+    PhysicsOutlines: []
diff --git a/Runtime/Assets/Icons/LoadingSpinner.svg b/Runtime/Assets/Icons/LoadingSpinner.svg
new file mode 100644
index 0000000..46864b7
--- /dev/null
+++ b/Runtime/Assets/Icons/LoadingSpinner.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- 270-degree arc. The C# LoadingIcon rotates this element to animate the spin. -->
+  <circle cx="12" cy="12" r="9"
+          fill="none"
+          stroke="white"
+          stroke-width="3"
+          stroke-dasharray="42.41 14.14"
+          stroke-linecap="round"
+          transform="rotate(-90 12 12)"/>
+</svg>
diff --git a/Runtime/Assets/Icons/LoadingSpinner.svg.meta b/Runtime/Assets/Icons/LoadingSpinner.svg.meta
new file mode 100644
index 0000000..77555a7
--- /dev/null
+++ b/Runtime/Assets/Icons/LoadingSpinner.svg.meta
@@ -0,0 +1,53 @@
+fileFormatVersion: 2
+guid: 3fadac0dd7f6b7c4bb619eec41c37b8d
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12408, guid: 0000000000000000e000000000000000, type: 0}
+  svgType: 0
+  texturedSpriteMeshType: 0
+  svgPixelsPerUnit: 100
+  gradientResolution: 64
+  alignment: 0
+  customPivot: {x: 0, y: 0}
+  generatePhysicsShape: 0
+  viewportOptions: 0
+  preserveViewport: 0
+  advancedMode: 0
+  tessellationMode: 0
+  predefinedResolutionIndex: 1
+  targetResolution: 1080
+  resolutionMultiplier: 1
+  stepDistance: 10
+  samplingStepDistance: 100
+  maxCordDeviationEnabled: 0
+  maxCordDeviation: 1
+  maxTangentAngleEnabled: 0
+  maxTangentAngle: 5
+  keepTextureAspectRatio: 1
+  textureSize: 256
+  textureWidth: 256
+  textureHeight: 256
+  wrapMode: 0
+  filterMode: 1
+  sampleCount: 4
+  preserveSVGImageAspect: 0
+  useSVGPixelsPerUnit: 0
+  spriteData:
+    TessellationDetail: 0
+    SpriteName: LoadingSpinnerSprite
+    SpritePivot: {x: 0.5, y: 0.5}
+    SpriteAlignment: 0
+    SpriteBorder: {x: 0, y: 0, z: 0, w: 0}
+    SpriteRect:
+      serializedVersion: 2
+      x: 0
+      y: 0
+      width: 21
+      height: 21
+    SpriteID: ca5941a35859e07478be778477070dff
+    PhysicsOutlines: []
diff --git a/Runtime/Controls/CircularImageButton.meta b/Runtime/Controls/CircularImageButton.meta
new file mode 100644
index 0000000..771e56e
--- /dev/null
+++ b/Runtime/Controls/CircularImageButton.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: f5b0dd94ca232d343bf2fa05af9c4dbb
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/CircularImageButton/CircularImageButton.cs b/Runtime/Controls/CircularImageButton/CircularImageButton.cs
new file mode 100644
index 0000000..1be42ca
--- /dev/null
+++ b/Runtime/Controls/CircularImageButton/CircularImageButton.cs
@@ -0,0 +1,105 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A circular clickable image element with a no-image overlay (icon + optional upload label)
+    /// that hides when an image is set. State is driven by the <see cref="HasImageClass"/> modifier.
+    /// </summary>
+    public class CircularImageButton : VisualElement
+    {
+        public const string RootClass = "circularImageButton";
+        public const string ImageClass = "circularImageButton__image";
+        public const string NoImageOverlayClass = "circularImageButton__noImageOverlay";
+        public const string IconClass = "circularImageButton__icon";
+        public const string UploadLabelClass = "circularImageButton__uploadLabel";
+        public const string HasImageClass = "circularImageButton--hasImage";
+
+        private readonly VisualElement imageContainer;
+        private readonly VisualElement noImageOverlay;
+        private readonly VisualElement iconElement;
+        private readonly Label uploadNewImageLabel;
+
+        public event Action Clicked;
+
+        public CircularImageButton()
+        {
+            AddToClassList(RootClass);
+
+            focusable = true;
+            this.AddManipulator(new Clickable(OnClickedHandler));
+
+            imageContainer = UIToolkitExtensions.CreateVisualElement(this, ImageClass);
+            imageContainer.pickingMode = PickingMode.Ignore;
+
+            noImageOverlay = UIToolkitExtensions.CreateVisualElement(this, NoImageOverlayClass);
+            noImageOverlay.pickingMode = PickingMode.Ignore;
+
+            iconElement = UIToolkitExtensions.CreateVisualElement(noImageOverlay, IconClass);
+            iconElement.pickingMode = PickingMode.Ignore;
+
+            uploadNewImageLabel = UIToolkitExtensions.CreateVisualElement<Label>(noImageOverlay, UploadLabelClass);
+            uploadNewImageLabel.text = string.Empty;
+            uploadNewImageLabel.style.display = DisplayStyle.None;
+            uploadNewImageLabel.pickingMode = PickingMode.Ignore;
+        }
+
+        private void OnClickedHandler()
+        {
+            Clicked?.Invoke();
+        }
+
+        public void SetImage(Texture2D texture, bool isDefault = false)
+        {
+            if (texture != null)
+            {
+                imageContainer.style.backgroundImage = new StyleBackground(texture);
+                UpdateImageState(!isDefault);
+            }
+        }
+
+        public void SetImage(Sprite sprite, bool isDefault = false)
+        {
+            if (sprite != null)
+            {
+                imageContainer.style.backgroundImage = new StyleBackground(sprite);
+                UpdateImageState(!isDefault);
+            }
+        }
+
+        public void SetUploadLabel(string labelText)
+        {
+            uploadNewImageLabel.text = labelText;
+            RefreshUploadLabelVisibility();
+        }
+
+        public void ClearImage()
+        {
+            imageContainer.style.backgroundImage = StyleKeyword.Null;
+            UpdateImageState(false);
+        }
+
+        public void SetImageTint(Color color)
+        {
+            imageContainer.style.unityBackgroundImageTintColor = color;
+        }
+
+        private void UpdateImageState(bool hasImage)
+        {
+            EnableInClassList(HasImageClass, hasImage);
+            RefreshUploadLabelVisibility();
+        }
+
+        private void RefreshUploadLabelVisibility()
+        {
+            bool hasImage = ClassListContains(HasImageClass);
+            uploadNewImageLabel.style.display = hasImage || string.IsNullOrEmpty(uploadNewImageLabel.text)
+                ? DisplayStyle.None
+                : DisplayStyle.Flex;
+        }
+    }
+}
diff --git a/Runtime/Controls/CircularImageButton/CircularImageButton.cs.meta b/Runtime/Controls/CircularImageButton/CircularImageButton.cs.meta
new file mode 100644
index 0000000..3828b1a
--- /dev/null
+++ b/Runtime/Controls/CircularImageButton/CircularImageButton.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 1efbce6fc90aa2441be149344862c9e6
\ No newline at end of file
diff --git a/Runtime/Controls/CollapsibleSection.meta b/Runtime/Controls/CollapsibleSection.meta
new file mode 100644
index 0000000..6162e95
--- /dev/null
+++ b/Runtime/Controls/CollapsibleSection.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 9eb99c07cfc101d44893bc6347c3d939
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs b/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs
new file mode 100644
index 0000000..799a979
--- /dev/null
+++ b/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs
@@ -0,0 +1,95 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A collapsible accordion section. The header toggles an expanded/collapsed body that
+    /// animates via USS max-height transitions driven by the <see cref="ExpandedClass"/> modifier.
+    /// </summary>
+    public class CollapsibleSection : VisualElement
+    {
+        public const string RootClass = "collapsibleSection";
+        public const string HeaderClass = "collapsibleSection__header";
+        public const string TitleClass = "collapsibleSection__title";
+        public const string ChevronClass = "collapsibleSection__chevron";
+        public const string BodyClass = "collapsibleSection__body";
+        public const string BodyContentClass = "collapsibleSection__bodyContent";
+        public const string BodyTextClass = "collapsibleSection__bodyText";
+        public const string ExpandedClass = "collapsibleSection--expanded";
+
+        private readonly Label titleLabel;
+        private readonly VisualElement bodyContent;
+        private bool isExpanded;
+
+        public event Action<bool> OnExpandedChanged;
+
+        public bool IsExpanded
+        {
+            get => isExpanded;
+            set => SetExpanded(value);
+        }
+
+        public string TitleText
+        {
+            get => titleLabel.text;
+            set => titleLabel.text = value;
+        }
+
+        public CollapsibleSection()
+        {
+            AddToClassList(RootClass);
+
+            var header = UIToolkitExtensions.CreateVisualElement(this, HeaderClass);
+            header.pickingMode = PickingMode.Position;
+
+            titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, TitleClass);
+            titleLabel.pickingMode = PickingMode.Ignore;
+
+            var chevron = UIToolkitExtensions.CreateVisualElement(header, ChevronClass);
+            chevron.pickingMode = PickingMode.Ignore;
+
+            var body = UIToolkitExtensions.CreateVisualElement(this, BodyClass);
+            bodyContent = UIToolkitExtensions.CreateVisualElement(body, BodyContentClass);
+
+            header.RegisterCallback<PointerDownEvent>(OnHeaderPointerDown);
+        }
+
+        public void AddBodyContent(VisualElement element)
+        {
+            bodyContent.Add(element);
+        }
+
+        public Label SetBodyText(string text)
+        {
+            var existing = bodyContent.Q<Label>(className: BodyTextClass);
+            existing?.RemoveFromHierarchy();
+
+            var label = UIToolkitExtensions.CreateVisualElement<Label>(bodyContent, BodyTextClass);
+            label.text = text;
+            return label;
+        }
+
+        public void Toggle() => SetExpanded(!isExpanded);
+
+        private void OnHeaderPointerDown(PointerDownEvent evt)
+        {
+            evt.StopPropagation();
+            Toggle();
+        }
+
+        private void SetExpanded(bool expanded)
+        {
+            if (isExpanded == expanded)
+            {
+                return;
+            }
+
+            isExpanded = expanded;
+            EnableInClassList(ExpandedClass, isExpanded);
+            OnExpandedChanged?.Invoke(isExpanded);
+        }
+    }
+}
diff --git a/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs.meta b/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs.meta
new file mode 100644
index 0000000..a42ff93
--- /dev/null
+++ b/Runtime/Controls/CollapsibleSection/CollapsibleSection.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: c31dd55729a8f154fb3d980b6351485c
\ No newline at end of file
diff --git a/Runtime/Controls/ColorToggleButton.meta b/Runtime/Controls/ColorToggleButton.meta
new file mode 100644
index 0000000..23843fb
--- /dev/null
+++ b/Runtime/Controls/ColorToggleButton.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: b73e415bc8b37bd4292869d8743fbb0d
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs b/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs
new file mode 100644
index 0000000..b969c9c
--- /dev/null
+++ b/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs
@@ -0,0 +1,133 @@
+/// Credit SimonDarksideJ
+
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A <see cref="ToggleButton"/> variant with a tint color, ripple animation on selection,
+    /// and a selected-state overlay. Extends the base toggle with color-coded visual feedback.
+    /// </summary>
+    public class ColorToggleButton : ToggleButton
+    {
+        public const string IconClass = "toggleButton__icon";
+        public const string RippleOverlayClass = "toggleButton__ripple";
+        public const string RippleOverlayVisibleClass = "toggleButton__ripple--visible";
+        public const string RippleOverlaySecondaryClass = "toggleButton__rippleSecondary";
+        public const string RippleOverlaySecondaryVisibleClass = "toggleButton__rippleSecondary--visible";
+        public const string SelectedOverlayClass = "toggleButton__selectedOverlay";
+        public const string SelectedOverlayVisibleClass = "toggleButton__selectedOverlay--visible";
+
+        private Color tintColor;
+        private Color selectedTintColor;
+        private readonly VisualElement rippleOverlay;
+        private readonly VisualElement rippleOverlaySecondary;
+        private readonly VisualElement selectedOverlay;
+
+        public Color TintColor => tintColor;
+        public Color SelectedTintColor => selectedTintColor;
+
+        public ColorToggleButton(Color tintColor) : this(tintColor, tintColor) { }
+
+        public ColorToggleButton(Color tintColor, Color selectedTintColor)
+        {
+            image.AddToClassList(IconClass);
+
+            rippleOverlay = UIToolkitExtensions.CreateVisualElement(this, RippleOverlayClass);
+            rippleOverlay.pickingMode = PickingMode.Ignore;
+
+            rippleOverlaySecondary = UIToolkitExtensions.CreateVisualElement(this, RippleOverlaySecondaryClass);
+            rippleOverlaySecondary.pickingMode = PickingMode.Ignore;
+
+            selectedOverlay = UIToolkitExtensions.CreateVisualElement(this, SelectedOverlayClass);
+            selectedOverlay.pickingMode = PickingMode.Ignore;
+
+            SetTintColor(tintColor);
+            SetSelectedTintColor(selectedTintColor);
+        }
+
+        public void SetTintColor(Color color)
+        {
+            tintColor = color;
+            image.style.unityBackgroundImageTintColor = color;
+        }
+
+        public void SetSelectedTintColor(Color color)
+        {
+            selectedTintColor = color;
+            selectedOverlay.style.unityBackgroundImageTintColor = color;
+            rippleOverlay.style.unityBackgroundImageTintColor = color;
+            rippleOverlaySecondary.style.unityBackgroundImageTintColor = color;
+        }
+
+        protected override void ApplySelectionState(bool selected)
+        {
+            base.ApplySelectionState(selected);
+            if (selected)
+            {
+                selectedOverlay.AddToClassList(SelectedOverlayVisibleClass);
+                PlayRipple();
+            }
+            else
+            {
+                selectedOverlay.RemoveFromClassList(SelectedOverlayVisibleClass);
+                ResetRipple();
+            }
+        }
+
+        private void PlayRipple()
+        {
+            rippleOverlay.AddToClassList(RippleOverlayVisibleClass);
+            rippleOverlaySecondary.AddToClassList(RippleOverlaySecondaryVisibleClass);
+
+            PlayRippleWave(rippleOverlay, 1f, 5f, 1500);
+            PlayRippleWave(rippleOverlaySecondary, 0.35f, 3.2f, 1500);
+        }
+
+        private void ResetRipple()
+        {
+            rippleOverlay.RemoveFromClassList(RippleOverlayVisibleClass);
+            rippleOverlaySecondary.RemoveFromClassList(RippleOverlaySecondaryVisibleClass);
+            rippleOverlay.style.opacity = 0f;
+            rippleOverlay.style.scale = new Scale(Vector3.one);
+            rippleOverlaySecondary.style.opacity = 0f;
+            rippleOverlaySecondary.style.scale = new Scale(Vector3.one);
+        }
+
+        private void PlayRippleWave(VisualElement ripple, float startOpacity, float endScale, int durationMs)
+        {
+            ripple.style.transitionProperty = null;
+            ripple.style.transitionDuration = null;
+            ripple.style.transitionTimingFunction = null;
+            ripple.style.scale = new Scale(Vector3.one);
+            ripple.style.opacity = startOpacity;
+
+            var properties = new List<StylePropertyName>
+            {
+                new("scale"),
+                new("opacity")
+            };
+
+            ripple.style.transitionProperty = new StyleList<StylePropertyName>(properties);
+            ripple.style.transitionDuration = new List<TimeValue>
+            {
+                new(durationMs, TimeUnit.Millisecond),
+                new(durationMs, TimeUnit.Millisecond)
+            };
+            ripple.style.transitionTimingFunction = new StyleList<EasingFunction>(
+                new List<EasingFunction>
+                {
+                    new(EasingMode.EaseOut),
+                    new(EasingMode.EaseOut)
+                });
+
+            ripple.schedule.Execute(() =>
+            {
+                ripple.style.scale = new Scale(new Vector3(endScale, endScale, 1f));
+                ripple.style.opacity = 0f;
+            }).StartingIn(1);
+        }
+    }
+}
diff --git a/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs.meta b/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs.meta
new file mode 100644
index 0000000..ea89e48
--- /dev/null
+++ b/Runtime/Controls/ColorToggleButton/ColorToggleButton.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 81ac2c6514734eb40b1eba7b5fc2074b
\ No newline at end of file
diff --git a/Runtime/Controls/ColorToggleGroup.meta b/Runtime/Controls/ColorToggleGroup.meta
new file mode 100644
index 0000000..170d0f6
--- /dev/null
+++ b/Runtime/Controls/ColorToggleGroup.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 6358c05cbace54d48b083b3d54415906
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs b/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs
new file mode 100644
index 0000000..95d9b0e
--- /dev/null
+++ b/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs
@@ -0,0 +1,249 @@
+/// Credit SimonDarksideJ
+
+using System;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A single-selection group of <see cref="ColorToggleButton"/> elements.
+    /// Supports both tap-to-select and drag-to-select interaction patterns.
+    /// </summary>
+    public class ColorToggleGroup : VisualElement
+    {
+        public const string RootClass = "colorToggleGroup";
+        public const string ContainerClass = "colorToggleGroup__container";
+
+        private readonly VisualElement container;
+        private readonly List<ColorToggleButton> buttons = new();
+        private Color[] colors = Array.Empty<Color>();
+        private FlexDirection alignment = FlexDirection.Column;
+        private bool isPointerDown;
+        private bool isDragging;
+        private int activePointerId = -1;
+        private Vector2 dragStartPosition;
+        private ColorToggleButton lastDragSelectedButton;
+        private const float DragSelectionThreshold = 8f;
+
+        public event Action<Color> OnColorSelected;
+
+        public Color? SelectedColor
+        {
+            get
+            {
+                foreach (var button in buttons)
+                {
+                    if (button.IsSelected)
+                    {
+                        return button.TintColor;
+                    }
+                }
+                return null;
+            }
+        }
+
+        public Color[] Colors
+        {
+            get => colors;
+            set
+            {
+                colors = value ?? Array.Empty<Color>();
+                RebuildButtons();
+            }
+        }
+
+        public FlexDirection Alignment
+        {
+            get => alignment;
+            set
+            {
+                alignment = value;
+                container.style.flexDirection = alignment;
+            }
+        }
+
+        public ColorToggleGroup()
+        {
+            AddToClassList(RootClass);
+
+            container = UIToolkitExtensions.CreateVisualElement(this, ContainerClass);
+            container.style.flexDirection = alignment;
+
+            container.RegisterCallback<PointerDownEvent>(OnContainerPointerDown, TrickleDown.TrickleDown);
+            container.RegisterCallback<PointerMoveEvent>(OnContainerPointerMove, TrickleDown.TrickleDown);
+            container.RegisterCallback<PointerUpEvent>(OnContainerPointerUp, TrickleDown.TrickleDown);
+            container.RegisterCallback<PointerCancelEvent>(OnContainerPointerCancel, TrickleDown.TrickleDown);
+        }
+
+        public void DeselectAll()
+        {
+            foreach (var button in buttons)
+            {
+                button.ForceDeselect();
+            }
+        }
+
+        public void SelectColor(Color color, bool propagateEvent = true)
+        {
+            foreach (var button in buttons)
+            {
+                if (button.TintColor == color)
+                {
+                    if (!button.IsSelected)
+                    {
+                        button.ForceSelect();
+                        HandleToggleGroup(button, propagateEvent);
+                    }
+                    return;
+                }
+            }
+        }
+
+        private void RebuildButtons()
+        {
+            foreach (var button in buttons)
+            {
+                container.Remove(button);
+            }
+            buttons.Clear();
+
+            foreach (var color in colors)
+            {
+                CreateColorToggleButton(color);
+            }
+        }
+
+        private void CreateColorToggleButton(Color tintColor)
+        {
+            var button = new ColorToggleButton(tintColor);
+            buttons.Add(button);
+            button.OnClicked += () => HandleToggleGroup(button);
+            container.Add(button);
+        }
+
+        private void HandleToggleGroup(ColorToggleButton clicked, bool propagateEvent = true)
+        {
+            if (!clicked.IsSelected)
+            {
+                return;
+            }
+
+            foreach (var button in buttons)
+            {
+                if (!ReferenceEquals(button, clicked))
+                {
+                    button.ForceDeselect();
+                }
+            }
+
+            if (propagateEvent)
+            {
+                OnColorSelected?.Invoke(clicked.TintColor);
+            }
+        }
+
+        private void OnContainerPointerDown(PointerDownEvent evt)
+        {
+            isPointerDown = true;
+            isDragging = false;
+            activePointerId = evt.pointerId;
+            dragStartPosition = evt.position;
+            lastDragSelectedButton = null;
+        }
+
+        private void OnContainerPointerMove(PointerMoveEvent evt)
+        {
+            if (!isPointerDown || evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            if (!isDragging)
+            {
+                if (Vector2.Distance(evt.position, dragStartPosition) < DragSelectionThreshold)
+                {
+                    return;
+                }
+
+                isDragging = true;
+                container.CapturePointer(evt.pointerId);
+            }
+
+            ColorToggleButton hoveredButton = FindButtonAtPosition(evt.position);
+            if (hoveredButton == null || ReferenceEquals(hoveredButton, lastDragSelectedButton))
+            {
+                return;
+            }
+
+            SelectButtonFromDrag(hoveredButton);
+            lastDragSelectedButton = hoveredButton;
+        }
+
+        private void OnContainerPointerUp(PointerUpEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            ResetPointerTrackingState();
+        }
+
+        private void OnContainerPointerCancel(PointerCancelEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            ResetPointerTrackingState();
+        }
+
+        private void ResetPointerTrackingState()
+        {
+            if (container.HasPointerCapture(activePointerId))
+            {
+                container.ReleasePointer(activePointerId);
+            }
+
+            isPointerDown = false;
+            isDragging = false;
+            activePointerId = -1;
+            lastDragSelectedButton = null;
+        }
+
+        private ColorToggleButton FindButtonAtPosition(Vector2 panelPosition)
+        {
+            if (panel == null)
+            {
+                return null;
+            }
+
+            VisualElement current = panel.Pick(panelPosition) as VisualElement;
+            while (current != null)
+            {
+                if (current is ColorToggleButton button && buttons.Contains(button))
+                {
+                    return button;
+                }
+
+                current = current.parent;
+            }
+
+            return null;
+        }
+
+        private void SelectButtonFromDrag(ColorToggleButton button)
+        {
+            if (button.IsSelected)
+            {
+                return;
+            }
+
+            button.ForceSelect();
+            HandleToggleGroup(button, true);
+        }
+    }
+}
diff --git a/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs.meta b/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs.meta
new file mode 100644
index 0000000..1ace8a5
--- /dev/null
+++ b/Runtime/Controls/ColorToggleGroup/ColorToggleGroup.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: fcf817f7a76714f4a83c91fbb9e51e51
\ No newline at end of file
diff --git a/Runtime/Controls/ComingSoonMessage.meta b/Runtime/Controls/ComingSoonMessage.meta
new file mode 100644
index 0000000..c7a4b6e
--- /dev/null
+++ b/Runtime/Controls/ComingSoonMessage.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 865fa452aa5278c4bb334b327e356483
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs b/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs
new file mode 100644
index 0000000..efd07a4
--- /dev/null
+++ b/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs
@@ -0,0 +1,43 @@
+/// Credit SimonDarksideJ
+
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A placeholder panel that displays a "Coming Soon" heading and an optional message body.
+    /// </summary>
+    public class ComingSoonMessage : VisualElement
+    {
+        public const string RootClass = "comingSoonMessage";
+        public const string BackgroundClass = "comingSoonMessage__background";
+        public const string TitleClass = "comingSoonMessage__title";
+        public const string LabelClass = "comingSoonMessage__label";
+
+        private readonly Label title;
+        private readonly Label label;
+
+        public ComingSoonMessage()
+        {
+            AddToClassList(RootClass);
+
+            var background = UIToolkitExtensions.CreateVisualElement(this, BackgroundClass);
+
+            title = UIToolkitExtensions.CreateVisualElement<Label>(background, TitleClass);
+            title.text = "Coming Soon";
+
+            label = UIToolkitExtensions.CreateVisualElement<Label>(background, LabelClass);
+        }
+
+        public string Title
+        {
+            get => title.text;
+            set => title.text = value;
+        }
+
+        public void SetMessage(string message)
+        {
+            label.text = message;
+        }
+    }
+}
diff --git a/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs.meta b/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs.meta
new file mode 100644
index 0000000..357f592
--- /dev/null
+++ b/Runtime/Controls/ComingSoonMessage/ComingSoonMessage.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: deb5a6f784c6d7146bf8cf1ebbb51ccb
\ No newline at end of file
diff --git a/Runtime/Controls/DropDownControl.meta b/Runtime/Controls/DropDownControl.meta
new file mode 100644
index 0000000..e18ba6f
--- /dev/null
+++ b/Runtime/Controls/DropDownControl.meta
@@ -0,0 +1,15 @@
+fileFormatVersion: 2
+guid: 5f67aa49e3aa4a548a7d2574c5fd3f6a
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: fileFormatVersion: 2
+guid: 5f67aa49e3aa4a548a7d2574c5fd3f6a
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
\ No newline at end of file
diff --git a/Runtime/Controls/DropDownControl/DropDownControl.cs b/Runtime/Controls/DropDownControl/DropDownControl.cs
new file mode 100644
index 0000000..94b3710
--- /dev/null
+++ b/Runtime/Controls/DropDownControl/DropDownControl.cs
@@ -0,0 +1,485 @@
+/// Credit SimonDarksideJ
+
+using System;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A wheel-style dropdown picker that opens from a trigger pill and presents a
+    /// vertically scrollable list of values in a modal overlay.
+    /// </summary>
+    public class DropDownControl : VisualElement
+    {
+        public const string RootClass = "dropDownControl";
+        public const string TriggerClass = "dropDownControl__trigger";
+        public const string TriggerLabelClass = "dropDownControl__triggerLabel";
+        public const string TriggerIconClass = "dropDownControl__triggerIcon";
+        public const string BackdropClass = "dropDownControl__backdrop";
+        public const string PanelClass = "dropDownControl__panel";
+        public const string ViewportClass = "dropDownControl__viewport";
+        public const string ListClass = "dropDownControl__list";
+        public const string RowClass = "dropDownControl__row";
+        public const string SelectionLaneClass = "dropDownControl__selectionLane";
+        public const string FadeTopClass = "dropDownControl__fadeTop";
+        public const string FadeBottomClass = "dropDownControl__fadeBottom";
+        public const string OpenModifier = "dropDownControl--open";
+
+        private const int VisibleRows = 7;
+        private const float RowHeightPx = 96f;
+        private const int BufferRows = 3;
+        private const float SnapVelocityThreshold = 50f;
+        private const float MomentumDamping = 0.88f;
+        private const float CenteredPoolTranslateY = -BufferRows * RowHeightPx;
+
+        private string[] items = Array.Empty<string>();
+        private int selectedIndex;
+        private bool isOpen;
+        private bool isDragging;
+        private int activePointerId = -1;
+        private float pointerDownY;
+        private float dragStartOffset;
+        private float currentOffset;
+        private float lastPointerY;
+        private float dragVelocity;
+        private long lastPointerTime;
+        private bool isCoasting;
+        private IVisualElementScheduledItem coastSchedule;
+
+        private readonly VisualElement triggerElement;
+        private readonly Label triggerLabel;
+        private readonly VisualElement backdropElement;
+        private readonly VisualElement panelElement;
+        private readonly VisualElement viewportElement;
+        private readonly VisualElement listContainer;
+        private readonly List<Label> rowLabels = new();
+
+        public event Action<string> ValueChanged;
+        public event Action<bool> OpenStateChanged;
+
+        /// <summary>Gets or sets the ordered values shown in the picker.</summary>
+        public IReadOnlyList<string> Items
+        {
+            get => items;
+            set
+            {
+                items = value != null ? new List<string>(value).ToArray() : Array.Empty<string>();
+                selectedIndex = Mathf.Clamp(selectedIndex, 0, Mathf.Max(0, items.Length - 1));
+                currentOffset = OffsetForIndex(selectedIndex);
+
+                if (items.Length == 0 && isOpen)
+                {
+                    Close();
+                }
+
+                RefreshTriggerLabel();
+                if (isOpen)
+                {
+                    RebuildRows();
+                    ApplyOffset(currentOffset);
+                }
+            }
+        }
+
+        /// <summary>Gets the currently selected string value.</summary>
+        public string Value => items.Length > 0 ? items[selectedIndex] : string.Empty;
+
+        public DropDownControl()
+        {
+            AddToClassList(RootClass);
+
+            triggerElement = UIToolkitExtensions.CreateVisualElement(this, TriggerClass);
+
+            triggerLabel = UIToolkitExtensions.CreateVisualElement<Label>(triggerElement, TriggerLabelClass);
+
+            var triggerIcon = UIToolkitExtensions.CreateVisualElement(triggerElement, TriggerIconClass);
+            triggerIcon.pickingMode = PickingMode.Ignore;
+
+            triggerElement.RegisterCallback<ClickEvent>(_ => Open());
+            triggerElement.RegisterCallback<PointerDownEvent>(OnTriggerPointerDown, TrickleDown.TrickleDown);
+
+            backdropElement = UIToolkitExtensions.CreateVisualElement(BackdropClass);
+            backdropElement.RegisterCallback<ClickEvent>(OnBackdropClicked);
+
+            panelElement = UIToolkitExtensions.CreateVisualElement(PanelClass);
+            panelElement.RegisterCallback<ClickEvent>(evt => evt.StopPropagation());
+
+            viewportElement = UIToolkitExtensions.CreateVisualElement(panelElement, ViewportClass);
+
+            listContainer = UIToolkitExtensions.CreateVisualElement(viewportElement, ListClass);
+
+            var fadeTop = UIToolkitExtensions.CreateVisualElement(panelElement, FadeTopClass);
+            fadeTop.pickingMode = PickingMode.Ignore;
+
+            var fadeBottom = UIToolkitExtensions.CreateVisualElement(panelElement, FadeBottomClass);
+            fadeBottom.pickingMode = PickingMode.Ignore;
+
+            var selectionLane = UIToolkitExtensions.CreateVisualElement(panelElement, SelectionLaneClass);
+            selectionLane.pickingMode = PickingMode.Ignore;
+
+            viewportElement.RegisterCallback<PointerDownEvent>(OnPointerDown, TrickleDown.TrickleDown);
+            viewportElement.RegisterCallback<PointerMoveEvent>(OnPointerMove, TrickleDown.TrickleDown);
+            viewportElement.RegisterCallback<PointerUpEvent>(OnPointerUp, TrickleDown.TrickleDown);
+            viewportElement.RegisterCallback<PointerCancelEvent>(OnPointerCancel, TrickleDown.TrickleDown);
+            viewportElement.RegisterCallback<WheelEvent>(OnViewportWheel, TrickleDown.TrickleDown);
+
+            RefreshTriggerLabel();
+        }
+
+        /// <summary>Pre-selects a value. No-op if the value is not present.</summary>
+        public void SetDefault(string value)
+        {
+            if (items.Length == 0 || string.IsNullOrEmpty(value))
+            {
+                return;
+            }
+
+            int index = Array.IndexOf(items, value);
+            if (index < 0)
+            {
+                return;
+            }
+
+            selectedIndex = index;
+            currentOffset = OffsetForIndex(selectedIndex);
+            RefreshTriggerLabel();
+            if (isOpen)
+            {
+                ApplyOffset(currentOffset);
+                RefreshRowLabels(currentOffset);
+            }
+        }
+
+        private void OnTriggerPointerDown(PointerDownEvent evt)
+        {
+            Open();
+            evt.StopPropagation();
+        }
+
+        private void Open()
+        {
+            if (isOpen || items.Length == 0)
+            {
+                return;
+            }
+
+            VisualElement root = panel?.visualTree;
+            if (root == null)
+            {
+                return;
+            }
+
+            isOpen = true;
+            AddToClassList(OpenModifier);
+
+            root.Add(backdropElement);
+            backdropElement.BringToFront();
+
+            Rect triggerBounds = triggerElement.worldBound;
+            panelElement.style.position = Position.Absolute;
+            panelElement.style.left = triggerBounds.x;
+            panelElement.style.top = triggerBounds.yMax + 8f;
+            panelElement.style.width = triggerBounds.width;
+
+            root.Add(panelElement);
+            panelElement.BringToFront();
+
+            currentOffset = OffsetForIndex(selectedIndex);
+            RebuildRows();
+            ApplyOffset(currentOffset);
+            OpenStateChanged?.Invoke(true);
+        }
+
+        private void Close()
+        {
+            if (!isOpen)
+            {
+                return;
+            }
+
+            StopCoasting();
+            isOpen = false;
+            RemoveFromClassList(OpenModifier);
+            panelElement.RemoveFromHierarchy();
+            backdropElement.RemoveFromHierarchy();
+            OpenStateChanged?.Invoke(false);
+        }
+
+        private void OnBackdropClicked(ClickEvent evt)
+        {
+            Close();
+        }
+
+        private void OnViewportWheel(WheelEvent evt)
+        {
+            if (!isOpen || items.Length == 0)
+            {
+                return;
+            }
+
+            int direction = evt.delta.y > 0f ? 1 : -1;
+            int centreIndex = Mathf.RoundToInt(-currentOffset / RowHeightPx);
+            AnimateToIndex(centreIndex + direction);
+            evt.StopPropagation();
+        }
+
+        private void Confirm(int index)
+        {
+            if (items.Length == 0)
+            {
+                Close();
+                return;
+            }
+
+            selectedIndex = WrapIndex(index);
+            RefreshTriggerLabel();
+            Close();
+            ValueChanged?.Invoke(Value);
+        }
+
+        private void RebuildRows()
+        {
+            listContainer.Clear();
+            rowLabels.Clear();
+
+            int totalRows = VisibleRows + (BufferRows * 2);
+            for (int i = 0; i < totalRows; i++)
+            {
+                var row = UIToolkitExtensions.CreateVisualElement<Label>(listContainer, RowClass);
+                rowLabels.Add(row);
+            }
+
+            RefreshRowLabels(currentOffset);
+        }
+
+        private void RefreshRowLabels(float offset)
+        {
+            if (items.Length == 0 || rowLabels.Count == 0)
+            {
+                return;
+            }
+
+            int centreIndex = Mathf.RoundToInt(-offset / RowHeightPx);
+            int topLogicalIndex = centreIndex - (VisibleRows / 2) - BufferRows;
+
+            for (int i = 0; i < rowLabels.Count; i++)
+            {
+                int logicalIndex = topLogicalIndex + i;
+                rowLabels[i].text = items[WrapIndex(logicalIndex)];
+            }
+        }
+
+        private void OnPointerDown(PointerDownEvent evt)
+        {
+            if (activePointerId != -1)
+            {
+                return;
+            }
+
+            StopCoasting();
+            activePointerId = evt.pointerId;
+            pointerDownY = evt.position.y;
+            lastPointerY = evt.position.y;
+            dragStartOffset = currentOffset;
+            isDragging = false;
+            dragVelocity = 0f;
+            lastPointerTime = DateTime.Now.Ticks;
+            (evt.currentTarget as VisualElement)?.CapturePointer(activePointerId);
+            evt.StopPropagation();
+        }
+
+        private void OnPointerMove(PointerMoveEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            float delta = evt.position.y - pointerDownY;
+            if (!isDragging && Mathf.Abs(delta) > 4f)
+            {
+                isDragging = true;
+            }
+
+            if (!isDragging)
+            {
+                return;
+            }
+
+            long now = DateTime.Now.Ticks;
+            float deltaTime = (now - lastPointerTime) / (float)TimeSpan.TicksPerSecond;
+            if (deltaTime > 0f)
+            {
+                dragVelocity = (evt.position.y - lastPointerY) / deltaTime;
+            }
+
+            lastPointerY = evt.position.y;
+            lastPointerTime = now;
+
+            currentOffset = dragStartOffset + delta;
+            ApplyOffset(currentOffset);
+            RefreshRowLabels(currentOffset);
+            evt.StopPropagation();
+        }
+
+        private void OnPointerUp(PointerUpEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            (evt.currentTarget as VisualElement)?.ReleasePointer(activePointerId);
+            activePointerId = -1;
+
+            if (!isDragging)
+            {
+                TrySelectTappedRow(evt.position.y);
+            }
+            else
+            {
+                isDragging = false;
+                if (Mathf.Abs(dragVelocity) > SnapVelocityThreshold)
+                {
+                    StartCoasting();
+                }
+                else
+                {
+                    SnapToNearest();
+                }
+            }
+
+            evt.StopPropagation();
+        }
+
+        private void OnPointerCancel(PointerCancelEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            (evt.currentTarget as VisualElement)?.ReleasePointer(activePointerId);
+            activePointerId = -1;
+            isDragging = false;
+            SnapToNearest();
+        }
+
+        private void TrySelectTappedRow(float worldY)
+        {
+            if (rowLabels.Count == 0)
+            {
+                return;
+            }
+
+            for (int i = 0; i < rowLabels.Count; i++)
+            {
+                Rect bounds = rowLabels[i].worldBound;
+                if (bounds.yMin <= worldY && worldY <= bounds.yMax)
+                {
+                    int centreIndex = Mathf.RoundToInt(-currentOffset / RowHeightPx);
+                    int topLogicalIndex = centreIndex - (VisibleRows / 2) - BufferRows;
+                    Confirm(topLogicalIndex + i);
+                    return;
+                }
+            }
+
+            Confirm(Mathf.RoundToInt(-currentOffset / RowHeightPx));
+        }
+
+        private void SnapToNearest()
+        {
+            int nearest = Mathf.RoundToInt(-currentOffset / RowHeightPx);
+            AnimateToIndex(nearest);
+        }
+
+        private void StartCoasting()
+        {
+            isCoasting = true;
+            coastSchedule = schedule.Execute(CoastStep).Every(16);
+        }
+
+        private void StopCoasting()
+        {
+            if (!isCoasting)
+            {
+                return;
+            }
+
+            isCoasting = false;
+            coastSchedule?.Pause();
+            coastSchedule = null;
+        }
+
+        private void CoastStep()
+        {
+            dragVelocity *= MomentumDamping;
+            currentOffset += dragVelocity * 0.016f;
+            ApplyOffset(currentOffset);
+            RefreshRowLabels(currentOffset);
+
+            if (Mathf.Abs(dragVelocity) < SnapVelocityThreshold)
+            {
+                StopCoasting();
+                SnapToNearest();
+            }
+        }
+
+        private void AnimateToIndex(int logicalIndex)
+        {
+            float targetOffset = OffsetForIndex(logicalIndex);
+            const int steps = 9;
+            int currentStep = 0;
+            float startOffset = currentOffset;
+
+            IVisualElementScheduledItem animation = null;
+            animation = schedule.Execute(() =>
+            {
+                currentStep++;
+                float t = currentStep / (float)steps;
+                float easedT = 1f - Mathf.Pow(1f - t, 3f);
+                currentOffset = Mathf.Lerp(startOffset, targetOffset, easedT);
+                ApplyOffset(currentOffset);
+                RefreshRowLabels(currentOffset);
+
+                if (currentStep >= steps)
+                {
+                    animation?.Pause();
+                    currentOffset = targetOffset;
+                    ApplyOffset(currentOffset);
+                    RefreshRowLabels(currentOffset);
+                }
+            }).Every(16);
+        }
+
+        private float OffsetForIndex(int index)
+        {
+            return -index * RowHeightPx;
+        }
+
+        private int WrapIndex(int index)
+        {
+            if (items.Length == 0)
+            {
+                return 0;
+            }
+
+            return ((index % items.Length) + items.Length) % items.Length;
+        }
+
+        private void ApplyOffset(float offset)
+        {
+            int centreIndex = Mathf.RoundToInt(-offset / RowHeightPx);
+            float centredOffset = OffsetForIndex(centreIndex);
+            float fractionalOffset = offset - centredOffset;
+            listContainer.style.translate = new Translate(0f, CenteredPoolTranslateY + fractionalOffset, 0f);
+        }
+
+        private void RefreshTriggerLabel()
+        {
+            triggerLabel.text = Value;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Runtime/Controls/DropDownControl/DropDownControl.cs.meta b/Runtime/Controls/DropDownControl/DropDownControl.cs.meta
new file mode 100644
index 0000000..029b5b5
--- /dev/null
+++ b/Runtime/Controls/DropDownControl/DropDownControl.cs.meta
@@ -0,0 +1,3 @@
+fileFormatVersion: 2
+guid: b7c6e4e6a7bd4d8bac4d84a6f2dd8d19fileFormatVersion: 2
+guid: b7c6e4e6a7bd4d8bac4d84a6f2dd8d19
\ No newline at end of file
diff --git a/Runtime/Controls/GrayscaleImage.meta b/Runtime/Controls/GrayscaleImage.meta
new file mode 100644
index 0000000..bcee68c
--- /dev/null
+++ b/Runtime/Controls/GrayscaleImage.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: ed23541fc4308a94da10c931a90d648e
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs b/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs
new file mode 100644
index 0000000..4b39540
--- /dev/null
+++ b/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs
@@ -0,0 +1,253 @@
+/// Credit SimonDarksideJ
+
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A UIToolkit image element that renders a sprite or texture via ImmediateMode,
+    /// with support for a custom material and a configurable greyscale shader toggle.
+    /// </summary>
+    public class GrayscaleImage : ImmediateModeElement
+    {
+        public const string DefaultMainTextureProperty = "_MainTex";
+        public const string DefaultGreyscaleToggleProperty = "_GreyscaleEnabled";
+
+        private Material material;
+        private Sprite sprite;
+        private Texture texture;
+        private bool greyscaleEnabled = true;
+        private ScaleMode scaleModeValue = ScaleMode.ScaleToFit;
+
+        private string mainTextureProperty = DefaultMainTextureProperty;
+        private string greyscaleToggleProperty = DefaultGreyscaleToggleProperty;
+
+        public GrayscaleImage()
+        {
+            scaleModeValue = ScaleMode.ScaleToFit;
+        }
+
+        public Sprite SpriteProperty
+        {
+            get => sprite;
+            set
+            {
+                if (sprite == value)
+                {
+                    return;
+                }
+
+                sprite = value;
+                if (value != null)
+                {
+                    texture = null;
+                }
+                MarkDirtyRepaint();
+            }
+        }
+
+        public Texture TextureProperty
+        {
+            get => texture;
+            set
+            {
+                if (texture == value)
+                {
+                    return;
+                }
+
+                texture = value;
+                if (value != null)
+                {
+                    sprite = null;
+                }
+
+                ApplyShaderProperties();
+                MarkDirtyRepaint();
+            }
+        }
+
+        public ScaleMode scaleMode
+        {
+            get => scaleModeValue;
+            set
+            {
+                if (scaleModeValue == value)
+                {
+                    return;
+                }
+
+                scaleModeValue = value;
+                MarkDirtyRepaint();
+            }
+        }
+
+        public Material Material
+        {
+            get => material;
+            set
+            {
+                if (material == value)
+                {
+                    return;
+                }
+
+                material = value;
+                ApplyShaderProperties();
+                MarkDirtyRepaint();
+            }
+        }
+
+        public bool GreyscaleEnabled
+        {
+            get => greyscaleEnabled;
+            set
+            {
+                if (greyscaleEnabled == value)
+                {
+                    return;
+                }
+
+                greyscaleEnabled = value;
+                ApplyShaderProperties();
+                MarkDirtyRepaint();
+            }
+        }
+
+        public string MainTextureProperty
+        {
+            get => mainTextureProperty;
+            set
+            {
+                if (mainTextureProperty == value)
+                {
+                    return;
+                }
+
+                mainTextureProperty = string.IsNullOrWhiteSpace(value) ? DefaultMainTextureProperty : value;
+                ApplyShaderProperties();
+                MarkDirtyRepaint();
+            }
+        }
+
+        public string GreyscaleToggleProperty
+        {
+            get => greyscaleToggleProperty;
+            set
+            {
+                if (greyscaleToggleProperty == value)
+                {
+                    return;
+                }
+
+                greyscaleToggleProperty = string.IsNullOrWhiteSpace(value) ? DefaultGreyscaleToggleProperty : value;
+                ApplyShaderProperties();
+                MarkDirtyRepaint();
+            }
+        }
+
+        private void ApplyShaderProperties()
+        {
+            if (material == null)
+            {
+                return;
+            }
+
+            var tex = texture != null ? texture : (sprite != null ? sprite.texture : null);
+            if (tex != null)
+            {
+                material.SetTexture(mainTextureProperty, tex);
+            }
+
+            material.SetFloat(greyscaleToggleProperty, greyscaleEnabled ? 1f : 0f);
+        }
+
+        protected override void ImmediateRepaint()
+        {
+            if (sprite == null && texture == null)
+            {
+                return;
+            }
+
+            var activeTexture = texture != null ? texture : sprite.texture;
+            if (activeTexture == null)
+            {
+                return;
+            }
+
+            var w = contentRect.width;
+            var h = contentRect.height;
+            if (w <= 0f || h <= 0f)
+            {
+                return;
+            }
+
+            ApplyShaderProperties();
+
+            var destRect = new Rect(0f, 0f, w, h);
+
+            Rect uvRect;
+            float sourceAspect;
+
+            if (sprite != null)
+            {
+                var tr = sprite.textureRect;
+                if (tr.width <= 0f || tr.height <= 0f)
+                {
+                    return;
+                }
+
+                uvRect = new Rect(
+                    tr.xMin / activeTexture.width,
+                    tr.yMin / activeTexture.height,
+                    tr.width / activeTexture.width,
+                    tr.height / activeTexture.height);
+
+                sourceAspect = tr.width / tr.height;
+            }
+            else
+            {
+                uvRect = new Rect(0f, 0f, 1f, 1f);
+                sourceAspect = activeTexture.width / (float)activeTexture.height;
+            }
+
+            var elementAspect = destRect.width / destRect.height;
+
+            if (scaleMode == ScaleMode.ScaleAndCrop)
+            {
+                if (sourceAspect > elementAspect)
+                {
+                    var scale = elementAspect / sourceAspect;
+                    var newW = uvRect.width * scale;
+                    uvRect.x += (uvRect.width - newW) * 0.5f;
+                    uvRect.width = newW;
+                }
+                else
+                {
+                    var scale = sourceAspect / elementAspect;
+                    var newH = uvRect.height * scale;
+                    uvRect.y += (uvRect.height - newH) * 0.5f;
+                    uvRect.height = newH;
+                }
+            }
+            else if (scaleMode == ScaleMode.ScaleToFit)
+            {
+                if (sourceAspect > elementAspect)
+                {
+                    var drawH = destRect.width / sourceAspect;
+                    destRect.y += (destRect.height - drawH) * 0.5f;
+                    destRect.height = drawH;
+                }
+                else
+                {
+                    var drawW = destRect.height * sourceAspect;
+                    destRect.x += (destRect.width - drawW) * 0.5f;
+                    destRect.width = drawW;
+                }
+            }
+
+            Graphics.DrawTexture(destRect, activeTexture, uvRect, 0, 0, 0, 0, Color.white, material);
+        }
+    }
+}
diff --git a/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs.meta b/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs.meta
new file mode 100644
index 0000000..51f96f8
--- /dev/null
+++ b/Runtime/Controls/GrayscaleImage/GrayscaleImage.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 852da91a1f50bce41941d160ed13f4db
\ No newline at end of file
diff --git a/Runtime/Controls/IconLabelButton.meta b/Runtime/Controls/IconLabelButton.meta
new file mode 100644
index 0000000..1b20c17
--- /dev/null
+++ b/Runtime/Controls/IconLabelButton.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 7b7245698a3660340b63bd7923c0ac67
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/IconLabelButton/IconLabelButton.cs b/Runtime/Controls/IconLabelButton/IconLabelButton.cs
new file mode 100644
index 0000000..5577ee2
--- /dev/null
+++ b/Runtime/Controls/IconLabelButton/IconLabelButton.cs
@@ -0,0 +1,74 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A button with an icon on the left and a label filling the remaining space.
+    /// Interaction states (hover, pressed) are driven by USS classes.
+    /// </summary>
+    public class IconLabelButton : VisualElement
+    {
+        public const string RootClass = "iconLabelButton";
+        public const string ButtonClass = "iconLabelButton__button";
+        public const string IconClass = "iconLabelButton__icon";
+        public const string LabelClass = "iconLabelButton__label";
+        public const string HoverClass = "iconLabelButton--hover";
+        public const string PressedClass = "iconLabelButton--pressed";
+
+        public event Action Clicked;
+
+        private VisualElement button;
+        private VisualElement icon;
+        private Label label;
+
+        public IconLabelButton()
+        {
+            AddToClassList(RootClass);
+
+            button = UIToolkitExtensions.CreateVisualElement(this, ButtonClass);
+            icon = UIToolkitExtensions.CreateVisualElement(button, IconClass);
+            label = UIToolkitExtensions.CreateVisualElement<Label>(button, LabelClass);
+
+            button.RegisterCallback<ClickEvent>(OnClicked);
+            button.RegisterCallback<MouseEnterEvent>(OnMouseEnter);
+            button.RegisterCallback<MouseLeaveEvent>(OnMouseLeave);
+            button.RegisterCallback<MouseDownEvent>(OnMouseDown);
+            button.RegisterCallback<MouseUpEvent>(OnMouseUp);
+        }
+
+        public string Text
+        {
+            get => label.text;
+            set => label.text = value;
+        }
+
+        private void OnClicked(ClickEvent evt)
+        {
+            Clicked?.Invoke();
+        }
+
+        private void OnMouseEnter(MouseEnterEvent evt)
+        {
+            button.AddToClassList(HoverClass);
+        }
+
+        private void OnMouseLeave(MouseLeaveEvent evt)
+        {
+            button.RemoveFromClassList(HoverClass);
+            button.RemoveFromClassList(PressedClass);
+        }
+
+        private void OnMouseDown(MouseDownEvent evt)
+        {
+            button.AddToClassList(PressedClass);
+        }
+
+        private void OnMouseUp(MouseUpEvent evt)
+        {
+            button.RemoveFromClassList(PressedClass);
+        }
+    }
+}
diff --git a/Runtime/Controls/IconLabelButton/IconLabelButton.cs.meta b/Runtime/Controls/IconLabelButton/IconLabelButton.cs.meta
new file mode 100644
index 0000000..0b4cb5b
--- /dev/null
+++ b/Runtime/Controls/IconLabelButton/IconLabelButton.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: bdd67fe9176504548af9b6412b13f97b
\ No newline at end of file
diff --git a/Runtime/Controls/ImageCropOverlayControl.meta b/Runtime/Controls/ImageCropOverlayControl.meta
new file mode 100644
index 0000000..6d25d98
--- /dev/null
+++ b/Runtime/Controls/ImageCropOverlayControl.meta
@@ -0,0 +1,15 @@
+fileFormatVersion: 2
+guid: 8ec0e7d11d7b4763ae20a1c0e5f7d5c2
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: fileFormatVersion: 2
+guid: 8ec0e7d11d7b4763ae20a1c0e5f7d5c2
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
\ No newline at end of file
diff --git a/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs b/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs
new file mode 100644
index 0000000..7c86ef1
--- /dev/null
+++ b/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs
@@ -0,0 +1,659 @@
+/// Credit SimonDarksideJ
+
+using System;
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A full-screen modal image cropper that supports drag, pinch, and wheel zoom,
+    /// then exports the visible square selection to a new texture.
+    /// </summary>
+    public class ImageCropOverlayControl : VisualElement
+    {
+        private const float MinPinchDistancePx = 12f;
+
+        public const string RootClass = "imageCropOverlay";
+        public const string PanelClass = "imageCropOverlay__panel";
+        public const string HeaderClass = "imageCropOverlay__header";
+        public const string TitleClass = "imageCropOverlay__title";
+        public const string ViewportHostClass = "imageCropOverlay__viewportHost";
+        public const string ViewportClass = "imageCropOverlay__viewport";
+        public const string ImageClass = "imageCropOverlay__image";
+        public const string FooterClass = "imageCropOverlay__footer";
+        public const string ButtonSlotClass = "imageCropOverlay__buttonSlot";
+        public const string ButtonClass = "imageCropOverlay__button";
+        public const string ButtonCancelClass = "imageCropOverlay__button--cancel";
+        public const string ButtonSaveClass = "imageCropOverlay__button--save";
+
+        public static readonly Vector4 CircleCornerRadiusPercent = new(0.5f, 0.5f, 0.5f, 0.5f);
+
+        public sealed class Configuration
+        {
+            public string Title { get; set; } = "Move and Scale";
+            public string CancelLabel { get; set; } = "Cancel";
+            public string SaveLabel { get; set; } = "Save";
+            public int ExportSize { get; set; } = 512;
+            public float ScreenMarginPx { get; set; } = 48f;
+            public float MaxViewportWidthRatio { get; set; } = 0.9f;
+            public float MaxZoom { get; set; } = 4f;
+            public Vector4 CornerRadiusPercent { get; set; } = CircleCornerRadiusPercent;
+        }
+
+        private readonly Texture2D sourceTexture;
+        private readonly Configuration configuration;
+        private readonly Action<Texture2D> onConfirmed;
+        private readonly Action onCancelled;
+        private readonly VisualElement modalPanel;
+        private readonly VisualElement header;
+        private readonly Label titleLabel;
+        private readonly VisualElement viewportHost;
+        private readonly VisualElement cropViewport;
+        private readonly VisualElement imageElement;
+        private readonly VisualElement footer;
+        private readonly VisualElement cancelButtonSlot;
+        private readonly VisualElement saveButtonSlot;
+        private readonly PillButton cancelButton;
+        private readonly PillButton saveButton;
+        private readonly Dictionary<int, Vector2> activePointers = new();
+
+        private float viewportSizePx;
+        private Vector2 baseDisplaySizePx;
+        private Vector2 currentOffsetPx;
+        private float currentZoom = 1f;
+        private int panPointerId = -1;
+        private Vector2 panStartPointerPosition;
+        private Vector2 panStartOffsetPx;
+        private int pinchPointerIdA = -1;
+        private int pinchPointerIdB = -1;
+        private float pinchStartDistancePx;
+        private float pinchStartZoom;
+        private Vector2 pinchAnchorNormalized;
+
+        public static ImageCropOverlayControl Show(
+            VisualElement anchor,
+            Texture2D sourceTexture,
+            Configuration configuration,
+            Action<Texture2D> onConfirmed,
+            Action onCancelled = null)
+        {
+            if (anchor?.panel?.visualTree == null || sourceTexture == null)
+            {
+                return null;
+            }
+
+            VisualElement root = anchor.panel.visualTree;
+            VisualElement existingOverlay = null;
+            foreach (VisualElement child in root.Children())
+            {
+                if (child.ClassListContains(RootClass))
+                {
+                    existingOverlay = child;
+                    break;
+                }
+            }
+
+            existingOverlay?.RemoveFromHierarchy();
+
+            var overlay = new ImageCropOverlayControl(sourceTexture, configuration, onConfirmed, onCancelled);
+            root.Add(overlay);
+            overlay.BringToFront();
+            return overlay;
+        }
+
+        public static Vector4 CreateUniformCornerRadiusPercent(float percent)
+        {
+            float clampedPercent = Mathf.Clamp(percent, 0f, 0.5f);
+            return new Vector4(clampedPercent, clampedPercent, clampedPercent, clampedPercent);
+        }
+
+        public static Vector4 ResolveNormalizedCornerRadiusPercent(VisualElement sourceElement, Vector4 fallback)
+        {
+            if (sourceElement == null)
+            {
+                return SanitizeCornerRadiusPercent(fallback);
+            }
+
+            float width = sourceElement.resolvedStyle.width;
+            if (width <= 0f)
+            {
+                width = sourceElement.layout.width > 0f ? sourceElement.layout.width : sourceElement.contentRect.width;
+            }
+
+            float height = sourceElement.resolvedStyle.height;
+            if (height <= 0f)
+            {
+                height = sourceElement.layout.height > 0f ? sourceElement.layout.height : sourceElement.contentRect.height;
+            }
+
+            float baseDimension = Mathf.Max(1f, Mathf.Min(width, height));
+            if (baseDimension <= 0f)
+            {
+                return SanitizeCornerRadiusPercent(fallback);
+            }
+
+            return SanitizeCornerRadiusPercent(new Vector4(
+                sourceElement.resolvedStyle.borderTopLeftRadius / baseDimension,
+                sourceElement.resolvedStyle.borderTopRightRadius / baseDimension,
+                sourceElement.resolvedStyle.borderBottomRightRadius / baseDimension,
+                sourceElement.resolvedStyle.borderBottomLeftRadius / baseDimension));
+        }
+
+        private ImageCropOverlayControl(
+            Texture2D sourceTexture,
+            Configuration configuration,
+            Action<Texture2D> onConfirmed,
+            Action onCancelled)
+        {
+            this.sourceTexture = sourceTexture;
+            this.configuration = configuration ?? new Configuration();
+            this.onConfirmed = onConfirmed;
+            this.onCancelled = onCancelled;
+
+            AddToClassList(RootClass);
+            pickingMode = PickingMode.Position;
+            style.position = Position.Absolute;
+            style.left = 0f;
+            style.top = 0f;
+            style.right = 0f;
+            style.bottom = 0f;
+            style.paddingLeft = this.configuration.ScreenMarginPx;
+            style.paddingRight = this.configuration.ScreenMarginPx;
+            style.paddingTop = this.configuration.ScreenMarginPx;
+            style.paddingBottom = this.configuration.ScreenMarginPx;
+            RegisterCallback<DetachFromPanelEvent>(OnDetachFromPanel);
+
+            modalPanel = UIToolkitExtensions.CreateVisualElement(this, PanelClass);
+            modalPanel.RegisterCallback<GeometryChangedEvent>(OnLayoutGeometryChanged);
+            modalPanel.RegisterCallback<ClickEvent>(evt => evt.StopPropagation());
+
+            header = UIToolkitExtensions.CreateVisualElement(modalPanel, HeaderClass);
+            header.RegisterCallback<GeometryChangedEvent>(OnLayoutGeometryChanged);
+
+            titleLabel = UIToolkitExtensions.CreateVisualElement<Label>(header, TitleClass);
+            titleLabel.text = string.IsNullOrWhiteSpace(this.configuration.Title) ? "Move and Scale" : this.configuration.Title;
+
+            viewportHost = UIToolkitExtensions.CreateVisualElement(modalPanel, ViewportHostClass);
+
+            cropViewport = UIToolkitExtensions.CreateVisualElement(viewportHost, ViewportClass);
+            cropViewport.pickingMode = PickingMode.Position;
+            cropViewport.RegisterCallback<PointerDownEvent>(OnPointerDown, TrickleDown.TrickleDown);
+            cropViewport.RegisterCallback<PointerMoveEvent>(OnPointerMove, TrickleDown.TrickleDown);
+            cropViewport.RegisterCallback<PointerUpEvent>(OnPointerUp, TrickleDown.TrickleDown);
+            cropViewport.RegisterCallback<PointerCancelEvent>(OnPointerCancel, TrickleDown.TrickleDown);
+            cropViewport.RegisterCallback<PointerCaptureOutEvent>(OnPointerCaptureOut);
+            cropViewport.RegisterCallback<WheelEvent>(OnWheel, TrickleDown.TrickleDown);
+
+            imageElement = UIToolkitExtensions.CreateVisualElement(cropViewport, ImageClass);
+            imageElement.style.backgroundImage = new StyleBackground(sourceTexture);
+
+            footer = UIToolkitExtensions.CreateVisualElement(modalPanel, FooterClass);
+            footer.RegisterCallback<GeometryChangedEvent>(OnLayoutGeometryChanged);
+
+            cancelButtonSlot = UIToolkitExtensions.CreateVisualElement(footer, ButtonSlotClass);
+            cancelButton = UIToolkitExtensions.CreateVisualElement<PillButton>(cancelButtonSlot, ButtonClass, ButtonCancelClass);
+            cancelButton.Text = this.configuration.CancelLabel ?? "Cancel";
+            cancelButton.SetInnerColor("#485164");
+            cancelButton.SetOuterColor("#5C667A");
+            cancelButton.SetTextColor(Color.white);
+            cancelButton.Clicked += OnCancelButtonClicked;
+
+            saveButtonSlot = UIToolkitExtensions.CreateVisualElement(footer, ButtonSlotClass);
+            saveButton = UIToolkitExtensions.CreateVisualElement<PillButton>(saveButtonSlot, ButtonClass, ButtonSaveClass);
+            saveButton.Text = this.configuration.SaveLabel ?? "Save";
+            saveButton.SetInnerColor("#4A90E2");
+            saveButton.SetOuterColor("#7B68EE");
+            saveButton.SetTextColor(Color.white);
+            saveButton.Clicked += OnSaveButtonClicked;
+        }
+
+        private void OnDetachFromPanel(DetachFromPanelEvent evt)
+        {
+            var pointerIds = new List<int>(activePointers.Keys);
+            foreach (int pointerId in pointerIds)
+            {
+                if (cropViewport.HasPointerCapture(pointerId))
+                {
+                    cropViewport.ReleasePointer(pointerId);
+                }
+            }
+
+            activePointers.Clear();
+            panPointerId = -1;
+            pinchPointerIdA = -1;
+            pinchPointerIdB = -1;
+        }
+
+        private void OnLayoutGeometryChanged(GeometryChangedEvent evt)
+        {
+            float availableWidth = Mathf.Max(0f, modalPanel.contentRect.width);
+            float headerHeight = header.layout.height > 0f ? header.layout.height : header.resolvedStyle.height;
+            float footerHeight = footer.layout.height > 0f ? footer.layout.height : footer.resolvedStyle.height;
+            float availableHeight = Mathf.Max(0f, modalPanel.contentRect.height - headerHeight - footerHeight);
+            if (availableWidth <= 0f || availableHeight <= 0f || sourceTexture == null)
+            {
+                return;
+            }
+
+            float fullOverlayWidth = worldBound.width > 0f ? worldBound.width : availableWidth;
+            float maxWidthByRatio = Mathf.Min(availableWidth, fullOverlayWidth * configuration.MaxViewportWidthRatio);
+            float targetViewportSize = Mathf.Min(maxWidthByRatio, availableHeight);
+            if (targetViewportSize <= 0f)
+            {
+                return;
+            }
+
+            viewportSizePx = targetViewportSize;
+            cropViewport.style.width = viewportSizePx;
+            cropViewport.style.height = viewportSizePx;
+
+            float scaleToCover = Mathf.Max(
+                viewportSizePx / Mathf.Max(1f, sourceTexture.width),
+                viewportSizePx / Mathf.Max(1f, sourceTexture.height));
+            baseDisplaySizePx = new Vector2(sourceTexture.width * scaleToCover, sourceTexture.height * scaleToCover);
+            currentOffsetPx = ClampOffset(currentOffsetPx, currentZoom);
+            ApplyViewportMask();
+            ApplyImageTransform(currentZoom, currentOffsetPx);
+        }
+
+        private void ApplyViewportMask()
+        {
+            if (viewportSizePx <= 0f)
+            {
+                return;
+            }
+
+            Vector4 normalizedRadius = SanitizeCornerRadiusPercent(configuration.CornerRadiusPercent);
+            cropViewport.style.borderTopLeftRadius = viewportSizePx * normalizedRadius.x;
+            cropViewport.style.borderTopRightRadius = viewportSizePx * normalizedRadius.y;
+            cropViewport.style.borderBottomRightRadius = viewportSizePx * normalizedRadius.z;
+            cropViewport.style.borderBottomLeftRadius = viewportSizePx * normalizedRadius.w;
+        }
+
+        private void OnPointerDown(PointerDownEvent evt)
+        {
+            if (!ShouldHandlePointer(evt))
+            {
+                return;
+            }
+
+            activePointers[evt.pointerId] = ToVector2(evt.localPosition);
+            cropViewport.CapturePointer(evt.pointerId);
+
+            if (activePointers.Count == 1)
+            {
+                StartPan(evt.pointerId);
+            }
+            else if (activePointers.Count == 2)
+            {
+                StartPinchGesture();
+            }
+
+            evt.StopImmediatePropagation();
+        }
+
+        private void OnPointerMove(PointerMoveEvent evt)
+        {
+            if (!activePointers.ContainsKey(evt.pointerId) || viewportSizePx <= 0f)
+            {
+                return;
+            }
+
+            Vector2 localPosition = ToVector2(evt.localPosition);
+            activePointers[evt.pointerId] = localPosition;
+
+            if (HasActivePinch())
+            {
+                UpdatePinchGesture();
+                evt.StopImmediatePropagation();
+                return;
+            }
+
+            if (activePointers.Count == 1 && evt.pointerId == panPointerId)
+            {
+                Vector2 delta = localPosition - panStartPointerPosition;
+                ApplyImageTransform(currentZoom, panStartOffsetPx + delta);
+                evt.StopImmediatePropagation();
+            }
+        }
+
+        private void OnPointerUp(PointerUpEvent evt)
+        {
+            CompletePointer(evt.pointerId);
+            evt.StopImmediatePropagation();
+        }
+
+        private void OnPointerCancel(PointerCancelEvent evt)
+        {
+            CompletePointer(evt.pointerId);
+            evt.StopImmediatePropagation();
+        }
+
+        private void OnPointerCaptureOut(PointerCaptureOutEvent evt)
+        {
+            CompletePointer(evt.pointerId);
+        }
+
+        private void CompletePointer(int pointerId)
+        {
+            if (!activePointers.Remove(pointerId))
+            {
+                return;
+            }
+
+            if (cropViewport.HasPointerCapture(pointerId))
+            {
+                cropViewport.ReleasePointer(pointerId);
+            }
+
+            if (pointerId == pinchPointerIdA || pointerId == pinchPointerIdB)
+            {
+                pinchPointerIdA = -1;
+                pinchPointerIdB = -1;
+            }
+
+            if (activePointers.Count >= 2)
+            {
+                StartPinchGesture();
+            }
+            else if (activePointers.Count == 1)
+            {
+                foreach (KeyValuePair<int, Vector2> activePointer in activePointers)
+                {
+                    StartPan(activePointer.Key);
+                    break;
+                }
+            }
+            else
+            {
+                panPointerId = -1;
+            }
+        }
+
+        private void OnWheel(WheelEvent evt)
+        {
+            if (viewportSizePx <= 0f)
+            {
+                return;
+            }
+
+            float step = evt.delta.y > 0f ? 0.9f : 1.1f;
+            float newZoom = Mathf.Clamp(currentZoom * step, 1f, Mathf.Max(1f, configuration.MaxZoom));
+            SetZoomAroundAnchor(newZoom, ToVector2(evt.localMousePosition));
+            evt.StopImmediatePropagation();
+        }
+
+        private bool ShouldHandlePointer(IPointerEvent evt)
+        {
+            if (sourceTexture == null)
+            {
+                return false;
+            }
+
+            if (evt.pointerType == PointerType.mouse && evt.button != 0)
+            {
+                return false;
+            }
+
+            return activePointers.Count < 2 || activePointers.ContainsKey(evt.pointerId);
+        }
+
+        private void StartPan(int pointerId)
+        {
+            if (!activePointers.TryGetValue(pointerId, out Vector2 startPosition))
+            {
+                return;
+            }
+
+            panPointerId = pointerId;
+            panStartPointerPosition = startPosition;
+            panStartOffsetPx = currentOffsetPx;
+        }
+
+        private void StartPinchGesture()
+        {
+            if (activePointers.Count < 2)
+            {
+                return;
+            }
+
+            using var enumerator = activePointers.GetEnumerator();
+            enumerator.MoveNext();
+            KeyValuePair<int, Vector2> firstPointer = enumerator.Current;
+            enumerator.MoveNext();
+            KeyValuePair<int, Vector2> secondPointer = enumerator.Current;
+
+            pinchPointerIdA = firstPointer.Key;
+            pinchPointerIdB = secondPointer.Key;
+            panPointerId = -1;
+            Vector2 pinchStartCenterPx = (firstPointer.Value + secondPointer.Value) * 0.5f;
+            pinchStartDistancePx = Vector2.Distance(firstPointer.Value, secondPointer.Value);
+            pinchStartDistancePx = Mathf.Max(pinchStartDistancePx, MinPinchDistancePx);
+            pinchStartZoom = currentZoom;
+            pinchAnchorNormalized = GetNormalizedPointWithinImage(pinchStartCenterPx, currentZoom, currentOffsetPx);
+        }
+
+        private bool HasActivePinch()
+        {
+            return pinchPointerIdA != -1
+                && pinchPointerIdB != -1
+                && activePointers.ContainsKey(pinchPointerIdA)
+                && activePointers.ContainsKey(pinchPointerIdB);
+        }
+
+        private void UpdatePinchGesture()
+        {
+            if (!HasActivePinch())
+            {
+                return;
+            }
+
+            Vector2 pointerA = activePointers[pinchPointerIdA];
+            Vector2 pointerB = activePointers[pinchPointerIdB];
+            float currentDistance = Mathf.Max(Vector2.Distance(pointerA, pointerB), MinPinchDistancePx);
+            float newZoom = Mathf.Clamp(
+                pinchStartZoom * (currentDistance / pinchStartDistancePx),
+                1f,
+                Mathf.Max(1f, configuration.MaxZoom));
+            Vector2 currentCenter = (pointerA + pointerB) * 0.5f;
+            Vector2 newOffset = ComputeOffsetForAnchor(newZoom, currentCenter, pinchAnchorNormalized);
+            ApplyImageTransform(newZoom, newOffset);
+        }
+
+        private void SetZoomAroundAnchor(float zoom, Vector2 anchorViewportPosition)
+        {
+            Vector2 anchorNormalized = GetNormalizedPointWithinImage(anchorViewportPosition, currentZoom, currentOffsetPx);
+            Vector2 newOffset = ComputeOffsetForAnchor(zoom, anchorViewportPosition, anchorNormalized);
+            ApplyImageTransform(zoom, newOffset);
+        }
+
+        private Vector2 ComputeOffsetForAnchor(float zoom, Vector2 anchorViewportPosition, Vector2 normalizedImagePoint)
+        {
+            Vector2 displaySize = GetDisplaySize(zoom);
+            Vector2 newTopLeft = anchorViewportPosition - Vector2.Scale(normalizedImagePoint, displaySize);
+            Vector2 viewportCenter = GetViewportCenter();
+            Vector2 newOffset = newTopLeft + (displaySize * 0.5f) - viewportCenter;
+            return ClampOffset(newOffset, zoom);
+        }
+
+        private Vector2 GetNormalizedPointWithinImage(Vector2 viewportPosition, float zoom, Vector2 offset)
+        {
+            Rect imageRect = GetImageRect(zoom, offset);
+            if (imageRect.width <= 0f || imageRect.height <= 0f)
+            {
+                return new Vector2(0.5f, 0.5f);
+            }
+
+            return new Vector2(
+                Mathf.Clamp01((viewportPosition.x - imageRect.xMin) / imageRect.width),
+                Mathf.Clamp01((viewportPosition.y - imageRect.yMin) / imageRect.height));
+        }
+
+        private void ApplyImageTransform(float zoom, Vector2 offset)
+        {
+            currentZoom = Mathf.Clamp(zoom, 1f, Mathf.Max(1f, configuration.MaxZoom));
+            currentOffsetPx = ClampOffset(offset, currentZoom);
+
+            Rect imageRect = GetImageRect(currentZoom, currentOffsetPx);
+            imageElement.style.left = imageRect.xMin;
+            imageElement.style.top = imageRect.yMin;
+            imageElement.style.width = imageRect.width;
+            imageElement.style.height = imageRect.height;
+        }
+
+        private Rect GetImageRect(float zoom, Vector2 offset)
+        {
+            Vector2 displaySize = GetDisplaySize(zoom);
+            Vector2 center = GetViewportCenter() + offset;
+            Vector2 topLeft = center - (displaySize * 0.5f);
+            return new Rect(topLeft, displaySize);
+        }
+
+        private Vector2 GetDisplaySize(float zoom)
+        {
+            return baseDisplaySizePx * Mathf.Max(1f, zoom);
+        }
+
+        private Vector2 GetViewportCenter()
+        {
+            return new Vector2(viewportSizePx * 0.5f, viewportSizePx * 0.5f);
+        }
+
+        private Vector2 ClampOffset(Vector2 offset, float zoom)
+        {
+            if (viewportSizePx <= 0f)
+            {
+                return Vector2.zero;
+            }
+
+            Vector2 displaySize = GetDisplaySize(zoom);
+            float maxOffsetX = Mathf.Max(0f, (displaySize.x - viewportSizePx) * 0.5f);
+            float maxOffsetY = Mathf.Max(0f, (displaySize.y - viewportSizePx) * 0.5f);
+            return new Vector2(
+                Mathf.Clamp(offset.x, -maxOffsetX, maxOffsetX),
+                Mathf.Clamp(offset.y, -maxOffsetY, maxOffsetY));
+        }
+
+        private static Vector2 ToVector2(Vector3 value)
+        {
+            return new Vector2(value.x, value.y);
+        }
+
+        private static Vector4 SanitizeCornerRadiusPercent(Vector4 cornerRadiusPercent)
+        {
+            return new Vector4(
+                Mathf.Clamp(cornerRadiusPercent.x, 0f, 0.5f),
+                Mathf.Clamp(cornerRadiusPercent.y, 0f, 0.5f),
+                Mathf.Clamp(cornerRadiusPercent.z, 0f, 0.5f),
+                Mathf.Clamp(cornerRadiusPercent.w, 0f, 0.5f));
+        }
+
+        private void OnCancelButtonClicked()
+        {
+            CloseOverlay();
+            onCancelled?.Invoke();
+        }
+
+        private void OnSaveButtonClicked()
+        {
+            try
+            {
+                Texture2D croppedTexture = CreateCroppedTexture();
+                CloseOverlay();
+                onConfirmed?.Invoke(croppedTexture);
+            }
+            catch (Exception ex)
+            {
+                Debug.LogException(ex);
+            }
+        }
+
+        private Texture2D CreateCroppedTexture()
+        {
+            if (sourceTexture == null)
+            {
+                throw new InvalidOperationException("Cannot crop a null texture.");
+            }
+
+            int exportSize = Mathf.Max(1, configuration.ExportSize);
+            var croppedTexture = new Texture2D(exportSize, exportSize, TextureFormat.RGBA32, false);
+            var pixels = new Color[exportSize * exportSize];
+            Rect imageRect = GetImageRect(currentZoom, currentOffsetPx);
+            Texture2D samplingTexture = sourceTexture;
+            bool destroySamplingTexture = false;
+
+            if (!sourceTexture.isReadable)
+            {
+                samplingTexture = CreateReadableCopy(sourceTexture);
+                destroySamplingTexture = samplingTexture != null && samplingTexture != sourceTexture;
+            }
+
+            if (samplingTexture == null)
+            {
+                throw new InvalidOperationException("Could not create a readable source texture for cropping.");
+            }
+
+            try
+            {
+                for (int y = 0; y < exportSize; y++)
+                {
+                    float viewportY = ((y + 0.5f) / exportSize) * viewportSizePx;
+                    int destinationRow = exportSize - 1 - y;
+                    for (int x = 0; x < exportSize; x++)
+                    {
+                        float viewportX = ((x + 0.5f) / exportSize) * viewportSizePx;
+                        float u = Mathf.Clamp01((viewportX - imageRect.xMin) / imageRect.width);
+                        float normalizedTop = Mathf.Clamp01((viewportY - imageRect.yMin) / imageRect.height);
+                        float v = 1f - normalizedTop;
+                        pixels[(destinationRow * exportSize) + x] = samplingTexture.GetPixelBilinear(u, v);
+                    }
+                }
+            }
+            finally
+            {
+                if (destroySamplingTexture)
+                {
+                    UnityEngine.Object.Destroy(samplingTexture);
+                }
+            }
+
+            croppedTexture.SetPixels(pixels);
+            croppedTexture.Apply(updateMipmaps: false, makeNoLongerReadable: false);
+            return croppedTexture;
+        }
+
+        private static Texture2D CreateReadableCopy(Texture2D texture)
+        {
+            if (texture == null)
+            {
+                return null;
+            }
+
+            RenderTexture temporaryTexture = RenderTexture.GetTemporary(texture.width, texture.height, 0, RenderTextureFormat.ARGB32);
+            RenderTexture previousActiveTexture = RenderTexture.active;
+
+            try
+            {
+                Graphics.Blit(texture, temporaryTexture);
+                RenderTexture.active = temporaryTexture;
+
+                var readableTexture = new Texture2D(texture.width, texture.height, TextureFormat.RGBA32, false);
+                readableTexture.ReadPixels(new Rect(0f, 0f, temporaryTexture.width, temporaryTexture.height), 0, 0);
+                readableTexture.Apply(updateMipmaps: false, makeNoLongerReadable: false);
+                return readableTexture;
+            }
+            finally
+            {
+                RenderTexture.active = previousActiveTexture;
+                RenderTexture.ReleaseTemporary(temporaryTexture);
+            }
+        }
+
+        private void CloseOverlay()
+        {
+            RemoveFromHierarchy();
+        }
+    }
+}
\ No newline at end of file
diff --git a/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs.meta b/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs.meta
new file mode 100644
index 0000000..62f18fc
--- /dev/null
+++ b/Runtime/Controls/ImageCropOverlayControl/ImageCropOverlayControl.cs.meta
@@ -0,0 +1,3 @@
+fileFormatVersion: 2
+guid: 6d1d8c1dbdd0411d8c7cdd6d2f048d4efileFormatVersion: 2
+guid: 6d1d8c1dbdd0411d8c7cdd6d2f048d4e
\ No newline at end of file
diff --git a/Runtime/Controls/LoadingIcon.meta b/Runtime/Controls/LoadingIcon.meta
new file mode 100644
index 0000000..b125eaa
--- /dev/null
+++ b/Runtime/Controls/LoadingIcon.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: f25e87a017c2d1542861951e6ce17319
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/LoadingIcon/LoadingIcon.cs b/Runtime/Controls/LoadingIcon/LoadingIcon.cs
new file mode 100644
index 0000000..e149b66
--- /dev/null
+++ b/Runtime/Controls/LoadingIcon/LoadingIcon.cs
@@ -0,0 +1,94 @@
+/// Credit SimonDarksideJ
+
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A rotating loading spinner. Rotation is driven by a scheduled update;
+    /// visibility and fade are driven by USS classes.
+    /// </summary>
+    public class LoadingIcon : VisualElement
+    {
+        public const string RootClass = "loadingIcon";
+        public const string LoadingImageClass = "loadingIcon__image";
+        public const string AnimatingClass = "loadingIcon--animating";
+        public const string VisibleClass = "loadingIcon--visible";
+
+        private readonly Image loadingImage;
+        private float rotationSpeed = 1f;
+        private bool isAnimating;
+        private IVisualElementScheduledItem animationScheduledItem;
+
+        public LoadingIcon()
+        {
+            pickingMode = PickingMode.Ignore;
+            AddToClassList(RootClass);
+
+            loadingImage = UIToolkitExtensions.CreateVisualElement<Image>(this, LoadingImageClass);
+            loadingImage.pickingMode = PickingMode.Ignore;
+        }
+
+        public void SetIcon(Texture2D texture)
+        {
+            if (texture != null)
+            {
+                loadingImage.image = texture;
+            }
+        }
+
+        /// <param name="customSpeed">Duration of one full rotation in seconds.</param>
+        /// <param name="blockInteraction">When true, this element captures pointer events.</param>
+        public void PlayLoading(float customSpeed = 1f, bool blockInteraction = false)
+        {
+            if (isAnimating)
+            {
+                return;
+            }
+
+            rotationSpeed = Mathf.Max(0.1f, customSpeed);
+            isAnimating = true;
+            AddToClassList(AnimatingClass);
+            AddToClassList(VisibleClass);
+
+            pickingMode = blockInteraction ? PickingMode.Position : PickingMode.Ignore;
+
+            AnimateRotation();
+        }
+
+        public void StopLoading()
+        {
+            isAnimating = false;
+            RemoveFromClassList(AnimatingClass);
+            RemoveFromClassList(VisibleClass);
+
+            animationScheduledItem?.Pause();
+            animationScheduledItem = null;
+
+            loadingImage.style.rotate = new Rotate(new Angle(0f, AngleUnit.Degree));
+
+            pickingMode = PickingMode.Ignore;
+        }
+
+        private void AnimateRotation()
+        {
+            animationScheduledItem?.Pause();
+
+            float degreesPerMs = 360f / (rotationSpeed * 1000f);
+            float startTime = Time.realtimeSinceStartup * 1000f;
+
+            animationScheduledItem = schedule.Execute(() =>
+            {
+                if (!isAnimating)
+                {
+                    return;
+                }
+
+                float elapsed = (Time.realtimeSinceStartup * 1000f) - startTime;
+                float rotation = (elapsed * degreesPerMs) % 360f;
+                loadingImage.style.rotate = new Rotate(new Angle(rotation, AngleUnit.Degree));
+            }).Every(16);
+        }
+    }
+}
diff --git a/Runtime/Controls/LoadingIcon/LoadingIcon.cs.meta b/Runtime/Controls/LoadingIcon/LoadingIcon.cs.meta
new file mode 100644
index 0000000..c19ea4c
--- /dev/null
+++ b/Runtime/Controls/LoadingIcon/LoadingIcon.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: da7334cf7892f554d8fdb43ebf05575d
\ No newline at end of file
diff --git a/Runtime/Controls/PageDotIndicator.meta b/Runtime/Controls/PageDotIndicator.meta
new file mode 100644
index 0000000..39bd23e
--- /dev/null
+++ b/Runtime/Controls/PageDotIndicator.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: b00c14cd09b8f8d4796ac0c9240f4004
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs b/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs
new file mode 100644
index 0000000..d9fbdea
--- /dev/null
+++ b/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs
@@ -0,0 +1,106 @@
+/// Credit SimonDarksideJ
+
+using System.Collections.Generic;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A row of pagination dots where all dots up to and including the current page are marked completed.
+    /// Colors can be driven by USS classes or overridden inline via <see cref="SetColors"/>.
+    /// </summary>
+    public class PageDotIndicator : VisualElement
+    {
+        public const string RootClass = "pageDotIndicator";
+        public const string DotsContainerClass = "pageDotIndicator__dotsContainer";
+        public const string DotClass = "pageDotIndicator__dot";
+        public const string DotCompletedClass = "pageDotIndicator__dot--completed";
+
+        private readonly VisualElement dotsContainer;
+        private readonly List<VisualElement> dots = new();
+
+        private string completedColorHex = "#FFFFFF";
+        private string pendingColorHex = "#CCCCCC";
+        private int currentPage;
+        private int totalPages = 1;
+        private bool overrideColors;
+
+        public PageDotIndicator()
+        {
+            AddToClassList(RootClass);
+            dotsContainer = UIToolkitExtensions.CreateVisualElement(this, DotsContainerClass);
+        }
+
+        public int CurrentPage => currentPage;
+        public int TotalPages => totalPages;
+        public float NormalizedProgress => totalPages > 0 ? (float)(currentPage + 1) / totalPages : 0f;
+
+        public void SetProgress(int currentPage, int totalPages)
+        {
+            if (totalPages <= 0)
+            {
+                Debug.LogWarning("[PageDotIndicator] totalPages must be greater than 0.");
+                totalPages = 1;
+            }
+
+            this.currentPage = Mathf.Clamp(currentPage, 0, totalPages - 1);
+            this.totalPages = totalPages;
+
+            UpdateDots();
+        }
+
+        public void SetCompletedColor(string colorHex)
+        {
+            completedColorHex = colorHex;
+            overrideColors = true;
+            UpdateDots();
+        }
+
+        public void SetPendingColor(string colorHex)
+        {
+            pendingColorHex = colorHex;
+            overrideColors = true;
+            UpdateDots();
+        }
+
+        public void SetColors(string completedColorHex, string pendingColorHex)
+        {
+            this.completedColorHex = completedColorHex;
+            this.pendingColorHex = pendingColorHex;
+            overrideColors = true;
+            UpdateDots();
+        }
+
+        private void UpdateDots()
+        {
+            if (dots.Count != totalPages)
+            {
+                dotsContainer.Clear();
+                dots.Clear();
+
+                for (int i = 0; i < totalPages; i++)
+                {
+                    var dot = UIToolkitExtensions.CreateVisualElement(dotsContainer, DotClass);
+                    dots.Add(dot);
+                }
+            }
+
+            for (int i = 0; i < dots.Count; i++)
+            {
+                bool isCompleted = i <= currentPage;
+                dots[i].EnableInClassList(DotCompletedClass, isCompleted);
+
+                if (overrideColors)
+                {
+                    dots[i].style.backgroundColor = ParseColor(isCompleted ? completedColorHex : pendingColorHex);
+                }
+            }
+        }
+
+        private static Color ParseColor(string colorHex)
+        {
+            return ColorUtility.TryParseHtmlString(colorHex, out Color color) ? color : Color.white;
+        }
+    }
+}
diff --git a/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs.meta b/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs.meta
new file mode 100644
index 0000000..52f7bf5
--- /dev/null
+++ b/Runtime/Controls/PageDotIndicator/PageDotIndicator.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 74bcfe9b9ada31a40bf220379775b322
\ No newline at end of file
diff --git a/Runtime/Controls/PillButton.meta b/Runtime/Controls/PillButton.meta
new file mode 100644
index 0000000..636677d
--- /dev/null
+++ b/Runtime/Controls/PillButton.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 9ba4f50e964543f41a97ddfd50e0d20e
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/PillButton/PillButton.cs b/Runtime/Controls/PillButton/PillButton.cs
new file mode 100644
index 0000000..c1da65a
--- /dev/null
+++ b/Runtime/Controls/PillButton/PillButton.cs
@@ -0,0 +1,147 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A pill-shaped button with a horizontal gradient background driven by two hex colors,
+    /// a brief flash feedback animation on click, and a centered text label.
+    /// </summary>
+    public class PillButton : VisualElement
+    {
+        public const string RootClass = "pillButton";
+        public const string BackgroundClass = "pillButton__background";
+        public const string FlashClass = "pillButton__flash";
+        public const string FlashActiveClass = "pillButton__flash--active";
+        public const string LabelClass = "pillButton__label";
+
+        private const int FlashDurationMs = 180;
+        private const int GradientTextureWidth = 256;
+
+        private readonly VisualElement background;
+        private readonly VisualElement flashOverlay;
+        private readonly Label label;
+        private string innerColorHex = "#FFFFFF";
+        private string outerColorHex = "#FFFFFF";
+        private Texture2D backgroundTexture;
+        private IVisualElementScheduledItem flashStartTimer;
+        private IVisualElementScheduledItem flashClearTimer;
+
+        public event Action Clicked;
+
+        public PillButton()
+        {
+            AddToClassList(RootClass);
+
+            background = UIToolkitExtensions.CreateVisualElement(this, BackgroundClass);
+
+            flashOverlay = UIToolkitExtensions.CreateVisualElement(background, FlashClass);
+            flashOverlay.pickingMode = PickingMode.Ignore;
+
+            label = UIToolkitExtensions.CreateVisualElement<Label>(background, LabelClass);
+
+            background.RegisterCallback<ClickEvent>(OnClicked);
+            RegisterCallback<DetachFromPanelEvent>(OnDetachFromPanel);
+
+            UpdateGradientBackground();
+        }
+
+        /// <summary>Gets or sets the button label text.</summary>
+        public string Text
+        {
+            get => label.text;
+            set => label.text = value;
+        }
+
+        /// <summary>Sets the gradient start color (left side) from a hex string, e.g. "#4A90E2".</summary>
+        public void SetInnerColor(string colorHex)
+        {
+            innerColorHex = colorHex;
+            UpdateGradientBackground();
+        }
+
+        /// <summary>Sets the gradient end color (right side) from a hex string, e.g. "#7B68EE".</summary>
+        public void SetOuterColor(string colorHex)
+        {
+            outerColorHex = colorHex;
+            UpdateGradientBackground();
+        }
+
+        public void SetTextColor(Color color)
+        {
+            label.style.color = color;
+        }
+
+        public void SetFontSize(float fontSize)
+        {
+            label.style.fontSize = fontSize;
+        }
+
+        private void OnDetachFromPanel(DetachFromPanelEvent evt)
+        {
+            StopFlashTimers();
+            DestroyBackgroundTexture();
+        }
+
+        private void OnClicked(ClickEvent evt)
+        {
+            PlayFlash();
+            Clicked?.Invoke();
+        }
+
+        private void PlayFlash()
+        {
+            StopFlashTimers();
+            flashOverlay.RemoveFromClassList(FlashActiveClass);
+
+            flashStartTimer = flashOverlay.schedule.Execute(() =>
+            {
+                flashStartTimer = null;
+                flashOverlay.AddToClassList(FlashActiveClass);
+
+                flashClearTimer = flashOverlay.schedule.Execute(() =>
+                {
+                    flashClearTimer = null;
+                    flashOverlay.RemoveFromClassList(FlashActiveClass);
+                }).StartingIn(FlashDurationMs);
+            }).StartingIn(0);
+        }
+
+        private void StopFlashTimers()
+        {
+            flashStartTimer?.Pause();
+            flashStartTimer = null;
+
+            flashClearTimer?.Pause();
+            flashClearTimer = null;
+
+            flashOverlay.RemoveFromClassList(FlashActiveClass);
+        }
+
+        private void UpdateGradientBackground()
+        {
+            DestroyBackgroundTexture();
+            backgroundTexture = CreateGradientTexture();
+            background.style.backgroundImage = new StyleBackground(backgroundTexture);
+        }
+
+        private void DestroyBackgroundTexture()
+        {
+            if (backgroundTexture != null)
+            {
+                UnityEngine.Object.Destroy(backgroundTexture);
+                backgroundTexture = null;
+            }
+        }
+
+        private Texture2D CreateGradientTexture()
+        {
+            Color innerColor = ColorUtility.TryParseHtmlString(innerColorHex, out Color parsedInner) ? parsedInner : Color.white;
+            Color outerColor = ColorUtility.TryParseHtmlString(outerColorHex, out Color parsedOuter) ? parsedOuter : Color.white;
+            return ProceduralTextureUtility.CreateHorizontalGradient(innerColor, outerColor, GradientTextureWidth);
+        }
+    }
+}
diff --git a/Runtime/Controls/PillButton/PillButton.cs.meta b/Runtime/Controls/PillButton/PillButton.cs.meta
new file mode 100644
index 0000000..ec8e125
--- /dev/null
+++ b/Runtime/Controls/PillButton/PillButton.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 76064ded6c422c44e813769bf1bb1654
\ No newline at end of file
diff --git a/Runtime/Controls/PillInputField.meta b/Runtime/Controls/PillInputField.meta
new file mode 100644
index 0000000..d9469ba
--- /dev/null
+++ b/Runtime/Controls/PillInputField.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 936d16c0c7632164f9838dcf741d7f88
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/PillInputField/PillInputField.cs b/Runtime/Controls/PillInputField/PillInputField.cs
new file mode 100644
index 0000000..9312468
--- /dev/null
+++ b/Runtime/Controls/PillInputField/PillInputField.cs
@@ -0,0 +1,219 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    public class PillInputField : VisualElement
+    {
+        private const float FocusActivationDragThresholdPx = 8f;
+
+        public const string RootClass = "pillInputField";
+        public const string LabelClass = "pillInputField__label";
+        public const string InputClass = "pillInputField__input";
+        public const string InputTextContentClass = "pillInputField__inputTextContent";
+        public const string PasswordModeClass = "pillInputField--passwordMode";
+        public const string MultilineClass = "pillInputField--multiline";
+
+        private readonly Label labelField;
+        private readonly TextField textField;
+        private bool isPasswordField;
+        private TouchScreenKeyboardType keyboardType = TouchScreenKeyboardType.Default;
+        private bool isPointerDown;
+        private bool isPointerDragging;
+        private int activePointerId = -1;
+        private Vector2 pointerDownPosition;
+
+        public event Action<string> OnValueChanged;
+        public event Action<string> OnValidation;
+
+        public PillInputField()
+        {
+            AddToClassList(RootClass);
+
+            labelField = UIToolkitExtensions.CreateVisualElement<Label>(this, LabelClass);
+            labelField.style.display = DisplayStyle.None;
+
+            textField = UIToolkitExtensions.CreateVisualElement<TextField>(this, InputClass);
+            textField.label = string.Empty;
+            textField.textEdition.keyboardType = keyboardType;
+            textField.AddToClassList(InputTextContentClass);
+
+            textField.RegisterCallback<PointerDownEvent>(OnTextFieldPointerDown, TrickleDown.TrickleDown);
+            textField.RegisterCallback<PointerMoveEvent>(OnTextFieldPointerMove, TrickleDown.TrickleDown);
+            textField.RegisterCallback<PointerUpEvent>(OnTextFieldPointerReleased, TrickleDown.TrickleDown);
+            textField.RegisterCallback<PointerCancelEvent>(OnTextFieldPointerReleased, TrickleDown.TrickleDown);
+            textField.RegisterCallback<FocusOutEvent>(OnTextFieldBlur);
+            textField.RegisterCallback<ChangeEvent<string>>(OnTextFieldChanged);
+        }
+
+        public string Label
+        {
+            get => labelField.text;
+            set
+            {
+                labelField.text = value;
+                labelField.style.display = string.IsNullOrEmpty(value) ? DisplayStyle.None : DisplayStyle.Flex;
+            }
+        }
+
+        public string Value
+        {
+            get => textField.value;
+            set
+            {
+                textField.SetValueWithoutNotify(value ?? string.Empty);
+                UpdatePasswordMaskState();
+            }
+        }
+
+        public TouchScreenKeyboardType KeyboardType
+        {
+            get => keyboardType;
+            set
+            {
+                keyboardType = value;
+                textField.textEdition.keyboardType = keyboardType;
+            }
+        }
+
+        public new void Focus()
+        {
+            textField.Focus();
+        }
+
+        public new void Blur()
+        {
+            textField.Blur();
+        }
+
+        public void SetPlaceholder(string placeholder)
+        {
+            textField.textEdition.placeholder = placeholder ?? string.Empty;
+        }
+
+        public void SetPasswordMode(bool isPassword)
+        {
+            isPasswordField = isPassword;
+            UpdatePasswordMaskState();
+        }
+
+        public void SetMaxLength(int maxLength)
+        {
+            textField.maxLength = maxLength;
+        }
+
+        public void SetMultiline(bool multiline)
+        {
+            textField.multiline = multiline;
+            EnableInClassList(MultilineClass, multiline);
+        }
+
+        public void SetBackgroundColor(Color color)
+        {
+            style.backgroundColor = color;
+        }
+
+        public void SetTextColor(Color color)
+        {
+            textField.style.color = color;
+        }
+
+        public void SetFontSize(float fontSize)
+        {
+            textField.style.fontSize = fontSize;
+        }
+
+        public void Validate()
+        {
+            OnValidation?.Invoke(Value);
+        }
+
+        private void OnTextFieldPointerDown(PointerDownEvent evt)
+        {
+            if (!Application.isMobilePlatform)
+            {
+                return;
+            }
+
+            isPointerDown = true;
+            isPointerDragging = false;
+            activePointerId = evt.pointerId;
+            pointerDownPosition = evt.position;
+
+            textField.focusController?.IgnoreEvent(evt);
+        }
+
+        private void OnTextFieldPointerMove(PointerMoveEvent evt)
+        {
+            if (!Application.isMobilePlatform)
+            {
+                return;
+            }
+
+            if (!isPointerDown || evt.pointerId != activePointerId || isPointerDragging)
+            {
+                return;
+            }
+
+            if (Vector2.Distance(evt.position, pointerDownPosition) < FocusActivationDragThresholdPx)
+            {
+                return;
+            }
+
+            isPointerDragging = true;
+            if (textField.focusController?.focusedElement == textField)
+            {
+                textField.Blur();
+            }
+        }
+
+        private void OnTextFieldPointerReleased(IPointerEvent evt)
+        {
+            if (!Application.isMobilePlatform)
+            {
+                return;
+            }
+
+            if (!isPointerDown || evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            bool shouldFocus = !isPointerDragging;
+            ResetPointerTracking();
+
+            if (shouldFocus)
+            {
+                textField.Focus();
+            }
+        }
+
+        private void ResetPointerTracking()
+        {
+            isPointerDown = false;
+            isPointerDragging = false;
+            activePointerId = -1;
+            pointerDownPosition = Vector2.zero;
+        }
+
+        private void OnTextFieldBlur(FocusOutEvent evt)
+        {
+            ResetPointerTracking();
+            Validate();
+        }
+
+        private void OnTextFieldChanged(ChangeEvent<string> evt)
+        {
+            OnValueChanged?.Invoke(Value);
+        }
+
+        private void UpdatePasswordMaskState()
+        {
+            textField.isPasswordField = isPasswordField;
+            EnableInClassList(PasswordModeClass, isPasswordField);
+        }
+    }
+}
diff --git a/Runtime/Controls/PillInputField/PillInputField.cs.meta b/Runtime/Controls/PillInputField/PillInputField.cs.meta
new file mode 100644
index 0000000..488fd13
--- /dev/null
+++ b/Runtime/Controls/PillInputField/PillInputField.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: cbb1fcc42c28aad4fb4b2422bedf90d2
\ No newline at end of file
diff --git a/Runtime/Controls/PillSelector.meta b/Runtime/Controls/PillSelector.meta
new file mode 100644
index 0000000..c19fbbd
--- /dev/null
+++ b/Runtime/Controls/PillSelector.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: a1c95e47ece18344dbbad32c018377a2
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/PillSelector/PillSelector.cs b/Runtime/Controls/PillSelector/PillSelector.cs
new file mode 100644
index 0000000..9bf8c4c
--- /dev/null
+++ b/Runtime/Controls/PillSelector/PillSelector.cs
@@ -0,0 +1,66 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A dropdown-style selector styled as a pill: optional label above, clickable display label with chevron icon.
+    /// </summary>
+    public class PillSelector : VisualElement
+    {
+        public const string RootClass = "pillSelector";
+        public const string LabelClass = "pillSelector__label";
+        public const string ContainerClass = "pillSelector__container";
+        public const string DisplayLabel = "pillSelector__clickableLabel";
+        public const string DisplayIcon = "pillSelector__icon";
+
+        private readonly Label labelField;
+        private readonly Label selectedValueLabel;
+
+        public event Action Clicked;
+
+        public PillSelector()
+        {
+            AddToClassList(RootClass);
+
+            labelField = UIToolkitExtensions.CreateVisualElement<Label>(this, LabelClass);
+            labelField.style.display = DisplayStyle.None;
+
+            var container = UIToolkitExtensions.CreateVisualElement(this, ContainerClass);
+
+            selectedValueLabel = UIToolkitExtensions.CreateVisualElement<Label>(container, DisplayLabel);
+            selectedValueLabel.text = "Select an option";
+            selectedValueLabel.RegisterCallback<ClickEvent>(_ => OnClicked());
+
+            UIToolkitExtensions.CreateVisualElement(container, DisplayIcon);
+        }
+
+        private void OnClicked()
+        {
+            Clicked?.Invoke();
+        }
+
+        public string Label
+        {
+            get => labelField.text;
+            set
+            {
+                labelField.text = value;
+                labelField.style.display = string.IsNullOrEmpty(value) ? DisplayStyle.None : DisplayStyle.Flex;
+            }
+        }
+
+        public string Value
+        {
+            get => selectedValueLabel.text;
+            set => selectedValueLabel.text = value;
+        }
+
+        public void SetFontSize(float fontSize)
+        {
+            selectedValueLabel.style.fontSize = fontSize;
+        }
+    }
+}
diff --git a/Runtime/Controls/PillSelector/PillSelector.cs.meta b/Runtime/Controls/PillSelector/PillSelector.cs.meta
new file mode 100644
index 0000000..bdc2235
--- /dev/null
+++ b/Runtime/Controls/PillSelector/PillSelector.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 0c0e3b6187c5a244da0d5b6ed764133b
\ No newline at end of file
diff --git a/Runtime/Controls/RoundedInputField.meta b/Runtime/Controls/RoundedInputField.meta
new file mode 100644
index 0000000..f128d5a
--- /dev/null
+++ b/Runtime/Controls/RoundedInputField.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 6c0031620646b9d49b6726fc720aa41b
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/RoundedInputField/RoundedInputField.cs b/Runtime/Controls/RoundedInputField/RoundedInputField.cs
new file mode 100644
index 0000000..22185fc
--- /dev/null
+++ b/Runtime/Controls/RoundedInputField/RoundedInputField.cs
@@ -0,0 +1,145 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    public class RoundedInputField : VisualElement
+    {
+        public const string RootClass = "roundedInputField";
+        public const string TextFieldClass = "roundedInputField__textField";
+        public const string InputClass = "roundedInputField__input";
+        public const string PlaceholderClass = "roundedInputField__placeholder";
+
+        private readonly TextField textField;
+        private string placeholderText = string.Empty;
+        private Label placeholderLabel;
+        private bool isPassword;
+
+        public event Action<string> ValueChanged;
+
+        public RoundedInputField()
+        {
+            AddToClassList(RootClass);
+
+            var container = new VisualElement();
+            container.style.flexGrow = 1;
+            container.style.position = Position.Relative;
+
+            placeholderLabel = new Label();
+            placeholderLabel.AddToClassList(PlaceholderClass);
+            placeholderLabel.pickingMode = PickingMode.Ignore;
+            placeholderLabel.style.position = Position.Absolute;
+
+            textField = new TextField
+            {
+                label = string.Empty,
+                isDelayed = false,
+            };
+
+            textField.AddToClassList(TextFieldClass);
+            textField.labelElement.style.display = DisplayStyle.None;
+
+            var input = textField.Q(className: TextField.inputUssClassName);
+            if (input != null)
+            {
+                input.AddToClassList(InputClass);
+            }
+
+            textField.RegisterValueChangedCallback(evt =>
+            {
+                UpdatePlaceholderVisibility();
+                ValueChanged?.Invoke(evt.newValue);
+            });
+
+            container.Add(placeholderLabel);
+            container.Add(textField);
+            Add(container);
+
+            UpdatePlaceholderVisibility();
+        }
+
+        public string Value
+        {
+            get => textField.value;
+            set
+            {
+                textField.value = value;
+                UpdatePlaceholderVisibility();
+            }
+        }
+
+        public void SetValueWithoutNotify(string value)
+        {
+            textField.SetValueWithoutNotify(value);
+            UpdatePlaceholderVisibility();
+        }
+
+        public string Placeholder
+        {
+            get => placeholderText;
+            set
+            {
+                placeholderText = value;
+                placeholderLabel.text = value;
+                UpdatePlaceholderVisibility();
+            }
+        }
+
+        public bool IsPassword
+        {
+            get => isPassword;
+            set
+            {
+                isPassword = value;
+                textField.isPasswordField = value;
+            }
+        }
+
+        public bool Multiline
+        {
+            get => textField.multiline;
+            set => textField.multiline = value;
+        }
+
+        public int MaxLength
+        {
+            get => textField.maxLength;
+            set => textField.maxLength = value;
+        }
+
+        public void SetBackgroundColor(Color color)
+        {
+            textField.style.backgroundColor = color;
+        }
+
+        public void SetTextColor(Color color)
+        {
+            textField.style.color = color;
+        }
+
+        public void SetPlaceholderColor(Color color)
+        {
+            placeholderLabel.style.color = color;
+        }
+
+        public void SetFontSize(float fontSize)
+        {
+            textField.style.fontSize = fontSize;
+            placeholderLabel.style.fontSize = fontSize;
+        }
+
+        public new void Focus()
+        {
+            textField.Focus();
+        }
+
+        private void UpdatePlaceholderVisibility()
+        {
+            bool showPlaceholder = string.IsNullOrEmpty(textField.value) && !string.IsNullOrEmpty(placeholderText);
+            placeholderLabel.style.display = showPlaceholder ? DisplayStyle.Flex : DisplayStyle.None;
+        }
+    }
+}
diff --git a/Runtime/Controls/RoundedInputField/RoundedInputField.cs.meta b/Runtime/Controls/RoundedInputField/RoundedInputField.cs.meta
new file mode 100644
index 0000000..4a4b09d
--- /dev/null
+++ b/Runtime/Controls/RoundedInputField/RoundedInputField.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 3c9421d44bdc51e43b576ed295483218
\ No newline at end of file
diff --git a/Runtime/Controls/StepProgressBar.meta b/Runtime/Controls/StepProgressBar.meta
new file mode 100644
index 0000000..21c921c
--- /dev/null
+++ b/Runtime/Controls/StepProgressBar.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 328e8fcfa4b78f242a54311dd68ee86b
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/StepProgressBar/StepProgressBar.cs b/Runtime/Controls/StepProgressBar/StepProgressBar.cs
new file mode 100644
index 0000000..74a8dc7
--- /dev/null
+++ b/Runtime/Controls/StepProgressBar/StepProgressBar.cs
@@ -0,0 +1,101 @@
+/// Credit SimonDarksideJ
+
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A horizontal progress bar that fills proportionally to steps completed.
+    /// The fill is rendered as a generated gradient texture between two configurable hex colors.
+    /// </summary>
+    public class StepProgressBar : VisualElement
+    {
+        public const string RootClass = "stepProgressBar";
+        public const string BackgroundBarClass = "stepProgressBar__background";
+        public const string FillBarClass = "stepProgressBar__fill";
+
+        private readonly VisualElement backgroundBar;
+        private readonly VisualElement fillBar;
+
+        private string innerColorHex = "#0000FF";
+        private string outerColorHex = "#00FFFF";
+        private int currentSteps;
+        private int maxSteps = 1;
+        private Texture2D fillTexture;
+
+        public StepProgressBar()
+        {
+            AddToClassList(RootClass);
+
+            backgroundBar = new VisualElement();
+            backgroundBar.AddToClassList(BackgroundBarClass);
+
+            fillBar = new VisualElement();
+            fillBar.AddToClassList(FillBarClass);
+
+            backgroundBar.Add(fillBar);
+            Add(backgroundBar);
+
+            RegisterCallback<DetachFromPanelEvent>(_ => DestroyFillTexture());
+
+            UpdateFillDisplay();
+        }
+
+        public float NormalizedProgress => maxSteps > 0 ? (float)currentSteps / maxSteps : 0f;
+        public int CurrentSteps => currentSteps;
+        public int MaxSteps => maxSteps;
+
+        public void SetProgress(int steps, int maxSteps)
+        {
+            if (maxSteps <= 0)
+            {
+                Debug.LogWarning("[StepProgressBar] maxSteps must be greater than 0.");
+                maxSteps = 1;
+            }
+
+            currentSteps = Mathf.Clamp(steps, 0, maxSteps);
+            this.maxSteps = maxSteps;
+
+            UpdateFillDisplay();
+        }
+
+        public void SetInnerColor(string colorHex)
+        {
+            innerColorHex = colorHex;
+            UpdateFillDisplay();
+        }
+
+        public void SetOuterColor(string colorHex)
+        {
+            outerColorHex = colorHex;
+            UpdateFillDisplay();
+        }
+
+        public void SetGradientColors(string innerColorHex, string outerColorHex)
+        {
+            this.innerColorHex = innerColorHex;
+            this.outerColorHex = outerColorHex;
+            UpdateFillDisplay();
+        }
+
+        private void UpdateFillDisplay()
+        {
+            fillBar.style.width = Length.Percent(NormalizedProgress * 100f);
+            DestroyFillTexture();
+            Color innerColor = ColorUtility.TryParseHtmlString(innerColorHex, out Color parsedInner) ? parsedInner : Color.blue;
+            Color outerColor = ColorUtility.TryParseHtmlString(outerColorHex, out Color parsedOuter) ? parsedOuter : Color.cyan;
+            fillTexture = ProceduralTextureUtility.CreateHorizontalGradient(innerColor, outerColor);
+            fillBar.style.backgroundImage = new StyleBackground(fillTexture);
+        }
+
+        private void DestroyFillTexture()
+        {
+            if (fillTexture != null)
+            {
+                UnityEngine.Object.Destroy(fillTexture);
+                fillTexture = null;
+            }
+        }
+    }
+}
diff --git a/Runtime/Controls/StepProgressBar/StepProgressBar.cs.meta b/Runtime/Controls/StepProgressBar/StepProgressBar.cs.meta
new file mode 100644
index 0000000..dc4275f
--- /dev/null
+++ b/Runtime/Controls/StepProgressBar/StepProgressBar.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 7cee01d492e03da4fabb83bfe85b4b10
\ No newline at end of file
diff --git a/Runtime/Controls/ToastSwipeDismissManipulator.meta b/Runtime/Controls/ToastSwipeDismissManipulator.meta
new file mode 100644
index 0000000..cc641bb
--- /dev/null
+++ b/Runtime/Controls/ToastSwipeDismissManipulator.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 60187e77dae4f3c4aafee17135be8de6
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs b/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs
new file mode 100644
index 0000000..f8d2355
--- /dev/null
+++ b/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs
@@ -0,0 +1,503 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+using UnityEngine.UIElements.Experimental;
+
+namespace UnityUIToolkit.Extensions
+{
+    public sealed class ToastSwipeDismissManipulator : PointerManipulator
+    {
+        private enum SwipeAxis
+        {
+            None,
+            Horizontal,
+            Vertical,
+        }
+
+        private const float TapSlop = 8f;
+        private const float SwipeAxisLockThreshold = 12f;
+        private const float SwipeDismissThreshold = 80f;
+        private const float DismissVelocityThreshold = 1100f;
+        private const float DragFollowFactor = 1f;
+        private const int SnapBackDurationMs = 140;
+        private const int DismissDurationMs = 180;
+
+        private readonly Func<bool> canInteract;
+        private readonly Func<Vector2, bool> canStartAtPosition;
+        private readonly Func<float> getHorizontalDismissTravelDistance;
+        private readonly Func<float> getVerticalDismissTravelDistance;
+        private readonly Func<VisualElement> getOffsetTarget;
+        private readonly Action onInteractionStarted;
+        private readonly Action onInteractionAborted;
+        private readonly Action onTapped;
+        private readonly Action onDismissed;
+
+        private ValueAnimation<float> snapBackAnimation;
+        private ValueAnimation<float> dismissAnimation;
+        private int activePointerId = -1;
+        private bool isPointerDown;
+        private bool hasSwipeAxisLock;
+        private SwipeAxis swipeAxis = SwipeAxis.None;
+        private SwipeAxis offsetAxis = SwipeAxis.None;
+        private bool isDragging;
+        private bool isDismissAnimating;
+        private Vector3 pointerStart;
+        private Vector3 lastPointerPosition;
+        private float lastPointerSampleTime;
+        private float pointerVelocityX;
+        private float pointerVelocityY;
+        private float currentOffset;
+        private int moveEventCount;
+
+        public ToastSwipeDismissManipulator(
+            Func<bool> canInteract,
+            Func<Vector2, bool> canStartAtPosition,
+            Func<float> getHorizontalDismissTravelDistance,
+            Func<float> getVerticalDismissTravelDistance,
+            Func<VisualElement> getOffsetTarget,
+            Action onInteractionStarted,
+            Action onInteractionAborted,
+            Action onTapped,
+            Action onDismissed)
+        {
+            this.canInteract = canInteract ?? throw new ArgumentNullException(nameof(canInteract));
+            this.canStartAtPosition = canStartAtPosition ?? throw new ArgumentNullException(nameof(canStartAtPosition));
+            this.getHorizontalDismissTravelDistance = getHorizontalDismissTravelDistance ?? throw new ArgumentNullException(nameof(getHorizontalDismissTravelDistance));
+            this.getVerticalDismissTravelDistance = getVerticalDismissTravelDistance ?? throw new ArgumentNullException(nameof(getVerticalDismissTravelDistance));
+            this.getOffsetTarget = getOffsetTarget ?? throw new ArgumentNullException(nameof(getOffsetTarget));
+            this.onInteractionStarted = onInteractionStarted;
+            this.onInteractionAborted = onInteractionAborted;
+            this.onTapped = onTapped;
+            this.onDismissed = onDismissed;
+        }
+
+        protected override void RegisterCallbacksOnTarget()
+        {
+            target.RegisterCallback<PointerDownEvent>(OnPointerDown);
+            target.RegisterCallback<PointerMoveEvent>(OnPointerMove);
+            target.RegisterCallback<PointerUpEvent>(OnPointerUp);
+            target.RegisterCallback<PointerCancelEvent>(OnPointerCancel);
+            target.RegisterCallback<PointerCaptureEvent>(OnPointerCaptured);
+            target.RegisterCallback<PointerCaptureOutEvent>(OnPointerCaptureOut);
+        }
+
+        protected override void UnregisterCallbacksFromTarget()
+        {
+            target.UnregisterCallback<PointerDownEvent>(OnPointerDown);
+            target.UnregisterCallback<PointerMoveEvent>(OnPointerMove);
+            target.UnregisterCallback<PointerUpEvent>(OnPointerUp);
+            target.UnregisterCallback<PointerCancelEvent>(OnPointerCancel);
+            target.UnregisterCallback<PointerCaptureEvent>(OnPointerCaptured);
+            target.UnregisterCallback<PointerCaptureOutEvent>(OnPointerCaptureOut);
+            ResetState();
+        }
+
+        public void ResetState()
+        {
+            StopSnapBackAnimation();
+            StopDismissAnimation();
+
+            int pointerId = activePointerId;
+            ClearPointerState();
+            ReleasePointerCapture(pointerId);
+            ApplyOffset(0f);
+        }
+
+        private void OnPointerDown(PointerDownEvent evt)
+        {
+            bool interactionAllowed = target != null && canInteract() && !isDismissAnimating && !isPointerDown;
+
+            if (!interactionAllowed)
+            {
+                return;
+            }
+
+            if (evt.pointerType == UnityEngine.UIElements.PointerType.mouse && evt.button != 0)
+            {
+                return;
+            }
+
+            if (!canStartAtPosition(evt.position))
+            {
+                return;
+            }
+
+            StopSnapBackAnimation();
+            StopDismissAnimation();
+
+            activePointerId = evt.pointerId;
+            isPointerDown = true;
+            hasSwipeAxisLock = false;
+            swipeAxis = SwipeAxis.None;
+            isDragging = false;
+            pointerStart = evt.position;
+            lastPointerPosition = evt.position;
+            lastPointerSampleTime = Time.realtimeSinceStartup;
+            pointerVelocityX = 0f;
+            pointerVelocityY = 0f;
+            moveEventCount = 0;
+
+            onInteractionStarted?.Invoke();
+        }
+
+        private void OnPointerMove(PointerMoveEvent evt)
+        {
+            if (!isPointerDown || evt.pointerId != activePointerId || target == null)
+            {
+                return;
+            }
+
+            Vector3 delta = evt.position - pointerStart;
+            float currentSampleTime = Time.realtimeSinceStartup;
+            float sampleDeltaTime = Mathf.Max(currentSampleTime - lastPointerSampleTime, 0.0001f);
+            pointerVelocityX = (evt.position.x - lastPointerPosition.x) / sampleDeltaTime;
+            pointerVelocityY = (evt.position.y - lastPointerPosition.y) / sampleDeltaTime;
+            lastPointerPosition = evt.position;
+            lastPointerSampleTime = currentSampleTime;
+            moveEventCount++;
+
+            if (!hasSwipeAxisLock && delta.magnitude >= SwipeAxisLockThreshold)
+            {
+                bool isHorizontalDrag = Mathf.Abs(delta.x) >= Mathf.Abs(delta.y);
+                if (isHorizontalDrag)
+                {
+                    hasSwipeAxisLock = true;
+                    swipeAxis = SwipeAxis.Horizontal;
+                }
+                else if (delta.y < 0f)
+                {
+                    hasSwipeAxisLock = true;
+                    swipeAxis = SwipeAxis.Vertical;
+                }
+
+                if (hasSwipeAxisLock)
+                {
+                    offsetAxis = swipeAxis;
+                    isDragging = true;
+                    target.CapturePointer(evt.pointerId);
+                }
+            }
+
+            bool hasCapture = target.HasPointerCapture(activePointerId);
+
+            if (!hasSwipeAxisLock || swipeAxis == SwipeAxis.None || !hasCapture)
+            {
+                return;
+            }
+
+            float axisDelta = swipeAxis == SwipeAxis.Horizontal ? delta.x : Mathf.Min(delta.y, 0f);
+            float maxFollowOffset = Mathf.Max(GetDismissTravelDistance(), 0f);
+            float followOffset = Mathf.Clamp(axisDelta * DragFollowFactor, -maxFollowOffset, maxFollowOffset);
+            ApplyOffset(followOffset);
+            evt.StopPropagation();
+        }
+
+        private void OnPointerUp(PointerUpEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            CompletePointerInteraction(evt.position, evt);
+        }
+
+        private void OnPointerCancel(PointerCancelEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+
+            bool shouldStopPropagation = isDragging;
+            AbortInteraction(animateSnapBack: true);
+
+            if (shouldStopPropagation)
+            {
+                evt.StopPropagation();
+            }
+        }
+
+        private void OnPointerCaptured(PointerCaptureEvent evt)
+        {
+            if (evt.pointerId != activePointerId)
+            {
+                return;
+            }
+        }
+
+        private void OnPointerCaptureOut(PointerCaptureOutEvent evt)
+        {
+            if (evt.pointerId != activePointerId || !isPointerDown)
+            {
+                return;
+            }
+
+            AbortInteraction(animateSnapBack: true);
+        }
+
+        private void CompletePointerInteraction(Vector3 pointerPosition, EventBase evt)
+        {
+            Vector3 delta = pointerPosition - pointerStart;
+            bool shouldDismiss = ShouldDismissOnRelease(delta);
+            bool shouldTap = ShouldInvokeTap(delta);
+            bool shouldStopPropagation = isDragging || shouldTap;
+            float dismissDirection = DetermineDismissDirection(delta);
+            float dismissTravelDistance = GetDismissTravelDistance();
+            int pointerId = activePointerId;
+
+            ClearPointerState();
+            ReleasePointerCapture(pointerId);
+
+            if (shouldDismiss)
+            {
+                StartDismissAnimation(dismissDirection * dismissTravelDistance);
+            }
+            else if (Mathf.Abs(currentOffset) > 0.01f)
+            {
+                StartSnapBackAnimation();
+                onInteractionAborted?.Invoke();
+            }
+            else if (!shouldTap)
+            {
+                onInteractionAborted?.Invoke();
+            }
+
+            if (shouldTap)
+            {
+                onTapped?.Invoke();
+            }
+
+            if (shouldStopPropagation)
+            {
+                evt.StopPropagation();
+            }
+        }
+
+        private void AbortInteraction(bool animateSnapBack)
+        {
+            int pointerId = activePointerId;
+            bool shouldRestart = isPointerDown;
+
+            ClearPointerState();
+            ReleasePointerCapture(pointerId);
+
+            if (animateSnapBack)
+            {
+                StartSnapBackAnimation();
+            }
+            else
+            {
+                ApplyOffset(0f);
+            }
+
+            if (shouldRestart)
+            {
+                onInteractionAborted?.Invoke();
+            }
+        }
+
+        private bool ShouldDismissOnRelease(Vector3 delta)
+        {
+            if (!hasSwipeAxisLock)
+            {
+                return false;
+            }
+
+            switch (swipeAxis)
+            {
+                case SwipeAxis.Horizontal:
+                {
+                    bool exceededDistance = Mathf.Abs(delta.x) >= SwipeDismissThreshold && Mathf.Abs(delta.x) > Mathf.Abs(delta.y);
+                    bool exceededVelocity = Mathf.Abs(pointerVelocityX) >= DismissVelocityThreshold && Mathf.Abs(delta.x) > Mathf.Abs(delta.y) * 0.5f;
+                    return exceededDistance || exceededVelocity;
+                }
+
+                case SwipeAxis.Vertical:
+                {
+                    bool movingUp = delta.y < 0f || pointerVelocityY < 0f;
+                    bool exceededDistance = Mathf.Abs(delta.y) >= SwipeDismissThreshold && Mathf.Abs(delta.y) > Mathf.Abs(delta.x);
+                    bool exceededVelocity = Mathf.Abs(pointerVelocityY) >= DismissVelocityThreshold && Mathf.Abs(delta.y) > Mathf.Abs(delta.x) * 0.5f;
+                    return movingUp && (exceededDistance || exceededVelocity);
+                }
+
+                default:
+                    return false;
+            }
+        }
+
+        private bool ShouldInvokeTap(Vector3 delta)
+        {
+            if (hasSwipeAxisLock)
+            {
+                return false;
+            }
+
+            return delta.sqrMagnitude <= TapSlop * TapSlop;
+        }
+
+        private float DetermineDismissDirection(Vector3 delta)
+        {
+            if (swipeAxis == SwipeAxis.Horizontal)
+            {
+                if (!Mathf.Approximately(delta.x, 0f))
+                {
+                    return Mathf.Sign(delta.x);
+                }
+
+                if (!Mathf.Approximately(pointerVelocityX, 0f))
+                {
+                    return Mathf.Sign(pointerVelocityX);
+                }
+
+                return 1f;
+            }
+
+            if (!Mathf.Approximately(delta.y, 0f))
+            {
+                return Mathf.Sign(delta.y);
+            }
+
+            if (!Mathf.Approximately(pointerVelocityY, 0f))
+            {
+                return Mathf.Sign(pointerVelocityY);
+            }
+
+            return -1f;
+        }
+
+        private void StartSnapBackAnimation()
+        {
+            if (target == null || isDismissAnimating || Mathf.Abs(currentOffset) <= 0.01f)
+            {
+                ApplyOffset(0f);
+                return;
+            }
+
+            StopSnapBackAnimation();
+
+            snapBackAnimation = target.experimental.animation.Start(currentOffset, 0f, SnapBackDurationMs, (_, value) => ApplyOffset(value));
+            snapBackAnimation.easingCurve = EaseOutCubic;
+            snapBackAnimation.KeepAlive();
+            snapBackAnimation.onAnimationCompleted += () =>
+            {
+                StopSnapBackAnimation();
+                ApplyOffset(0f);
+            };
+        }
+
+        private void StopSnapBackAnimation()
+        {
+            try
+            {
+                snapBackAnimation?.Stop();
+            }
+            catch
+            {
+            }
+            finally
+            {
+                snapBackAnimation = null;
+            }
+        }
+
+        private void StartDismissAnimation(float targetOffset)
+        {
+            if (target == null)
+            {
+                onDismissed?.Invoke();
+                return;
+            }
+
+            StopDismissAnimation();
+            StopSnapBackAnimation();
+
+            isDismissAnimating = true;
+
+            dismissAnimation = target.experimental.animation.Start(currentOffset, targetOffset, DismissDurationMs, (_, value) => ApplyOffset(value));
+            dismissAnimation.easingCurve = EaseOutCubic;
+            dismissAnimation.KeepAlive();
+            dismissAnimation.onAnimationCompleted += () =>
+            {
+                dismissAnimation = null;
+                onDismissed?.Invoke();
+                isDismissAnimating = false;
+            };
+        }
+
+        private void StopDismissAnimation()
+        {
+            try
+            {
+                dismissAnimation?.Stop();
+            }
+            catch
+            {
+            }
+            finally
+            {
+                dismissAnimation = null;
+                isDismissAnimating = false;
+            }
+        }
+
+        private void ReleasePointerCapture(int pointerId)
+        {
+            if (target == null || pointerId == -1 || !target.HasPointerCapture(pointerId))
+            {
+                return;
+            }
+
+            target.ReleasePointer(pointerId);
+        }
+
+        private void ApplyOffset(float offset)
+        {
+            currentOffset = offset;
+
+            VisualElement offsetTarget = getOffsetTarget();
+            if (offsetTarget != null)
+            {
+                offsetTarget.style.translate = offsetAxis switch
+                {
+                    SwipeAxis.Vertical => new Translate(0f, offset, 0f),
+                    SwipeAxis.Horizontal => new Translate(offset, 0f, 0f),
+                    _ => new Translate(0f, 0f, 0f),
+                };
+            }
+
+            if (Mathf.Abs(offset) <= 0.01f)
+            {
+                offsetAxis = SwipeAxis.None;
+            }
+        }
+
+        private float GetDismissTravelDistance()
+        {
+            return swipeAxis switch
+            {
+                SwipeAxis.Vertical => getVerticalDismissTravelDistance(),
+                SwipeAxis.Horizontal => getHorizontalDismissTravelDistance(),
+                _ => 0f,
+            };
+        }
+
+        private void ClearPointerState()
+        {
+            activePointerId = -1;
+            isPointerDown = false;
+            hasSwipeAxisLock = false;
+            swipeAxis = SwipeAxis.None;
+            isDragging = false;
+            pointerVelocityX = 0f;
+            pointerVelocityY = 0f;
+        }
+
+        private static float EaseOutCubic(float t)
+        {
+            return 1f - Mathf.Pow(1f - t, 3f);
+        }
+    }
+}
diff --git a/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs.meta b/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs.meta
new file mode 100644
index 0000000..5007ca0
--- /dev/null
+++ b/Runtime/Controls/ToastSwipeDismissManipulator/ToastSwipeDismissManipulator.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: beaa254c6c571db4983246b346dc25fd
\ No newline at end of file
diff --git a/Runtime/Controls/ToggleButton.meta b/Runtime/Controls/ToggleButton.meta
new file mode 100644
index 0000000..1c62d5f
--- /dev/null
+++ b/Runtime/Controls/ToggleButton.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: 3d3dd19966197394897fbb17d3c6a83f
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
diff --git a/Runtime/Controls/ToggleButton/ToggleButton.cs b/Runtime/Controls/ToggleButton/ToggleButton.cs
new file mode 100644
index 0000000..97dea77
--- /dev/null
+++ b/Runtime/Controls/ToggleButton/ToggleButton.cs
@@ -0,0 +1,88 @@
+/// Credit SimonDarksideJ
+
+using System;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// A toggle button that displays a single image which changes via USS classes when toggled.
+    /// Fires <see cref="OnClicked"/> on every pointer-down; use <see cref="IsSelected"/> to read state.
+    /// </summary>
+    public class ToggleButton : VisualElement
+    {
+        public const string RootClass = "toggleButton";
+        public const string ImageClass = "toggleButton__image";
+        public const string SelectedClass = "toggleButton--selected";
+
+        protected readonly VisualElement image;
+
+        private bool isSelected;
+
+        public event Action OnClicked;
+
+        public bool IsSelected => isSelected;
+
+        public ToggleButton()
+        {
+            AddToClassList(RootClass);
+
+            pickingMode = PickingMode.Position;
+
+            image = new VisualElement();
+            image.AddToClassList(ImageClass);
+            image.pickingMode = PickingMode.Ignore;
+
+            Add(image);
+
+            RegisterCallback<PointerDownEvent>(OnPointerDownHandler);
+        }
+
+        public void ForceSelect()
+        {
+            SetSelected(true);
+        }
+
+        public void ForceDeselect()
+        {
+            SetSelected(false);
+        }
+
+        public void SetImage(Texture2D texture)
+        {
+            image.style.backgroundImage = texture != null
+                ? new StyleBackground(texture)
+                : StyleKeyword.Null;
+            image.style.unityBackgroundImageTintColor = Color.white;
+        }
+
+        private void OnPointerDownHandler(PointerDownEvent evt)
+        {
+            evt.StopPropagation();
+            ToggleSelected();
+            OnClicked?.Invoke();
+        }
+
+        private void ToggleSelected()
+        {
+            SetSelected(!isSelected);
+        }
+
+        private void SetSelected(bool selected)
+        {
+            if (isSelected == selected)
+            {
+                return;
+            }
+
+            isSelected = selected;
+            ApplySelectionState(isSelected);
+        }
+
+        protected virtual void ApplySelectionState(bool selected)
+        {
+            EnableInClassList(SelectedClass, selected);
+        }
+    }
+}
diff --git a/Runtime/Controls/ToggleButton/ToggleButton.cs.meta b/Runtime/Controls/ToggleButton/ToggleButton.cs.meta
new file mode 100644
index 0000000..29f5125
--- /dev/null
+++ b/Runtime/Controls/ToggleButton/ToggleButton.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: e405182fd7af2bc438c3f94a53b374bf
\ No newline at end of file
diff --git a/Runtime/Styles/UIToolkitExtensionsControlStyles.uss b/Runtime/Styles/UIToolkitExtensionsControlStyles.uss
index d19e069..c4a00ae 100644
--- a/Runtime/Styles/UIToolkitExtensionsControlStyles.uss
+++ b/Runtime/Styles/UIToolkitExtensionsControlStyles.uss
@@ -88,3 +88,584 @@
 .quadrantStepper > .quadrantStepper__segments > .quadrantStepper__segment.is-selected > .quadrantStepper__label {
 	color: var(--quadrantStepper-label-selected-color);
 }
+
+/* GrayscaleImage */
+.grayscaleImage {
+	flex-grow: 1;
+}
+
+/* RoundedInputField */
+.roundedInputField {
+	flex-grow: 1;
+}
+
+.roundedInputField__textField {
+	flex-grow: 1;
+}
+
+.roundedInputField__placeholder {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	-unity-text-align: middle-left;
+}
+
+/* IconLabelButton */
+.iconLabelButton {
+	flex-direction: row;
+}
+
+.iconLabelButton__button {
+	flex-grow: 1;
+	flex-direction: row;
+	align-items: center;
+}
+
+.iconLabelButton__icon {
+	width: 24px;
+	height: 24px;
+	flex-shrink: 0;
+	background-image: url("../Assets/Icons/ListItem.svg");
+	-unity-background-scale-mode: scale-to-fit;
+	-unity-background-image-tint-color: rgba(128, 128, 128, 1);
+}
+
+.iconLabelButton__label {
+	flex-grow: 1;
+}
+
+/* CollapsibleSection */
+.collapsibleSection__header {
+	flex-direction: row;
+	align-items: center;
+}
+
+.collapsibleSection__title {
+	flex-grow: 1;
+}
+
+.collapsibleSection__chevron {
+	width: 20px;
+	height: 20px;
+	flex-shrink: 0;
+	background-image: url("../Assets/Icons/ChevronDown.svg");
+	-unity-background-scale-mode: scale-to-fit;
+	-unity-background-image-tint-color: rgba(128, 128, 128, 1);
+	rotate: 0deg;
+	transition-property: rotate;
+	transition-duration: 200ms;
+	transition-timing-function: ease-out;
+}
+
+.collapsibleSection--expanded .collapsibleSection__chevron {
+	rotate: 180deg;
+}
+
+.collapsibleSection__body {
+	overflow: hidden;
+	max-height: 0;
+	transition-property: max-height;
+	transition-duration: 250ms;
+	transition-timing-function: ease-out;
+}
+
+.collapsibleSection--expanded > .collapsibleSection__body {
+	max-height: 2000px;
+}
+
+.collapsibleSection__bodyContent {
+	padding-top: 4px;
+}
+
+/* LoadingIcon */
+.loadingIcon {
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: 200ms;
+	transition-timing-function: ease-out;
+}
+
+.loadingIcon__image {
+	width: 40px;
+	height: 40px;
+	background-image: url("../Assets/Icons/LoadingSpinner.svg");
+	-unity-background-image-tint-color: rgba(255, 255, 255, 1);
+	-unity-background-scale-mode: scale-to-fit;
+}
+
+.loadingIcon--visible {
+	opacity: 1;
+}
+
+/* PillInputField */
+.pillInputField {
+	flex-direction: column;
+}
+
+.pillInputField__label {
+	display: none;
+}
+
+.pillInputField__input {
+	flex-grow: 1;
+}
+
+/* PillSelector */
+.pillSelector {
+	flex-direction: column;
+}
+
+.pillSelector__label {
+	display: none;
+}
+
+.pillSelector__container {
+	flex-direction: row;
+	align-items: center;
+}
+
+.pillSelector__clickableLabel {
+	flex-grow: 1;
+}
+
+.pillSelector__icon {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+	background-image: url("../Assets/Icons/ChevronRight.svg");
+	-unity-background-scale-mode: scale-to-fit;
+	-unity-background-image-tint-color: rgba(128, 128, 128, 1);
+}
+
+/* ComingSoonMessage */
+.comingSoonMessage {
+	flex-grow: 1;
+	align-items: center;
+	justify-content: center;
+}
+
+.comingSoonMessage__background {
+	align-items: center;
+}
+
+.comingSoonMessage__title {
+	-unity-text-align: middle-center;
+}
+
+.comingSoonMessage__label {
+	-unity-text-align: middle-center;
+}
+
+/* CircularImageButton */
+.circularImageButton {
+	position: relative;
+}
+
+.circularImageButton__image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 50%;
+	-unity-background-scale-mode: scale-and-crop;
+}
+
+.circularImageButton__noImageOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	align-items: center;
+	justify-content: center;
+}
+
+.circularImageButton__icon {
+	width: 40%;
+	height: 40%;
+	background-image: url("../Assets/Icons/Camera.svg");
+	-unity-background-scale-mode: scale-to-fit;
+	-unity-background-image-tint-color: rgba(180, 180, 180, 1);
+}
+
+.circularImageButton--hasImage .circularImageButton__noImageOverlay {
+	display: none;
+}
+
+.circularImageButton__uploadLabel {
+	margin-top: 8px;
+	color: rgba(255, 255, 255, 1);
+	-unity-text-align: middle-center;
+	white-space: normal;
+	font-size: 13px;
+	padding-left: 12px;
+	padding-right: 12px;
+	max-width: 80%;
+}
+
+/* ImageCropOverlayControl */
+.imageCropOverlay {
+	background-color: rgba(8, 10, 16, 0.95);
+	align-items: stretch;
+	justify-content: center;
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+}
+
+.imageCropOverlay__panel {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: rgba(0, 0, 0, 0);
+	max-width: 1400px;
+	align-self: center;
+}
+
+.imageCropOverlay__header {
+	width: 100%;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-bottom: 28px;
+	padding-left: 12px;
+	padding-right: 12px;
+}
+
+.imageCropOverlay__title {
+	font-size: 30px;
+	color: rgba(255, 255, 255, 1);
+	-unity-text-align: middle-center;
+	white-space: normal;
+	-unity-font-style: bold;
+}
+
+.imageCropOverlay__viewportHost {
+	width: 100%;
+	flex-grow: 0;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+}
+
+.imageCropOverlay__viewport {
+	position: relative;
+	overflow: hidden;
+	background-color: rgba(255, 255, 255, 0.06);
+	border-width: 4px;
+	border-color: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
+}
+
+.imageCropOverlay__image {
+	position: absolute;
+	background-position: center center;
+	background-repeat: no-repeat;
+	-unity-background-scale-mode: stretch-to-fill;
+	background-color: rgba(0, 0, 0, 0);
+}
+
+.imageCropOverlay__footer {
+	width: 100%;
+	flex-shrink: 0;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding-top: 28px;
+	padding-left: 12px;
+	padding-right: 12px;
+	gap: 16px;
+}
+
+.imageCropOverlay__buttonSlot {
+	width: 280px;
+	max-width: 42%;
+	height: 56px;
+	flex-shrink: 1;
+	flex-grow: 1;
+}
+
+.imageCropOverlay__button {
+	width: 100%;
+	height: 100%;
+}
+
+/* DropDownControl */
+.dropDownControl {
+	position: relative;
+	flex-direction: column;
+	flex-shrink: 0;
+	flex-grow: 0;
+	min-width: 160px;
+}
+
+.dropDownControl__trigger {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	height: 56px;
+	padding: 0;
+	border-width: 1px;
+	border-radius: 18px;
+	border-color: rgba(255, 255, 255, 0.2);
+	background-color: rgba(17, 23, 34, 0.8);
+	backdrop-filter: blur(8px);
+}
+
+.dropDownControl__triggerLabel {
+	flex-grow: 1;
+	color: rgba(255, 255, 255, 1);
+	font-size: 16px;
+	-unity-text-align: middle-right;
+	padding-left: 16px;
+	padding-right: 8px;
+	white-space: nowrap;
+}
+
+.dropDownControl__triggerIcon {
+	width: 18px;
+	height: 18px;
+	margin-right: 14px;
+	background-image: url("../Assets/Icons/ChevronRight.svg");
+	-unity-background-image-tint-color: rgba(255, 255, 255, 0.75);
+	-unity-background-scale-mode: scale-to-fit;
+	background-color: rgba(0, 0, 0, 0);
+	rotate: 90deg;
+}
+
+.dropDownControl__backdrop {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.001);
+	z-index: 9998;
+}
+
+.dropDownControl__panel {
+	position: relative;
+	width: auto;
+	background-color: rgba(14, 18, 28, 0.98);
+	border-radius: 24px;
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	overflow: hidden;
+	align-items: stretch;
+	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+	z-index: 9999;
+}
+
+.dropDownControl__viewport {
+	width: 100%;
+	height: 672px;
+	overflow: hidden;
+	padding: 0;
+	margin: 0;
+}
+
+.dropDownControl__list {
+	width: 100%;
+	flex-direction: column;
+	padding: 0;
+	margin: 0;
+}
+
+.dropDownControl__row {
+	width: 100%;
+	height: 96px;
+	padding: 0;
+	margin: 0;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	color: rgba(255, 255, 255, 1);
+	font-size: 26px;
+	-unity-text-align: middle-center;
+	opacity: 1;
+}
+
+.dropDownControl__selectionLane {
+	position: absolute;
+	left: 16px;
+	right: 16px;
+	top: 288px;
+	height: 96px;
+	border-width: 1px;
+	border-color: rgba(255, 255, 255, 0.12);
+	border-radius: 16px;
+	background-color: rgba(255, 255, 255, 0.04);
+}
+
+.dropDownControl__fadeTop {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	height: 288px;
+	background-color: rgba(14, 18, 28, 1);
+	opacity: 0.55;
+	border-bottom-width: 48px;
+	border-bottom-color: rgba(14, 18, 28, 1);
+}
+
+.dropDownControl__fadeBottom {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 288px;
+	background-color: rgba(14, 18, 28, 1);
+	opacity: 0.55;
+	border-top-width: 48px;
+	border-top-color: rgba(14, 18, 28, 1);
+}
+
+/* ToggleButton */
+.toggleButton {
+	align-items: center;
+	justify-content: center;
+}
+
+.toggleButton__image {
+	width: 100%;
+	height: 100%;
+	-unity-background-scale-mode: scale-to-fit;
+}
+
+/* ColorToggleButton */
+.toggleButton__icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 50%;
+}
+
+.toggleButton__ripple {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 50%;
+	opacity: 0;
+	scale: 1 1 1;
+}
+
+.toggleButton__rippleSecondary {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 50%;
+	opacity: 0;
+	scale: 1 1 1;
+}
+
+.toggleButton__selectedOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-radius: 50%;
+	opacity: 0;
+	border-width: 3px;
+	border-color: rgba(255, 255, 255, 0.9);
+}
+
+.toggleButton__selectedOverlay--visible {
+	opacity: 1;
+}
+
+/* ColorToggleGroup */
+.colorToggleGroup {
+	flex-grow: 1;
+}
+
+.colorToggleGroup__container {
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+/* PageDotIndicator */
+.pageDotIndicator {
+	align-items: center;
+	justify-content: center;
+}
+
+.pageDotIndicator__dotsContainer {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.pageDotIndicator__dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 4px;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+/* StepProgressBar */
+.stepProgressBar {
+	flex-grow: 1;
+}
+
+.stepProgressBar__background {
+	flex-grow: 1;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.stepProgressBar__fill {
+	height: 100%;
+}
+
+/* PillButton */
+.pillButton__background {
+	border-radius: 999px;
+	overflow: hidden;
+	align-items: center;
+	justify-content: center;
+	flex-grow: 1;
+	-unity-background-scale-mode: stretch-to-fill;
+}
+
+.pillButton__flash {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(255, 255, 255, 1);
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: 100ms;
+	transition-timing-function: ease-out;
+}
+
+.pillButton__flash--active {
+	opacity: 0.25;
+}
+
+.pillButton__label {
+	-unity-text-align: middle-center;
+	flex-grow: 1;
+}
diff --git a/Runtime/Utility/ProceduralTextureUtility.cs b/Runtime/Utility/ProceduralTextureUtility.cs
new file mode 100644
index 0000000..23c68bf
--- /dev/null
+++ b/Runtime/Utility/ProceduralTextureUtility.cs
@@ -0,0 +1,108 @@
+/// Credit SimonDarksideJ
+
+using UnityEngine;
+
+namespace UnityUIToolkit.Extensions
+{
+    /// <summary>
+    /// Factory methods for runtime-generated <see cref="Texture2D"/> assets used by UI controls.
+    /// Callers are responsible for calling <c>Object.Destroy</c> on returned textures when no longer needed.
+    /// </summary>
+    public static class ProceduralTextureUtility
+    {
+        /// <summary>
+        /// Creates a 1-pixel-tall horizontal gradient texture from <paramref name="startColor"/> to <paramref name="endColor"/>.
+        /// </summary>
+        /// <param name="startColor">Left edge color.</param>
+        /// <param name="endColor">Right edge color.</param>
+        /// <param name="width">Horizontal resolution in pixels (default 256).</param>
+        public static Texture2D CreateHorizontalGradient(Color startColor, Color endColor, int width = 256)
+        {
+            var texture = new Texture2D(width, 1, TextureFormat.RGBA32, false);
+            texture.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[width];
+            for (int x = 0; x < width; x++)
+                pixels[x] = Color.Lerp(startColor, endColor, (float)x / (width - 1));
+            texture.SetPixels(pixels);
+            texture.Apply();
+            return texture;
+        }
+
+        /// <summary>
+        /// Creates a square texture showing a single-color arc (spinner ring).
+        /// </summary>
+        /// <param name="size">Width and height in pixels.</param>
+        /// <param name="arcColor">Color of the visible arc stroke.</param>
+        /// <param name="sweepDegrees">How many degrees of the ring are filled (default 270).</param>
+        /// <param name="ringFraction">Thickness of the ring as a fraction of the radius (default 0.15).</param>
+        public static Texture2D CreateSpinnerArc(int size, Color arcColor, float sweepDegrees = 270f, float ringFraction = 0.15f)
+        {
+            var texture = new Texture2D(size, size, TextureFormat.RGBA32, false);
+            texture.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[size * size];
+
+            float cx = (size - 1) * 0.5f;
+            float cy = (size - 1) * 0.5f;
+            float outerR = cx;
+            float innerR = cx * (1f - ringFraction * 2f);
+            float halfSweep = sweepDegrees * 0.5f * Mathf.Deg2Rad;
+            // Arc runs from -halfSweep to +halfSweep around the top (−90° axis)
+            float startAngle = -Mathf.PI * 0.5f - halfSweep;
+            float endAngle   = -Mathf.PI * 0.5f + halfSweep;
+
+            for (int y = 0; y < size; y++)
+            {
+                for (int x = 0; x < size; x++)
+                {
+                    float dx = x - cx;
+                    float dy = y - cy;
+                    float dist = Mathf.Sqrt(dx * dx + dy * dy);
+                    if (dist < innerR || dist > outerR)
+                    {
+                        pixels[y * size + x] = Color.clear;
+                        continue;
+                    }
+                    float angle = Mathf.Atan2(dy, dx);
+                    // Normalize angle to [startAngle, startAngle + 2π)
+                    while (angle < startAngle) angle += Mathf.PI * 2f;
+                    while (angle > startAngle + Mathf.PI * 2f) angle -= Mathf.PI * 2f;
+                    pixels[y * size + x] = (angle <= endAngle) ? arcColor : Color.clear;
+                }
+            }
+
+            texture.SetPixels(pixels);
+            texture.Apply();
+            return texture;
+        }
+
+        /// <summary>
+        /// Creates a square texture with a solid anti-aliased circle (useful for avatar placeholders).
+        /// </summary>
+        /// <param name="size">Width and height in pixels.</param>
+        /// <param name="color">Fill color of the circle.</param>
+        public static Texture2D CreateSolidCircle(int size, Color color)
+        {
+            var texture = new Texture2D(size, size, TextureFormat.RGBA32, false);
+            texture.wrapMode = TextureWrapMode.Clamp;
+            var pixels = new Color[size * size];
+            float cx = (size - 1) * 0.5f;
+            float cy = (size - 1) * 0.5f;
+            float r = cx;
+            for (int y = 0; y < size; y++)
+            {
+                for (int x = 0; x < size; x++)
+                {
+                    float dist = Mathf.Sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
+                    // 1-pixel soft edge
+                    float alpha = Mathf.Clamp01(r - dist + 0.5f);
+                    var c = color;
+                    c.a *= alpha;
+                    pixels[y * size + x] = c;
+                }
+            }
+            texture.SetPixels(pixels);
+            texture.Apply();
+            return texture;
+        }
+    }
+}
diff --git a/Runtime/Utility/ProceduralTextureUtility.cs.meta b/Runtime/Utility/ProceduralTextureUtility.cs.meta
new file mode 100644
index 0000000..b631f51
--- /dev/null
+++ b/Runtime/Utility/ProceduralTextureUtility.cs.meta
@@ -0,0 +1,2 @@
+fileFormatVersion: 2
+guid: 97579ac26ace81641aa82aded8974bd6
\ No newline at end of file