@adia-ai/a2ui-corpus 0.6.32 → 0.6.34

package/catalog-a2ui_0_9.json

@@ -3347,6 +3347,140 @@
         "version": 1
       }
     },
+    "CalendarGrid": {
+      "title": "CalendarGrid",
+      "description": "Substrate primitive — a single-month calendar grid (month nav + day cells + keyboard nav). Renders inline; no trigger, no popover. Used as a substrate by calendar-picker-ui (popover wrapper), date-range-picker-ui (two side-by-side grids), and datetime-picker-ui (one grid + time pane). For a complete date-picker affordance (trigger + popover + form participation), use calendar-picker-ui.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "CalendarGrid"
+        },
+        "disabled": {
+          "description": "Disables all interaction.",
+          "type": "boolean",
+          "default": false
+        },
+        "max": {
+          "description": "Maximum selectable date in ISO format (YYYY-MM-DD).",
+          "type": "string",
+          "default": ""
+        },
+        "min": {
+          "description": "Minimum selectable date in ISO format (YYYY-MM-DD).",
+          "type": "string",
+          "default": ""
+        },
+        "readonly": {
+          "description": "Blocks selection but allows month navigation.",
+          "type": "boolean",
+          "default": false
+        },
+        "value": {
+          "description": "Selected date in ISO format (YYYY-MM-DD).",
+          "type": "string",
+          "default": ""
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"CalendarPicker\", \"name\": \"birthdate\"}\n",
+            "why": "CalendarGrid is a substrate primitive — it does not participate in\nforms. The `name` attribute has no effect. Use CalendarPicker\n(form-associated) for single-date input.\n",
+            "wrong": "{\"component\": \"CalendarGrid\", \"name\": \"birthdate\"}\n"
+          }
+        ],
+        "category": "input",
+        "composes": [],
+        "events": {
+          "change": {
+            "description": "User selected a date. detail.value is the ISO string."
+          },
+          "input": {
+            "description": "Focus moved between days during keyboard nav. detail.focusDate is the ISO string."
+          }
+        },
+        "examples": [],
+        "keywords": [
+          "calendar",
+          "date",
+          "grid",
+          "month",
+          "day-picker",
+          "substrate"
+        ],
+        "name": "UICalendarGrid",
+        "related": [
+          "CalendarPicker",
+          "DateRangePicker",
+          "DatetimePicker"
+        ],
+        "slots": {},
+        "states": [
+          {
+            "description": "Pointer-events off, reduced opacity, no selection.",
+            "attribute": "disabled",
+            "name": "disabled"
+          },
+          {
+            "description": "Navigation allowed, selection blocked.",
+            "attribute": "readonly",
+            "name": "readonly"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "calendar": [
+            "calendar",
+            "date"
+          ],
+          "grid": [
+            "grid",
+            "calendar"
+          ]
+        },
+        "tag": "calendar-grid-ui",
+        "tokens": {
+          "--calendar-grid-day-bg-hover": {
+            "description": "Background on hover (non-selected, non-outside, non-disabled).",
+            "default": "var(--a-bg-hover)"
+          },
+          "--calendar-grid-day-bg-selected": {
+            "description": "Background of the selected day cell.",
+            "default": "var(--a-accent)"
+          },
+          "--calendar-grid-day-fg-selected": {
+            "description": "Text color of the selected day cell.",
+            "default": "var(--a-accent-fg)"
+          },
+          "--calendar-grid-day-size": {
+            "description": "Square cell size for day buttons.",
+            "default": "2rem"
+          },
+          "--calendar-grid-day-today-color": {
+            "description": "Accent color used for the today-indicator dot + numeral tint.",
+            "default": "var(--a-accent)"
+          },
+          "--calendar-grid-width": {
+            "description": "Grid container width.",
+            "default": "16rem"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
     "CalendarPicker": {
       "title": "CalendarPicker",
       "description": "Date picker with trigger button and popover calendar grid. Form-associated input emitting ISO date string via change events; supports min/max and disabled-date masks. Use for single-date input in forms; for date ranges compose two pickers or use a dedicated range component.",
@@ -6027,9 +6161,9 @@
         "version": 1
       }
     },
-    "Command": {
-      "title": "Command",
-      "description": "Searchable command palette primitive — combobox-style search input\nplus a scrollable list of <option value> items grouped by\n<optgroup label>. Content-only; does NOT own the dialog or the\nCmd+K shortcut. For canonical Cmd+K palettes wrap in <admin-command>\nat the shell tier, which provides the native <dialog> + focus\nmanagement + cross-platform Cmd+K listener. Distinct from <menu-ui>\n(small popover action menu, not searchable) and <modal-ui> (generic\ncentered dialog).\n",
+    "Combobox": {
+      "title": "Combobox",
+      "description": "Typeahead-filterable single-select primitive — the constrained-choice\ncombobox per WAI-APG \"Combobox With List Autocomplete (manual\nselection)\". The committed value MUST come from the options list\nunless `[free-text]` is set. Distinct from `<select-ui searchable>`\n(button-first dropdown) and `<autocomplete-input-ui>` (free-form).\nForm-bearing via UIFormElement: `[name]`, `[value]`, `[required]`,\n`[disabled]`, fires `change`. Options via native `<option>` /\n`<optgroup>` children OR programmatic `.options` array.\n",
       "type": "object",
       "allOf": [
         {
@@ -6040,18 +6174,113 @@
         }
       ],
       "properties": {
+        "required": {
+          "description": "Marks the field as required for form validation",
+          "type": "boolean",
+          "default": false
+        },
+        "clearable": {
+          "description": "Renders an `x` clear button when value is set",
+          "type": "boolean",
+          "default": false
+        },
         "component": {
-          "const": "Command"
+          "const": "Combobox"
+        },
+        "creatable": {
+          "description": "Implies `[free-text]`; on Enter with unmatched typed text fires a\n`create` event with detail.value so the consumer can run a\nbackend create-then-refresh-options flow.",
+          "type": "boolean",
+          "default": false
+        },
+        "disabled": {
+          "description": "Disables interaction and dims the control",
+          "type": "boolean",
+          "default": false
+        },
+        "error": {
+          "description": "Validation error message",
+          "type": "string",
+          "default": ""
+        },
+        "filter-mode": {
+          "description": "Client-side filter algorithm.",
+          "type": "string",
+          "enum": [
+            "substring",
+            "prefix",
+            "fuzzy"
+          ],
+          "default": "substring"
+        },
+        "free-text": {
+          "description": "Allow typed text not in the options list. Blurs the distinction\nwith <autocomplete-input-ui>; prefer the dedicated primitive\nunless the value model truly needs both modes (tag-with-suggestions,\nemail-with-recent-recipients).",
+          "type": "boolean",
+          "default": false
+        },
+        "highlight-match": {
+          "description": "Wraps the matched substring in `<mark>` inside option labels",
+          "type": "boolean",
+          "default": true
+        },
+        "hint": {
+          "description": "Caption text below the field; wires `aria-describedby` on the host\nso screen readers announce it as a description.",
+          "type": "string",
+          "default": ""
+        },
+        "label": {
+          "description": "Inline label rendered above the field. Wrap with <field-ui> for\nproper `<label for>` association in form-row compositions.",
+          "type": "string",
+          "default": ""
+        },
+        "loading": {
+          "description": "Shows a loading spinner inside the popover; consumer drives async fetch",
+          "type": "boolean",
+          "default": false
+        },
+        "max-options": {
+          "description": "Cap on rendered options. Overflow shows a \"scroll for more\" hint",
+          "type": "number",
+          "default": 100
+        },
+        "name": {
+          "description": "Form control name for form data submission",
+          "type": "string",
+          "default": ""
         },
         "open": {
-          "description": "Whether the command palette is visible",
+          "description": "Reflects popover open / closed state",
           "type": "boolean",
           "default": false
         },
+        "options": {
+          "description": "Programmatic option list. Array of {value, label, disabled?, group?} or grouped {label, options:[…]}. Alternative to declarative <option> / <optgroup> children.",
+          "type": "array",
+          "default": []
+        },
         "placeholder": {
-          "description": "Placeholder text for the search input",
+          "description": "Placeholder text in the input when value is empty",
           "type": "string",
-          "default": "Type a command..."
+          "default": "Select..."
+        },
+        "readonly": {
+          "description": "Prevents selection changes while keeping the field focusable + popover-open allowed",
+          "type": "boolean",
+          "default": false
+        },
+        "size": {
+          "description": "Sizing scale via universal `[size]` attribute system. Matches Input + Select sizing tokens so a Combobox rendered alongside either feels coherent in a form row.",
+          "type": "string",
+          "enum": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "value": {
+          "description": "Currently selected option value. Must be a member of `options[].value` unless `[free-text]` is set. With declarative <option> children, a child carrying the native `selected` attribute sets the initial value when this attribute is absent.",
+          "type": "string",
+          "default": ""
         }
       },
       "required": [
@@ -6059,26 +6288,90 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
-        "category": "container",
-        "composes": [],
-        "events": {
-          "dismiss": {
-            "description": "Fired when Escape is pressed"
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"Combobox\", \"value\": \"us\", \"options\": [{\"value\": \"us\", \"label\": \"United States\"}]}\n",
+            "why": "`value` is \"xx\" but only \"us\" is in options. With free-text:false (default), this is an invalid\nmid-state — set value: \"us\" or add an option with value: \"xx\".\n",
+            "wrong": "{\"component\": \"Combobox\", \"value\": \"xx\", \"options\": [{\"value\": \"us\", \"label\": \"United States\"}]}\n"
           },
-          "select": {
-            "description": "Fired when an item is selected. detail: { value, label, category }. `category` is the parent `<optgroup label=\"…\">` label, or empty string when the item is a direct child of `<command-ui>` with no group.\n",
+          {
+            "fix": "{\"component\": \"SegmentedControl\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n",
+            "why": "Only 2 options. Combobox is overkill — use SegmentedControl or Radio.\n",
+            "wrong": "{\"component\": \"Combobox\", \"options\": [{\"value\": \"a\", \"label\": \"A\"}, {\"value\": \"b\", \"label\": \"B\"}]}\n"
+          },
+          {
+            "fix": "{\"component\": \"MultiSelect\", \"options\": [...]}\n",
+            "why": "Combobox is single-select. Multi-select goes through MultiSelect.\n",
+            "wrong": "{\"component\": \"Combobox\", \"multiple\": true, \"options\": [...]}\n"
+          }
+        ],
+        "category": "input",
+        "composes": [
+          "icon-ui"
+        ],
+        "events": {
+          "change": {
+            "description": "Fired when value is committed — option clicked, Enter on active\noption, or programmatic `.value =`. Detail.option resolves to the\nmatching `{label,value,...}` or null in free-text/cleared paths.",
             "detail": {
-              "category": {
-                "description": "Parent optgroup label (empty string when item has no group).",
+              "option": {
+                "description": "Resolved option object or null when free-text / cleared.",
+                "type": "object"
+              },
+              "source": {
+                "description": "One of `click` / `keyboard` / `programmatic`.",
                 "type": "string"
               },
-              "label": {
-                "description": "Item label text.",
+              "value": {
+                "description": "Committed value.",
+                "type": "string"
+              }
+            }
+          },
+          "close": {
+            "description": "Popover closed.",
+            "detail": {
+              "reason": {
+                "description": "One of `escape` / `outside` / `select` / `blur`.",
+                "type": "string"
+              }
+            }
+          },
+          "create": {
+            "description": "Fired when `[creatable]` is set and the user presses Enter on\ntyped text that doesn't match any option. Consumer wires this to\na backend create flow and then refreshes `.options`.",
+            "detail": {
+              "value": {
+                "description": "The typed text the user is trying to create.",
+                "type": "string"
+              }
+            }
+          },
+          "input": {
+            "description": "Fired on each keystroke (filter typing); not a commit. Detail carries the typed query.",
+            "detail": {
+              "query": {
+                "description": "Lowercased filter query.",
                 "type": "string"
               },
               "value": {
-                "description": "Item value attribute.",
+                "description": "Current input text (the user's typed query).",
+                "type": "string"
+              }
+            }
+          },
+          "invalid": {
+            "description": "Fired when `[free-text]` is false and the user presses Enter on\ntyped text that doesn't match any option. The value is NOT\ncommitted; the input is restored to the last committed value.",
+            "detail": {
+              "query": {
+                "description": "The unmatched typed text.",
+                "type": "string"
+              }
+            }
+          },
+          "open": {
+            "description": "Popover opened.",
+            "detail": {
+              "trigger": {
+                "description": "One of `click` / `keyboard` / `typing`.",
                 "type": "string"
               }
             }
@@ -6086,186 +6379,1431 @@
         },
         "examples": [
           {
-            "description": "Basic Command usage",
-            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Command\",\n    \"placeholder\": \"Enter command...\"\n  }\n]",
-            "name": "basic-command"
+            "description": "Country picker — canonical declarative <option> children inside a <field-ui>.",
+            "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"children\": [\"country\"]},\n  {\n    \"id\": \"country\",\n    \"component\": \"Combobox\",\n    \"name\": \"country\",\n    \"label\": \"Country\",\n    \"placeholder\": \"Select country…\",\n    \"options\": [\n      {\"value\": \"us\", \"label\": \"United States\"},\n      {\"value\": \"gb\", \"label\": \"United Kingdom\"},\n      {\"value\": \"de\", \"label\": \"Germany\"},\n      {\"value\": \"fr\", \"label\": \"France\"},\n      {\"value\": \"es\", \"label\": \"Spain\"}\n    ],\n    \"value\": \"us\"\n  }\n]",
+            "name": "country-picker"
+          },
+          {
+            "description": "Tag picker with create-new affordance — fires `create` event on unmatched Enter.",
+            "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Card\", \"children\": [\"sec\"]},\n  {\"id\": \"sec\", \"component\": \"Section\", \"children\": [\"tag\"]},\n  {\n    \"id\": \"tag\",\n    \"component\": \"Combobox\",\n    \"name\": \"tag\",\n    \"label\": \"Tag\",\n    \"creatable\": true,\n    \"placeholder\": \"Pick or create a tag…\",\n    \"options\": [\n      {\"value\": \"bug\", \"label\": \"bug\"},\n      {\"value\": \"feature\", \"label\": \"feature\"},\n      {\"value\": \"chore\", \"label\": \"chore\"}\n    ]\n  }\n]",
+            "name": "creatable-tag-picker"
           }
         ],
         "keywords": [
-          "command",
-          "assistant",
-          "copilot",
-          "ai",
-          "prompt",
-          "console",
-          "menu",
-          "terminal",
-          "search",
-          "find",
-          "lookup",
+          "combobox",
           "autocomplete",
           "typeahead",
-          "spotlight",
-          "omnibar",
-          "combobox",
-          "palette",
-          "shortcut",
-          "hotkey",
-          "keyboard",
-          "keybinding"
-        ],
-        "name": "UICommand",
+          "select",
+          "filter",
+          "picker",
+          "country-picker",
+          "timezone-picker",
+          "member-picker"
+        ],
+        "name": "UICombobox",
+        "related": [
+          "select",
+          "search",
+          "input",
+          "field"
+        ],
+        "slots": {
+          "default": {
+            "description": "Native <option> / <optgroup> children for declarative authoring"
+          },
+          "empty": {
+            "description": "Custom no-matches content (defaults to \"No matches\")"
+          },
+          "footer": {
+            "description": "Footer area inside the popover (e.g. \"Press Enter to create…\" affordance)"
+          },
+          "loading": {
+            "description": "Custom loading content (defaults to a spinner)"
+          },
+          "prefix": {
+            "description": "Leading icon / element inside the input chrome"
+          },
+          "suffix": {
+            "description": "Trailing icon / element (defaults to `caret-down`)"
+          }
+        },
+        "states": [
+          {
+            "description": "Closed; not focused.",
+            "name": "idle"
+          },
+          {
+            "description": "Input focused; popover closed.",
+            "attribute": ":focus-within",
+            "name": "focused"
+          },
+          {
+            "description": "Popover visible; filtered options listed.",
+            "attribute": "open",
+            "name": "open"
+          },
+          {
+            "description": "Spinner shown; options stale (consumer-driven async fetch).",
+            "attribute": "loading",
+            "name": "loading"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          },
+          {
+            "description": "Focusable + popover-open allowed; commits blocked.",
+            "attribute": "readonly",
+            "name": "readonly"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "autocomplete": [
+            "combobox",
+            "typeahead",
+            "suggest"
+          ],
+          "combobox": [
+            "autocomplete",
+            "typeahead",
+            "filter",
+            "picker"
+          ],
+          "picker": [
+            "combobox",
+            "select",
+            "dropdown"
+          ],
+          "typeahead": [
+            "combobox",
+            "autocomplete",
+            "search"
+          ]
+        },
+        "tag": "combobox-ui",
+        "tokens": {
+          "--combobox-bg": {
+            "description": "Input background color"
+          },
+          "--combobox-fg": {
+            "description": "Input text color"
+          },
+          "--combobox-match-bg": {
+            "description": "Background for `<mark>` spans that highlight matched substrings"
+          },
+          "--combobox-option-bg-active": {
+            "description": "Background for the currently active (arrow-navigated) option"
+          },
+          "--combobox-option-bg-selected": {
+            "description": "Background for the currently committed option"
+          },
+          "--combobox-option-fg-active": {
+            "description": "Foreground for the currently active option"
+          },
+          "--combobox-popover-bg": {
+            "description": "Popover background color"
+          },
+          "--combobox-popover-border": {
+            "description": "Popover border color"
+          },
+          "--combobox-popover-radius": {
+            "description": "Popover border radius"
+          },
+          "--combobox-popover-shadow": {
+            "description": "Popover elevation shadow"
+          },
+          "--combobox-radius": {
+            "description": "Input border radius"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "Command": {
+      "title": "Command",
+      "description": "Searchable command palette primitive — combobox-style search input\nplus a scrollable list of <option value> items grouped by\n<optgroup label>. Content-only; does NOT own the dialog or the\nCmd+K shortcut. For canonical Cmd+K palettes wrap in <admin-command>\nat the shell tier, which provides the native <dialog> + focus\nmanagement + cross-platform Cmd+K listener. Distinct from <menu-ui>\n(small popover action menu, not searchable) and <modal-ui> (generic\ncentered dialog).\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "Command"
+        },
+        "open": {
+          "description": "Whether the command palette is visible",
+          "type": "boolean",
+          "default": false
+        },
+        "placeholder": {
+          "description": "Placeholder text for the search input",
+          "type": "string",
+          "default": "Type a command..."
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [],
+        "category": "container",
+        "composes": [],
+        "events": {
+          "dismiss": {
+            "description": "Fired when Escape is pressed"
+          },
+          "select": {
+            "description": "Fired when an item is selected. detail: { value, label, category }. `category` is the parent `<optgroup label=\"…\">` label, or empty string when the item is a direct child of `<command-ui>` with no group.\n",
+            "detail": {
+              "category": {
+                "description": "Parent optgroup label (empty string when item has no group).",
+                "type": "string"
+              },
+              "label": {
+                "description": "Item label text.",
+                "type": "string"
+              },
+              "value": {
+                "description": "Item value attribute.",
+                "type": "string"
+              }
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Basic Command usage",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Command\",\n    \"placeholder\": \"Enter command...\"\n  }\n]",
+            "name": "basic-command"
+          }
+        ],
+        "keywords": [
+          "command",
+          "assistant",
+          "copilot",
+          "ai",
+          "prompt",
+          "console",
+          "menu",
+          "terminal",
+          "search",
+          "find",
+          "lookup",
+          "autocomplete",
+          "typeahead",
+          "spotlight",
+          "omnibar",
+          "combobox",
+          "palette",
+          "shortcut",
+          "hotkey",
+          "keyboard",
+          "keybinding"
+        ],
+        "name": "UICommand",
+        "related": [
+          "AdminCommand",
+          "Menu",
+          "Modal",
+          "Search"
+        ],
+        "slots": {
+          "empty": {
+            "description": "Empty state shown when no items match"
+          },
+          "footer": {
+            "description": "Keyboard hint bar"
+          },
+          "list": {
+            "description": "Container for command items and groups"
+          },
+          "search": {
+            "description": "Search input with combobox role"
+          }
+        },
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "ai": [
+            "chat",
+            "streaming",
+            "response",
+            "command"
+          ],
+          "assistant": [
+            "chat",
+            "streaming",
+            "response",
+            "command"
+          ],
+          "autocomplete": [
+            "search",
+            "command",
+            "palette",
+            "tag"
+          ],
+          "combobox": [
+            "search",
+            "command",
+            "select"
+          ],
+          "command": [
+            "command",
+            "palette",
+            "kbd",
+            "shortcut"
+          ],
+          "console": [
+            "dashboard",
+            "table",
+            "data",
+            "sidebar",
+            "command"
+          ],
+          "copilot": [
+            "chat",
+            "streaming",
+            "response",
+            "command"
+          ],
+          "find": [
+            "search",
+            "filter",
+            "command"
+          ],
+          "hotkey": [
+            "kbd",
+            "shortcut",
+            "command"
+          ],
+          "keybinding": [
+            "kbd",
+            "shortcut",
+            "command"
+          ],
+          "keyboard": [
+            "kbd",
+            "shortcut",
+            "command"
+          ],
+          "lookup": [
+            "search",
+            "filter",
+            "command"
+          ],
+          "menu": [
+            "nav",
+            "sidebar",
+            "popover",
+            "menu",
+            "command"
+          ],
+          "omnibar": [
+            "command",
+            "palette",
+            "search"
+          ],
+          "palette": [
+            "color",
+            "picker",
+            "command",
+            "palette"
+          ],
+          "prompt": [
+            "chat",
+            "streaming",
+            "command",
+            "palette"
+          ],
+          "search": [
+            "search",
+            "filter",
+            "command",
+            "palette"
+          ],
+          "shortcut": [
+            "kbd",
+            "shortcut",
+            "command"
+          ],
+          "spotlight": [
+            "command",
+            "palette",
+            "search"
+          ],
+          "tags": [
+            "CommandPalette"
+          ],
+          "terminal": [
+            "code",
+            "block",
+            "command"
+          ],
+          "typeahead": [
+            "search",
+            "command",
+            "palette"
+          ]
+        },
+        "tag": "command-ui",
+        "tokens": {},
+        "traits": [],
+        "version": 1
+      }
+    },
+    "ConfirmDialog": {
+      "title": "ConfirmDialog",
+      "description": "Non-destructive yes/no confirmation dialog — a thin composite over\n<modal-ui> that pre-stamps the canonical confirm shape: header (title\n+ optional icon), body (description + optional rich slot), and\nfooter (cancel + confirm buttons). Wires Cancel-default focus,\nconfirm / cancel / close events, and the [loading] in-flight state.\n\nUse confirm-dialog-ui for benign questions: \"Save changes?\", \"Switch\ntheme?\", \"Apply preset?\". For irreversible destructive operations\n(delete account, drop database, deploy to prod) use <alert-dialog-ui>\ninstead — it carries role=\"alertdialog\", danger chrome, and the\noptional typed-name speed-bump.\n\nComposed primitive: <modal-ui> owns the native <dialog>, focus trap,\nbackdrop, and Escape-dismiss. confirm-dialog-ui decorates; it does\nnot reimplement.\n\nSpec: docs/specs/implementation-ready/SPEC-049-confirm-dialog-yes-no.md.\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "title": {
+          "description": "Dialog title; rendered in the modal header via <modal-ui>[text]\nand announced through aria-labelledby on the inner <dialog>.\n",
+          "type": "string",
+          "default": ""
+        },
+        "description": {
+          "description": "Body description; rendered as a paragraph above any default-slot\ncontent. Wired as the aria-describedby target.\n",
+          "type": "string",
+          "default": ""
+        },
+        "cancel-text": {
+          "description": "Cancel button label. Defaults to \"Cancel\".",
+          "type": "string",
+          "default": "Cancel"
+        },
+        "component": {
+          "const": "ConfirmDialog"
+        },
+        "confirm-text": {
+          "description": "Primary action button label. Defaults to \"Confirm\".",
+          "type": "string",
+          "default": "Confirm"
+        },
+        "confirm-variant": {
+          "description": "Tone of the confirm button. \"primary\" (default) for the typical\naffirmative-action case; \"ghost\" when both choices are roughly\nbalanced and a tonal primary would over-weight the affirmative.\n",
+          "type": "string",
+          "enum": [
+            "primary",
+            "ghost"
+          ],
+          "default": "primary"
+        },
+        "icon": {
+          "description": "Optional Phosphor icon glyph stamped in the header. Opt-in —\nconsumer supplies the name (e.g. \"info\", \"question\"). When\nempty, no icon disc renders.\n",
+          "type": "string",
+          "default": ""
+        },
+        "loading": {
+          "description": "In-flight state. When set, both buttons disable and the confirm\nbutton shows a spinner — the consumer toggles [loading] off and\ncloses via [open]=false when the underlying action resolves.\n",
+          "type": "boolean",
+          "default": false
+        },
+        "open": {
+          "description": "Mirrors <modal-ui>[open]. Setting to true opens the dialog with\nentry animation; setting to false animates close.\n",
+          "type": "boolean",
+          "default": false
+        },
+        "size": {
+          "description": "Forwarded to <modal-ui>[size]. sm = ~24rem, md = ~32rem,\nlg = ~48rem. Confirm dialogs default to sm.\n",
+          "type": "string",
+          "enum": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "sm"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "description": "Re-deriving the confirm shape from a raw <modal-ui> instead of using ConfirmDialog. The header/body/footer triplet, the Cancel-default focus, and the confirm/cancel event wiring all need to be re-authored, and the WAI-APG contract drifts per consumer.",
+            "right": "<confirm-dialog-ui open\n  title=\"Save changes?\"\n  description=\"Save changes before closing?\"\n  confirm-text=\"Save\"\n  cancel-text=\"Discard\">\n</confirm-dialog-ui>\n",
+            "rule": "Reach for ConfirmDialog (not raw Modal) for non-destructive yes/no prompts. The composite owns the contract.",
+            "wrong": "<modal-ui open size=\"sm\" text=\"Save?\">\n  <p>Save changes before closing?</p>\n  <footer>\n    <button-ui variant=\"ghost\" text=\"Discard\"></button-ui>\n    <button-ui variant=\"primary\" text=\"Save\"></button-ui>\n  </footer>\n</modal-ui>\n"
+          },
+          {
+            "description": "Using ConfirmDialog for destructive irreversible operations. The primary-toned confirm button reads as benign and primes the user to click through; the WAI-APG `alertdialog` role + danger chrome live in AlertDialog for that reason.",
+            "right": "<alert-dialog-ui open\n  title=\"Delete project?\"\n  description=\"This is permanent.\"\n  confirm-text=\"Delete\">\n</alert-dialog-ui>\n",
+            "rule": "Destructive intent → AlertDialog. Non-destructive intent → ConfirmDialog. The tag name carries the semantic; do not cross the streams.",
+            "wrong": "<confirm-dialog-ui open\n  title=\"Delete project?\"\n  description=\"This is permanent.\"\n  confirm-text=\"Delete\">\n</confirm-dialog-ui>\n"
+          }
+        ],
+        "category": "feedback",
+        "composes": [
+          "modal-ui",
+          "button-ui",
+          "icon-ui",
+          "text-ui"
+        ],
+        "events": {
+          "cancel": {
+            "description": "Fired when the user activates the cancel button, presses Escape,\nor clicks the backdrop. Bubbles.\n",
+            "detail": {}
+          },
+          "close": {
+            "description": "Re-emitted from the underlying <modal-ui> when the dialog\nfinishes closing via any path. Bubbles.\n",
+            "detail": {}
+          },
+          "confirm": {
+            "description": "Fired when the user activates the confirm button. Bubbles.\nConsumer wires the actual action handler off this event.\n",
+            "detail": {}
+          }
+        },
+        "examples": [],
+        "keywords": [
+          "confirm",
+          "confirm-dialog",
+          "dialog",
+          "confirmation",
+          "yes-no",
+          "ok-cancel",
+          "save-confirm",
+          "prompt",
+          "dialog-modal"
+        ],
+        "name": "ConfirmDialog",
+        "related": [
+          "Modal",
+          "AlertDialog",
+          "Button",
+          "Icon",
+          "Text"
+        ],
+        "slots": {
+          "default": {
+            "description": "Optional rich content rendered above the description — supplementary\nlists, hints, or markup the [description] string can't carry.\n"
+          },
+          "icon": {
+            "description": "Override the [icon] glyph with a custom node (e.g. a colored\n<icon-ui>, an image, or arbitrary markup). Mutually exclusive\nwith [icon]; if a slot child is present, the [icon] attribute\nis ignored.\n"
+          }
+        },
+        "states": [
+          {
+            "description": "Default — closed, no <dialog> in the top layer.",
+            "name": "idle"
+          },
+          {
+            "description": "Visible in the top layer; focus trapped; Cancel focused by default.",
+            "attribute": "open",
+            "name": "open"
+          },
+          {
+            "description": "Both buttons disabled; confirm shows spinner.",
+            "attribute": "loading",
+            "name": "loading"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "cancel": [
+            "dismiss",
+            "back",
+            "no"
+          ],
+          "confirm": [
+            "confirmation",
+            "prompt",
+            "ok",
+            "yes"
+          ],
+          "dialog": [
+            "modal",
+            "popup"
+          ]
+        },
+        "tag": "confirm-dialog-ui",
+        "tokens": {
+          "--confirm-dialog-confirm-bg": {
+            "description": "Confirm-button background under [confirm-variant=\"primary\"].\nDefaults to var(--a-accent-bg). When [confirm-variant=\"ghost\"]\nthe button uses transparent background regardless of this token.\n"
+          },
+          "--confirm-dialog-icon-bg": {
+            "description": "Optional header-icon disc background. Defaults to var(--a-bg-muted)."
+          },
+          "--confirm-dialog-icon-fg": {
+            "description": "Optional header-icon glyph color. Defaults to var(--a-fg)."
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "DateRangePicker": {
+      "title": "DateRangePicker",
+      "description": "Compound form primitive for selecting a start + end date pair with optional named preset shortcuts (\"Today\", \"Last 7 days\", \"This month\", ...). Default presentation is a trigger button showing the formatted range; on activation a popover opens with two synchronized calendar panes + a preset side rail. Composes <calendar-picker-ui> twice; emits {from, to} ISO 8601 dates. Optional comparison-range mode emits a secondary range for analytics surfaces.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "required": {
+          "description": "Required for validation when inside a `<form>`.",
+          "type": "boolean",
+          "default": false
+        },
+        "compareValue": {
+          "description": "Comparison range when `[comparison]` is set. Same `{from, to}` shape as `value`.",
+          "$ref": "#/$defs/DynamicString"
+        },
+        "comparison": {
+          "description": "Enable comparison-range mode. Renders a second preset cluster and emits a secondary range under `<name>-compare`.",
+          "type": "boolean",
+          "default": false
+        },
+        "component": {
+          "const": "DateRangePicker"
+        },
+        "disabled": {
+          "description": "Block all interaction. Trigger remains rendered but does not open the popover.",
+          "type": "boolean",
+          "default": false
+        },
+        "format": {
+          "description": "Trigger button date format. `short`: `Jan 1, 2026`; `long`: `January 1, 2026`; `iso`: `2026-01-01`.",
+          "type": "string",
+          "enum": [
+            "short",
+            "long",
+            "iso"
+          ],
+          "default": "short"
+        },
+        "max": {
+          "description": "Latest selectable ISO date (inclusive). Days after are disabled in both panes.",
+          "type": "string",
+          "default": ""
+        },
+        "min": {
+          "description": "Earliest selectable ISO date (inclusive). Days before are disabled in both panes.",
+          "type": "string",
+          "default": ""
+        },
+        "name": {
+          "description": "Form field name for form data submission. The selected range serializes as JSON `{\"from\":\"...\",\"to\":\"...\"}` under this key.",
+          "type": "string",
+          "default": ""
+        },
+        "noPresets": {
+          "description": "Hide the preset side rail.",
+          "type": "boolean",
+          "default": false
+        },
+        "open": {
+          "description": "Whether the popover is currently open.",
+          "type": "boolean",
+          "default": false
+        },
+        "placeholder": {
+          "description": "Text shown in the trigger when the value is empty.",
+          "type": "string",
+          "default": "Select range"
+        },
+        "readonly": {
+          "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
+          "type": "boolean",
+          "default": false
+        },
+        "value": {
+          "description": "Selected range as `{from, to}` ISO 8601 dates. Null when empty. Emitted on commit.",
+          "$ref": "#/$defs/DynamicString"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-01-01\", \"to\": \"2026-01-31\"}}\n",
+            "why": "`value` is a string, not an object. The contract is `{from, to}` ISO 8601 dates.\n",
+            "wrong": "{\"component\": \"DateRangePicker\", \"value\": \"2026-01-01 to 2026-01-31\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-01-01\", \"to\": \"2026-12-31\"}}\n",
+            "why": "Reversed range — `to < from`. This fires `invalid` and never commits.\n",
+            "wrong": "{\"component\": \"DateRangePicker\", \"value\": {\"from\": \"2026-12-31\", \"to\": \"2026-01-01\"}}\n"
+          },
+          {
+            "fix": "Use <date-range-picker-ui>.\n",
+            "why": "This is the pattern the primitive replaces. Reinvents linked-pane behavior,\nmisses preset rail, has no a11y range-announcement.\n",
+            "wrong": "Two adjacent <calendar-picker-ui> instances + JS synchronization.\n"
+          }
+        ],
+        "category": "input",
+        "composes": [
+          "calendar-grid-ui",
+          "button-ui",
+          "popover-ui",
+          "text-ui",
+          "divider-ui"
+        ],
+        "events": {
+          "change": {
+            "description": "Fired when the range commits (both `from` AND `to` selected, OR a preset clicked).",
+            "detail": {
+              "compareValue": "object",
+              "presetLabel": "string",
+              "value": "object"
+            }
+          },
+          "close": {
+            "description": "Popover closed (without commit, or after commit).",
+            "detail": {
+              "reason": "string"
+            }
+          },
+          "input": {
+            "description": "Fired during selection — e.g. user clicked `from` but has not yet picked `to`.",
+            "detail": {
+              "value": "object"
+            }
+          },
+          "invalid": {
+            "description": "A constraint failed (out of range, end < start).",
+            "detail": {
+              "reason": "string",
+              "value": "object"
+            }
+          },
+          "open": {
+            "description": "Popover opened (user clicked the trigger or pressed Enter / Space).",
+            "detail": {
+              "trigger": "string"
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Form-field-wrapped picker with default presets.",
+            "a2ui": "[\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Report period\",\n    \"children\": [\"dr\"]\n  },\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"report-period\",\n    \"min\": \"2026-01-01\",\n    \"max\": \"2026-12-31\"\n  }\n]\n",
+            "name": "canonical"
+          },
+          {
+            "description": "Analytics-surface picker with comparison range enabled.",
+            "a2ui": "[\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"period\",\n    \"comparison\": true,\n    \"value\": {\"from\": \"2026-05-01\", \"to\": \"2026-05-31\"},\n    \"compareValue\": {\"from\": \"2026-04-01\", \"to\": \"2026-04-30\"}\n  }\n]\n",
+            "name": "comparison"
+          },
+          {
+            "description": "Custom-only picker with the preset rail hidden.",
+            "a2ui": "[\n  {\n    \"id\": \"dr\",\n    \"component\": \"DateRangePicker\",\n    \"name\": \"period\",\n    \"noPresets\": true\n  }\n]\n",
+            "name": "no-presets"
+          }
+        ],
+        "keywords": [
+          "daterangepicker",
+          "date-range-picker",
+          "date-range",
+          "range",
+          "daterange",
+          "period",
+          "reporting-period"
+        ],
+        "name": "UIDateRangePicker",
+        "related": [
+          "calendar-picker",
+          "popover",
+          "field",
+          "button"
+        ],
+        "slots": {
+          "footer": {
+            "description": "Optional footer area below the calendars (e.g., \"Apply\" / \"Cancel\" buttons for explicit-commit flows)."
+          },
+          "presets": {
+            "description": "Custom preset content replacing the default preset rail."
+          },
+          "trigger": {
+            "description": "Custom trigger replacement. When omitted, a default `<button-ui>` is stamped."
+          }
+        },
+        "states": [
+          {
+            "description": "Closed, no pending selection.",
+            "name": "idle"
+          },
+          {
+            "description": "Popover open, user has not yet clicked a start date.",
+            "attribute": "open",
+            "name": "open-pending-from"
+          },
+          {
+            "description": "Start clicked, awaiting end click; hover preview active.",
+            "attribute": "open",
+            "name": "open-pending-to"
+          },
+          {
+            "description": "Both ends clicked, awaiting Apply (only in explicit-commit mode with `footer` slot).",
+            "attribute": "open",
+            "name": "open-committed"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          },
+          {
+            "description": "Read-only; trigger keyboard-focusable but popover does not open.",
+            "attribute": "readonly",
+            "name": "readonly"
+          }
+        ],
+        "status": "experimental",
+        "synonyms": {
+          "period": [
+            "date-range",
+            "range",
+            "reporting-period"
+          ],
+          "range": [
+            "date-range",
+            "period",
+            "report-period"
+          ],
+          "tags": [
+            "DateRangePicker",
+            "DateRange",
+            "DateRangeInput"
+          ]
+        },
+        "tag": "date-range-picker-ui",
+        "tokens": {
+          "--date-range-picker-bg": {
+            "description": "Host background.",
+            "default": "var(--a-bg)"
+          },
+          "--date-range-picker-popover-bg": {
+            "description": "Popover background.",
+            "default": "var(--a-bg-subtle)"
+          },
+          "--date-range-picker-popover-border": {
+            "description": "Popover border color.",
+            "default": "var(--a-border-subtle)"
+          },
+          "--date-range-picker-popover-radius": {
+            "description": "Popover border radius.",
+            "default": "var(--a-radius-lg)"
+          },
+          "--date-range-picker-popover-shadow": {
+            "description": "Popover box shadow.",
+            "default": "var(--a-shadow-lg)"
+          },
+          "--date-range-picker-preset-bg": {
+            "description": "Preset row background (idle).",
+            "default": "transparent"
+          },
+          "--date-range-picker-preset-bg-hover": {
+            "description": "Preset row background on hover.",
+            "default": "var(--a-bg-hover)"
+          },
+          "--date-range-picker-preview-bg": {
+            "description": "In-range preview background (between from and pending to).",
+            "default": "var(--a-accent-muted)"
+          },
+          "--date-range-picker-px": {
+            "description": "Horizontal popover padding.",
+            "default": "var(--a-space-3)"
+          },
+          "--date-range-picker-py": {
+            "description": "Vertical popover padding.",
+            "default": "var(--a-space-2)"
+          },
+          "--date-range-picker-selected-bg": {
+            "description": "Selected day-cell background (cascaded into the inner calendar via --calendar-picker-day-bg-selected).",
+            "default": "var(--a-accent)"
+          },
+          "--date-range-picker-selected-fg": {
+            "description": "Selected day-cell foreground.",
+            "default": "var(--a-accent-fg)"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "DateRangeSelector": {
+      "title": "DateRangeSelector",
+      "description": "Page-level \"current time window\" chooser for dashboards. A module-tier\ncomposite that pairs a preset chip-row (Today / 7d / 30d / 90d / QTD /\nYTD / Custom) with an embedded <date-range-picker-ui> and broadcasts\nthe active range to every range-aware panel on the page.\n\nOne chooser, one event bus, every panel follows. The composite owns\nthe range value, resolves preset keys to ISO 8601 from/to pairs, and\nemits a `range-change` CustomEvent on the configured broadcast target\n(default `document`). It also writes `data-range-from` /\n`data-range-to` to that target so CSS-only subscribers can match\nattribute selectors.\n\nUse for dashboard toolbars (typically <dashboard-layout-ui slot=\"toolbar\">\nor <admin-page-header slot=\"action\">). For card-local per-panel\ncomparison overlays, set [broadcast=\"self\"] so the secondary instance\nscopes to its host.\n\nSpec: docs/specs/implementation-ready/SPEC-019-date-range-selector-global.md.\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "aria-label": {
+          "description": "Accessible name for the toolbar group (role=group). Defaults to\n\"Time period\"; override when multiple range selectors sit on the\nsame page (e.g., \"Primary range\" / \"Comparison range\").\n",
+          "type": "string",
+          "default": "Time period"
+        },
+        "broadcast": {
+          "description": "Broadcast scope. `document` fires `range-change` on\n`document.documentElement` AND writes `data-range-from` /\n`data-range-to` there (page-global). `self` fires on the host and\nwrites the same attributes to the host (scoped subscribers).\n`none` suppresses broadcast entirely; only the host-level `change`\nevent fires.\n",
+          "type": "string",
+          "enum": [
+            "document",
+            "self",
+            "none"
+          ],
+          "default": "document"
+        },
+        "component": {
+          "const": "DateRangeSelector"
+        },
+        "from": {
+          "description": "Start of the resolved range, ISO-8601 date (YYYY-MM-DD). Read-only\noutput — set by the composite when value resolves or when the\nembedded picker commits a custom range. Consumers read this after\n`range-change`.\n",
+          "$ref": "#/$defs/DynamicString"
+        },
+        "presets": {
+          "description": "Override the preset chip list as a comma-separated subset of the\n`value` enum. Order matters. `custom` is optional but recommended\nas the trailing chip. Unknown keys are ignored at runtime.\n",
+          "type": "string",
+          "default": "today,7d,30d,90d,qtd,ytd,custom"
+        },
+        "to": {
+          "description": "End of the resolved range, ISO-8601 date. Same read-only output\nsemantics as `from`.\n",
+          "$ref": "#/$defs/DynamicString"
+        },
+        "value": {
+          "description": "Active preset key. Drives the chip-row selection and re-resolves\nthe from/to range on change. `custom` defers to the embedded\npicker's value (consumer-supplied from/to).\n",
+          "$ref": "#/$defs/DynamicString"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "description": "Two document-broadcasters on the same page. The late mounter wins\nsilently for the data-range-* attributes on <html>, and CSS-only\nsubscribers see flicker as the attributes are rewritten.\n",
+            "right": "<date-range-selector-ui broadcast=\"document\"></date-range-selector-ui>\n<date-range-selector-ui broadcast=\"self\"></date-range-selector-ui>\n",
+            "rule": "Pick ONE global broadcaster; route secondary instances via\nbroadcast=\"self\" so they emit only on the host.\n",
+            "wrong": "<date-range-selector-ui broadcast=\"document\"></date-range-selector-ui>\n<date-range-selector-ui broadcast=\"document\"></date-range-selector-ui>\n"
+          },
+          {
+            "description": "Using DateRangeSelector for single-date selection. The composite\nresolves a range; the picker UI exposes two-pane selection. For\nsingle-date use <input-ui type=\"date\"> or <calendar-picker-ui>.\n",
+            "right": "<input-ui type=\"date\" name=\"d\"></input-ui>\n",
+            "rule": "Range chooser → DateRangeSelector. Single-date chooser → input-ui\ntype=date or calendar-picker-ui.\n",
+            "wrong": "<date-range-selector-ui value=\"today\"></date-range-selector-ui>\n<!-- The selector still resolves a range (from=today, to=today). -->\n"
+          },
+          {
+            "description": "Custom selected with no from/to. The composite falls back to the\nprevious resolved range, which may be empty on first mount —\nconsumers see mystery behavior.\n",
+            "right": "<date-range-selector-ui value=\"custom\" from=\"2026-05-01\" to=\"2026-05-07\"></date-range-selector-ui>\n",
+            "rule": "value=\"custom\" requires either declarative from/to or a follow-on\nsetRange(\"custom\", from, to) call before the chooser is meaningful.\n",
+            "wrong": "<date-range-selector-ui value=\"custom\"></date-range-selector-ui>\n"
+          },
+          {
+            "description": "Unknown preset key. The composite resolves to the default (\"7d\")\nand the consumer sees an unexpected range.\n",
+            "right": "<date-range-selector-ui value=\"qtd\"></date-range-selector-ui>\n",
+            "rule": "Use documented enum keys only — today, 7d, 30d, 90d, qtd, ytd,\ncustom. Quarter-to-date is `qtd`.\n",
+            "wrong": "<date-range-selector-ui value=\"lastQuarter\"></date-range-selector-ui>\n"
+          }
+        ],
+        "category": "input",
+        "composes": [
+          "date-range-picker-ui",
+          "segmented-ui",
+          "segment-ui",
+          "button-ui",
+          "text-ui"
+        ],
+        "events": {
+          "change": {
+            "description": "Alias of range-change, fires on the host element only (UIFormElement\nconvention). When [name] is set, the form value is the colon-pair\n\"{from}:{to}\".\n",
+            "detail": {
+              "from": "string",
+              "to": "string",
+              "value": "string"
+            }
+          },
+          "range-change": {
+            "description": "Fired when the resolved range changes — preset clicked, custom\nrange applied, or programmatic setRange(). Fires on the broadcast\ntarget per [broadcast]. Guaranteed once per resolved range; never\nfires for in-progress picker interactions.\n",
+            "detail": {
+              "from": "string",
+              "preset": "string",
+              "to": "string",
+              "value": "string"
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Page-global selector in a dashboard toolbar; charts subscribe to range-change on document.",
+            "a2ui": "[\n  {\n    \"id\": \"dr-global\",\n    \"component\": \"DateRangeSelector\",\n    \"value\": \"30d\",\n    \"presets\": \"today,7d,30d,90d,qtd,ytd,custom\",\n    \"broadcast\": \"document\"\n  }\n]\n",
+            "name": "dashboard-toolbar-global"
+          },
+          {
+            "description": "Card-local secondary picker broadcasting only on the host (no document writes).",
+            "a2ui": "[\n  {\n    \"id\": \"dr-overlay\",\n    \"component\": \"DateRangeSelector\",\n    \"broadcast\": \"self\",\n    \"presets\": \"7d,30d,90d\"\n  }\n]\n",
+            "name": "scoped-self-broadcast"
+          },
+          {
+            "description": "Form-participating selector emitting a colon-pair value on submit.",
+            "a2ui": "[\n  {\n    \"id\": \"dr-form\",\n    \"component\": \"DateRangeSelector\",\n    \"name\": \"period\",\n    \"value\": \"ytd\"\n  }\n]\n",
+            "name": "form-participating"
+          }
+        ],
+        "keywords": [
+          "date-range-selector",
+          "date-range",
+          "range-selector",
+          "period-selector",
+          "time-window",
+          "dashboard-range",
+          "period",
+          "global-range",
+          "range-bus",
+          "timeframe"
+        ],
+        "name": "DateRangeSelector",
+        "related": [
+          "DateRangePicker",
+          "Segmented",
+          "Segment",
+          "Button",
+          "Text",
+          "DashboardLayout",
+          "AdminPageHeader"
+        ],
+        "slots": {
+          "default": {
+            "description": "The composite stamps its own chip row + picker; children placed in\nthe default slot are ignored. Use prefix/suffix slots for label\ntext or auxiliary controls.\n"
+          },
+          "prefix": {
+            "description": "Optional leading content (e.g., a \"Period:\" caption). Renders\nbefore the chip row.\n"
+          },
+          "suffix": {
+            "description": "Optional trailing content (e.g., a comparison-mode toggle).\nRenders after the picker.\n"
+          }
+        },
+        "states": [
+          {
+            "description": "Default — preset chip selected, custom picker closed.",
+            "name": "idle"
+          },
+          {
+            "description": "Custom preset active; embedded picker is exposed for editing.",
+            "attribute": "value",
+            "name": "custom"
+          },
+          {
+            "description": "Embedded picker popover is open (reflected from <date-range-picker-ui>).",
+            "attribute": "picker-open",
+            "name": "picker-open"
+          },
+          {
+            "description": "Non-interactive; chips + picker dimmed; pointer-events suppressed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          }
+        ],
+        "status": "experimental",
+        "synonyms": {
+          "period": [
+            "range",
+            "timeframe",
+            "reporting-period"
+          ],
+          "range": [
+            "period",
+            "timeframe",
+            "window"
+          ],
+          "selector": [
+            "chooser",
+            "picker"
+          ],
+          "tags": [
+            "DateRangeSelector",
+            "RangeSelector",
+            "PeriodSelector",
+            "TimeWindow"
+          ]
+        },
+        "tag": "date-range-selector-ui",
+        "tokens": {
+          "--date-range-selector-gap": {
+            "description": "Inline gap between prefix slot, chip row, picker, readout, and suffix slot.",
+            "default": "var(--a-space-3)"
+          },
+          "--date-range-selector-picker-trigger-py": {
+            "description": "Vertical padding on the embedded picker trigger (cascades into the inner button-ui).",
+            "default": "var(--a-space-2)"
+          },
+          "--date-range-selector-readout-fg": {
+            "description": "Resolved-range readout foreground color.",
+            "default": "var(--a-fg-muted)"
+          },
+          "--date-range-selector-readout-size": {
+            "description": "Resolved-range readout font size.",
+            "default": "var(--a-font-size-sm)"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "DatetimePicker": {
+      "title": "DatetimePicker",
+      "description": "Single-control date + time selection. Trigger button opens a popover with a `<calendar-picker-ui>` on the left + a `<time-picker-ui>` on the right; commit emits a full ISO 8601 datetime string (\"YYYY-MM-DDTHH:mm\" or with seconds). Composes the two underlying primitives — never wraps a native `<input type=\"datetime-local\">` (per ADR-0025). Form-associated under one `name`. SPEC-038.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "required": {
+          "description": "Required for validation when inside a `<form>`.",
+          "type": "boolean",
+          "default": false
+        },
+        "component": {
+          "const": "DatetimePicker"
+        },
+        "disabled": {
+          "description": "Block all interaction. Trigger remains rendered but does not open the popover.",
+          "type": "boolean",
+          "default": false
+        },
+        "format": {
+          "description": "Trigger button date format. `short`: `Jan 1, 2026 14:30`; `long`: `January 1, 2026 14:30`; `iso`: full ISO string.",
+          "type": "string",
+          "enum": [
+            "short",
+            "long",
+            "iso"
+          ],
+          "default": "short"
+        },
+        "hourcycle": {
+          "description": "Hour cycle for the time pane. Empty (default) derives from the\ndocument locale. `h12` forces a 12-hour cycle with an AM/PM\n(meridiem) segment; `h23` forces 24-hour cycle.\n",
+          "type": "string",
+          "enum": [
+            "",
+            "h12",
+            "h23"
+          ],
+          "default": ""
+        },
+        "locale": {
+          "description": "BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.",
+          "type": "string",
+          "default": ""
+        },
+        "max": {
+          "description": "Latest selectable ISO 8601 datetime (inclusive). Days after are disabled in the calendar pane; times after are rejected by the time pane on the same day.",
+          "type": "string",
+          "default": ""
+        },
+        "min": {
+          "description": "Earliest selectable ISO 8601 datetime (inclusive). Days before are disabled in the calendar pane; times before are rejected by the time pane on the same day.",
+          "type": "string",
+          "default": ""
+        },
+        "name": {
+          "description": "Form field name. The ISO 8601 datetime is submitted under this key when the picker is inside a `<form>`.",
+          "type": "string",
+          "default": ""
+        },
+        "open": {
+          "description": "Whether the popover is currently open.",
+          "type": "boolean",
+          "default": false
+        },
+        "placeholder": {
+          "description": "Text shown in the trigger when the value is empty.",
+          "type": "string",
+          "default": "Select date and time"
+        },
+        "precision": {
+          "description": "Time-pane precision. `minute` (default) emits `HH:mm`; `second` exposes the seconds segment and emits `HH:mm:ss`.",
+          "type": "string",
+          "enum": [
+            "minute",
+            "second"
+          ],
+          "default": "minute"
+        },
+        "readonly": {
+          "description": "Block edits; allow keyboard navigation for screen-reader inspection.",
+          "type": "boolean",
+          "default": false
+        },
+        "step": {
+          "description": "Per-Arrow-keypress increment in seconds for the time pane. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.",
+          "type": "number",
+          "default": 60
+        },
+        "value": {
+          "description": "Current value as ISO 8601 datetime (\"YYYY-MM-DDTHH:mm\" or \"YYYY-MM-DDTHH:mm:ss\"). Empty when no value selected.",
+          "$ref": "#/$defs/DynamicString"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T00:00\"}\n",
+            "why": "`value` is a date-only string — no time component. The contract requires\na full ISO 8601 datetime including the `T` and time segment.\n",
+            "wrong": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T14:30\"}\n",
+            "why": "`value` is a time-only string — no date component. Use `<TimePicker>` for\ntime-only selection or supply the date portion.\n",
+            "wrong": "{\"component\": \"DatetimePicker\", \"value\": \"14:30\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"DatetimePicker\", \"name\": \"field-name\"}\n",
+            "why": "Nesting a native datetime-local input violates ADR-0025 and bypasses\nElementInternals form participation.\n",
+            "wrong": "{\"component\": \"DatetimePicker\", \"children\": [\n  {\"component\": \"Input\", \"type\": \"datetime-local\"}\n]}\n"
+          },
+          {
+            "fix": "<datetime-picker-ui name=\"appointment\"></datetime-picker-ui>\n",
+            "why": "Hand-rolled date + free-form time composition is the pattern this primitive\nreplaces. It misses the coordinated popover, the per-segment Spinbutton\na11y model, and unified form participation.\n",
+            "wrong": "<calendar-picker-ui></calendar-picker-ui>\n<input-ui type=\"text\" placeholder=\"HH:mm\"></input-ui>\n"
+          }
+        ],
+        "category": "input",
+        "composes": [
+          "calendar-grid-ui",
+          "time-picker-ui",
+          "button-ui",
+          "popover-ui",
+          "divider-ui"
+        ],
+        "events": {
+          "change": {
+            "description": "Fired when the value commits (date picked + time edited, OR Apply clicked in explicit-commit mode).",
+            "detail": {
+              "source": "string",
+              "value": "string"
+            }
+          },
+          "close": {
+            "description": "Popover closed (without commit, or after commit).",
+            "detail": {
+              "reason": "string"
+            }
+          },
+          "input": {
+            "description": "Fired during partial selection (date picked but time still pending, or vice versa).",
+            "detail": {
+              "value": "string"
+            }
+          },
+          "invalid": {
+            "description": "A constraint failed (out of range, parse error).",
+            "detail": {
+              "reason": "string",
+              "value": "string"
+            }
+          },
+          "open": {
+            "description": "Popover opened (user clicked the trigger or pressed Enter / Space).",
+            "detail": {
+              "trigger": "string"
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Form-field-wrapped picker with min/max bounds.",
+            "a2ui": "[\n  {\n    \"id\": \"field\",\n    \"component\": \"Field\",\n    \"label\": \"Appointment\",\n    \"children\": [\"dt\"]\n  },\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"appointment\",\n    \"min\": \"2026-01-01T00:00\",\n    \"max\": \"2026-12-31T23:59\"\n  }\n]\n",
+            "name": "canonical"
+          },
+          {
+            "description": "Log-cursor picker with second precision.",
+            "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"log-cursor\",\n    \"precision\": \"second\",\n    \"step\": 1,\n    \"value\": \"2026-05-24T14:30:45\"\n  }\n]\n",
+            "name": "second-precision"
+          },
+          {
+            "description": "Cron editor with forced 24-hour cycle.",
+            "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"name\": \"cron\",\n    \"hourCycle\": \"h23\"\n  }\n]\n",
+            "name": "forced-24h"
+          },
+          {
+            "description": "Read-only datetime for inspection only.",
+            "a2ui": "[\n  {\n    \"id\": \"dt\",\n    \"component\": \"DatetimePicker\",\n    \"readonly\": true,\n    \"value\": \"2026-05-24T14:30\"\n  }\n]\n",
+            "name": "readonly"
+          }
+        ],
+        "keywords": [
+          "datetimepicker",
+          "datetime-picker",
+          "datetime",
+          "date-time",
+          "dateandtime",
+          "appointment",
+          "schedule",
+          "timestamp"
+        ],
+        "name": "UIDatetimePicker",
         "related": [
-          "AdminCommand",
-          "Menu",
-          "Modal",
-          "Search"
+          "calendar-picker",
+          "time-picker",
+          "date-range-picker",
+          "popover",
+          "field",
+          "button"
         ],
         "slots": {
-          "empty": {
-            "description": "Empty state shown when no items match"
-          },
           "footer": {
-            "description": "Keyboard hint bar"
-          },
-          "list": {
-            "description": "Container for command items and groups"
+            "description": "Optional Apply / Cancel buttons for explicit-commit flows. Spans both panes below the calendar + time area."
           },
-          "search": {
-            "description": "Search input with combobox role"
+          "trigger": {
+            "description": "Custom trigger replacement. When omitted, a default `<button-ui>` is stamped."
           }
         },
         "states": [
           {
-            "description": "Default, ready for interaction.",
+            "description": "Closed, no pending selection.",
             "name": "idle"
+          },
+          {
+            "description": "Popover open, no calendar pick yet.",
+            "attribute": "open",
+            "name": "open-pending-date"
+          },
+          {
+            "description": "Date picked; time pane is the next focus target.",
+            "attribute": "open",
+            "name": "open-pending-time"
+          },
+          {
+            "description": "Both panes set; awaiting Apply (explicit-commit mode only).",
+            "attribute": "open",
+            "name": "open-committed"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          },
+          {
+            "description": "Read-only; trigger keyboard-focusable but popover does not open.",
+            "attribute": "readonly",
+            "name": "readonly"
           }
         ],
-        "status": "stable",
+        "status": "experimental",
         "synonyms": {
-          "ai": [
-            "chat",
-            "streaming",
-            "response",
-            "command"
-          ],
-          "assistant": [
-            "chat",
-            "streaming",
-            "response",
-            "command"
-          ],
-          "autocomplete": [
-            "search",
-            "command",
-            "palette",
-            "tag"
-          ],
-          "combobox": [
-            "search",
-            "command",
-            "select"
-          ],
-          "command": [
-            "command",
-            "palette",
-            "kbd",
-            "shortcut"
-          ],
-          "console": [
-            "dashboard",
-            "table",
-            "data",
-            "sidebar",
-            "command"
-          ],
-          "copilot": [
-            "chat",
-            "streaming",
-            "response",
-            "command"
-          ],
-          "find": [
-            "search",
-            "filter",
-            "command"
-          ],
-          "hotkey": [
-            "kbd",
-            "shortcut",
-            "command"
-          ],
-          "keybinding": [
-            "kbd",
-            "shortcut",
-            "command"
-          ],
-          "keyboard": [
-            "kbd",
-            "shortcut",
-            "command"
-          ],
-          "lookup": [
-            "search",
-            "filter",
-            "command"
-          ],
-          "menu": [
-            "nav",
-            "sidebar",
-            "popover",
-            "menu",
-            "command"
-          ],
-          "omnibar": [
-            "command",
-            "palette",
-            "search"
-          ],
-          "palette": [
-            "color",
-            "picker",
-            "command",
-            "palette"
+          "appointment": [
+            "datetime",
+            "meeting",
+            "schedule"
           ],
-          "prompt": [
-            "chat",
-            "streaming",
-            "command",
-            "palette"
-          ],
-          "search": [
-            "search",
-            "filter",
-            "command",
-            "palette"
-          ],
-          "shortcut": [
-            "kbd",
-            "shortcut",
-            "command"
-          ],
-          "spotlight": [
-            "command",
-            "palette",
-            "search"
+          "datetime": [
+            "date-time",
+            "timestamp",
+            "appointment",
+            "schedule"
           ],
           "tags": [
-            "CommandPalette"
-          ],
-          "terminal": [
-            "code",
-            "block",
-            "command"
-          ],
-          "typeahead": [
-            "search",
-            "command",
-            "palette"
+            "DateTimePicker",
+            "DateTimeInput",
+            "DatetimeInput",
+            "Timestamp"
           ]
         },
-        "tag": "command-ui",
-        "tokens": {},
+        "tag": "datetime-picker-ui",
+        "tokens": {
+          "--datetime-picker-bg": {
+            "description": "Host background.",
+            "default": "var(--a-bg)"
+          },
+          "--datetime-picker-divider": {
+            "description": "Pane divider color.",
+            "default": "var(--a-border-subtle)"
+          },
+          "--datetime-picker-duration": {
+            "description": "Open/close transition duration.",
+            "default": "var(--a-duration-fast)"
+          },
+          "--datetime-picker-easing": {
+            "description": "Open/close transition easing.",
+            "default": "var(--a-easing)"
+          },
+          "--datetime-picker-fg": {
+            "description": "Host text color.",
+            "default": "var(--a-fg)"
+          },
+          "--datetime-picker-popover-bg": {
+            "description": "Popover background.",
+            "default": "var(--a-bg-subtle)"
+          },
+          "--datetime-picker-popover-border": {
+            "description": "Popover border color.",
+            "default": "var(--a-border-subtle)"
+          },
+          "--datetime-picker-popover-gap": {
+            "description": "Gap between calendar pane and time pane.",
+            "default": "var(--a-space-3)"
+          },
+          "--datetime-picker-popover-padding": {
+            "description": "Popover internal padding.",
+            "default": "var(--a-space-3)"
+          },
+          "--datetime-picker-popover-radius": {
+            "description": "Popover border radius.",
+            "default": "var(--a-radius-lg)"
+          },
+          "--datetime-picker-popover-shadow": {
+            "description": "Popover box shadow.",
+            "default": "var(--a-shadow-lg)"
+          },
+          "--datetime-picker-px": {
+            "description": "Horizontal popover padding.",
+            "default": "var(--a-space-3)"
+          },
+          "--datetime-picker-py": {
+            "description": "Vertical popover padding.",
+            "default": "var(--a-space-2)"
+          },
+          "--datetime-picker-trigger-min-width": {
+            "description": "Default trigger min-width — sized so the formatted date+time fits without truncation.",
+            "default": "16em"
+          }
+        },
         "traits": [],
         "version": 1
       }
@@ -9476,9 +11014,87 @@
         "version": 1
       }
     },
-    "Inspector": {
-      "title": "Inspector",
-      "description": "Developer-tools pane for inspecting A2UI runtime state — composes\n<tabs-ui> + <code-ui> to show the live document JSON, rendered\nHTML, and event log for the bound <canvas-ui> / <a2ui-root>. The\nright-pane inspector of the a2ui-editor app. Use inside an\n<editor-sidebar slot=\"trailing\"> for debugging A2UI playgrounds;\nnot for end-user inspector panes (build those bespoke with\n<field-ui> + form rows per the editor-inspector-pane recipe in\npatterns-recipes.md).\n",
+    "Inspector": {
+      "title": "Inspector",
+      "description": "Developer-tools pane for inspecting A2UI runtime state — composes\n<tabs-ui> + <code-ui> to show the live document JSON, rendered\nHTML, and event log for the bound <canvas-ui> / <a2ui-root>. The\nright-pane inspector of the a2ui-editor app. Use inside an\n<editor-sidebar slot=\"trailing\"> for debugging A2UI playgrounds;\nnot for end-user inspector panes (build those bespoke with\n<field-ui> + form rows per the editor-inspector-pane recipe in\npatterns-recipes.md).\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "Inspector"
+        },
+        "value": {
+          "description": "Active tab. One of 'catalog', 'surface', 'messages', 'code'.",
+          "type": "string",
+          "default": "surface"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [],
+        "category": "agent",
+        "composes": [
+          "tabs-ui",
+          "tab-ui",
+          "code-ui"
+        ],
+        "events": {},
+        "examples": [
+          {
+            "description": "Basic Inspector usage",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Inspector\"\n  }\n]",
+            "name": "basic-inspector"
+          }
+        ],
+        "keywords": [
+          "inspector"
+        ],
+        "name": "UIInspector",
+        "related": [
+          "A2uiRoot",
+          "EditorSidebar",
+          "Code",
+          "Tabs"
+        ],
+        "slots": {
+          "default": {
+            "description": "Default slot — primary child content."
+          }
+        },
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "tags": [
+            "object-inspector",
+            "property-grid",
+            "record-detail",
+            "devtools-pane"
+          ]
+        },
+        "tag": "inspector-ui",
+        "tokens": {},
+        "traits": [],
+        "version": 1
+      }
+    },
+    "IntegrationCard": {
+      "title": "IntegrationCard",
+      "description": "Single-tile primitive representing one third-party integration (Slack, GitHub, Stripe, …). Shows the provider logo + name + description + status pill + a single primary action button whose label and variant are derived from `status`. Composes into a grid via the SPEC-063 integrations-page composite. One tile = one provider; the button variant is computed from `status`, not a separate prop. Distinct from <option-card-ui> (a single-select radio with no status / async action) and <card-ui> (the generic bordered surface this specializes).",
       "type": "object",
       "allOf": [
         {
@@ -9489,67 +11105,255 @@
         }
       ],
       "properties": {
+        "description": {
+          "description": "One-line description of what the integration does.",
+          "type": "string",
+          "default": ""
+        },
         "component": {
-          "const": "Inspector"
+          "const": "IntegrationCard"
         },
-        "value": {
-          "description": "Active tab. One of 'catalog', 'surface', 'messages', 'code'.",
+        "disabled": {
+          "description": "Disables the action button.",
+          "type": "boolean",
+          "default": false
+        },
+        "error-message": {
+          "description": "When `status=\"error\"`, the message to show below the description. Ignored for other statuses.",
+          "$ref": "#/$defs/DynamicString"
+        },
+        "logo": {
+          "description": "Logo URL (preferred — renders as <img>) or icon name (renders as <icon-ui>). URLs are sniffed by presence of `/`.",
           "type": "string",
-          "default": "surface"
+          "default": ""
+        },
+        "name": {
+          "description": "Display name shown as the card title. Required.",
+          "type": "string",
+          "default": ""
+        },
+        "provider": {
+          "description": "Provider key — `slack`, `github`, etc. — used for analytics + a11y label. Required.",
+          "type": "string",
+          "default": ""
+        },
+        "status": {
+          "description": "Current connection state — drives the button label, variant, and visibility. `available` shows a primary `Connect`; `connected` shows an outline `Configure`; `error` shows an outline `Retry`; `pending` shows a non-interactive spinner; `coming-soon` hides the button.",
+          "$ref": "#/$defs/DynamicString"
         }
       },
       "required": [
-        "component"
+        "component",
+        "provider",
+        "name"
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
-        "category": "agent",
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"name\": \"Slack\", \"status\": \"available\"}\n",
+            "why": "Manually slotting a Button bypasses the card's status-driven\nbutton semantics. The card renders its own button AND the\nslotted one, producing two actions side-by-side.\n",
+            "wrong": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"children\": [{\"component\": \"Button\", \"label\": \"Connect\"}]}\n"
+          },
+          {
+            "fix": "{\"component\": \"IntegrationCard\", \"provider\": \"slack\",\n \"name\": \"Slack\", \"logo\": \"/slack.svg\", \"status\": \"available\"}\n",
+            "why": "Re-implements IntegrationCard with primitives. Loses status\nbadge semantics, accessible-name wiring, and the typed\nconnect/configure events.\n",
+            "wrong": "{\"component\": \"Card\", \"children\": [\n  {\"component\": \"Image\", \"src\": \"/slack.svg\"},\n  {\"component\": \"Text\", \"value\": \"Slack\"},\n  {\"component\": \"Button\", \"label\": \"Connect\"}]}\n"
+          }
+        ],
+        "category": "display",
         "composes": [
-          "tabs-ui",
-          "tab-ui",
-          "code-ui"
+          "icon-ui",
+          "badge-ui",
+          "button-ui"
         ],
-        "events": {},
+        "events": {
+          "configure": {
+            "description": "Fired when the user clicks the action button while `status=\"connected\"`.",
+            "detail": {
+              "provider": {
+                "description": "The provider key for this card.",
+                "type": "string"
+              }
+            }
+          },
+          "connect": {
+            "description": "Fired when the user clicks the action button while `status=\"available\"`.",
+            "detail": {
+              "provider": {
+                "description": "The provider key for this card.",
+                "type": "string"
+              }
+            }
+          },
+          "disconnect": {
+            "description": "Fired when the consumer wires a `<menu-ui slot=\"actions\">` overflow with a `disconnect` item. The card does not stamp this menu — it bubbles whatever consumer markup dispatches.",
+            "detail": {
+              "provider": {
+                "description": "The provider key for this card.",
+                "type": "string"
+              }
+            }
+          },
+          "retry": {
+            "description": "Fired when the user clicks the action button while `status=\"error\"`.",
+            "detail": {
+              "provider": {
+                "description": "The provider key for this card.",
+                "type": "string"
+              }
+            }
+          }
+        },
         "examples": [
           {
-            "description": "Basic Inspector usage",
-            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Inspector\"\n  }\n]",
-            "name": "basic-inspector"
+            "description": "Available integration with logo, description, and primary Connect button.",
+            "a2ui": "{\n  \"id\": \"card-slack\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"slack\",\n  \"name\": \"Slack\",\n  \"logo\": \"/integrations/slack.svg\",\n  \"description\": \"Send AI replies and notifications to channels.\",\n  \"status\": \"available\"\n}",
+            "name": "available"
+          },
+          {
+            "description": "Connected integration with success badge and outline Configure button.",
+            "a2ui": "{\n  \"id\": \"card-github\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"github\",\n  \"name\": \"GitHub\",\n  \"logo\": \"/integrations/github.svg\",\n  \"description\": \"Sync issues and pull requests.\",\n  \"status\": \"connected\"\n}",
+            "name": "connected"
+          },
+          {
+            "description": "Error integration with danger badge, error message, and Retry button.",
+            "a2ui": "{\n  \"id\": \"card-stripe\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"stripe\",\n  \"name\": \"Stripe\",\n  \"description\": \"Charge customers and reconcile invoices.\",\n  \"status\": \"error\",\n  \"error-message\": \"Token expired — re-authenticate.\"\n}",
+            "name": "error"
+          },
+          {
+            "description": "Coming-soon integration with no action button.",
+            "a2ui": "{\n  \"id\": \"card-zapier\",\n  \"component\": \"IntegrationCard\",\n  \"provider\": \"zapier\",\n  \"name\": \"Zapier\",\n  \"description\": \"Trigger Zaps from AdiaUI events.\",\n  \"status\": \"coming-soon\"\n}",
+            "name": "coming-soon"
           }
         ],
         "keywords": [
-          "inspector"
+          "integration",
+          "connect",
+          "provider",
+          "slack",
+          "github",
+          "stripe",
+          "oauth",
+          "third-party",
+          "settings",
+          "integrations",
+          "card",
+          "tile"
         ],
-        "name": "UIInspector",
+        "name": "UIIntegrationCard",
         "related": [
-          "A2uiRoot",
-          "EditorSidebar",
-          "Code",
-          "Tabs"
+          "card",
+          "badge",
+          "button",
+          "menu"
         ],
         "slots": {
           "default": {
-            "description": "Default slot — primary child content."
+            "description": "Optional override for the description. When a non-empty default slot is provided it supersedes the `description` prop."
+          },
+          "actions": {
+            "description": "Optional secondary actions — typically a <menu-ui> overflow carrying `Reauthenticate` / `Disconnect` entries. Collapses when empty."
           }
         },
         "states": [
           {
-            "description": "Default, ready for interaction.",
+            "description": "Default — `[status=\"available\"]`.",
             "name": "idle"
+          },
+          {
+            "description": "Ready to connect.",
+            "attribute": "status=\"available\"",
+            "name": "available"
+          },
+          {
+            "description": "Linked — success-tinted border, check badge, outline `Configure` button.",
+            "attribute": "status=\"connected\"",
+            "name": "connected"
+          },
+          {
+            "description": "Connection failed — danger-tinted border, error message visible, outline `Retry` button.",
+            "attribute": "status=\"error\"",
+            "name": "error"
+          },
+          {
+            "description": "Awaiting response — button shows spinner, non-interactive.",
+            "attribute": "status=\"pending\"",
+            "name": "pending"
+          },
+          {
+            "description": "Listed but not yet enabled — opacity reduced, button hidden, \"Coming soon\" badge shown.",
+            "attribute": "status=\"coming-soon\"",
+            "name": "coming-soon"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
           }
         ],
         "status": "stable",
         "synonyms": {
-          "tags": [
-            "object-inspector",
-            "property-grid",
-            "record-detail",
-            "devtools-pane"
+          "connect": [
+            "integration",
+            "oauth",
+            "connection"
+          ],
+          "integration": [
+            "integration",
+            "connect",
+            "provider",
+            "third-party"
+          ],
+          "oauth": [
+            "integration",
+            "connect",
+            "auth"
+          ],
+          "provider": [
+            "integration",
+            "third-party",
+            "service"
+          ],
+          "settings": [
+            "settings",
+            "integration",
+            "account"
           ]
         },
-        "tag": "inspector-ui",
-        "tokens": {},
+        "tag": "integration-card-ui",
+        "tokens": {
+          "--integration-card-bg": {
+            "description": "Card background. Defaults to `--a-bg`."
+          },
+          "--integration-card-border": {
+            "description": "Card border color. Defaults to `--a-border`."
+          },
+          "--integration-card-description-fg": {
+            "description": "Description text color."
+          },
+          "--integration-card-error-fg": {
+            "description": "Error-message text color (used when `status=\"error\"`)."
+          },
+          "--integration-card-gap": {
+            "description": "Vertical rhythm between header / body / footer."
+          },
+          "--integration-card-heading-fg": {
+            "description": "Provider name color."
+          },
+          "--integration-card-logo-size": {
+            "description": "Logo square dimension. Defaults to `--a-space-7`."
+          },
+          "--integration-card-px": {
+            "description": "Horizontal padding. Defaults to `--a-space-4`."
+          },
+          "--integration-card-py": {
+            "description": "Vertical padding. Defaults to `--a-space-4`."
+          },
+          "--integration-card-radius": {
+            "description": "Card corner radius. Defaults to `--a-radius-md`."
+          }
+        },
         "traits": [],
         "version": 1
       }
@@ -9986,48 +11790,323 @@
           "description": "Optional leading icon name (Phosphor).",
           "type": "string"
         },
-        "text": {
-          "description": "Primary text. Renders as semibold inline body.",
-          "type": "string"
-        }
-      },
-      "required": [
-        "component"
-      ],
-      "unevaluatedProperties": false,
-      "x-adiaui": {
-        "anti_patterns": [],
-        "category": "layout",
-        "composes": [],
-        "events": {},
-        "examples": [],
+        "text": {
+          "description": "Primary text. Renders as semibold inline body.",
+          "type": "string"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [],
+        "category": "layout",
+        "composes": [],
+        "events": {},
+        "examples": [],
+        "keywords": [
+          "list-item",
+          "list-row",
+          "list-entry",
+          "item-row",
+          "row"
+        ],
+        "name": "UIListItem",
+        "related": [
+          "List",
+          "NavItem",
+          "MenuItem",
+          "TreeItem"
+        ],
+        "slots": {},
+        "states": [],
+        "status": "stable",
+        "synonyms": {
+          "list-item": [
+            "row",
+            "entry",
+            "list-row",
+            "item"
+          ]
+        },
+        "tag": "list-item-ui",
+        "tokens": {},
+        "traits": [],
+        "version": 1
+      }
+    },
+    "ListWindow": {
+      "title": "ListWindow",
+      "description": "Virtualized / windowed list primitive. Renders only the visible slice of a large items[] array (chat threads, feeds, log streams, nav lists, search-result panes) — typically ≤50 DOM rows regardless of the underlying collection size. Composes a `render`-function prop OR a slotted <template> for row materialization; ships a fixed-size fast-path (constant-time index→offset math) and a variable-size measurement fallback. Distinct from <list-ui> (renders every child, preferred for short lists < 50 items) and <table-ui> (tabular data with columns). Use list-window-ui when items.length is large enough that rendering every row would block the main thread or stutter scroll.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "items": {
+          "description": "The items to virtualize. Required for prop-driven authoring; ignored when data-stream-src is set.",
+          "type": "array",
+          "default": []
+        },
+        "component": {
+          "const": "ListWindow"
+        },
+        "direction": {
+          "description": "Scroll axis — vertical (default) or horizontal carousel.",
+          "type": "string",
+          "enum": [
+            "vertical",
+            "horizontal"
+          ],
+          "default": "vertical"
+        },
+        "estimatedSize": {
+          "description": "Initial guess for variable-height rows. Used until the first measurement pass refines the offset cache.",
+          "type": "number",
+          "default": 48
+        },
+        "itemSize": {
+          "description": "Fixed item height in pixels. When > 0, uses the constant-time fast path (avoids per-row measurement).",
+          "type": "number",
+          "default": 0
+        },
+        "itemSizeRem": {
+          "description": "Fixed item height in rem. Useful for typographic-scale rows that should track the body type.",
+          "type": "number",
+          "default": 0
+        },
+        "loading": {
+          "description": "Render skeleton rows in the visible window. Sets aria-busy=\"true\" on the host.",
+          "type": "boolean",
+          "default": false
+        },
+        "overscan": {
+          "description": "Rows to render above + below the visible window. 0–20 is reasonable; > 50 negates the windowing benefit.",
+          "type": "number",
+          "default": 3
+        },
+        "pinBottom": {
+          "description": "When appending items, keep scroll pinned to the bottom (chat-thread / log-tail pattern).",
+          "type": "boolean",
+          "default": false
+        },
+        "startIndex": {
+          "description": "Index to scroll to on mount. Useful for restoring scroll position on remount.",
+          "type": "number",
+          "default": 0
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{ \"component\": \"ListWindow\", \"items\": [/* 10000 items */], \"item-size\": 48 }\n",
+            "why": "Rendering 10k items into <list-ui> blows up the DOM and main thread. Scroll\njank, mount lag, and memory pressure all degrade.\n",
+            "wrong": "{ \"component\": \"List\", \"items\": [/* 10000 items */] }\n"
+          },
+          {
+            "fix": "Wrap in a container with a height, or set style=\"height:480px\" on the\nListWindow itself.\n",
+            "why": "Without a height bound, the scroll container has no viewport, so the windowing\nmath reports \"all items visible\" and the whole list mounts.\n",
+            "wrong": "{ \"component\": \"ListWindow\", \"items\": [/* … */] }\n(with no parent height + no item-size + no estimated-size)\n"
+          },
+          {
+            "fix": "{ \"component\": \"ListWindow\", \"overscan\": 5, \"items\": [/* … */] }\n",
+            "why": "Overscan=200 materializes 200 rows above + below the viewport. That defeats\nthe entire point of windowing.\n",
+            "wrong": "{ \"component\": \"ListWindow\", \"overscan\": 200, \"items\": [/* … */] }\n"
+          }
+        ],
+        "category": "display",
+        "composes": [
+          "skeleton-ui"
+        ],
+        "events": {
+          "item-click": {
+            "description": "Fired when a rendered row is clicked.",
+            "detail": {
+              "index": {
+                "description": "Item index in the full items[] array.",
+                "type": "number"
+              },
+              "item": {
+                "description": "The clicked item (full item-shape from items[])."
+              }
+            }
+          },
+          "measure": {
+            "description": "Fired when a variable-height row is measured. Useful for instrumenting the offset cache.",
+            "detail": {
+              "height": {
+                "description": "Measured row height in pixels.",
+                "type": "number"
+              },
+              "index": {
+                "description": "Index of the row that was measured.",
+                "type": "number"
+              }
+            }
+          },
+          "range-change": {
+            "description": "Fired when the visible row range (start/end indices) changes due to scroll.",
+            "detail": {
+              "items": {
+                "description": "The items currently materialized in the window.",
+                "type": "array"
+              },
+              "endIndex": {
+                "description": "Last rendered row index (exclusive).",
+                "type": "number"
+              },
+              "startIndex": {
+                "description": "First rendered row index.",
+                "type": "number"
+              }
+            }
+          },
+          "scroll-end": {
+            "description": "Fired when the user scrolls to the bottom (within 1 viewport). Use for infinite-load patterns.",
+            "detail": {
+              "index": {
+                "description": "Last visible row index.",
+                "type": "number"
+              }
+            }
+          },
+          "scroll-start": {
+            "description": "Fired when the user scrolls to the top (within 1 viewport). Use for \"load older\" patterns.",
+            "detail": {
+              "index": {
+                "description": "First visible row index.",
+                "type": "number"
+              }
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Virtualized chat-thread message list with declarative <template> rows.",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\"thread\"]\n  },\n  {\n    \"id\": \"thread\",\n    \"component\": \"ListWindow\",\n    \"item-size\": 56,\n    \"overscan\": 5,\n    \"pin-bottom\": true\n  }\n]",
+            "name": "chat-thread-list"
+          },
+          {
+            "description": "SSE-streamed JSONL log tail with sticky-bottom pin.",
+            "a2ui": "[\n  {\n    \"id\": \"logs\",\n    \"component\": \"ListWindow\",\n    \"item-size\": 24,\n    \"pin-bottom\": true\n  }\n]",
+            "name": "log-tail-stream"
+          }
+        ],
         "keywords": [
-          "list-item",
-          "list-row",
-          "list-entry",
-          "item-row",
-          "row"
+          "list-window",
+          "virtualized",
+          "windowed",
+          "virtual-scroll",
+          "infinite-scroll",
+          "large-list",
+          "feed",
+          "chat-thread",
+          "log-stream",
+          "10k-rows"
         ],
-        "name": "UIListItem",
+        "name": "UIListWindow",
         "related": [
           "List",
-          "NavItem",
-          "MenuItem",
-          "TreeItem"
+          "ListItem",
+          "Feed",
+          "ChatThread",
+          "Table"
+        ],
+        "slots": {
+          "default": {
+            "description": "A single <template> element used to clone rows (declarative-template authoring). Mutually exclusive with the render prop."
+          },
+          "after": {
+            "description": "Sticky-bottom content (composer, \"load older\" button)."
+          },
+          "before": {
+            "description": "Sticky-top content (filter chips, summary stat)."
+          },
+          "empty": {
+            "description": "Custom empty-state content when items.length === 0."
+          },
+          "loading": {
+            "description": "Custom skeleton row template; falls back to <skeleton-ui> when omitted."
+          }
+        },
+        "states": [
+          {
+            "description": "Default — rendering and reconciling normally.",
+            "name": "idle"
+          },
+          {
+            "description": "Skeleton rows; data fetch in flight.",
+            "attribute": "loading",
+            "name": "loading"
+          },
+          {
+            "description": "items.length === 0.",
+            "attribute": "empty",
+            "name": "empty"
+          },
+          {
+            "description": "First-mount measurement pass on variable-height rows; suppresses scroll-end events.",
+            "attribute": "measuring",
+            "name": "measuring"
+          },
+          {
+            "description": "Pointer events blocked.",
+            "attribute": "disabled",
+            "name": "disabled"
+          }
         ],
-        "slots": {},
-        "states": [],
         "status": "stable",
         "synonyms": {
-          "list-item": [
-            "row",
-            "entry",
-            "list-row",
-            "item"
+          "infinite-scroll": [
+            "virtualized",
+            "virtual-scroll",
+            "list-window"
+          ],
+          "large-list": [
+            "virtualized",
+            "list-window"
+          ],
+          "virtual-scroll": [
+            "virtualized",
+            "windowed",
+            "list-window"
+          ],
+          "virtualized": [
+            "virtual-scroll",
+            "windowed",
+            "list-window"
+          ],
+          "windowed": [
+            "virtualized",
+            "virtual-scroll",
+            "list-window"
           ]
         },
-        "tag": "list-item-ui",
-        "tokens": {},
+        "tag": "list-window-ui",
+        "tokens": {
+          "--list-window-bg": {
+            "description": "Host background (defaults to --a-bg)."
+          },
+          "--list-window-overscan-bg": {
+            "description": "Visible buffer rows background — transparent by default."
+          },
+          "--list-window-row-gap": {
+            "description": "Row spacing in the visible window (defaults to --a-space-1)."
+          },
+          "--list-window-sentinel-size": {
+            "description": "Top + bottom IntersectionObserver-target sentinel size (defaults to --a-space-2)."
+          }
+        },
         "traits": [],
         "version": 1
       }
@@ -10930,107 +13009,365 @@
       ],
       "unevaluatedProperties": false,
       "x-adiaui": {
-        "anti_patterns": [],
-        "category": "agent",
+        "anti_patterns": [],
+        "category": "agent",
+        "composes": [],
+        "events": {
+          "noodle-connect": {
+            "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }",
+            "detail": {
+              "from": {
+                "description": "Source node ID.",
+                "type": "string"
+              },
+              "fromPort": {
+                "description": "Source port identifier.",
+                "type": "string"
+              },
+              "id": {
+                "description": "Connection ID.",
+                "type": "string"
+              },
+              "to": {
+                "description": "Target node ID.",
+                "type": "string"
+              },
+              "toPort": {
+                "description": "Target port identifier.",
+                "type": "string"
+              }
+            }
+          },
+          "noodle-disconnect": {
+            "description": "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }",
+            "detail": {
+              "from": {
+                "description": "Source node ID.",
+                "type": "string"
+              },
+              "fromPort": {
+                "description": "Source port identifier.",
+                "type": "string"
+              },
+              "id": {
+                "description": "Connection ID.",
+                "type": "string"
+              },
+              "to": {
+                "description": "Target node ID.",
+                "type": "string"
+              },
+              "toPort": {
+                "description": "Target port identifier.",
+                "type": "string"
+              }
+            }
+          },
+          "noodle-drag": {
+            "description": "Fired during drag-to-connect. detail: { from, fromPort, x, y, reconnect }"
+          }
+        },
+        "examples": [
+          {
+            "description": "Basic Noodles usage",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Noodles\"\n  }\n]",
+            "name": "basic-noodles"
+          }
+        ],
+        "keywords": [
+          "noodles"
+        ],
+        "name": "UINoodles",
+        "related": [
+          "Canvas",
+          "EditorCanvas"
+        ],
+        "slots": {},
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "noodles": [
+            "connection-curve",
+            "wire",
+            "edge-line",
+            "bezier-wire"
+          ]
+        },
+        "tag": "noodles-ui",
+        "tokens": {
+          "--noodles-duration": {
+            "description": "Transition duration for noodle animations"
+          },
+          "--noodles-easing": {
+            "description": "Easing function for noodle animations"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "OnboardingChecklist": {
+      "title": "OnboardingChecklist",
+      "description": "Module-tier onboarding checklist — a progressive setup-step widget\n(\"Getting started\" card seen in Stripe / Linear / Vercel dashboards).\nComposes <progress-ui> (top fill bar), <list-ui> + <list-item-ui>\n(the step rows), <check-ui> (per-item completion checkbox), and\noptional <button-ui> (per-item action CTA).\n\nOwns the data model (items: array of {id, label, description, href,\ndone}), the persistence contract (storage-key writes a JSON blob to\nlocalStorage / sessionStorage), the auto-computed progress display,\nand the dismiss-on-complete behavior. Items are data, not slotted\nmarkup — host wiring uses stable per-item ids, not DOM positions.\n\nUse for the \"card of optional setup tasks\" case; use <step-progress-ui>\nfor horizontal multi-screen wizards where the user is locked into\nlinear progression.\n",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "title": {
+          "description": "Header label above the progress bar. Defaults to \"Get started\".",
+          "type": "string",
+          "default": "Get started"
+        },
+        "items": {
+          "description": "Step list — each item is { id, label, description?, href?, done? }. Required, non-empty.",
+          "$ref": "#/$defs/DynamicStringList"
+        },
+        "collapsed": {
+          "description": "Initial / current collapsed state — hides the item list, keeps progress + header visible.",
+          "$ref": "#/$defs/DynamicBoolean"
+        },
+        "collapsible": {
+          "description": "Show a top-right collapse toggle.",
+          "type": "boolean",
+          "default": true
+        },
+        "component": {
+          "const": "OnboardingChecklist"
+        },
+        "dismiss-on-complete": {
+          "description": "Auto-hide the widget when all items are done.",
+          "type": "boolean",
+          "default": true
+        },
+        "storage": {
+          "description": "Persistence backend when storage-key is set.",
+          "type": "string",
+          "enum": [
+            "local",
+            "session",
+            "none"
+          ],
+          "default": "local"
+        },
+        "storage-key": {
+          "description": "localStorage key for per-item completion persistence. Empty string disables storage (ephemeral).",
+          "type": "string",
+          "default": ""
+        },
+        "value": {
+          "description": "Completion map mapping item id to boolean. When set, host owns state and storage attributes are ignored.",
+          "type": "object",
+          "default": {}
+        }
+      },
+      "required": [
+        "component",
+        "items"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{ \"component\": \"OnboardingChecklist\", \"items\": [{ \"id\": \"x\", \"label\": \"Step 1\" }] }\n",
+            "why": "Empty checklist — renders an empty card.\n",
+            "wrong": "{ \"component\": \"OnboardingChecklist\", \"items\": [] }\n"
+          },
+          {
+            "fix": "{ \"component\": \"OnboardingChecklist\", \"items\": [\n  { \"id\": \"a\", \"label\": \"Step A\" }, { \"id\": \"b\", \"label\": \"Step B\" }\n] }\n",
+            "why": "Items missing `id`. The component cannot persist completion\nwithout stable per-item identifiers.\n",
+            "wrong": "{ \"component\": \"OnboardingChecklist\", \"items\": [\n  { \"label\": \"Step A\" }, { \"label\": \"Step B\" }\n] }\n"
+          }
+        ],
+        "category": "feedback",
         "composes": [],
         "events": {
-          "noodle-connect": {
-            "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }",
+          "onboarding-complete": {
+            "description": "Fired when all items become done.",
             "detail": {
-              "from": {
-                "description": "Source node ID.",
-                "type": "string"
-              },
-              "fromPort": {
-                "description": "Source port identifier.",
+              "value": {
+                "description": "The completion map at the moment of full completion.",
+                "type": "object"
+              }
+            }
+          },
+          "onboarding-dismiss": {
+            "description": "Fired when the widget collapses or auto-dismisses on completion.",
+            "detail": {
+              "reason": {
+                "description": "Why the widget was dismissed.",
+                "type": "string",
+                "enum": [
+                  "collapsed",
+                  "complete"
+                ]
+              }
+            }
+          },
+          "onboarding-step-action": {
+            "description": "Fired when the user clicks an item's action CTA.",
+            "detail": {
+              "href": {
+                "description": "The href of the CTA (may be empty when host wires the click elsewhere).",
                 "type": "string"
               },
               "id": {
-                "description": "Connection ID.",
-                "type": "string"
-              },
-              "to": {
-                "description": "Target node ID.",
-                "type": "string"
-              },
-              "toPort": {
-                "description": "Target port identifier.",
+                "description": "The id of the step whose CTA was clicked.",
                 "type": "string"
               }
             }
           },
-          "noodle-disconnect": {
-            "description": "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }",
+          "onboarding-step-complete": {
+            "description": "Fired when a step transitions from undone to done.",
             "detail": {
-              "from": {
-                "description": "Source node ID.",
-                "type": "string"
-              },
-              "fromPort": {
-                "description": "Source port identifier.",
-                "type": "string"
-              },
               "id": {
-                "description": "Connection ID.",
-                "type": "string"
-              },
-              "to": {
-                "description": "Target node ID.",
+                "description": "The id of the step that just completed.",
                 "type": "string"
               },
-              "toPort": {
-                "description": "Target port identifier.",
-                "type": "string"
+              "value": {
+                "description": "Snapshot of the full completion map after the change.",
+                "type": "object"
               }
             }
-          },
-          "noodle-drag": {
-            "description": "Fired during drag-to-connect. detail: { from, fromPort, x, y, reconnect }"
           }
         },
         "examples": [
           {
-            "description": "Basic Noodles usage",
-            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Noodles\"\n  }\n]",
-            "name": "basic-noodles"
+            "description": "Three-step dashboard setup card.",
+            "a2ui": "[\n  {\n    \"id\": \"onb-1\",\n    \"component\": \"OnboardingChecklist\",\n    \"storageKey\": \"acme:onboarding:v1\",\n    \"items\": [\n      { \"id\": \"profile\", \"label\": \"Complete your profile\", \"description\": \"Add a photo and bio\", \"href\": \"/settings/profile\" },\n      { \"id\": \"team\",    \"label\": \"Invite your team\",      \"description\": \"Add at least one teammate\", \"href\": \"/settings/team\" },\n      { \"id\": \"connect\", \"label\": \"Connect a data source\", \"description\": \"Hook up the first integration\", \"href\": \"/integrations\" }\n    ]\n  }\n]\n",
+            "name": "basic-checklist"
           }
         ],
         "keywords": [
-          "noodles"
+          "onboarding",
+          "checklist",
+          "getting-started",
+          "setup",
+          "steps",
+          "progress",
+          "getting started"
         ],
-        "name": "UINoodles",
+        "name": "UIOnboardingChecklist",
         "related": [
-          "Canvas",
-          "EditorCanvas"
+          "Check",
+          "List",
+          "ListItem",
+          "Progress",
+          "Button",
+          "StepProgress"
         ],
-        "slots": {},
+        "slots": {
+          "complete": {
+            "description": "Content shown when all items are done and dismiss-on-complete is false."
+          },
+          "footer": {
+            "description": "Optional footer content (e.g. \"Skip for now\" link / button)."
+          },
+          "header": {
+            "description": "Custom title region above the progress bar. Overrides the default [title] attribute label."
+          }
+        },
         "states": [
           {
-            "description": "Default, ready for interaction.",
+            "description": "Some items incomplete; widget visible and expanded.",
             "name": "idle"
           },
           {
-            "description": "Non-interactive; dimmed.",
-            "attribute": "disabled",
-            "name": "disabled"
+            "description": "Item list hidden; header + progress visible.",
+            "attribute": "collapsed",
+            "name": "collapsed"
+          },
+          {
+            "description": "All items done. Behavior depends on dismiss-on-complete.",
+            "attribute": "data-complete",
+            "name": "complete"
+          },
+          {
+            "description": "Widget removed from layout after collapse or auto-dismiss.",
+            "attribute": "hidden",
+            "name": "dismissed"
           }
         ],
         "status": "stable",
         "synonyms": {
-          "noodles": [
-            "connection-curve",
-            "wire",
-            "edge-line",
-            "bezier-wire"
+          "checklist": [
+            "todo",
+            "task-list",
+            "steps"
+          ],
+          "getting-started": [
+            "onboarding",
+            "setup",
+            "welcome"
+          ],
+          "onboarding": [
+            "getting-started",
+            "setup",
+            "welcome",
+            "kickoff"
+          ],
+          "setup": [
+            "onboarding",
+            "getting-started",
+            "configuration"
           ]
         },
-        "tag": "noodles-ui",
+        "tag": "onboarding-checklist-ui",
         "tokens": {
-          "--noodles-duration": {
-            "description": "Transition duration for noodle animations"
+          "--onboarding-checklist-bg": {
+            "description": "Card background. Defaults to elevated canvas tier.",
+            "default": "var(--a-canvas-1)"
           },
-          "--noodles-easing": {
-            "description": "Easing function for noodle animations"
+          "--onboarding-checklist-border": {
+            "description": "Outer border.",
+            "default": "1px solid var(--a-border-subtle)"
+          },
+          "--onboarding-checklist-fg": {
+            "description": "Primary foreground color.",
+            "default": "var(--a-fg)"
+          },
+          "--onboarding-checklist-fg-muted": {
+            "description": "Secondary foreground color for descriptions + meta.",
+            "default": "var(--a-fg-muted)"
+          },
+          "--onboarding-checklist-gap": {
+            "description": "Gap between header / progress / items / footer.",
+            "default": "var(--a-space-3)"
+          },
+          "--onboarding-checklist-progress-fill": {
+            "description": "Progress-bar fill color (forwarded to inner <progress-ui> via --progress-fill).",
+            "default": "var(--a-accent)"
+          },
+          "--onboarding-checklist-px": {
+            "description": "Inline (left/right) padding.",
+            "default": "var(--a-space-4)"
+          },
+          "--onboarding-checklist-py": {
+            "description": "Block (top/bottom) padding.",
+            "default": "var(--a-space-4)"
+          },
+          "--onboarding-checklist-radius": {
+            "description": "Outer card radius.",
+            "default": "var(--a-radius-lg)"
+          },
+          "--onboarding-checklist-shadow": {
+            "description": "Card elevation.",
+            "default": "var(--a-shadow-sm)"
           }
         },
         "traits": [],
@@ -14215,84 +16552,279 @@
           "change": {
             "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
           },
-          "input": {
-            "description": "Fired on each slider movement"
+          "input": {
+            "description": "Fired on each slider movement"
+          }
+        },
+        "examples": [
+          {
+            "description": "Card with labeled slider components for adjusting values like volume, brightness, and contrast.",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Audio & Display\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"sliders\"\n    ]\n  },\n  {\n    \"id\": \"sliders\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"volume\",\n      \"brightness\",\n      \"contrast\"\n    ],\n    \"gap\": \"6\"\n  },\n  {\n    \"id\": \"volume\",\n    \"component\": \"Slider\",\n    \"label\": \"Volume\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 75,\n    \"name\": \"volume\"\n  },\n  {\n    \"id\": \"brightness\",\n    \"component\": \"Slider\",\n    \"label\": \"Brightness\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 50,\n    \"name\": \"brightness\"\n  },\n  {\n    \"id\": \"contrast\",\n    \"component\": \"Slider\",\n    \"label\": \"Contrast\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 60,\n    \"name\": \"contrast\"\n  }\n]",
+            "name": "slider-range"
+          },
+          {
+            "description": "Card with color pickers, theme select, density slider, and preview area for theme customization.",
+            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Theme Customizer\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Personalize your interface appearance\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"fields\"\n    ]\n  },\n  {\n    \"id\": \"fields\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"colors-row\",\n      \"theme-select\",\n      \"density\",\n      \"preview-label\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"colors-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"primary-color\",\n      \"accent-color\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"primary-color\",\n    \"component\": \"Input\",\n    \"label\": \"Primary Color\",\n    \"type\": \"color\",\n    \"name\": \"primaryColor\",\n    \"value\": \"#6366f1\"\n  },\n  {\n    \"id\": \"accent-color\",\n    \"component\": \"Input\",\n    \"label\": \"Accent Color\",\n    \"type\": \"color\",\n    \"name\": \"accentColor\",\n    \"value\": \"#f59e0b\"\n  },\n  {\n    \"id\": \"theme-select\",\n    \"component\": \"Select\",\n    \"label\": \"Theme\",\n    \"name\": \"theme\",\n    \"placeholder\": \"Select theme...\"\n  },\n  {\n    \"id\": \"density\",\n    \"component\": \"Slider\",\n    \"label\": \"Density\",\n    \"min\": 1,\n    \"max\": 5,\n    \"value\": 3,\n    \"name\": \"density\"\n  },\n  {\n    \"id\": \"preview-label\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Preview will update in real time\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"reset-btn\",\n      \"save-btn\"\n    ]\n  },\n  {\n    \"id\": \"reset-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Reset to Default\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"save-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Save Theme\",\n    \"variant\": \"primary\"\n  }\n]",
+            "name": "theme-customizer"
+          }
+        ],
+        "keywords": [
+          "slider",
+          "range",
+          "volume"
+        ],
+        "name": "UISlider",
+        "related": [
+          "input",
+          "select",
+          "button",
+          "embed"
+        ],
+        "slots": {
+          "input": {
+            "description": "Native range input element"
+          },
+          "label": {
+            "description": "Label element above the slider"
+          },
+          "value": {
+            "description": "Current value display"
+          }
+        },
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "range": [
+            "slider",
+            "range"
+          ],
+          "volume": [
+            "slider",
+            "range",
+            "music"
+          ]
+        },
+        "tag": "slider-ui",
+        "tokens": {
+          "--slider-fill": {
+            "description": "Filled portion / progress color (was mixed accent, now primary)"
+          },
+          "--slider-thumb-height": {
+            "description": "Thumb pill height (track-height − 2× inset)"
+          },
+          "--slider-thumb-width": {
+            "description": "Thumb pill width (2× thumb-height, driven by track-height)"
+          },
+          "--slider-track": {
+            "description": "Unfilled track background color"
+          },
+          "--slider-track-height": {
+            "description": "Full track height (scales via universal [size] attribute)"
+          }
+        },
+        "traits": [],
+        "version": 1
+      }
+    },
+    "Spinner": {
+      "title": "Spinner",
+      "description": "Circular animated indicator for indeterminate loading. Renders a rotating arc, full ring, or three bouncing dots inside a sized box; the animation runs while the element is in the DOM and `[paused]` is unset. Fills the circular-spinner gap left by <skeleton-ui> (rectangular placeholder) and <progress-ui> (linear determinate bar) — use <spinner-ui> when the wait duration is unknown and the shape of the eventual content is irregular or the region is too small for a placeholder block.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "component": {
+          "const": "Spinner"
+        },
+        "label": {
+          "description": "Accessible operation name surfaced via `aria-valuetext`. Override for context-specific labels (\"Saving\", \"Uploading\").",
+          "type": "string",
+          "default": "Loading"
+        },
+        "paused": {
+          "description": "Pause the animation in-place. Useful for screenshot tests and explicit-control flows.",
+          "type": "boolean",
+          "default": false
+        },
+        "size": {
+          "description": "Diameter — matches icon-ui's ladder (sm 14px, md 16px, lg 20px).",
+          "type": "string",
+          "enum": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "tone": {
+          "description": "Color tone — `current` inherits parent text color (matches button label), `accent` uses brand accent, `subtle` is muted, `inverse` flips for on-accent surfaces.",
+          "type": "string",
+          "enum": [
+            "current",
+            "accent",
+            "subtle",
+            "inverse"
+          ],
+          "default": "current"
+        },
+        "variant": {
+          "description": "Visual flavor — arc (rotating quarter-circle), ring (full ring with one colored segment), dots (three bouncing dots).",
+          "type": "string",
+          "enum": [
+            "arc",
+            "ring",
+            "dots"
+          ],
+          "default": "arc"
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"Progress\", \"value\": 42, \"max\": 100}\n",
+            "why": "Spinner is INDETERMINATE only. `value` and any quantitative\nprogress field belongs on Progress, not Spinner. Also \"Spin\" is\nnot a valid operation label.\n",
+            "wrong": "{\"component\": \"Spinner\", \"label\": \"Spin\", \"value\": 0.42}\n"
+          },
+          {
+            "fix": "{\"component\": \"Spinner\", \"size\": \"md\"}\n",
+            "why": "Skeleton is a placeholder; rotation is not part of its contract.\nA rotating circle is a Spinner.\n",
+            "wrong": "{\"component\": \"Skeleton\", \"variant\": \"circle\", \"animation\": \"rotate\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"Card\", \"children\": [\n  {\"component\": \"Spinner\", \"size\": \"lg\"}\n]}\n",
+            "why": "Multiple sibling spinners in one region produce visual noise\nwithout extra information. Use one parent-level Spinner.\n",
+            "wrong": "{\"component\": \"Card\", \"children\": [\n  {\"component\": \"Spinner\"},\n  {\"component\": \"Spinner\"},\n  {\"component\": \"Spinner\"}\n]}\n"
           }
-        },
+        ],
+        "category": "feedback",
+        "composes": [],
+        "events": {},
         "examples": [
           {
-            "description": "Card with labeled slider components for adjusting values like volume, brightness, and contrast.",
-            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Audio & Display\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"sliders\"\n    ]\n  },\n  {\n    \"id\": \"sliders\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"volume\",\n      \"brightness\",\n      \"contrast\"\n    ],\n    \"gap\": \"6\"\n  },\n  {\n    \"id\": \"volume\",\n    \"component\": \"Slider\",\n    \"label\": \"Volume\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 75,\n    \"name\": \"volume\"\n  },\n  {\n    \"id\": \"brightness\",\n    \"component\": \"Slider\",\n    \"label\": \"Brightness\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 50,\n    \"name\": \"brightness\"\n  },\n  {\n    \"id\": \"contrast\",\n    \"component\": \"Slider\",\n    \"label\": \"Contrast\",\n    \"min\": 0,\n    \"max\": 100,\n    \"value\": 60,\n    \"name\": \"contrast\"\n  }\n]",
-            "name": "slider-range"
+            "description": "Loading button — primary action with a saving spinner. The button is disabled while the operation is in progress; the spinner matches the button label color via tone=\"current\".",
+            "a2ui": "[\n  {\n    \"id\": \"btn-save\",\n    \"component\": \"Button\",\n    \"text\": \"Saving\",\n    \"variant\": \"primary\",\n    \"disabled\": true,\n    \"children\": [\"sp-1\"]\n  },\n  {\n    \"id\": \"sp-1\",\n    \"component\": \"Spinner\",\n    \"size\": \"sm\",\n    \"tone\": \"current\",\n    \"label\": \"Saving\"\n  }\n]",
+            "name": "button-saving"
           },
           {
-            "description": "Card with color pickers, theme select, density slider, and preview area for theme customization.",
-            "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"desc\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Theme Customizer\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Personalize your interface appearance\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"fields\"\n    ]\n  },\n  {\n    \"id\": \"fields\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"colors-row\",\n      \"theme-select\",\n      \"density\",\n      \"preview-label\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"colors-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"primary-color\",\n      \"accent-color\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"primary-color\",\n    \"component\": \"Input\",\n    \"label\": \"Primary Color\",\n    \"type\": \"color\",\n    \"name\": \"primaryColor\",\n    \"value\": \"#6366f1\"\n  },\n  {\n    \"id\": \"accent-color\",\n    \"component\": \"Input\",\n    \"label\": \"Accent Color\",\n    \"type\": \"color\",\n    \"name\": \"accentColor\",\n    \"value\": \"#f59e0b\"\n  },\n  {\n    \"id\": \"theme-select\",\n    \"component\": \"Select\",\n    \"label\": \"Theme\",\n    \"name\": \"theme\",\n    \"placeholder\": \"Select theme...\"\n  },\n  {\n    \"id\": \"density\",\n    \"component\": \"Slider\",\n    \"label\": \"Density\",\n    \"min\": 1,\n    \"max\": 5,\n    \"value\": 3,\n    \"name\": \"density\"\n  },\n  {\n    \"id\": \"preview-label\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"Preview will update in real time\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"reset-btn\",\n      \"save-btn\"\n    ]\n  },\n  {\n    \"id\": \"reset-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Reset to Default\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"save-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Save Theme\",\n    \"variant\": \"primary\"\n  }\n]",
-            "name": "theme-customizer"
+            "description": "Standalone centered spinner inside a card while body content fetches.",
+            "a2ui": "[\n  {\n    \"id\": \"card\",\n    \"component\": \"Card\",\n    \"children\": [\"row\"]\n  },\n  {\n    \"id\": \"row\",\n    \"component\": \"Row\",\n    \"justify\": \"center\",\n    \"align\": \"center\",\n    \"children\": [\"sp\"]\n  },\n  {\n    \"id\": \"sp\",\n    \"component\": \"Spinner\",\n    \"size\": \"lg\",\n    \"tone\": \"subtle\",\n    \"label\": \"Loading dashboard\"\n  }\n]",
+            "name": "centered-card-loading"
+          },
+          {
+            "description": "Three bouncing dots — good for chat / typing indicators.",
+            "a2ui": "[\n  {\n    \"id\": \"sp\",\n    \"component\": \"Spinner\",\n    \"variant\": \"dots\",\n    \"tone\": \"subtle\",\n    \"label\": \"Assistant is typing\"\n  }\n]",
+            "name": "typing-indicator"
           }
         ],
         "keywords": [
-          "slider",
-          "range",
-          "volume"
+          "spinner",
+          "loader",
+          "loading",
+          "indeterminate",
+          "progress",
+          "busy",
+          "feedback",
+          "circular"
         ],
-        "name": "UISlider",
+        "name": "UISpinner",
         "related": [
-          "input",
-          "select",
-          "button",
-          "embed"
+          "Progress",
+          "Skeleton",
+          "Button",
+          "EmptyState"
         ],
-        "slots": {
-          "input": {
-            "description": "Native range input element"
-          },
-          "label": {
-            "description": "Label element above the slider"
-          },
-          "value": {
-            "description": "Current value display"
-          }
-        },
+        "slots": {},
         "states": [
           {
-            "description": "Default, ready for interaction.",
-            "name": "idle"
+            "description": "Default; animation active.",
+            "name": "running"
           },
           {
-            "description": "Non-interactive; dimmed.",
-            "attribute": "disabled",
-            "name": "disabled"
+            "description": "Animation frozen at the current frame.",
+            "attribute": "paused",
+            "name": "paused"
+          },
+          {
+            "description": "Triggered by prefers-reduced-motion. Animation replaced with a static ellipsis. Detected via CSS, not JS.",
+            "name": "reduced"
           }
         ],
         "status": "stable",
         "synonyms": {
-          "range": [
-            "slider",
-            "range"
+          "busy": [
+            "spinner",
+            "loading"
           ],
-          "volume": [
-            "slider",
-            "range",
-            "music"
+          "indeterminate": [
+            "spinner",
+            "progress"
+          ],
+          "loader": [
+            "spinner",
+            "loading",
+            "progress"
+          ],
+          "loading": [
+            "spinner",
+            "loading",
+            "progress",
+            "skeleton"
+          ],
+          "saving": [
+            "spinner",
+            "loading"
+          ],
+          "spinner": [
+            "spinner",
+            "loader",
+            "progress"
+          ],
+          "uploading": [
+            "spinner",
+            "loading"
           ]
         },
-        "tag": "slider-ui",
+        "tag": "spinner-ui",
         "tokens": {
-          "--slider-fill": {
-            "description": "Filled portion / progress color (was mixed accent, now primary)"
+          "--spinner-color": {
+            "description": "Color of the active arc / ring / dots. Defaults to currentColor so a tone-driven cascade resolves naturally.",
+            "default": "currentColor"
           },
-          "--slider-thumb-height": {
-            "description": "Thumb pill height (track-height − 2× inset)"
+          "--spinner-duration": {
+            "description": "One full rotation duration.",
+            "default": "var(--a-duration-slow)"
           },
-          "--slider-thumb-width": {
-            "description": "Thumb pill width (2× thumb-height, driven by track-height)"
+          "--spinner-size": {
+            "description": "Diameter of the spinner box.",
+            "default": "1rem"
           },
-          "--slider-track": {
-            "description": "Unfilled track background color"
+          "--spinner-stroke": {
+            "description": "Border thickness for the arc / ring variants.",
+            "default": "2px"
           },
-          "--slider-track-height": {
-            "description": "Full track height (scales via universal [size] attribute)"
+          "--spinner-track-opacity": {
+            "description": "Opacity for the non-rotating ring track (variant=ring only).",
+            "default": "0.25"
           }
         },
         "traits": [],
@@ -15685,7 +18217,7 @@
           "default": 0
         },
         "raw": {
-          "description": "Raw mode",
+          "description": "Visual-only passthrough — applies `<table-ui>`'s chrome reset (background / border / border-radius all transparent) AND short-circuits the data lifecycle entirely. The consumer owns the body shape: no header injection, no row reconciliation from `.data`, no empty-state / loading overlays, no aggregation or pagination footers. Use raw when embedding `<table-ui>` inside surfaces that supply their own chrome (e.g. `<card-ui><section bleed>`), or when wrapping a consumer-authored native `<table>` for design-token styling without the framework's data semantics. Pre-v0.6.33 (FB-53 §2) `raw` was visual-only and the data lifecycle still ran — wrapping a `.data`-unset native table produced a phantom \"No data\" overlay. v0.6.33+ matches the documented contract.",
           "type": "boolean",
           "default": false
         },
@@ -17430,6 +19962,271 @@
         "version": 1
       }
     },
+    "TimePicker": {
+      "title": "TimePicker",
+      "description": "Time-of-day picker with discrete segments (hour, minute, optional second, optional AM/PM). Each segment follows the WAI-ARIA Spinbutton pattern with Arrow-key increment/decrement, Page Up/Down for larger jumps, Home/End for segment min/max, and Tab to move between segments. Form-associated input emitting ISO 8601 time string (\"HH:mm\" or \"HH:mm:ss\") via change events. Per ADR-0025 no native form controls — segments are contenteditable spans inside a custom host. SPEC-043.",
+      "type": "object",
+      "allOf": [
+        {
+          "$ref": "#/$defs/ComponentCommon"
+        },
+        {
+          "$ref": "#/$defs/CatalogComponentCommon"
+        }
+      ],
+      "properties": {
+        "required": {
+          "description": "Marks the field as required for form validation. Sets aria-required.",
+          "type": "boolean",
+          "default": false
+        },
+        "component": {
+          "const": "TimePicker"
+        },
+        "disabled": {
+          "description": "Disables interaction; dims the control",
+          "type": "boolean",
+          "default": false
+        },
+        "hourcycle": {
+          "description": "Hour cycle. Empty (default) derives from the document locale — most\nen-* locales resolve to `h23`. `h12` forces a 12-hour cycle with an\nAM/PM (meridiem) segment; `h23` forces 24-hour cycle.\n",
+          "type": "string",
+          "enum": [
+            "",
+            "h12",
+            "h23"
+          ],
+          "default": ""
+        },
+        "locale": {
+          "description": "BCP-47 locale tag used to derive hour-cycle when `hour-cycle` is empty. Falls back to `<html lang>` then to browser default.",
+          "type": "string",
+          "default": ""
+        },
+        "max": {
+          "description": "Latest selectable time as ISO 8601. Empty disables the constraint.",
+          "type": "string",
+          "default": ""
+        },
+        "min": {
+          "description": "Earliest selectable time as ISO 8601. Empty disables the constraint.",
+          "type": "string",
+          "default": ""
+        },
+        "name": {
+          "description": "Form field name for FormData submission",
+          "type": "string",
+          "default": ""
+        },
+        "placeholder": {
+          "description": "Per-segment placeholder text shown when a segment is empty. Defaults to \"--\".",
+          "type": "string",
+          "default": "--"
+        },
+        "precision": {
+          "description": "Whether the seconds segment is exposed. `minute` (default) hides seconds; `second` adds the seconds segment + separator.",
+          "type": "string",
+          "enum": [
+            "minute",
+            "second"
+          ],
+          "default": "minute"
+        },
+        "readonly": {
+          "description": "Prevents editing while keeping the field focusable. Segments stay focusable for inspection.",
+          "type": "boolean",
+          "default": false
+        },
+        "step": {
+          "description": "Per-Arrow-keypress increment in seconds. 60 = minute precision (default), 900 = 15-minute, 1 = second precision.",
+          "type": "number",
+          "default": 60
+        },
+        "value": {
+          "description": "Current time value as ISO 8601 (\"HH:mm\" or \"HH:mm:ss\"). Empty when no value selected.",
+          "type": "string",
+          "default": ""
+        }
+      },
+      "required": [
+        "component"
+      ],
+      "unevaluatedProperties": false,
+      "x-adiaui": {
+        "anti_patterns": [
+          {
+            "fix": "{\"component\": \"TimePicker\", \"value\": \"09:30\"}\n",
+            "why": "Localized format is not a valid `value`. The contract requires ISO\n8601 time (`HH:mm` or `HH:mm:ss`, 24-hour). The display format is\nderived from `hourCycle` regardless of how the value is stored.\n",
+            "wrong": "{\"component\": \"TimePicker\", \"value\": \"9:30 AM\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"DatetimePicker\", \"value\": \"2026-05-24T09:30\"}\n",
+            "why": "Datetime string is invalid for TimePicker — the date portion is\nnot accepted. For datetime selection use the DatetimePicker\ncomponent.\n",
+            "wrong": "{\"component\": \"TimePicker\", \"value\": \"2026-05-24T09:30\"}\n"
+          },
+          {
+            "fix": "{\"component\": \"TimePicker\", \"name\": \"field-name\"}\n",
+            "why": "Nesting a native time input violates ADR-0025 and bypasses\nElementInternals form participation.\n",
+            "wrong": "{\"component\": \"TimePicker\", \"children\": [\n  {\"component\": \"Input\", \"type\": \"time\"}\n]}\n"
+          }
+        ],
+        "category": "input",
+        "composes": [],
+        "events": {
+          "change": {
+            "description": "Fired when the value commits (segment edit completes via Arrow / Tab / blur).",
+            "detail": {
+              "segment": {
+                "description": "Which segment commit fired the event (`hour` | `minute` | `second` | `meridiem`).",
+                "type": "string"
+              },
+              "value": {
+                "description": "Current value as ISO 8601 (\"HH:mm\" or \"HH:mm:ss\").",
+                "type": "string"
+              }
+            }
+          },
+          "input": {
+            "description": "Fired on intermediate segment edits before commit.",
+            "detail": {
+              "value": {
+                "description": "In-flight value as ISO 8601.",
+                "type": "string"
+              }
+            }
+          },
+          "invalid": {
+            "description": "Fired when a constraint is violated (min/max range, parse error).",
+            "detail": {
+              "reason": {
+                "description": "Why it failed (`min` | `max` | `parse`).",
+                "type": "string",
+                "enum": [
+                  "min",
+                  "max",
+                  "parse"
+                ]
+              },
+              "value": {
+                "description": "Value that failed validation.",
+                "type": "string"
+              }
+            }
+          }
+        },
+        "examples": [
+          {
+            "description": "Time-of-day picker with 15-minute step and business-hours bounds.",
+            "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Start time\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"start-time\", \"value\": \"09:30\",\n   \"min\": \"08:00\", \"max\": \"18:00\", \"step\": 900}\n]\n",
+            "name": "meeting-time-15min-step"
+          },
+          {
+            "description": "Time picker with second precision for a log-cursor query.",
+            "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Cursor\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"cursor\", \"precision\": \"second\", \"step\": 1,\n   \"value\": \"14:30:45\"}\n]\n",
+            "name": "log-cursor-second-precision"
+          },
+          {
+            "description": "Forced 12-hour cycle with AM/PM segment for an alarm picker.",
+            "a2ui": "[\n  {\"id\": \"root\", \"component\": \"Field\", \"label\": \"Alarm\",\n   \"children\": [\"t\"]},\n  {\"id\": \"t\", \"component\": \"TimePicker\",\n   \"name\": \"alarm\", \"hourCycle\": \"h12\", \"value\": \"07:00\"}\n]\n",
+            "name": "alarm-12h-cycle"
+          }
+        ],
+        "keywords": [
+          "time",
+          "timepicker",
+          "time-picker",
+          "clock",
+          "hour",
+          "minute",
+          "spinbutton"
+        ],
+        "name": "UITimePicker",
+        "related": [
+          "CalendarPicker",
+          "Field",
+          "Input"
+        ],
+        "slots": {
+          "prefix": {
+            "description": "Leading content (e.g. an `<icon-ui name=\"clock\">`); sits before the hour segment."
+          },
+          "suffix": {
+            "description": "Trailing content (e.g. a timezone label); sits after the last segment."
+          }
+        },
+        "states": [
+          {
+            "description": "Default, ready for interaction.",
+            "name": "idle"
+          },
+          {
+            "description": "One segment is the focus target.",
+            "attribute": "editing",
+            "name": "editing"
+          },
+          {
+            "description": "Non-interactive; dimmed.",
+            "attribute": "disabled",
+            "name": "disabled"
+          },
+          {
+            "description": "Keyboard focus ring on the host.",
+            "name": "focused",
+            "selector": ":focus-within"
+          }
+        ],
+        "status": "stable",
+        "synonyms": {
+          "tags": [
+            "TimeInput",
+            "TimePicker"
+          ],
+          "time": [
+            "clock",
+            "hour",
+            "minute",
+            "alarm"
+          ]
+        },
+        "tag": "time-picker-ui",
+        "tokens": {
+          "--time-picker-bg": {
+            "description": "Host background color."
+          },
+          "--time-picker-border": {
+            "description": "Host border color."
+          },
+          "--time-picker-fg": {
+            "description": "Host text color."
+          },
+          "--time-picker-fg-muted": {
+            "description": "Muted text color (empty placeholder + separator)."
+          },
+          "--time-picker-px": {
+            "description": "Host inline padding."
+          },
+          "--time-picker-py": {
+            "description": "Host block padding."
+          },
+          "--time-picker-radius": {
+            "description": "Host border radius."
+          },
+          "--time-picker-segment-bg-focus": {
+            "description": "Focused segment background."
+          },
+          "--time-picker-segment-fg-focus": {
+            "description": "Focused segment text color."
+          },
+          "--time-picker-separator-fg": {
+            "description": "Separator (`:`) text color."
+          }
+        },
+        "traits": [
+          "focusable"
+        ],
+        "version": 1
+      }
+    },
     "Toast": {
       "title": "Toast",
       "description": "Transient global notification popup with auto-dismiss + animated\nenter/exit. Variants map to severity (info / success / warning /\ndanger). Distinct from <alert-ui> (inline persistent banner) and\n<empty-state-ui> (zero-data placeholder). Use toast-ui for\nshort-lived feedback after user actions (\"Saved\", \"Copied to\nclipboard\"); the toast positions itself relative to viewport\n[position] regardless of where in the DOM it's rendered.\n",