@mhmo91/schmancy 0.9.28 → 0.10.1

package/custom-elements.json

@@ -1,10 +1,22 @@
 {
   "version": "experimental",
   "tags": [
+    {
+      "name": "schmancy-skill",
+      "path": "./src/agent/schmancy-skill.ts",
+      "description": "Self-describing runtime helper. Drop `<schmancy-skill></schmancy-skill>`\nonce on a page and `window.schmancy.help('schmancy-button')` returns the\nmachine-readable entry for any tag. Renders nothing.",
+      "properties": [
+        {
+          "name": "disconnectedSignal",
+          "description": "AbortSignal that fires when the element disconnects.",
+          "type": "AbortSignal",
+          "default": "\"signal\""
+        }
+      ]
+    },
     {
       "name": "schmancy-area",
       "path": "./src/area/area.component.ts",
-      "description": "Router outlet — renders the active route's component for the named area. Drives the schmancy router via the `area` service.",
       "attributes": [
         {
           "name": "name",
@@ -17,6 +29,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -31,8 +48,7 @@
       ],
       "events": [
         {
-          "name": "redirect",
-          "description": "When the area resolves a route to a different destination (programmatic redirect). `detail.from` and `detail.to` are the route names."
+          "name": "redirect"
         }
       ]
     },
@@ -60,6 +76,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "when",
           "attribute": "when",
@@ -81,12 +102,18 @@
           "attribute": "guard",
           "type": "ObservableGuardResult | undefined"
         }
+      ],
+      "events": [
+        {
+          "name": "redirect",
+          "description": "Fired by the parent schmancy-area\non this element when the route's guard emits false. Listen with `@redirect`."
+        }
       ]
     },
     {
       "name": "schmancy-autocomplete",
       "path": "./src/autocomplete/autocomplete.ts",
-      "description": "Combobox with type-ahead filtering over a list of `<schmancy-option>` children. Single or multi-select. Form-associated.",
+      "description": "Autocomplete input component with filtering and multi-select support.",
       "attributes": [
         {
           "name": "maxHeight",
@@ -170,6 +197,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -281,14 +313,13 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`SchmancyAutocompleteChangeEvent` with `{ value }` (single) or `{ value, values }` (multi)."
+          "name": "change"
         }
       ]
     },
     {
       "name": "schmancy-avatar",
-      "path": "./src/avatar.ts",
+      "path": "./src/avatar/avatar.ts",
       "description": "A customizable avatar component that displays initials or an icon\nDesigned to match the Schmancy design system",
       "attributes": [
         {
@@ -441,6 +472,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -551,6 +587,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -661,6 +702,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "id",
           "attribute": "id",
@@ -714,7 +760,7 @@
     {
       "name": "schmancy-breadcrumb",
       "path": "./src/breadcrumb/breadcrumb.ts",
-      "description": "Breadcrumb trail — navigation history from root to current page. Renders schmancy-breadcrumb-item children with separators between.",
+      "description": "Breadcrumb navigation container. Wraps a list of `schmancy-breadcrumb-item`\nelements with the correct ARIA landmark and semantics.",
       "attributes": [
         {
           "name": "separator",
@@ -724,6 +770,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "separator",
           "attribute": "separator",
@@ -748,7 +799,7 @@
     {
       "name": "schmancy-breadcrumb-item",
       "path": "./src/breadcrumb/breadcrumb.ts",
-      "description": "Single segment in a schmancy-breadcrumb trail — a link when `href` is set, or a plain span (the current page) when omitted.",
+      "description": "Individual breadcrumb item. Renders as a link when `href` is provided,\notherwise as a plain span (represents the current page).",
       "attributes": [
         {
           "name": "href",
@@ -764,6 +815,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "href",
           "attribute": "href",
@@ -788,7 +844,14 @@
     },
     {
       "name": "schmancy-busy",
-      "path": "./src/busy/busy.ts"
+      "path": "./src/busy/busy.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ]
     },
     {
       "name": "schmancy-spinner",
@@ -811,6 +874,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -834,7 +902,7 @@
     {
       "name": "schmancy-button",
       "path": "./src/button/button.ts",
-      "description": "Material Design button — primary interactive surface for triggering actions or navigation.",
+      "description": "A button component.",
       "attributes": [
         {
           "name": "variant",
@@ -883,6 +951,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -976,7 +1049,7 @@
     {
       "name": "schmancy-icon-button",
       "path": "./src/button/icon-button.ts",
-      "description": "Icon-only button for toolbar actions, close affordances, or overflow menus.",
+      "description": "An icon button component.",
       "attributes": [
         {
           "name": "size",
@@ -1030,6 +1103,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "size",
           "attribute": "size",
@@ -1111,7 +1189,13 @@
     {
       "name": "schmancy-card-action",
       "path": "./src/card/actions.ts",
-      "description": "Action row of a schmancy-card — holds the card's buttons / links (typically aligned bottom-right).",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -1122,7 +1206,6 @@
     {
       "name": "schmancy-card",
       "path": "./src/card/card.ts",
-      "description": "Material Design card — a surface-level container for grouping related content with media / content / actions slots.",
       "attributes": [
         {
           "name": "type",
@@ -1172,6 +1255,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -1234,20 +1322,24 @@
       ],
       "events": [
         {
-          "name": "schmancy-click",
-          "description": "When an interactive card is clicked or activated via keyboard. `detail.value` echoes the card's `type`. Only fires when `interactive` is set."
+          "name": "schmancy-click"
         }
       ]
     },
     {
       "name": "schmancy-card-content",
       "path": "./src/card/content.ts",
-      "description": "Content region of a schmancy-card — holds the card's headline, supporting text, and inline controls."
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ]
     },
     {
       "name": "schmancy-card-media",
       "path": "./src/card/media.ts",
-      "description": "Media region of a schmancy-card — the image / thumbnail at the top of the card.",
       "attributes": [
         {
           "name": "src",
@@ -1266,6 +1358,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "src",
           "attribute": "src",
@@ -1364,6 +1461,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "data",
           "attribute": "data",
@@ -1516,6 +1618,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "data",
           "attribute": "data",
@@ -1591,7 +1698,6 @@
     {
       "name": "schmancy-checkbox",
       "path": "./src/checkbox/checkbox.ts",
-      "description": "Binary checkbox for multi-select or boolean form fields. Wraps Material Web's `<md-checkbox>`; form-associated.",
       "attributes": [
         {
           "name": "value",
@@ -1696,7 +1802,7 @@
       "events": [
         {
           "name": "valueChange",
-          "description": "`CustomEvent<{ value: boolean }>` when the checkbox is toggled."
+          "description": "Event fired when the checkbox value changes."
         },
         {
           "name": "change"
@@ -1712,7 +1818,7 @@
     {
       "name": "schmancy-assist-chip",
       "path": "./src/chips/assist-chip.ts",
-      "description": "Assist chip — single-tap trigger for a contextual action (open calendar event, share content, jump to related view). Distinct from filter and input chips: assist chips have no selected state; clicking fires `action`.",
+      "description": "Assist chip component - prompts user actions like opening calendar events or sharing content\nPure Schmancy implementation with Tailwind CSS and RxJS state management",
       "attributes": [
         {
           "name": "value",
@@ -1752,6 +1858,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -1797,8 +1908,7 @@
       ],
       "events": [
         {
-          "name": "action",
-          "description": "When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute."
+          "name": "action"
         },
         {
           "name": "click"
@@ -1808,7 +1918,6 @@
     {
       "name": "schmancy-chips",
       "path": "./src/chips/chips.ts",
-      "description": "Filter-chip group — container for selectable `<schmancy-chip>` children. Single or multi-select.",
       "attributes": [
         {
           "name": "multi",
@@ -1840,6 +1949,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "multi",
           "attribute": "multi",
@@ -1881,8 +1995,7 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`CustomEvent<{ value: string }>` (single) or `{ values: string[] }` (multi)."
+          "name": "change"
         }
       ]
     },
@@ -1921,6 +2034,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -2013,6 +2131,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -2074,7 +2197,7 @@
     {
       "name": "schmancy-input-chip",
       "path": "./src/chips/input-chip.ts",
-      "description": "Input chip — displays user-provided information (tags, recipients, filters) that can be removed but not toggled.\n\nIMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\nThey represent discrete pieces of user input (like entered tags, selections from lists, etc.)\nthat can only be removed, not toggled on/off.\n\nUse cases:\n- Displaying selected recipients in an email\n- Showing applied filters that can be removed\n- Tags or keywords entered by the user\n- Selected items from a multi-select dropdown",
+      "description": "Input chip component - represents user-provided information that can be removed.\n\nIMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\nThey represent discrete pieces of user input (like entered tags, selections from lists, etc.)\nthat can only be removed, not toggled on/off.\n\nUse cases:\n- Displaying selected recipients in an email\n- Showing applied filters that can be removed\n- Tags or keywords entered by the user\n- Selected items from a multi-select dropdown",
       "attributes": [
         {
           "name": "value",
@@ -2114,6 +2237,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -2189,7 +2317,7 @@
     {
       "name": "schmancy-suggestion-chip",
       "path": "./src/chips/suggestion-chip.ts",
-      "description": "Suggestion chip — single-tap insertion of a recommended value. Distinct from filter chips (no selected state) and assist chips (assist triggers an action; suggestion offers a value the user can pick).",
+      "description": "Suggestion chip component - provides contextual recommendations to users\n\nIMPORTANT: Suggestion chips do NOT have a selected state. They are designed to\nprovide suggestions and recommendations that trigger actions when clicked.\nUnlike filter chips, they cannot be toggled on/off.\n\nPure Schmancy implementation with Tailwind CSS and RxJS state management",
       "attributes": [
         {
           "name": "value",
@@ -2229,6 +2357,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -2274,8 +2407,7 @@
       ],
       "events": [
         {
-          "name": "action",
-          "description": "When the chip is clicked or activated via keyboard. `detail.value` echoes the chip's `value` attribute."
+          "name": "action"
         },
         {
           "name": "click"
@@ -2327,6 +2459,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "language",
           "attribute": "language",
@@ -2399,6 +2536,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "language",
           "attribute": "language",
@@ -2423,107 +2565,16 @@
       ]
     },
     {
-      "name": "schmancy-payment-card-form",
-      "path": "./src/components/form-elements/payment-card-form.ts",
-      "attributes": [
-        {
-          "name": "value",
-          "description": "The form data containing all payment card information",
-          "type": "{ cardName: string; cardNumber: string; expirationDate: string; cvv: string; }",
-          "default": "{\"cardName\":\"\",\"cardNumber\":\"\",\"expirationDate\":\"\",\"cvv\":\"\"}"
-        }
-      ],
+      "name": "schmancy-connectivity-status",
+      "path": "./src/connectivity/connectivity-status.ts",
       "properties": [
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "The form data containing all payment card information",
-          "type": "{ cardName: string; cardNumber: string; expirationDate: string; cvv: string; }",
-          "default": "{\"cardName\":\"\",\"cardNumber\":\"\",\"expirationDate\":\"\",\"cvv\":\"\"}"
-        },
-        {
-          "name": "cardType",
-          "description": "The detected card type (visa, mastercard, amex, etc.)\nThis is determined automatically by the Cleave.js library",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "cardName",
-          "description": "Individual field values tracked with state properties for reactivity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "cardNumber",
-          "type": "string | undefined"
-        },
-        {
-          "name": "expirationDate",
-          "type": "string | undefined"
-        },
-        {
-          "name": "cvv",
-          "type": "string | undefined"
-        },
-        {
-          "name": "isCardNameValid",
-          "description": "Field validity states for enhanced validation feedback",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "isCardNumberValid",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "isExpirationDateValid",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "isCvvValid",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "cardNumberInput",
-          "description": "Query selectors for the form elements",
-          "type": "SchmancyInput"
-        },
-        {
-          "name": "expirationDateInput",
-          "type": "SchmancyInput"
-        },
-        {
-          "name": "cvvInput",
-          "type": "SchmancyInput"
-        },
-        {
-          "name": "cardNameInput",
-          "type": "SchmancyInput"
-        },
-        {
-          "name": "form",
-          "type": "SchmancyForm"
-        }
-      ],
-      "events": [
-        {
-          "name": "change",
-          "description": "Fires when any field in the form changes"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Default slot for any additional content"
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         }
       ]
     },
-    {
-      "name": "schmancy-connectivity-status",
-      "path": "./src/connectivity/connectivity-status.ts"
-    },
     {
       "name": "schmancy-content-drawer",
       "path": "./src/content-drawer/drawer.ts",
@@ -2541,6 +2592,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "minWidth",
           "attribute": "minWidth",
@@ -2590,6 +2646,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "minWidth",
           "attribute": "minWidth",
@@ -2623,6 +2684,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "minWidth",
           "attribute": "minWidth"
@@ -3118,7 +3184,6 @@
     {
       "name": "schmancy-details",
       "path": "./src/details/details.ts",
-      "description": "Expandable disclosure panel — a styled `<details>` / `<summary>` pair with animated expand + overlay options.",
       "attributes": [
         {
           "name": "summary",
@@ -3166,6 +3231,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "summary",
           "attribute": "summary",
@@ -3229,18 +3299,12 @@
           "type": "string",
           "default": "\"all\""
         }
-      ],
-      "events": [
-        {
-          "name": "toggle",
-          "description": "When the open state changes (bubbles from the native `<details>`)."
-        }
       ]
     },
     {
       "name": "schmancy-dialog",
       "path": "./src/dialog/dialog.component.ts",
-      "description": "Modal dialog — content-only (just a styled panel) or confirm mode (title + message + confirm/cancel buttons). Prefer the imperative `$dialog` service for most use cases; use the element directly only when you want a declaratively-positioned dialog.",
+      "description": "Unified dialog component that handles both content-only and confirm modes.",
       "attributes": [
         {
           "name": "uid",
@@ -3364,15 +3428,10 @@
       ],
       "events": [
         {
-          "name": "confirm",
-          "description": "In confirm mode, when the confirm button is clicked."
-        },
-        {
-          "name": "cancel",
-          "description": "In confirm mode, when the cancel button or ESC is activated."
+          "name": "yes-dialog-here"
         },
         {
-          "name": "yes-dialog-here"
+          "name": "confirm"
         }
       ],
       "slots": [
@@ -3389,7 +3448,6 @@
     {
       "name": "schmancy-divider",
       "path": "./src/divider/divider.ts",
-      "description": "Thin horizontal (or vertical) separator rule between sections of content.",
       "attributes": [
         {
           "name": "outline",
@@ -3413,6 +3471,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "outline",
           "attribute": "outline",
@@ -3442,28 +3505,35 @@
     {
       "name": "schmancy-dropdown",
       "path": "./src/dropdown/dropdown-component.ts",
-      "description": "Anchored floating dropdown — a generic \"show this content relative to that trigger\" primitive. Unlike schmancy-menu (which uses the dialog service and is list-shaped), dropdown is a low-level popover anchored with Floating UI. Use when you want a custom-shaped overlay tied to a specific trigger element without the menu semantics.",
+      "description": "A dropdown component that displays content when triggered.",
       "attributes": [
         {
-          "name": "placement",
-          "description": "Placement of the dropdown relative to the trigger",
-          "type": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"",
-          "default": "\"bottom-start\""
-        },
+          "name": "open",
+          "description": "Whether the dropdown is currently open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placement",
+          "description": "Placement of the dropdown relative to the trigger",
+          "type": "\"top\" | \"top-start\" | \"top-end\" | \"right\" | \"right-start\" | \"right-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"left\" | \"left-start\" | \"left-end\"",
+          "default": "\"bottom-start\""
+        },
         {
           "name": "distance",
           "description": "Offset distance in pixels",
           "type": "number",
           "default": "8"
-        },
+        }
+      ],
+      "properties": [
         {
           "name": "open",
+          "attribute": "open",
           "description": "Whether the dropdown is currently open",
           "type": "boolean",
           "default": "false"
-        }
-      ],
-      "properties": [
+        },
         {
           "name": "placement",
           "attribute": "placement",
@@ -3493,23 +3563,6 @@
         {
           "name": "triggerElements",
           "type": "HTMLElement[]"
-        },
-        {
-          "name": "open",
-          "attribute": "open",
-          "description": "Whether the dropdown is currently open",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
-        {
-          "name": "open",
-          "description": "When the dropdown opens."
-        },
-        {
-          "name": "close",
-          "description": "When the dropdown closes."
         }
       ],
       "slots": [
@@ -3526,7 +3579,7 @@
     {
       "name": "schmancy-dropdown-content",
       "path": "./src/dropdown/dropdown-content.ts",
-      "description": "Content panel for a schmancy-dropdown — a styled positioned surface. Always nested inside schmancy-dropdown and placed alongside the trigger slot.",
+      "description": "Content container for the schmancy-dropdown component.",
       "attributes": [
         {
           "name": "width",
@@ -3554,6 +3607,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "width",
           "attribute": "width",
@@ -3592,14 +3650,13 @@
       "cssParts": [
         {
           "name": "content",
-          "description": "The inner wrapper element; style to override panel backgrounds, shadows, padding, or borders without shadow-root piercing."
+          "description": "The inner wrapper element; style to override panel\nbackgrounds, shadows, padding, or borders without shadow-root piercing."
         }
       ]
     },
     {
       "name": "schmancy-expand-root",
       "path": "./src/expand/expand-root.component.ts",
-      "description": "Container for schmancy-expand children — coordinates mutual-exclusion so only one child is open at a time. Also renders the portal panel that the active child expands into.",
       "attributes": [
         {
           "name": "type",
@@ -3608,6 +3665,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -3624,7 +3686,6 @@
     {
       "name": "schmancy-expand",
       "path": "./src/expand/expand.component.ts",
-      "description": "Accordion-style section — expands on click, coordinates with siblings via schmancy-expand-root to close any sibling when a new one opens. Only one schmancy-expand can be open at a time within the same root.",
       "attributes": [
         {
           "name": "summary",
@@ -3668,6 +3729,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "summary",
           "attribute": "summary",
@@ -3716,18 +3782,11 @@
           "type": "boolean",
           "default": "false"
         }
-      ],
-      "events": [
-        {
-          "name": "toggle",
-          "description": "When the open state changes."
-        }
       ]
     },
     {
       "name": "schmancy-select-countries",
       "path": "./src/extra/countries/countries.ts",
-      "description": "Country picker — type-ahead autocomplete over the ISO 3166-1 country list. Form-associated.",
       "attributes": [
         {
           "name": "value",
@@ -3760,6 +3819,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -3812,15 +3876,14 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`SchmancyAutocompleteChangeEvent` with `{ value: string }` (the ISO code)."
+          "name": "change"
         }
       ]
     },
     {
       "name": "schmancy-select-timezones",
       "path": "./src/extra/timezone/timezone.ts",
-      "description": "Timezone picker — type-ahead autocomplete over the IANA tz database. Form-associated.",
+      "description": "Timezone selector component with autocomplete filtering.",
       "attributes": [
         {
           "name": "hint",
@@ -3857,6 +3920,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -3913,8 +3981,7 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`SchmancyAutocompleteChangeEvent` with `{ value: string }` (the IANA tz name)."
+          "name": "change"
         }
       ]
     },
@@ -3987,6 +4054,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "id",
           "attribute": "id",
@@ -4066,7 +4138,7 @@
     {
       "name": "schmancy-form",
       "path": "./src/form/form.ts",
-      "description": "Ergonomic wrapper around a native `<form>`. Children are reparented into a light-DOM `<form>` on connection so form-associated custom elements resolve `internals.form` via native DOM ancestry.\n\n- Form-associated custom elements (FACE) resolve their `internals.form`\n  correctly via native DOM ancestry.\n- `new FormData(form)` collects values from every FACE + native control\n  without any manual walking.\n- `form.reset()` triggers `formResetCallback()` on every FACE.\n- `form.reportValidity()` runs native validation UI.\n- `<button type=\"submit\">` and `<schmancy-button type=\"submit\">` both\n  submit the form via the native submitter pipeline.\n\nThis component exists only to translate the native `submit` / `reset`\nevents into the Schmancy event shape (`detail: FormData`). All heavy\nlifting is the platform's.",
+      "description": "A thin ergonomic wrapper around a native `<form>` element. Its children are\nreparented into a `<form>` element in light DOM on connection, so:\n\n- Form-associated custom elements (FACE) resolve their `internals.form`\n  correctly via native DOM ancestry.\n- `new FormData(form)` collects values from every FACE + native control\n  without any manual walking.\n- `form.reset()` triggers `formResetCallback()` on every FACE.\n- `form.reportValidity()` runs native validation UI.\n- `<button type=\"submit\">` and `<schmancy-button type=\"submit\">` both\n  submit the form via the native submitter pipeline.\n\nThis component exists only to translate the native `submit` / `reset`\nevents into the Schmancy event shape (`detail: FormData`). All heavy\nlifting is the platform's.",
       "properties": [
         {
           "name": "tagName",
@@ -4136,6 +4208,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "fill",
           "attribute": "fill",
@@ -4244,6 +4321,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "html",
           "attribute": "html",
@@ -4296,7 +4378,7 @@
     {
       "name": "schmancy-input",
       "path": "./src/input/input.ts",
-      "description": "Single-line text input — the primary form-text primitive. Form-associated via ElementInternals, so it participates in native `<form>` submission, validation, and reset without additional wiring.",
+      "description": "Enhanced version of the SchmancyInput component with improved form integration\nand compatibility with legacy API.\n\nThis component uses the native form association API and maintains parity with\nnative input behaviors while providing a stylish, accessible interface.",
       "attributes": [
         {
           "name": "value",
@@ -4579,19 +4661,10 @@
       ],
       "events": [
         {
-          "name": "input",
-          "description": "`CustomEvent<{value: string}>` on every keystroke."
-        },
-        {
-          "name": "change",
-          "description": "`CustomEvent<{value: string}>` on blur/change."
-        },
-        {
-          "name": "enter",
-          "description": "`CustomEvent<{value: string}>` when user presses Enter."
+          "name": "reset"
         },
         {
-          "name": "reset"
+          "name": "input"
         },
         {
           "name": "focus"
@@ -4602,6 +4675,9 @@
         {
           "name": "autofill"
         },
+        {
+          "name": "enter"
+        },
         {
           "name": "click"
         }
@@ -4610,7 +4686,7 @@
     {
       "name": "sch-input",
       "path": "./src/input/input.ts",
-      "description": "Single-line text input — the primary form-text primitive. Form-associated via ElementInternals, so it participates in native `<form>` submission, validation, and reset without additional wiring.",
+      "description": "Enhanced version of the SchmancyInput component with improved form integration\nand compatibility with legacy API.\n\nThis component uses the native form association API and maintains parity with\nnative input behaviors while providing a stylish, accessible interface.",
       "attributes": [
         {
           "name": "value",
@@ -4893,19 +4969,10 @@
       ],
       "events": [
         {
-          "name": "input",
-          "description": "`CustomEvent<{value: string}>` on every keystroke."
-        },
-        {
-          "name": "change",
-          "description": "`CustomEvent<{value: string}>` on blur/change."
-        },
-        {
-          "name": "enter",
-          "description": "`CustomEvent<{value: string}>` when user presses Enter."
+          "name": "reset"
         },
         {
-          "name": "reset"
+          "name": "input"
         },
         {
           "name": "focus"
@@ -4916,6 +4983,9 @@
         {
           "name": "autofill"
         },
+        {
+          "name": "enter"
+        },
         {
           "name": "click"
         }
@@ -4942,6 +5012,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "data",
           "attribute": "data",
@@ -4975,6 +5050,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "size",
           "attribute": "size",
@@ -4997,1627 +5077,164 @@
       ]
     },
     {
-      "name": "schmancy-flex",
-      "path": "./src/layout/flex/flex.ts",
+      "name": "schmancy-scroll",
+      "path": "./src/layout/scroll/scroll.ts",
+      "description": "A custom scrollable container with enhanced features.",
       "attributes": [
         {
-          "name": "flow",
-          "type": "\"row\" | \"row-reverse\" | \"col\" | \"col-reverse\"",
-          "default": "\"col\""
+          "name": "hide",
+          "description": "Determines whether the scrollbar is hidden.\n\nWhen `hide` is true, the host element's scrollbars are hidden\nin supported browsers using CSS.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "wrap",
-          "type": "\"wrap\" | \"nowrap\" | \"wrap-reverse\"",
-          "default": "\"wrap\""
+          "name": "name",
+          "description": "Optional name identifier for the component.\nUsed for targeting this specific component with global events.",
+          "type": "string | undefined"
         },
         {
-          "name": "align",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"start\""
+          "name": "direction",
+          "description": "Direction of scrolling: vertical, horizontal, or both.\n- vertical: Only allows vertical scrolling\n- horizontal: Only allows horizontal scrolling\n- both: Allows both horizontal and vertical scrolling (default)",
+          "type": "\"vertical\" | \"horizontal\" | \"both\"",
+          "default": "\"both\""
         },
         {
-          "name": "justify",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"between\"",
-          "default": "\"start\""
-        },
+          "name": "debounce",
+          "description": "Debounce time in milliseconds for the scroll event.\nHigher values reduce the frequency of scroll events being dispatched.",
+          "type": "number",
+          "default": "10"
+        }
+      ],
+      "properties": [
         {
-          "name": "gap",
-          "type": "\"sm\" | \"md\" | \"lg\" | \"none\"",
-          "default": "\"none\""
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         },
         {
-          "name": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
+          "name": "hide",
+          "attribute": "hide",
+          "description": "Determines whether the scrollbar is hidden.\n\nWhen `hide` is true, the host element's scrollbars are hidden\nin supported browsers using CSS.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "padding",
+          "name": "name",
+          "attribute": "name",
+          "description": "Optional name identifier for the component.\nUsed for targeting this specific component with global events.",
           "type": "string | undefined"
         },
         {
-          "name": "margin",
-          "type": "string | undefined"
+          "name": "direction",
+          "attribute": "direction",
+          "description": "Direction of scrolling: vertical, horizontal, or both.\n- vertical: Only allows vertical scrolling\n- horizontal: Only allows horizontal scrolling\n- both: Allows both horizontal and vertical scrolling (default)",
+          "type": "\"vertical\" | \"horizontal\" | \"both\"",
+          "default": "\"both\""
         },
         {
-          "name": "width",
-          "type": "string | undefined"
+          "name": "scroller",
+          "description": "Reference to the scrollable element (the host element itself)",
+          "type": "HTMLElement"
         },
         {
-          "name": "height",
-          "type": "string | undefined"
-        },
+          "name": "debounce",
+          "attribute": "debounce",
+          "description": "Debounce time in milliseconds for the scroll event.\nHigher values reduce the frequency of scroll events being dispatched.",
+          "type": "number",
+          "default": "10"
+        }
+      ],
+      "events": [
         {
-          "name": "minWidth",
-          "type": "string | undefined"
-        },
+          "name": "scroll",
+          "description": "Fired when scrolling occurs (with a configurable debounce)"
+        }
+      ],
+      "slots": [
         {
-          "name": "minHeight",
-          "type": "string | undefined"
-        },
+          "name": "",
+          "description": "Default slot for content to be scrolled"
+        }
+      ],
+      "cssParts": [
         {
-          "name": "maxWidth",
-          "type": "string | undefined"
-        },
+          "name": "scroller",
+          "description": "The inner scrollable div element"
+        }
+      ]
+    },
+    {
+      "name": "schmancy-lightbox",
+      "path": "./src/lightbox/lightbox.ts",
+      "attributes": [
         {
-          "name": "maxHeight",
-          "type": "string | undefined"
+          "name": "src",
+          "type": "string",
+          "default": "\"\""
         },
         {
-          "name": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
+          "name": "images",
+          "type": "string[]",
+          "default": "[]"
         },
         {
-          "name": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
+          "name": "initialIndex",
+          "type": "number",
+          "default": "0"
         },
         {
-          "name": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
         {
-          "name": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         },
         {
-          "name": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
+          "name": "src",
+          "attribute": "src",
+          "type": "string",
+          "default": "\"\""
         },
         {
-          "name": "top",
-          "type": "string | undefined"
+          "name": "images",
+          "attribute": "images",
+          "type": "string[]",
+          "default": "[]"
         },
         {
-          "name": "right",
-          "type": "string | undefined"
+          "name": "initialIndex",
+          "attribute": "initialIndex",
+          "type": "number",
+          "default": "0"
         },
         {
-          "name": "bottom",
-          "type": "string | undefined"
-        },
+          "name": "open",
+          "attribute": "open",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
         {
-          "name": "left",
-          "type": "string | undefined"
+          "name": "close"
         },
         {
-          "name": "inset",
-          "type": "string | undefined"
-        },
+          "name": "change"
+        }
+      ]
+    },
+    {
+      "name": "schmancy-list-item",
+      "path": "./src/list/list-item.ts",
+      "attributes": [
         {
-          "name": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "properties": [
-        {
-          "name": "flow",
-          "attribute": "flow",
-          "type": "\"row\" | \"row-reverse\" | \"col\" | \"col-reverse\"",
-          "default": "\"col\""
-        },
-        {
-          "name": "wrap",
-          "attribute": "wrap",
-          "type": "\"wrap\" | \"nowrap\" | \"wrap-reverse\"",
-          "default": "\"wrap\""
-        },
-        {
-          "name": "align",
-          "attribute": "align",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"start\""
-        },
-        {
-          "name": "justify",
-          "attribute": "justify",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"between\"",
-          "default": "\"start\""
-        },
-        {
-          "name": "gap",
-          "attribute": "gap",
-          "type": "\"sm\" | \"md\" | \"lg\" | \"none\"",
-          "default": "\"none\""
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"styles\",null]"
-        },
-        {
-          "name": "layout",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "center",
-          "attribute": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "padding",
-          "attribute": "padding",
-          "type": "string | undefined"
-        },
-        {
-          "name": "margin",
-          "attribute": "margin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "width",
-          "attribute": "width",
-          "type": "string | undefined"
-        },
-        {
-          "name": "height",
-          "attribute": "height",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minWidth",
-          "attribute": "minWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minHeight",
-          "attribute": "minHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxWidth",
-          "attribute": "maxWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxHeight",
-          "attribute": "maxHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "display",
-          "attribute": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflow",
-          "attribute": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowX",
-          "attribute": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowY",
-          "attribute": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "position",
-          "attribute": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "top",
-          "attribute": "top",
-          "type": "string | undefined"
-        },
-        {
-          "name": "right",
-          "attribute": "right",
-          "type": "string | undefined"
-        },
-        {
-          "name": "bottom",
-          "attribute": "bottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "left",
-          "attribute": "left",
-          "type": "string | undefined"
-        },
-        {
-          "name": "inset",
-          "attribute": "inset",
-          "type": "string | undefined"
-        },
-        {
-          "name": "zIndex",
-          "attribute": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "attribute": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "attribute": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "attribute": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "attribute": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "attribute": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "attribute": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "attribute": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "attribute": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "attribute": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "attribute": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "attribute": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "attribute": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "attribute": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "attribute": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "attribute": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "attribute": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "attribute": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "attribute": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "attribute": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "attribute": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "attribute": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "attribute": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "deprecated": true,
-      "deprecatedMessage": "Use Tailwind CSS flex classes directly instead of this component.\nThis component will be removed in a future version.\n\nMigration guide:\n- Replace <schmancy-flex> with <div class=\"flex ...\">\n- Use Tailwind's flex utilities: flex-row, flex-col, gap-*, items-*, justify-*, etc."
-    },
-    {
-      "name": "schmancy-grid",
-      "path": "./src/layout/grid/grid.ts",
-      "attributes": [
-        {
-          "name": "flow",
-          "type": "\"row\" | \"col\" | \"dense\" | \"row-dense\" | \"col-dense\"",
-          "default": "\"row\""
-        },
-        {
-          "name": "align",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "justify",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "content",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"between\" | \"around\" | \"evenly\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "gap",
-          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"none\"",
-          "default": "\"none\""
-        },
-        {
-          "name": "cols",
-          "type": "string | undefined"
-        },
-        {
-          "name": "rows",
-          "type": "string | undefined"
-        },
-        {
-          "name": "rcols",
-          "type": "{ xs?: string | number | undefined; sm?: string | number | undefined; md?: string | number | undefined; lg?: string | number | undefined; xl?: string | number | undefined; '2xl'?: string | number | undefined; } | undefined"
-        },
-        {
-          "name": "wrap",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "padding",
-          "type": "string | undefined"
-        },
-        {
-          "name": "margin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "width",
-          "type": "string | undefined"
-        },
-        {
-          "name": "height",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "top",
-          "type": "string | undefined"
-        },
-        {
-          "name": "right",
-          "type": "string | undefined"
-        },
-        {
-          "name": "bottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "left",
-          "type": "string | undefined"
-        },
-        {
-          "name": "inset",
-          "type": "string | undefined"
-        },
-        {
-          "name": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "properties": [
-        {
-          "name": "flow",
-          "attribute": "flow",
-          "type": "\"row\" | \"col\" | \"dense\" | \"row-dense\" | \"col-dense\"",
-          "default": "\"row\""
-        },
-        {
-          "name": "align",
-          "attribute": "align",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "justify",
-          "attribute": "justify",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "content",
-          "attribute": "content",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"between\" | \"around\" | \"evenly\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "gap",
-          "attribute": "gap",
-          "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"none\"",
-          "default": "\"none\""
-        },
-        {
-          "name": "cols",
-          "attribute": "cols",
-          "type": "string | undefined"
-        },
-        {
-          "name": "rows",
-          "attribute": "rows",
-          "type": "string | undefined"
-        },
-        {
-          "name": "rcols",
-          "attribute": "rcols",
-          "type": "{ xs?: string | number | undefined; sm?: string | number | undefined; md?: string | number | undefined; lg?: string | number | undefined; xl?: string | number | undefined; '2xl'?: string | number | undefined; } | undefined"
-        },
-        {
-          "name": "wrap",
-          "attribute": "wrap",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "assignedElements",
-          "type": "HTMLElement[]"
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"styles\",null]"
-        },
-        {
-          "name": "layout",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "center",
-          "attribute": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "padding",
-          "attribute": "padding",
-          "type": "string | undefined"
-        },
-        {
-          "name": "margin",
-          "attribute": "margin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "width",
-          "attribute": "width",
-          "type": "string | undefined"
-        },
-        {
-          "name": "height",
-          "attribute": "height",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minWidth",
-          "attribute": "minWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minHeight",
-          "attribute": "minHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxWidth",
-          "attribute": "maxWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxHeight",
-          "attribute": "maxHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "display",
-          "attribute": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflow",
-          "attribute": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowX",
-          "attribute": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowY",
-          "attribute": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "position",
-          "attribute": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "top",
-          "attribute": "top",
-          "type": "string | undefined"
-        },
-        {
-          "name": "right",
-          "attribute": "right",
-          "type": "string | undefined"
-        },
-        {
-          "name": "bottom",
-          "attribute": "bottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "left",
-          "attribute": "left",
-          "type": "string | undefined"
-        },
-        {
-          "name": "inset",
-          "attribute": "inset",
-          "type": "string | undefined"
-        },
-        {
-          "name": "zIndex",
-          "attribute": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "attribute": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "attribute": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "attribute": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "attribute": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "attribute": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "attribute": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "attribute": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "attribute": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "attribute": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "attribute": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "attribute": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "attribute": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "attribute": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "attribute": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "attribute": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "attribute": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "attribute": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "attribute": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "attribute": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "attribute": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "attribute": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "attribute": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "deprecated": true,
-      "deprecatedMessage": "Use Tailwind CSS grid classes directly instead of this component.\nThis component will be removed in a future version.\n\nMigration guide:\n- Replace <schmancy-grid> with <div class=\"grid ...\">\n- Use Tailwind's grid utilities: grid-cols-*, gap-*, items-*, justify-items-*, etc."
-    },
-    {
-      "name": "schmancy-scroll",
-      "path": "./src/layout/scroll/scroll.ts",
-      "description": "Scrollable container with debounced scroll events, horizontal/vertical direction, optional hidden scrollbar, and programmatic scrollTo via command events or refs.",
-      "attributes": [
-        {
-          "name": "hide",
-          "description": "Determines whether the scrollbar is hidden.\n\nWhen `hide` is true, the host element's scrollbars are hidden\nin supported browsers using CSS.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "name",
-          "description": "Optional name identifier for the component.\nUsed for targeting this specific component with global events.",
-          "type": "string | undefined"
-        },
-        {
-          "name": "direction",
-          "description": "Direction of scrolling: vertical, horizontal, or both.\n- vertical: Only allows vertical scrolling\n- horizontal: Only allows horizontal scrolling\n- both: Allows both horizontal and vertical scrolling (default)",
-          "type": "\"vertical\" | \"horizontal\" | \"both\"",
-          "default": "\"both\""
-        },
-        {
-          "name": "debounce",
-          "description": "Debounce time in milliseconds for the scroll event.\nHigher values reduce the frequency of scroll events being dispatched.",
-          "type": "number",
-          "default": "10"
-        }
-      ],
-      "properties": [
-        {
-          "name": "hide",
-          "attribute": "hide",
-          "description": "Determines whether the scrollbar is hidden.\n\nWhen `hide` is true, the host element's scrollbars are hidden\nin supported browsers using CSS.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "Optional name identifier for the component.\nUsed for targeting this specific component with global events.",
-          "type": "string | undefined"
-        },
-        {
-          "name": "direction",
-          "attribute": "direction",
-          "description": "Direction of scrolling: vertical, horizontal, or both.\n- vertical: Only allows vertical scrolling\n- horizontal: Only allows horizontal scrolling\n- both: Allows both horizontal and vertical scrolling (default)",
-          "type": "\"vertical\" | \"horizontal\" | \"both\"",
-          "default": "\"both\""
-        },
-        {
-          "name": "scroller",
-          "description": "Reference to the scrollable element (the host element itself)",
-          "type": "HTMLElement"
-        },
-        {
-          "name": "debounce",
-          "attribute": "debounce",
-          "description": "Debounce time in milliseconds for the scroll event.\nHigher values reduce the frequency of scroll events being dispatched.",
-          "type": "number",
-          "default": "10"
-        }
-      ],
-      "events": [
-        {
-          "name": "scroll",
-          "description": "Fired when scrolling occurs (with a configurable debounce)"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Default slot for content to be scrolled"
-        }
-      ],
-      "cssParts": [
-        {
-          "name": "scroller",
-          "description": "The inner scrollable div element"
-        }
-      ]
-    },
-    {
-      "name": "sch-flex",
-      "path": "./src/layout/v2/flex.ts",
-      "attributes": [
-        {
-          "name": "inline",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "flow",
-          "description": "Flow property that determines the flex direction.\nAllowed values:\n - Standard: 'row', 'row-reverse', 'col', 'col-reverse'\n - Dense variants: 'row-dense', 'col-dense' (dense implies wrapping)",
-          "type": "\"row\" | \"row-reverse\" | \"col\" | \"col-reverse\" | \"row-dense\" | \"col-dense\"",
-          "default": "\"row\""
-        },
-        {
-          "name": "wrap",
-          "description": "Flex-wrap options:\n - 'wrap', 'nowrap', or 'wrap-reverse'",
-          "type": "\"wrap\" | \"nowrap\" | \"wrap-reverse\"",
-          "default": "\"wrap\""
-        },
-        {
-          "name": "align",
-          "description": "Align-items (vertical alignment of flex items):\n - 'start', 'center', 'end', 'stretch', or 'baseline'",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "justify",
-          "description": "Justify-content (horizontal distribution):\n - 'start', 'center', 'end', 'between', 'around', or 'evenly'",
-          "type": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\"",
-          "default": "\"start\""
-        },
-        {
-          "name": "content",
-          "description": "Align-content (spacing between rows when wrapping):\n - 'start', 'center', 'end', 'between', 'around', or 'evenly'",
-          "type": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\" | undefined"
-        },
-        {
-          "name": "gap",
-          "description": "Gap between flex items.\nOptions (based on Tailwind CSS 4 spacing scale):\n - 'none', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '12', '16', '20', '24', '32', '40', '48', '56', or '64'",
-          "type": "\"none\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"12\" | \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"56\" | \"64\"",
-          "default": "\"none\""
-        },
-        {
-          "name": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "padding",
-          "type": "string | undefined"
-        },
-        {
-          "name": "margin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "width",
-          "type": "string | undefined"
-        },
-        {
-          "name": "height",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "top",
-          "type": "string | undefined"
-        },
-        {
-          "name": "right",
-          "type": "string | undefined"
-        },
-        {
-          "name": "bottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "left",
-          "type": "string | undefined"
-        },
-        {
-          "name": "inset",
-          "type": "string | undefined"
-        },
-        {
-          "name": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "properties": [
-        {
-          "name": "inline",
-          "attribute": "inline",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "flow",
-          "attribute": "flow",
-          "description": "Flow property that determines the flex direction.\nAllowed values:\n - Standard: 'row', 'row-reverse', 'col', 'col-reverse'\n - Dense variants: 'row-dense', 'col-dense' (dense implies wrapping)",
-          "type": "\"row\" | \"row-reverse\" | \"col\" | \"col-reverse\" | \"row-dense\" | \"col-dense\"",
-          "default": "\"row\""
-        },
-        {
-          "name": "wrap",
-          "attribute": "wrap",
-          "description": "Flex-wrap options:\n - 'wrap', 'nowrap', or 'wrap-reverse'",
-          "type": "\"wrap\" | \"nowrap\" | \"wrap-reverse\"",
-          "default": "\"wrap\""
-        },
-        {
-          "name": "align",
-          "attribute": "align",
-          "description": "Align-items (vertical alignment of flex items):\n - 'start', 'center', 'end', 'stretch', or 'baseline'",
-          "type": "\"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\"",
-          "default": "\"stretch\""
-        },
-        {
-          "name": "justify",
-          "attribute": "justify",
-          "description": "Justify-content (horizontal distribution):\n - 'start', 'center', 'end', 'between', 'around', or 'evenly'",
-          "type": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\"",
-          "default": "\"start\""
-        },
-        {
-          "name": "content",
-          "attribute": "content",
-          "description": "Align-content (spacing between rows when wrapping):\n - 'start', 'center', 'end', 'between', 'around', or 'evenly'",
-          "type": "\"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\" | undefined"
-        },
-        {
-          "name": "gap",
-          "attribute": "gap",
-          "description": "Gap between flex items.\nOptions (based on Tailwind CSS 4 spacing scale):\n - 'none', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '12', '16', '20', '24', '32', '40', '48', '56', or '64'",
-          "type": "\"none\" | \"0\" | \"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"10\" | \"12\" | \"16\" | \"20\" | \"24\" | \"32\" | \"40\" | \"48\" | \"56\" | \"64\"",
-          "default": "\"none\""
-        },
-        {
-          "name": "styles",
-          "type": "array",
-          "default": "[\"styles\",null]"
-        },
-        {
-          "name": "layout",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "center",
-          "attribute": "center",
-          "type": "boolean | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "padding",
-          "attribute": "padding",
-          "type": "string | undefined"
-        },
-        {
-          "name": "margin",
-          "attribute": "margin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "width",
-          "attribute": "width",
-          "type": "string | undefined"
-        },
-        {
-          "name": "height",
-          "attribute": "height",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minWidth",
-          "attribute": "minWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "minHeight",
-          "attribute": "minHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxWidth",
-          "attribute": "maxWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "maxHeight",
-          "attribute": "maxHeight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "display",
-          "attribute": "display",
-          "type": "\"none\" | \"block\" | \"inline-block\" | \"inline\" | \"flex\" | \"inline-flex\" | \"grid\" | \"inline-grid\" | \"table\" | \"inline-table\" | \"flow-root\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflow",
-          "attribute": "overflow",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowX",
-          "attribute": "overflowX",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "overflowY",
-          "attribute": "overflowY",
-          "type": "\"visible\" | \"hidden\" | \"scroll\" | \"auto\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "position",
-          "attribute": "position",
-          "type": "\"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\" | undefined",
-          "default": "\"undefined\""
-        },
-        {
-          "name": "top",
-          "attribute": "top",
-          "type": "string | undefined"
-        },
-        {
-          "name": "right",
-          "attribute": "right",
-          "type": "string | undefined"
-        },
-        {
-          "name": "bottom",
-          "attribute": "bottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "left",
-          "attribute": "left",
-          "type": "string | undefined"
-        },
-        {
-          "name": "inset",
-          "attribute": "inset",
-          "type": "string | undefined"
-        },
-        {
-          "name": "zIndex",
-          "attribute": "zIndex",
-          "type": "string | undefined"
-        },
-        {
-          "name": "border",
-          "attribute": "border",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderTop",
-          "attribute": "borderTop",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRight",
-          "attribute": "borderRight",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderBottom",
-          "attribute": "borderBottom",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderLeft",
-          "attribute": "borderLeft",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderColor",
-          "attribute": "borderColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderRadius",
-          "attribute": "borderRadius",
-          "type": "string | undefined"
-        },
-        {
-          "name": "borderWidth",
-          "attribute": "borderWidth",
-          "type": "string | undefined"
-        },
-        {
-          "name": "boxShadow",
-          "attribute": "boxShadow",
-          "type": "string | undefined"
-        },
-        {
-          "name": "opacity",
-          "attribute": "opacity",
-          "type": "string | undefined"
-        },
-        {
-          "name": "background",
-          "attribute": "background",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundImage",
-          "attribute": "backgroundImage",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundPosition",
-          "attribute": "backgroundPosition",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundSize",
-          "attribute": "backgroundSize",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundRepeat",
-          "attribute": "backgroundRepeat",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundAttachment",
-          "attribute": "backgroundAttachment",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundColor",
-          "attribute": "backgroundColor",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundClip",
-          "attribute": "backgroundClip",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundOrigin",
-          "attribute": "backgroundOrigin",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backgroundBlendMode",
-          "attribute": "backgroundBlendMode",
-          "type": "string | undefined"
-        },
-        {
-          "name": "filter",
-          "attribute": "filter",
-          "type": "string | undefined"
-        },
-        {
-          "name": "backdropFilter",
-          "attribute": "backdropFilter",
-          "type": "string | undefined"
-        }
-      ],
-      "deprecated": true,
-      "deprecatedMessage": "Use Tailwind CSS flex classes directly instead of this component.\nThis component will be removed in a future version.\n\nMigration guide:\n- Replace <sch-flex> with <div class=\"flex ...\">\n- Use Tailwind's flex utilities: flex-row, flex-col, gap-*, items-*, justify-*, etc.\n\nOriginal documentation:\n\nSchmancyFlex exposes a flex container with all the Tailwind CSS 4 options:\n\n- **Display**: By default uses `flex` but can be set to inline using the `inline` property.\n- **Flow**: Accepts 'row', 'row-reverse', 'col', 'col-reverse' as well as grid‐like dense variants:\n- Dense variants (`row-dense`, `col-dense`) force wrapping.\n- **Wrap**: 'wrap', 'nowrap', or 'wrap-reverse'\n- **Align Items**: 'start', 'center', 'end', 'stretch', or 'baseline'\n- **Justify Content**: 'start', 'center', 'end', 'between', 'around', or 'evenly'\n- **Align Content** (for multi-line flex containers): 'start', 'center', 'end', 'between', 'around', or 'evenly'\n- **Gap**: Supports Tailwind’s spacing scale (e.g. 'none', '0', '1', '2', …, '64')"
-    },
-    {
-      "name": "schmancy-lightbox",
-      "path": "./src/lightbox/lightbox.ts",
-      "description": "Image lightbox — thumbnail grid that opens to a full-screen viewer on click, with keyboard navigation between images.",
-      "attributes": [
-        {
-          "name": "src",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "images",
-          "type": "string[]",
-          "default": "[]"
-        },
-        {
-          "name": "initialIndex",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "open",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "src",
-          "attribute": "src",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "images",
-          "attribute": "images",
-          "type": "string[]",
-          "default": "[]"
-        },
-        {
-          "name": "initialIndex",
-          "attribute": "initialIndex",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "open",
-          "attribute": "open",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
-        {
-          "name": "change",
-          "description": "When the active image index changes (next/prev). `detail.index` is the new active image's position in the array."
-        },
-        {
-          "name": "close",
-          "description": "When the viewer is dismissed (ESC, backdrop click, close button)."
-        }
-      ]
-    },
-    {
-      "name": "schmancy-list-item",
-      "path": "./src/list/list-item.ts",
-      "description": "Single row in a schmancy-list — supports leading icon/avatar, main content, trailing actions. Clickable via click event, or used as a schmancy-menu-item's visual base.",
-      "attributes": [
-        {
-          "name": "variant",
-          "type": "TSurfaceColor"
+          "name": "variant",
+          "type": "TSurfaceColor"
         },
         {
           "name": "rounded",
@@ -6634,6 +5251,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "variant",
           "attribute": "variant",
@@ -6674,7 +5296,7 @@
     {
       "name": "schmancy-list",
       "path": "./src/list/list.ts",
-      "description": "Wrapped list container — holds schmancy-list-item children on a themed surface. Optionally scrollable.",
+      "description": "`<schmancy-list>` component.\n\nA list component that wraps its content within a customizable surface.\nIt allows you to set the surface type and fill style, and can optionally\nenable scrolling behavior by delegating the scroller attribute to the surface.",
       "attributes": [
         {
           "name": "surface",
@@ -6696,6 +5318,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "surface",
           "attribute": "surface",
@@ -6768,6 +5395,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "subject",
           "attribute": "subject",
@@ -6845,6 +5477,12 @@
           "type": "string[]",
           "default": "[]"
         },
+        {
+          "name": "importSources",
+          "description": "Sources users can import recipients from (forwarded from parent)",
+          "type": "ImportSource[]",
+          "default": "[]"
+        },
         {
           "name": "selectedRecipients",
           "description": "Currently selected recipients",
@@ -6888,6 +5526,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -6902,6 +5545,13 @@
           "type": "string[]",
           "default": "[]"
         },
+        {
+          "name": "importSources",
+          "attribute": "importSources",
+          "description": "Sources users can import recipients from (forwarded from parent)",
+          "type": "ImportSource[]",
+          "default": "[]"
+        },
         {
           "name": "selectedRecipients",
           "attribute": "selectedRecipients",
@@ -6979,6 +5629,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "templates",
           "attribute": "templates",
@@ -7041,6 +5696,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "subject",
           "attribute": "subject",
@@ -7146,6 +5806,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "config",
           "attribute": "config",
@@ -7305,6 +5970,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "address",
           "attribute": "address",
@@ -7385,18 +6055,25 @@
     {
       "name": "schmancy-menu-item",
       "path": "./src/menu/menu-item.ts",
-      "description": "Single item inside a schmancy-menu. Auto-dismisses the menu dialog on click — attach your action handler to `@click` and it just works.",
-      "slots": [
+      "properties": [
         {
-          "name": "",
-          "description": "The item label and optional icons."
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         }
       ]
     },
     {
       "name": "schmancy-menu",
       "path": "./src/menu/menu.ts",
-      "description": "Floating menu — a trigger button + a list of schmancy-menu-item children that open as a positioned dialog on click.",
+      "description": "Menu Component\n\nCRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.\nNO <ul> wrapper, NO classes, NO additional markup in the dialog call.\nThe dialog service handles positioning and display - we just pass the pure content.",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ],
       "slots": [
         {
           "name": "trigger",
@@ -7413,103 +6090,15 @@
       ]
     },
     {
-      "name": "schmancy-metric",
-      "path": "./src/metric/metric.ts",
-      "description": "KPI metric — a label + value pair for dashboards, with optional trend + delta indicators.",
-      "attributes": [
-        {
-          "name": "label",
-          "description": "Upper-case caption shown above the value.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "value",
-          "description": "Primary metric value, rendered large. Pre-format numbers/currency yourself.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "trend",
-          "description": "Optional trend direction. Controls the color + arrow on the delta pill.",
-          "type": "MetricTrend | undefined"
-        },
-        {
-          "name": "delta",
-          "description": "Optional delta copy displayed in a pill next to the value (e.g. `+12%`).",
-          "type": "string | undefined"
-        },
-        {
-          "name": "size",
-          "description": "Size scale affecting label + value typography.",
-          "type": "MetricSize",
-          "default": "\"md\""
-        }
-      ],
+      "name": "schmancy-nav-drawer-appbar",
+      "path": "./src/nav-drawer/appbar.ts",
       "properties": [
         {
-          "name": "label",
-          "attribute": "label",
-          "description": "Upper-case caption shown above the value.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "value",
-          "attribute": "value",
-          "description": "Primary metric value, rendered large. Pre-format numbers/currency yourself.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "trend",
-          "attribute": "trend",
-          "description": "Optional trend direction. Controls the color + arrow on the delta pill.",
-          "type": "MetricTrend | undefined"
-        },
-        {
-          "name": "delta",
-          "attribute": "delta",
-          "description": "Optional delta copy displayed in a pill next to the value (e.g. `+12%`).",
-          "type": "string | undefined"
-        },
-        {
-          "name": "size",
-          "attribute": "size",
-          "description": "Size scale affecting label + value typography.",
-          "type": "MetricSize",
-          "default": "\"md\""
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Optional custom value rendering (overrides the `value` attribute if present)."
-        },
-        {
-          "name": "label",
-          "description": "Optional custom label rendering (overrides the `label` attribute if present)."
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         }
       ],
-      "cssParts": [
-        {
-          "name": "label",
-          "description": "The label line."
-        },
-        {
-          "name": "value",
-          "description": "The value line."
-        },
-        {
-          "name": "delta",
-          "description": "The delta pill (only when `delta` is set)."
-        }
-      ]
-    },
-    {
-      "name": "schmancy-nav-drawer-appbar",
-      "path": "./src/nav-drawer/appbar.ts",
-      "description": "Top app bar region inside schmancy-nav-drawer — the horizontal strip above the content area that typically holds the page title, hamburger trigger, and contextual actions.",
       "slots": [
         {
           "name": "",
@@ -7520,7 +6109,13 @@
     {
       "name": "schmancy-nav-drawer-content",
       "path": "./src/nav-drawer/content.ts",
-      "description": "Main content region inside schmancy-nav-drawer — typically hosts the router outlet or the page's body content.",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ],
       "events": [
         {
           "name": "scroll"
@@ -7530,7 +6125,6 @@
     {
       "name": "schmancy-nav-drawer",
       "path": "./src/nav-drawer/drawer.ts",
-      "description": "Responsive navigation drawer — a left sidebar that becomes a hamburger-triggered modal overlay on narrow viewports. Composes schmancy-nav-drawer-navbar (the nav rail), schmancy-nav-drawer-appbar (the top bar), and schmancy-nav-drawer-content (the main region).",
       "attributes": [
         {
           "name": "fullscreen",
@@ -7549,6 +6143,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "fullscreen",
           "attribute": "fullscreen",
@@ -7572,12 +6171,6 @@
           "type": "TSchmancyDrawerNavbarState"
         }
       ],
-      "events": [
-        {
-          "name": "schmancy-drawer-state",
-          "description": "When the drawer open/close state changes on mobile."
-        }
-      ],
       "slots": [
         {
           "name": "",
@@ -7588,7 +6181,6 @@
     {
       "name": "schmancy-nav-drawer-navbar",
       "path": "./src/nav-drawer/navbar.ts",
-      "description": "Sidebar region inside schmancy-nav-drawer — the persistent-on-desktop / modal-on-mobile nav rail.",
       "attributes": [
         {
           "name": "width",
@@ -7629,7 +6221,7 @@
     {
       "name": "schmancy-navigation-bar-item",
       "path": "./src/navigation-bar/navigation-bar-item.ts",
-      "description": "Single destination inside schmancy-navigation-bar — an icon + optional label representing one primary app destination.",
+      "description": "`<schmancy-navigation-bar-item>` component\n\nIndividual navigation item for use within a navigation bar.\nRepresents a single destination with an icon and optional label following Material Design 3 specifications.",
       "attributes": [
         {
           "name": "icon",
@@ -7669,6 +6261,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "icon",
           "attribute": "icon",
@@ -7740,7 +6337,7 @@
     {
       "name": "schmancy-navigation-bar",
       "path": "./src/navigation-bar/navigation-bar.ts",
-      "description": "Bottom navigation bar — Material Design 3 horizontal nav for mobile primary destinations (3–7 items). Auto-hides in fullscreen mode.",
+      "description": "`<schmancy-navigation-bar>` component\n\nA horizontal navigation component following Material Design 3 specifications.\nNavigation bars provide access to between 3-7 primary destinations.\nAutomatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\n\n**IMPORTANT**: This component includes `z-10` by default (consistent with navigation-rail).\nThe consumer is responsible for positioning the navigation bar in their layout.\nFor typical bottom-fixed positioning, add: `class=\"fixed bottom-0 left-0 right-0\"`.",
       "attributes": [
         {
           "name": "activeIndex",
@@ -7768,6 +6365,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "activeIndex",
           "attribute": "activeIndex",
@@ -7816,7 +6418,7 @@
     {
       "name": "schmancy-navigation-rail-item",
       "path": "./src/navigation-rail/navigation-rail-item.ts",
-      "description": "Single destination inside schmancy-navigation-rail — vertically-stacked icon + optional label.",
+      "description": "Material Design 3 Navigation Rail Item Component",
       "attributes": [
         {
           "name": "icon",
@@ -8010,7 +6612,7 @@
     {
       "name": "schmancy-navigation-rail",
       "path": "./src/navigation-rail/navigation-rail.ts",
-      "description": "Vertical navigation rail — Material Design 3 compact left-side nav for desktop / tablet layouts with 3–7 primary destinations. Auto-hides in fullscreen mode.",
+      "description": "Material Design 3 Navigation Rail Component",
       "attributes": [
         {
           "name": "activeIndex",
@@ -8210,6 +6812,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "title",
           "attribute": "title",
@@ -8318,6 +6925,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -8374,7 +6986,7 @@
     {
       "name": "schmancy-overlay",
       "path": "./src/overlay/overlay.component.ts",
-      "description": "The single overlay element. Hosts a native `<dialog>` in its shadow\nroot for centered/sheet layouts; for anchored, we stay modeless by\nusing `<dialog>` with .show() (non-modal) + explicit positioning.\n\nPublic lifecycle: the service calls `open()` to mount content and\nanimate in, `close(reason)` to animate out and dismiss. The element\ndispatches `overlay-close` when closed; the service listens and\nresolves the caller's Observable.",
+      "description": "The single overlay element. Custom `<div>` shell (not a native\n`<dialog>`) — one backdrop mechanism for all layouts, one focus-trap\npath, one animation orchestrator. The shell is always rendered; the\nbackdrop only renders when modal. The surface is positioned per tier:\n\n- Modal layouts (centered / sheet) → backdrop + surface, focus-trapped,\n  library-managed z-index.\n- Anchored 'css-anchor' tier → surface as `popover=\"auto\"` with\n  CSS Anchor Positioning; native top-layer + light-dismiss.\n- Anchored 'popover-fui' tier → surface as `popover=\"auto\"` + Floating\n  UI position math; native top-layer + light-dismiss.\n- Anchored 'fui-only' tier → surface positioned by Floating UI;\n  manual click-outside + manual Esc.\n\nPublic lifecycle: the service calls `open()` to mount content and\nanimate in, `close(reason)` to animate out and dismiss. The element\nexposes `closed$` (Observable emitting reason + result once) and\n`tier` / `layout` / `modal` as properties for the stack entry.",
       "attributes": [
         {
           "name": "layout",
@@ -8390,9 +7002,19 @@
           "name": "modal",
           "type": "boolean",
           "default": "true"
+        },
+        {
+          "name": "tier",
+          "type": "OverlayTier",
+          "default": "\"modal\""
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "layout",
           "attribute": "layout",
@@ -8411,6 +7033,12 @@
           "type": "boolean",
           "default": "true"
         },
+        {
+          "name": "tier",
+          "attribute": "tier",
+          "type": "OverlayTier",
+          "default": "\"modal\""
+        },
         {
           "name": "closed$",
           "description": "Service subscribes to this to know when the overlay dismissed.",
@@ -8471,7 +7099,7 @@
         },
         {
           "name": "input-type",
-          "type": "string",
+          "type": "\"number\" | \"text\" | \"date\" | \"datetime-local\" | \"tel\" | \"search\" | \"email\" | \"url\" | \"password\" | \"time\"",
           "default": "\"text\""
         },
         {
@@ -8485,6 +7113,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "heading",
           "attribute": "heading",
@@ -8531,81 +7164,184 @@
           "type": "string | undefined"
         },
         {
-          "name": "defaultValue",
-          "attribute": "default-value",
+          "name": "defaultValue",
+          "attribute": "default-value",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "type": "string | undefined"
+        },
+        {
+          "name": "inputType",
+          "attribute": "input-type",
+          "type": "\"number\" | \"text\" | \"date\" | \"datetime-local\" | \"tel\" | \"search\" | \"email\" | \"url\" | \"password\" | \"time\"",
+          "default": "\"text\""
+        },
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "type": "string | undefined"
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "close"
+        }
+      ]
+    },
+    {
+      "name": "schmancy-page",
+      "path": "./src/page/page.ts",
+      "description": "Native mobile-like page container.\nPrevents double-tap zoom, pull-to-refresh, rubber-banding.\nAutomatically fills remaining viewport height.",
+      "attributes": [
+        {
+          "name": "rows",
+          "description": "Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\")",
+          "type": "string",
+          "default": "\"auto_1fr_auto\""
+        },
+        {
+          "name": "show-scrollbar",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-select",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "rows",
+          "attribute": "rows",
+          "description": "Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\")",
+          "type": "string",
+          "default": "\"auto_1fr_auto\""
+        },
+        {
+          "name": "showScrollbar",
+          "attribute": "show-scrollbar",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noSelect",
+          "attribute": "no-select",
+          "type": "boolean",
+          "default": "false"
+        }
+      ]
+    },
+    {
+      "name": "schmancy-payment-card-form",
+      "path": "./src/payment-card-form/payment-card-form.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The form data containing all payment card information",
+          "type": "{ cardName: string; cardNumber: string; expirationDate: string; cvv: string; }",
+          "default": "{\"cardName\":\"\",\"cardNumber\":\"\",\"expirationDate\":\"\",\"cvv\":\"\"}"
+        }
+      ],
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The form data containing all payment card information",
+          "type": "{ cardName: string; cardNumber: string; expirationDate: string; cvv: string; }",
+          "default": "{\"cardName\":\"\",\"cardNumber\":\"\",\"expirationDate\":\"\",\"cvv\":\"\"}"
+        },
+        {
+          "name": "cardType",
+          "description": "The detected card type (visa, mastercard, amex, etc.)\nThis is determined automatically by the Cleave.js library",
           "type": "string",
           "default": "\"\""
         },
         {
-          "name": "placeholder",
-          "attribute": "placeholder",
+          "name": "cardName",
+          "description": "Individual field values tracked with state properties for reactivity",
           "type": "string | undefined"
         },
         {
-          "name": "inputType",
-          "attribute": "input-type",
-          "type": "string",
-          "default": "\"text\""
+          "name": "cardNumber",
+          "type": "string | undefined"
         },
         {
-          "name": "pattern",
-          "attribute": "pattern",
+          "name": "expirationDate",
           "type": "string | undefined"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
+          "name": "cvv",
+          "type": "string | undefined"
+        },
         {
-          "name": "close"
-        }
-      ]
-    },
-    {
-      "name": "schmancy-page",
-      "path": "./src/page/page.ts",
-      "description": "Mobile-first page container — fills remaining viewport height, suppresses double-tap zoom / pull-to-refresh / rubber-banding. Lays children in a CSS grid whose row template is `rows`.",
-      "attributes": [
+          "name": "isCardNameValid",
+          "description": "Field validity states for enhanced validation feedback",
+          "type": "boolean",
+          "default": "true"
+        },
         {
-          "name": "rows",
-          "description": "Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\")",
-          "type": "string",
-          "default": "\"auto_1fr_auto\""
+          "name": "isCardNumberValid",
+          "type": "boolean",
+          "default": "true"
         },
         {
-          "name": "show-scrollbar",
+          "name": "isExpirationDateValid",
           "type": "boolean",
-          "default": "false"
+          "default": "true"
         },
         {
-          "name": "no-select",
+          "name": "isCvvValid",
           "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "properties": [
+          "default": "true"
+        },
         {
-          "name": "rows",
-          "attribute": "rows",
-          "description": "Custom grid-template-rows using underscores (e.g. \"1fr_2fr_auto\")",
-          "type": "string",
-          "default": "\"auto_1fr_auto\""
+          "name": "cardNumberInput",
+          "description": "Query selectors for the form elements",
+          "type": "SchmancyInput"
         },
         {
-          "name": "showScrollbar",
-          "attribute": "show-scrollbar",
-          "type": "boolean",
-          "default": "false"
+          "name": "expirationDateInput",
+          "type": "SchmancyInput"
         },
         {
-          "name": "noSelect",
-          "attribute": "no-select",
-          "type": "boolean",
-          "default": "false"
+          "name": "cvvInput",
+          "type": "SchmancyInput"
+        },
+        {
+          "name": "cardNameInput",
+          "type": "SchmancyInput"
+        },
+        {
+          "name": "form",
+          "type": "SchmancyForm"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fires when any field in the form changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default slot for any additional content"
         }
       ]
     },
@@ -8645,6 +7381,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "value",
           "attribute": "value",
@@ -8694,6 +7435,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "continuous",
           "attribute": "continuous",
@@ -8710,7 +7456,7 @@
     {
       "name": "schmancy-radio-button",
       "path": "./src/radio-group/radio-button.ts",
-      "description": "Single radio button — always rendered as a child of `<schmancy-radio-group>`, never standalone.",
+      "description": "Radio button component for use within radio groups.",
       "attributes": [
         {
           "name": "checked",
@@ -8858,8 +7604,7 @@
       ],
       "events": [
         {
-          "name": "radio-button-click",
-          "description": "Internal event consumed by the parent schmancy-radio-group; `detail.value` is the clicked button's value. Listen on schmancy-radio-group for the public `change` event instead of subscribing here."
+          "name": "radio-button-click"
         },
         {
           "name": "change"
@@ -8869,7 +7614,6 @@
     {
       "name": "schmancy-radio-group",
       "path": "./src/radio-group/radio-group.ts",
-      "description": "Radio-button group — single-select from a static list of mutually-exclusive options. Form-associated.",
       "attributes": [
         {
           "name": "options",
@@ -8927,6 +7671,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "options",
           "attribute": "options",
@@ -9009,8 +7758,7 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`SchmancyRadioGroupChangeEvent` with the selected `value`."
+          "name": "change"
         }
       ]
     },
@@ -9049,6 +7797,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "min",
           "attribute": "min",
@@ -9095,7 +7848,7 @@
     {
       "name": "schmancy-select",
       "path": "./src/select/select.ts",
-      "description": "Dropdown selector — single or multi-select from a list of `<schmancy-option>` children. Form-associated.",
+      "description": "Select dropdown component with single and multi-select support.",
       "attributes": [
         {
           "name": "disabled",
@@ -9163,6 +7916,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -9251,16 +8009,24 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "`SchmancySelectChangeEvent` with `{ value }` (single) or `{ value: string[] }` (multi)."
+          "name": "change"
         }
       ]
     },
     {
       "name": "schmancy-sheet",
       "path": "./src/sheet/sheet.ts",
-      "description": "Side-docked or bottom-docked panel — a dialog variant that slides in from an edge. Driven imperatively by the `sheet` service; rarely instantiated directly.",
       "attributes": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "position",
+          "type": "SchmancySheetPosition",
+          "default": "\"side\""
+        },
         {
           "name": "persist",
           "type": "boolean",
@@ -9275,21 +8041,26 @@
           "name": "handleHistory",
           "type": "boolean",
           "default": "true"
-        },
+        }
+      ],
+      "properties": [
         {
-          "name": "position",
-          "description": "`'side' | 'bottom'`. Which edge the sheet docks to.",
-          "type": "SchmancySheetPosition",
-          "default": "\"side\""
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         },
         {
           "name": "open",
-          "description": "Boolean; sheet is visible when true.",
+          "attribute": "open",
           "type": "boolean",
           "default": "false"
-        }
-      ],
-      "properties": [
+        },
+        {
+          "name": "position",
+          "attribute": "position",
+          "type": "SchmancySheetPosition",
+          "default": "\"side\""
+        },
         {
           "name": "persist",
           "attribute": "persist",
@@ -9307,26 +8078,11 @@
           "attribute": "handleHistory",
           "type": "boolean",
           "default": "true"
-        },
-        {
-          "name": "position",
-          "attribute": "position",
-          "description": "`'side' | 'bottom'`. Which edge the sheet docks to.",
-          "type": "SchmancySheetPosition",
-          "default": "\"side\""
-        },
-        {
-          "name": "open",
-          "attribute": "open",
-          "description": "Boolean; sheet is visible when true.",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "events": [
         {
-          "name": "close",
-          "description": "When the sheet is dismissed (backdrop click, close button, ESC)."
+          "name": "close"
         }
       ]
     },
@@ -9361,6 +8117,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "shape",
           "attribute": "shape",
@@ -9451,6 +8212,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -9521,6 +8287,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "showArrows",
           "attribute": "showArrows",
@@ -9560,6 +8331,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "minDuration",
           "attribute": "min-duration",
@@ -9602,6 +8378,95 @@
         }
       ]
     },
+    {
+      "name": "schmancy-context",
+      "path": "./src/state/schmancy-context.ts",
+      "properties": [
+        {
+          "name": "provides",
+          "description": "States to isolate under this subtree. Pass the same instances you import\nat module scope (e.g. `provides={[cart, menu]}`). Outside this element\nthey continue to behave as module-scoped globals; descendants of this\nelement see a per-element isolated copy.",
+          "type": "readonly StateTemplate[]",
+          "default": "[]"
+        }
+      ]
+    },
+    {
+      "name": "test-observe-element",
+      "path": "./src/state/state.test.ts",
+      "properties": [
+        {
+          "name": "count",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "test-observe-readonly",
+      "path": "./src/state/state.test.ts",
+      "properties": [
+        {
+          "name": "flag",
+          "type": "boolean"
+        }
+      ]
+    },
+    {
+      "name": "test-stress-element",
+      "path": "./src/state/state.test.ts",
+      "properties": [
+        {
+          "name": "renders",
+          "type": "number",
+          "default": "0"
+        }
+      ]
+    },
+    {
+      "name": "test-auto-tracked-element",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "test-observe-lifecycle",
+      "path": "./src/state/state.test.ts",
+      "properties": [
+        {
+          "name": "tick",
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "ctx-disjoint-reader",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-nested-reader",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-snapshot-reader",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-dispose-reader",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-fallthrough-reader",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-class-method",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-inline-arrow",
+      "path": "./src/state/state.test.ts"
+    },
+    {
+      "name": "ctx-async-await",
+      "path": "./src/state/state.test.ts"
+    },
     {
       "name": "schmancy-step",
       "path": "./src/steps/schmancy-step.ts",
@@ -9635,6 +8500,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "position",
           "attribute": "position",
@@ -9690,6 +8560,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "stepsController",
           "type": "StepsController",
@@ -9712,7 +8587,7 @@
     {
       "name": "schmancy-surface",
       "path": "./src/surface/surface.ts",
-      "description": "Themed container — the root surface primitive. Sets background, text color, rounding, elevation, and (optionally) internal scroll. Provides a `SchmancySurfaceTypeContext` so descendants can adapt to the enclosing surface variant.",
+      "description": "`<schmancy-surface>` component\n\nThis component renders a styled container that adapts its dimensions based on the `fill` property.\nIt supports various rounding options, elevation levels, and applies background and text color classes\nbased on the specified surface variant. Additionally, when the `scroller` property is true, the component\nenables internal scrolling by applying overflow and scroll-behavior styles.\n\nSurfaceMixin automatically provides surfaceStyles CSS.",
       "attributes": [
         {
           "name": "type",
@@ -9722,6 +8597,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -9740,7 +8620,7 @@
     {
       "name": "schmancy-switch",
       "path": "./src/switch/switch.ts",
-      "description": "Binary on/off control with immediate effect. Form-associated, keyboard-accessible, semantically a switch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch represents an immediate state change, a checkbox represents a selection in a form to be submitted.",
+      "description": "Binary on/off control. Form-associated, keyboard-accessible, semantically a\nswitch (ARIA role=\"switch\"). Distinct from `schmancy-checkbox`: a switch\nrepresents an immediate state change, a checkbox represents a selection in\na form to be submitted.",
       "attributes": [
         {
           "name": "value",
@@ -9778,6 +8658,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -9876,7 +8761,7 @@
     {
       "name": "schmancy-table",
       "path": "./src/table/table.ts",
-      "description": "Generic data table — typed columns, optional sort, custom renderers per column. Pass `data` (array) and `columns` (TableColumn descriptors).",
+      "description": "SchmancyDataTable is a generic data table component.\nIt supports sorting, filtering, and custom rendering of rows.",
       "attributes": [
         {
           "name": "keyField",
@@ -9926,12 +8811,10 @@
       ],
       "events": [
         {
-          "name": "click",
-          "description": "When a data row is activated. `detail.item` is the row's source object, `detail.index` is the position in the data array."
+          "name": "sort-change"
         },
         {
-          "name": "sort-change",
-          "description": "When the user toggles a column sort. `detail.column` is the column key, `detail.direction` is `'asc' | 'desc' | null`."
+          "name": "click"
         }
       ]
     },
@@ -9974,65 +8857,6 @@
         }
       ]
     },
-    {
-      "name": "schmancy-tabs-group",
-      "path": "./src/tabs/tabs-compatibility.ts",
-      "attributes": [
-        {
-          "name": "mode",
-          "type": "TSchmancyTabsMode",
-          "default": "\"tabs\""
-        },
-        {
-          "name": "rounded",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "activeTab",
-          "type": "string"
-        }
-      ],
-      "properties": [
-        {
-          "name": "mode",
-          "attribute": "mode",
-          "type": "TSchmancyTabsMode",
-          "default": "\"tabs\""
-        },
-        {
-          "name": "rounded",
-          "attribute": "rounded",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "activeTab",
-          "attribute": "activeTab",
-          "type": "string"
-        },
-        {
-          "name": "navElement",
-          "type": "HTMLElement"
-        },
-        {
-          "name": "tabsContent",
-          "type": "HTMLElement"
-        }
-      ],
-      "events": [
-        {
-          "name": "tab-changed",
-          "description": "The event fired when the tab is changed"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "The content of the tab group"
-        }
-      ]
-    },
     {
       "name": "schmancy-tab-group",
       "path": "./src/tabs/tabs-group.ts",
@@ -10053,6 +8877,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "mode",
           "attribute": "mode",
@@ -10112,6 +8941,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "uuid",
           "attribute": "uuid",
@@ -10132,7 +8966,7 @@
         {
           "name": "debugging",
           "type": "boolean",
-          "default": "\"import.meta.env.DEV ? true : false\""
+          "default": "\"Boolean(import.meta.env.DEV)\""
         }
       ],
       "events": [
@@ -10147,7 +8981,7 @@
     {
       "name": "schmancy-textarea",
       "path": "./src/textarea/textarea.ts",
-      "description": "Multi-line text input with auto-resize and form integration. Form-associated.",
+      "description": "Textarea component with auto-resize and form integration.",
       "attributes": [
         {
           "name": "label",
@@ -10275,6 +9109,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "formAssociated",
           "type": "boolean",
@@ -10459,12 +9298,7 @@
       ],
       "events": [
         {
-          "name": "input",
-          "description": "On every keystroke."
-        },
-        {
-          "name": "change",
-          "description": "On blur."
+          "name": "change"
         },
         {
           "name": "enter"
@@ -10493,7 +9327,14 @@
     {
       "name": "schmancy-theme-audio-player",
       "path": "./src/theme/theme-audio-player.ts",
-      "description": "Mood Audio Player - Generates emotional sounds based on mood and theme\nIntegrates with the Sound Service for consistent sound management"
+      "description": "Mood Audio Player - Generates emotional sounds based on mood and theme\nIntegrates with the Sound Service for consistent sound management",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ]
     },
     {
       "name": "schmancy-theme-controller-boat",
@@ -10538,7 +9379,7 @@
     {
       "name": "schmancy-theme",
       "path": "./src/theme/theme.component.ts",
-      "description": "Theme provider — generates a Material 3 palette from a seed color, resolves light/dark scheme, and publishes the token set to descendants as CSS custom properties (var(--schmancy-sys-color-…)).",
+      "description": "SchmancyThemeComponent - Provides theming capabilities for Schmancy components.\n\nThis component manages color schemes, primary colors, and theme distribution\nthroughout the component tree. It can be used at the root level or nested\nto provide different themes to different parts of the application.",
       "attributes": [
         {
           "name": "color",
@@ -10558,6 +9399,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "locale",
+          "description": "Locale for number/date formatting. Overrides navigator.language when set.",
+          "type": "string",
+          "default": "\"navigator.language\""
+        },
         {
           "name": "name",
           "description": "Unique name for this theme instance (used for session storage).\nIf not provided, will be generated from DOM path.",
@@ -10568,15 +9415,14 @@
           "description": "Theme configuration object containing all theme variables.",
           "type": "Partial<TSchmancyTheme>",
           "default": "{}"
-        },
-        {
-          "name": "locale",
-          "description": "Locale for number/date formatting. Overrides navigator.language when set.",
-          "type": "string",
-          "default": "\"navigator.language\""
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"tailwindStyles\"]"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -10598,6 +9444,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "locale",
+          "attribute": "locale",
+          "description": "Locale for number/date formatting. Overrides navigator.language when set.",
+          "type": "string",
+          "default": "\"navigator.language\""
+        },
         {
           "name": "name",
           "attribute": "name",
@@ -10612,59 +9465,97 @@
           "default": "{}"
         },
         {
-          "name": "disconnecting",
-          "type": "Subject<boolean>",
-          "default": "\"new Subject<boolean>()\""
+          "name": "disconnectedSignal",
+          "description": "AbortSignal that fires when the element disconnects.",
+          "type": "AbortSignal",
+          "default": "\"signal\""
+        }
+      ],
+      "events": [
+        {
+          "name": "theme-here-i-am"
+        }
+      ]
+    },
+    {
+      "name": "schmancy-timeline-tile",
+      "path": "./src/timeline/timeline-tile.ts",
+      "attributes": [
+        {
+          "name": "state",
+          "type": "TimelineTileState",
+          "default": "\"empty\""
         },
         {
-          "name": "locale",
-          "attribute": "locale",
-          "description": "Locale for number/date formatting. Overrides navigator.language when set.",
+          "name": "glyph",
           "type": "string",
-          "default": "\"navigator.language\""
+          "default": "\"\""
         },
         {
-          "name": "stableId",
-          "description": "Stable ID from DOM path - lazy, only computed on first access",
-          "type": "string"
+          "name": "stack-count",
+          "type": "number | undefined"
         },
         {
-          "name": "uid",
-          "description": "Unique instance ID - can be overridden via attribute, otherwise auto-generated.\nUsage: <my-component uid=\"custom-id\"> or let it auto-generate",
-          "type": "string"
+          "name": "index",
+          "type": "number | undefined"
         },
         {
-          "name": "disconnectedCallback",
-          "type": "() => void",
-          "default": "\"() => {\\n\\t\\t\\tsuper.disconnectedCallback()\\n\\t\\t}\""
+          "name": "tooltip",
+          "type": "string | undefined"
         },
+        {
+          "name": "caption",
+          "type": "string | undefined"
+        }
+      ],
+      "properties": [
         {
           "name": "styles",
           "type": "CSSResult[]",
-          "default": "[null,\"tailwindStyles\"]"
+          "default": "[null]"
         },
         {
-          "name": "cssText",
-          "type": "string"
+          "name": "state",
+          "attribute": "state",
+          "type": "TimelineTileState",
+          "default": "\"empty\""
+        },
+        {
+          "name": "glyph",
+          "attribute": "glyph",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "stackCount",
+          "attribute": "stack-count",
+          "type": "number | undefined"
+        },
+        {
+          "name": "index",
+          "attribute": "index",
+          "type": "number | undefined"
+        },
+        {
+          "name": "tooltip",
+          "attribute": "tooltip",
+          "type": "string | undefined"
         },
         {
-          "name": "styleSheet",
-          "type": "CSSStyleSheet | undefined"
+          "name": "caption",
+          "attribute": "caption",
+          "type": "string | undefined"
         }
       ],
       "events": [
         {
-          "name": "theme-here-i-am"
-        },
-        {
-          "name": "schmancy-discover-response"
+          "name": "tile-click"
         }
       ]
     },
     {
       "name": "schmancy-tree",
       "path": "./src/tree/tree.ts",
-      "description": "Expandable tree node — a recursive disclosure widget. One root slot, one default slot for child nodes. Each node can itself contain schmancy-tree children.",
       "attributes": [
         {
           "name": "open",
@@ -10674,6 +9565,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "open",
           "attribute": "open",
@@ -10696,8 +9592,7 @@
       ],
       "events": [
         {
-          "name": "toggle",
-          "description": "When the root toggler or chevron is clicked. Fires before the open state flips; the host's `open` property reflects the new state on the next animation frame."
+          "name": "toggle"
         }
       ],
       "slots": [
@@ -10711,125 +9606,6 @@
         }
       ]
     },
-    {
-      "name": "schmancy-typewriter",
-      "path": "./src/typewriter/typewriter.ts",
-      "description": "Typewriter effect — animates text typing/deletion with a cursor. Wraps the TypeIt library, lazy-loaded on first render.",
-      "attributes": [
-        {
-          "name": "speed",
-          "description": "Typing speed in milliseconds per character.",
-          "type": "number",
-          "default": "35"
-        },
-        {
-          "name": "delay",
-          "description": "Delay before typing starts (ms).",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "autoStart",
-          "description": "Automatically start typing on initialization.",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "cursorChar",
-          "description": "The cursor character.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "deleteSpeed",
-          "description": "Typing speed for deletions (ms per character).",
-          "type": "number",
-          "default": "20"
-        },
-        {
-          "name": "once",
-          "description": "Only animate once per session.",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "loop",
-          "description": "Loop the animation infinitely (overrides once).",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "cyclePause",
-          "description": "Default pause duration for cycling (ms).",
-          "type": "number",
-          "default": "1500"
-        }
-      ],
-      "properties": [
-        {
-          "name": "speed",
-          "attribute": "speed",
-          "description": "Typing speed in milliseconds per character.",
-          "type": "number",
-          "default": "35"
-        },
-        {
-          "name": "delay",
-          "attribute": "delay",
-          "description": "Delay before typing starts (ms).",
-          "type": "number",
-          "default": "0"
-        },
-        {
-          "name": "autoStart",
-          "attribute": "autoStart",
-          "description": "Automatically start typing on initialization.",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "cursorChar",
-          "attribute": "cursorChar",
-          "description": "The cursor character.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "deleteSpeed",
-          "attribute": "deleteSpeed",
-          "description": "Typing speed for deletions (ms per character).",
-          "type": "number",
-          "default": "20"
-        },
-        {
-          "name": "once",
-          "attribute": "once",
-          "description": "Only animate once per session.",
-          "type": "boolean",
-          "default": "true"
-        },
-        {
-          "name": "loop",
-          "attribute": "loop",
-          "description": "Loop the animation infinitely (overrides once).",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "cyclePause",
-          "attribute": "cyclePause",
-          "description": "Default pause duration for cycling (ms).",
-          "type": "number",
-          "default": "1500"
-        }
-      ],
-      "events": [
-        {
-          "name": "typeit-complete",
-          "description": "When the animation finishes typing all content. Fires after the final `afterComplete` callback in the underlying TypeIt instance."
-        }
-      ]
-    },
     {
       "name": "schmancy-typography",
       "path": "./src/typography/typography.ts",
@@ -10839,16 +9615,6 @@
           "type": "'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'",
           "default": "\"'body'\""
         },
-        {
-          "name": "preset",
-          "description": "Shorthand for picking a (type, token) pair in one go. When set, derives\n`type` and `token` automatically — saves the two-decisions-per-text-node\nfatigue that hits when a single page has 50+ typography nodes.",
-          "type": "TypographyPreset"
-        },
-        {
-          "name": "as",
-          "description": "Render the slot wrapped in the requested semantic HTML element so screen\nreaders expose the right role / heading level. Without `as`, the slot\nsits directly in the shadow root and the host is a generic element.",
-          "type": "TypographyTag"
-        },
         {
           "name": "token",
           "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | ''",
@@ -10894,6 +9660,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "shadowRootOptions",
           "type": "ShadowRootInit",
@@ -10905,18 +9676,6 @@
           "type": "'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'",
           "default": "\"'body'\""
         },
-        {
-          "name": "preset",
-          "attribute": "preset",
-          "description": "Shorthand for picking a (type, token) pair in one go. When set, derives\n`type` and `token` automatically — saves the two-decisions-per-text-node\nfatigue that hits when a single page has 50+ typography nodes.",
-          "type": "TypographyPreset"
-        },
-        {
-          "name": "as",
-          "attribute": "as",
-          "description": "Render the slot wrapped in the requested semantic HTML element so screen\nreaders expose the right role / heading level. Without `as`, the slot\nsits directly in the shadow root and the host is a generic element.",
-          "type": "TypographyTag"
-        },
         {
           "name": "token",
           "attribute": "token",
@@ -10971,8 +9730,7 @@
       ],
       "events": [
         {
-          "name": "change",
-          "description": "When `editable` is true, fires on blur or Enter with `detail.value` set to the new text content. Not fired when `editable` is unset (the default)."
+          "name": "change"
         }
       ],
       "slots": [
@@ -10986,6 +9744,13 @@
       "name": "schmancy-visually-hidden",
       "path": "./src/visually-hidden/visually-hidden.ts",
       "description": "Hides content visually while keeping it in the accessibility tree. Use for\nscreen-reader-only labels, supplemental descriptions, and live-region text\nthat sighted users don't need to see.\n\nUses the WCAG-recommended clip pattern rather than `display: none` or\n`visibility: hidden` so assistive tech still reads the content.",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -11062,6 +9827,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "id",
           "attribute": "id",