@ds-mo/ui 14.34.0 → 14.36.0

package/dist/mcp-data/registry/registry.json

@@ -2230,6 +2230,221 @@
         "text"
       ]
     },
+    {
+      "name": "button-inverted",
+      "title": "ButtonInverted",
+      "description": "Single-recipe filled command button with an inverted background and primary foreground for actions that must remain legible across ordinary surfaces.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/button-inverted",
+        "source": "src/wc/components/ButtonInverted/ButtonInverted.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Single-recipe filled command button with an inverted background and primary foreground for actions that must remain legible across ordinary surfaces.",
+          "useWhen": [
+            "A command needs the filled button structure with the fixed inverted background treatment.",
+            "The action should use primary foreground content on the inverted surface without exposing intent or contrast choices.",
+            "A compact, icon-only inverted action needs an explicit accessible name.",
+            "The command has closely related alternatives and needs split mode while keeping the same inverted recipe."
+          ],
+          "avoidWhen": [
+            "The action needs semantic intent or contrast-specific filled treatments; use ButtonFilled.",
+            "The action is unfilled icon-only shell, navigation, overflow, or tool-rail chrome; use ButtonUnfilled.",
+            "The element represents navigation rather than a command.",
+            "The content is a persistent selected state rather than an action."
+          ],
+          "alternatives": [
+            {
+              "when": "The action's consequence needs a semantic intent or the fill must adapt through contrast.",
+              "component": "component:ds-button-filled",
+              "reason": "ButtonFilled owns intent and contrast-aware filled command treatments."
+            },
+            {
+              "when": "The action is shell, navigation, overflow, or tool-rail chrome.",
+              "component": "component:ds-button-unfilled",
+              "reason": "ButtonUnfilled owns unfilled chrome, active state, borders, and surface-aware interaction states."
+            },
+            {
+              "when": "The user is choosing a destination in application navigation.",
+              "component": "component:ds-panel-nav",
+              "reason": "PanelNav owns destination selection and navigation semantics."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-modal",
+            "component:ds-field",
+            "component:ds-menu"
+          ],
+          "patterns": [
+            "pattern:menu-trigger"
+          ],
+          "accessibility": [
+            "Provide an explicit accessible name for icon-only buttons.",
+            "In split mode, provide menuAriaLabel for the appended ChevronDown segment, pass controls with the Menu id, and synchronize expanded with the Menu open state.",
+            "Set hasMenu when the action opens a Menu; it implies aria-haspopup of menu and renders the trailing chevron. Pass controls with the Menu id and expanded from the same open state given to Menu.",
+            "Use haspopup directly for a non-menu popup such as a dialog; that case gets no chevron.",
+            "Loading keeps the action focused and named, exposes busy and disabled state, and blocks activation.",
+            "Use native submit behavior for form submission and handle the form submit event rather than submitting from the button click event."
+          ],
+          "states": [
+            "Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
+            "The inverted background and primary foreground are fixed; ButtonInverted has no intent, contrast, parent-surface, or optional-border props.",
+            "Every button has a minimum inline size equal to its resolved height. Short labels therefore form a square control while longer labels continue to hug their content.",
+            "Set isInset only when the button is nested inside a same-size control. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs.",
+            "Rounded changes only the control radius to the half-radius treatment; it does not change the inverted recipe, size, variant, or interaction semantics.",
+            "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
+            "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width.",
+            "Physical press scaling is on by default. Disable it only when an owning composite must keep child or background geometry fixed; hover and pressed interaction washes remain available.",
+            "ButtonInverted has no active, pressed, or selected state; a filled action is a command, not a toggle or persistent selection.",
+            "An open popup is a transient pressed state. While surfaceOpen is true the pressed wash is held for the popup's complete rendered lifecycle without introducing selected styling.",
+            "Split mode supports label, icon, and icon-label primary segments. The primary segment emits dsClick and the appended menu segment emits dsMenuClick."
+          ],
+          "responsiveBehavior": [
+            "Use fill width only when the parent layout calls for a full-width action, commonly on narrow form layouts.",
+            "Choose density from the containing layout so the inverted action matches neighboring controls."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "For form submission, use the native submit type and listen to the form submit event; use dsClick for non-submit commands."
+            ],
+            "react": [
+              "Keep async state in the owner and pass it to the loading state until the command settles."
+            ],
+            "angular": [
+              "Keep async state in the owner and pass it to the loading state until the command settles."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/ButtonInverted/ButtonInverted.stories.ts"
+            },
+            {
+              "label": "Surface ownership and trigger state",
+              "path": "src/docs/SurfaceOwnership.mdx"
+            }
+          ]
+        },
+        "props": {
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "controls": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "expanded": {
+            "type": "boolean | undefined",
+            "required": false
+          },
+          "hasMenu": {
+            "type": "boolean",
+            "required": false
+          },
+          "haspopup": {
+            "type": "ButtonInvertedPopup | undefined",
+            "required": false
+          },
+          "icon": {
+            "type": "string",
+            "required": false
+          },
+          "insetDepth": {
+            "type": "ControlInsetDepth",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "isInset": {
+            "type": "boolean",
+            "required": false
+          },
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "labelEmphasis": {
+            "type": "boolean",
+            "required": false
+          },
+          "menuAriaLabel": {
+            "type": "string",
+            "required": false
+          },
+          "pressScale": {
+            "type": "boolean",
+            "required": false
+          },
+          "rounded": {
+            "type": "boolean",
+            "required": false
+          },
+          "size": {
+            "type": "ButtonInvertedSize",
+            "required": false
+          },
+          "split": {
+            "type": "boolean",
+            "required": false
+          },
+          "surfaceOpen": {
+            "type": "boolean | undefined",
+            "required": false
+          },
+          "type": {
+            "type": "'button' | 'submit' | 'reset'",
+            "required": false
+          },
+          "variant": {
+            "type": "ButtonInvertedVariant",
+            "required": false
+          },
+          "width": {
+            "type": "ButtonInvertedWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsClick",
+            "detail": "MouseEvent"
+          },
+          {
+            "name": "dsMenuClick",
+            "detail": "MouseEvent"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-button-inverted",
+          "react": "DsButtonInverted",
+          "vue": "DsButtonInverted",
+          "angular": "DsButtonInverted"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "badge",
+        "icon",
+        "loader",
+        "text"
+      ]
+    },
     {
       "name": "button-unfilled",
       "title": "ButtonUnfilled",
@@ -2498,103 +2713,230 @@
       ]
     },
     {
-      "name": "card-action-center",
-      "title": "CardActionCenter",
-      "description": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+      "name": "calendar",
+      "title": "Calendar",
+      "description": "Month calendar grid for choosing one calendar date or an inclusive date range, reused by form date fields and filter range selection.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-action-center",
-        "source": "src/wc/components/CardActionCenter/CardActionCenter.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/calendar",
+        "source": "src/wc/components/Calendar/Calendar.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
           "status": "experimental",
-          "summary": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+          "summary": "Month calendar grid for choosing one calendar date or an inclusive date range, reused by form date fields and filter range selection.",
           "useWhen": [
-            "An overview rail needs a compact action center with multiple named groups.",
-            "Action rows need optional counts or short values aligned at the trailing edge.",
-            "Related reports or resource destinations belong beside attention items in one bounded surface."
+            "A user picks one calendar day from a month grid.",
+            "A user builds an inclusive start and end date by choosing two days.",
+            "A date field or filter needs the shared month navigation, weekday headings, and selected-day treatment."
           ],
           "avoidWhen": [
-            "The complete card leads to one destination; use CardNavigation.",
-            "The surface edits settings in place; use CardSetting.",
-            "The content is a chart, legend, metric visualization, or other data-visualization composition; use CardChart or CardOverview.",
-            "Rows require descriptions, nested controls, menus, or selection state instead of one direct action."
+            "The user types a date without opening a calendar; the owning field keeps that editable value.",
+            "The user chooses a relative preset such as last 7 days rather than fixed calendar days.",
+            "The popup also has to host filter categories, search, or apply actions; that surface stays with FilterMenu."
           ],
           "alternatives": [
             {
-              "when": "The entire surface represents one destination.",
-              "component": "component:ds-card-navigation",
-              "reason": "CardNavigation provides the single native-link card contract."
+              "when": "The date is a form field that can be typed or picked.",
+              "component": "component:ds-input-date",
+              "reason": "InputDate owns the editable field, form association, and the calendar popup."
             },
             {
-              "when": "The card presents page-level score and metric summaries.",
-              "component": "component:ds-card-overview",
-              "reason": "CardOverview owns summary metrics, comparison periods, and selectable metric cells."
+              "when": "The value is a clock time rather than a calendar date.",
+              "component": "component:ds-time-picker",
+              "reason": "TimePicker owns bounded hour, minute, and AM/PM lists with the same 32px tile geometry."
+            },
+            {
+              "when": "The user chooses relative presets or mixed filter families from one trigger.",
+              "component": "component:ds-filter-menu",
+              "reason": "FilterMenu owns relative date presets and hosts this calendar only for fixed ranges."
             }
           ],
           "commonlyComposedWith": [
-            "component:ds-tag",
+            "component:ds-input-date",
+            "component:ds-filter-menu",
+            "component:ds-button-unfilled",
             "component:ds-text"
           ],
           "accessibility": [
-            "Each non-empty group is a section labelled by an h2 heading, and each row is a native button or link.",
-            "Use href for real destinations so link context menus, modified clicks, and native browser semantics remain available.",
-            "Prevent the cancelable dsAction event only when an application router takes ownership of the same link activation.",
-            "Inactive items become disabled buttons and are removed from keyboard navigation rather than exposing a false destination.",
-            "Keep item labels concise; a visible trailing value participates in the action's accessible name."
+            "The month grid is labelled with the visible month and year. Days are grid cells with an accessible date name.",
+            "The grid keeps one tab stop. Arrow keys move by day or week, Home and End move within the week, and Page Up or Page Down change month.",
+            "In range mode, the first chosen day applies immediately as a one-day range. Hovering or focusing another day previews the inclusive span without changing the value until the second activation.",
+            "Month navigation buttons are named Previous month and Next month. Inactive calendars disable day and month controls."
           ],
           "states": [
-            "Rows expose distinct rest, hover, pressed, keyboard-focus, and inactive states.",
-            "An empty sections array or groups with no items render the configured empty message.",
-            "The application owns loading, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data."
+            "Single selection paints the current value with the shared interaction-fill selected wash and primary text. A committed range paints inclusive days with the faint brand fill and both edges boldly.",
+            "Today uses emphasized primary text without becoming selected on its own.",
+            "Days outside the visible month remain in the six-week grid and use tertiary text. Optional min and max dates disable days outside that inclusive bound.",
+            "After the first range day is chosen, that day keeps the shared pressed overlay. Hovering or focusing toward another day paints the inclusive span with the shared hover overlay on top of the previous committed range, which stays visible until the replacement is completed. Completing the end day orders the two dates inclusively and replaces those overlays with brand fill."
           ],
           "responsiveBehavior": [
-            "The card fills its parent width and never establishes a product breakpoint.",
-            "Long labels wrap while trailing values remain visible; the page owns rail width and movement below primary content.",
-            "Groups retain their order when the parent layout moves the complete card between desktop and mobile regions."
+            "The grid fills the width supplied by its owner. Seven equal day columns and the shared 4px gaps are owned here; the owner supplies the popup or pane width."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign sections as a JavaScript property; complex arrays are not supported as string attributes.",
-              "Listen for dsAction and inspect sectionId, itemId, item, and the original pointer event."
+              "Listen for dsChange. Single mode emits YYYY-MM-DD. Range mode emits range:start/end using the shared date-filter string."
             ],
             "react": [
-              "Pass sections as an array and handle onDsAction for product actions or client-side routing.",
-              "Prevent the event only when replacing native navigation for an item with href."
-            ],
-            "angular": [
-              "Bind [sections] through the generated standalone adapter and inspect $event.detail from (dsAction).",
-              "Keep product data and activation consequences in the Angular owner rather than embedding them in the component contract."
+              "Use DsCalendar, bind value, and handle onDsChange."
             ]
           },
           "references": [
             {
-              "label": "Storybook grouped, value, and empty examples",
-              "path": "src/wc/components/CardActionCenter/CardActionCenter.stories.ts"
-            },
-            {
-              "label": "Rendered semantics, interaction, and geometry coverage",
-              "path": "tests/e2e/card-action-center.spec.ts"
+              "label": "Storybook examples",
+              "path": "src/wc/components/Calendar/Calendar.stories.ts"
             }
           ]
         },
         "props": {
-          "emptyMessage": {
-            "type": "string",
+          "autoFocus": {
+            "type": "boolean",
             "required": false
           },
-          "sections": {
-            "type": "ReadonlyArray<CardActionCenterSection>",
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "max": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "min": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "selectionMode": {
+            "type": "CalendarSelectionMode",
+            "required": false
+          },
+          "value": {
+            "type": "string",
             "required": false
           }
         },
         "events": [
           {
-            "name": "dsAction",
-            "detail": "CardActionCenterActionDetail"
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-calendar",
+          "react": "DsCalendar",
+          "vue": "DsCalendar",
+          "angular": "DsCalendar"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "text"
+      ]
+    },
+    {
+      "name": "card-action-center",
+      "title": "CardActionCenter",
+      "description": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-action-center",
+        "source": "src/wc/components/CardActionCenter/CardActionCenter.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+          "useWhen": [
+            "An overview rail needs a compact action center with multiple named groups.",
+            "Action rows need optional counts or short values aligned at the trailing edge.",
+            "Related reports or resource destinations belong beside attention items in one bounded surface."
+          ],
+          "avoidWhen": [
+            "The complete card leads to one destination; use CardNavigation.",
+            "The surface edits settings in place; use CardSetting.",
+            "The content is a chart, legend, metric visualization, or other data-visualization composition; use CardChart or CardOverview.",
+            "Rows require descriptions, nested controls, menus, or selection state instead of one direct action."
+          ],
+          "alternatives": [
+            {
+              "when": "The entire surface represents one destination.",
+              "component": "component:ds-card-navigation",
+              "reason": "CardNavigation provides the single native-link card contract."
+            },
+            {
+              "when": "The card presents page-level score and metric summaries.",
+              "component": "component:ds-card-overview",
+              "reason": "CardOverview owns summary metrics, comparison periods, and selectable metric cells."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-tag",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "Each non-empty group is a section labelled by an h2 heading, and each row is a native button or link.",
+            "Use href for real destinations so link context menus, modified clicks, and native browser semantics remain available.",
+            "Prevent the cancelable dsAction event only when an application router takes ownership of the same link activation.",
+            "Inactive items become disabled buttons and are removed from keyboard navigation rather than exposing a false destination.",
+            "Keep item labels concise; a visible trailing value participates in the action's accessible name."
+          ],
+          "states": [
+            "Rows expose distinct rest, hover, pressed, keyboard-focus, and inactive states.",
+            "An empty sections array or groups with no items render the configured empty message.",
+            "The application owns loading, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data."
+          ],
+          "responsiveBehavior": [
+            "The card fills its parent width and never establishes a product breakpoint.",
+            "Long labels wrap while trailing values remain visible; the page owns rail width and movement below primary content.",
+            "Groups retain their order when the parent layout moves the complete card between desktop and mobile regions."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign sections as a JavaScript property; complex arrays are not supported as string attributes.",
+              "Listen for dsAction and inspect sectionId, itemId, item, and the original pointer event."
+            ],
+            "react": [
+              "Pass sections as an array and handle onDsAction for product actions or client-side routing.",
+              "Prevent the event only when replacing native navigation for an item with href."
+            ],
+            "angular": [
+              "Bind [sections] through the generated standalone adapter and inspect $event.detail from (dsAction).",
+              "Keep product data and activation consequences in the Angular owner rather than embedding them in the component contract."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook grouped, value, and empty examples",
+              "path": "src/wc/components/CardActionCenter/CardActionCenter.stories.ts"
+            },
+            {
+              "label": "Rendered semantics, interaction, and geometry coverage",
+              "path": "tests/e2e/card-action-center.spec.ts"
+            }
+          ]
+        },
+        "props": {
+          "emptyMessage": {
+            "type": "string",
+            "required": false
+          },
+          "sections": {
+            "type": "ReadonlyArray<CardActionCenterSection>",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsAction",
+            "detail": "CardActionCenterActionDetail"
           }
         ],
         "slots": [],
@@ -2783,10 +3125,12 @@
             "The native link owns hover, pressed, and focus-visible states across the complete card in navigation-only mode.",
             "In content mode, the native link owns those interaction states only across the header while the body remains application-owned.",
             "An empty or unsafe href renders non-interactive card chrome without a false keyboard target.",
+            "Copy is always stacked, so a missing description keeps the heading at the start of the column instead of centering it in the header.",
             "The application owns destination loading, authorization, not-found, and recovery states after navigation."
           ],
           "responsiveBehavior": [
             "Choose sm, md, or lg from the parent layout; the surface never exceeds its parent width.",
+            "The heading stays at the start of the stacked copy column whether or not supporting copy is present, so mixed destination lists keep titles aligned. The chevron stays vertically centered in the header.",
             "Supporting copy wraps while the chevron remains visible at the trailing edge.",
             "The parent owns wrapping, columns, stacking, and breakpoint changes between cards."
           ],
@@ -4444,7 +4788,7 @@
     {
       "name": "field",
       "title": "Field",
-      "description": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+      "description": "Accessible form-field composition that gives one Input, InputDate, InputTime, Textarea, or Select an optional visible label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -4455,9 +4799,10 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+          "summary": "Accessible form-field composition that gives one Input, InputDate, InputTime, Textarea, or Select an optional visible label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
           "useWhen": [
-            "An Input, Textarea, or Select needs a persistent visible label in a form.",
+            "An Input, InputDate, InputTime, Textarea, or Select needs a persistent visible label in a form.",
+            "A nearby heading already names the field, and the control still needs Field's error association and message rhythm.",
             "Help text or an error message must be programmatically associated with one control.",
             "A form layout needs one consistent label-control-message rhythm."
           ],
@@ -4475,19 +4820,23 @@
           ],
           "commonlyComposedWith": [
             "component:ds-input",
+            "component:ds-input-date",
+            "component:ds-input-time",
             "component:ds-textarea",
             "component:ds-select",
             "component:ds-text"
           ],
           "accessibility": [
-            "Slot exactly one form control. Field assigns its stable control ID and connects the visible label automatically.",
+            "Slot exactly one form control. When a visible label is provided, Field assigns its stable control ID and connects that label automatically.",
+            "Omit the visible label when a nearby heading already names the field. Keep a programmatic name on the slotted control, such as aria-label, and do not set aria-labelledby to an empty value.",
             "The visible description or error ID is merged with any authored aria-describedby references; a rendered error replaces the description.",
             "The error prop forwards aria-invalid and supported design-system control error styling; put visible error text on Field, not again on the child control.",
             "Clicking the label focuses the slotted design-system control without opening a Select popup.",
             "Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
           ],
           "states": [
-            "Label, control, description, and error content follow the shared 4px vertical field flow without changing the slotted control's width or semantics.",
+            "The visible label is optional. Omit it when a nearby heading already names the field; Field still associates description and error text with the slotted control.",
+            "Label, control, description, and error content follow the shared 4px vertical field flow without changing the slotted control's width or semantics. When the slotted control is borderless, description and error copy inset to that control's text origin instead of the resting bordered edge.",
             "Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
             "A rendered error replaces the description; preserve essential guidance in the error message so users retain what they need to correct the field.",
             "Field owns validation presentation but not validation timing; the form decides when to set error and errorMessage.",
@@ -4503,7 +4852,7 @@
               "Assign child component values and option arrays through their normal JavaScript properties."
             ],
             "react": [
-              "Compose one DsInput, DsTextarea, or DsSelect child and control validation timing in the form owner."
+              "Compose one DsInput, DsInputDate, DsInputTime, DsTextarea, or DsSelect child and control validation timing in the form owner."
             ],
             "angular": [
               "Compose the generated Field adapter around the control adapter and its matching Angular value accessor."
@@ -4539,7 +4888,7 @@
           },
           "label": {
             "type": "string",
-            "required": true
+            "required": false
           }
         },
         "events": [],
@@ -4598,14 +4947,15 @@
           "commonlyComposedWith": [
             "component:ds-select",
             "component:ds-table",
-            "component:ds-checkbox"
+            "component:ds-checkbox",
+            "component:ds-calendar"
           ],
           "accessibility": [
             "The built-in select trigger exposes combobox semantics with a dialog popup, synchronizes expanded state, holds the pressed interaction wash without changing resting foreground while open, and restores focus after dismissal.",
             "The category pane is a vertical tab list. Arrow Up and Arrow Down wrap, Home and End jump, Arrow Right enters the option pane, and Arrow Left returns to the active category.",
             "Every non-date category begins with a labelled search field. Arrow Down and Arrow Up enter the first or last visible option, while Left and Right retain native text-caret behavior. Search matches option labels and descriptions without changing selected values.",
             "Escape and outside activation close the popup and restore trigger focus. Tab moves through option controls and closes only when it leaves the popup boundary.",
-            "Date filters expose containerless Range and Relative tabs in a secondary-background header with 4px padding around the 32px medium control. Relative presets use listbox semantics; the range calendar exposes a labelled grid, one tab stop, arrow-key day navigation, Home and End week navigation, and Page Up or Page Down month navigation. After a range start is chosen, pointer hover and keyboard focus preview the possible inclusive range without changing selection semantics.",
+            "Date filters expose containerless Range and Relative tabs in a secondary-background header with 4px padding around the 32px medium control. Relative presets use listbox semantics. Range selection hosts Calendar, which owns the labelled month grid, one tab stop, arrow-key day navigation, Home and End week navigation, and Page Up or Page Down month navigation. After a range start is chosen, pointer hover and keyboard focus preview the possible inclusive range without changing selection semantics.",
             "When an external trigger is inside an open shadow tree, pass its HTMLElement through anchor so outside activation, focus return, and Tab continuation use the composed tree.",
             "The trigger count reports active filter categories. Multiple-choice category tags report individual selected criteria, while an applied Date category uses a visual dot because its value is singular. The default summary footer announces the total; the categories-clear footer recipe reserves a visually empty category-pane action row and exposes its divider and only Clear when criteria are active."
           ],
@@ -4620,7 +4970,10 @@
             "Selection applies immediately and does not close the popup.",
             "Changing category replaces the option-pane subtree so checkbox and other option visuals mount in their new state instead of transitioning from the previous category's row state.",
             "The trigger reports how many filter categories have selections. footerLayout=summary adds a full-width selected-count footer only while values are selected; footerLayout=categories-clear always reserves the category-pane footer height while keeping its inactive divider hidden, then reveals the divider and only its left-aligned Clear action while values are selected.",
-            "The built-in trigger derives the shared surface-open wash from the rendered popup lifecycle, including closing. For an external trigger, the application owns that relationship and retains the wash until dsAfterClose; selected filter values remain independent."
+            "The built-in trigger derives the shared surface-open wash from the rendered popup lifecycle, including closing. For an external trigger, the application owns that relationship and retains the wash until dsAfterClose; selected filter values remain independent.",
+            "Embedded mode renders the same controlled content inside a parent-owned surface; the parent owns positioning, initial focus, Escape, Tab exit, and dismissal.",
+            "Apply-required filtering stages edits locally, including match mode. Clear immediately emits dsClear and discards pending edits. The footer appears when filters are selected or applied; Apply stays in place and inactive without pending changes; applying emits controlled changes. Closing discards unapplied edits.",
+            "Vertical presentation renders initially expanded, independently collapsible filter categories and emits edits immediately to its controlled owner. The owning panel supplies the draft and action footer."
           ],
           "responsiveBehavior": [
             "The popup defaults to the large menu-width token and clamps to the nearest data-ds-overlay-boundary rectangle or the viewport fallback.",
@@ -4675,6 +5028,10 @@
             "type": "string | undefined",
             "required": false
           },
+          "applyRequired": {
+            "type": "boolean",
+            "required": false
+          },
           "ariaLabel": {
             "type": "string | null",
             "required": false
@@ -4695,6 +5052,10 @@
             "type": "boolean",
             "required": false
           },
+          "embedded": {
+            "type": "boolean",
+            "required": false
+          },
           "filters": {
             "type": "FilterMenuFilter[]",
             "required": false
@@ -4731,6 +5092,10 @@
             "type": "string",
             "required": false
           },
+          "neutralTrigger": {
+            "type": "boolean",
+            "required": false
+          },
           "noResultsText": {
             "type": "string",
             "required": false
@@ -4743,6 +5108,10 @@
             "type": "string",
             "required": false
           },
+          "showIndicator": {
+            "type": "boolean",
+            "required": false
+          },
           "showSelectedCount": {
             "type": "boolean",
             "required": false
@@ -4767,6 +5136,10 @@
             "type": "FilterMenuValues",
             "required": false
           },
+          "vertical": {
+            "type": "boolean",
+            "required": false
+          },
           "width": {
             "type": "FilterMenuWidth",
             "required": false
@@ -4817,7 +5190,7 @@
       ],
       "registryDependencies": [
         "badge",
-        "button-unfilled",
+        "calendar",
         "checkbox",
         "empty-state",
         "icon",
@@ -4911,142 +5284,638 @@
           "references": [
             {
               "label": "Storybook examples",
-              "path": "src/wc/components/Icon/Icon.stories.ts"
+              "path": "src/wc/components/Icon/Icon.stories.ts"
+            },
+            {
+              "label": "Preload API guidance",
+              "path": "src/wc/components/Icon/icon-cache.ts"
+            }
+          ]
+        },
+        "props": {
+          "color": {
+            "type": "IconColor",
+            "required": false
+          },
+          "label": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "name": {
+            "type": "string",
+            "required": false
+          },
+          "size": {
+            "type": "IconSize",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-icon",
+          "react": "DsIcon",
+          "vue": "DsIcon",
+          "angular": "DsIcon"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": []
+    },
+    {
+      "name": "input",
+      "title": "Input",
+      "description": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/input",
+        "source": "src/wc/components/Input/Input.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+          "useWhen": [
+            "A user must enter or edit one line of text, an email address, telephone number, URL, search query, password, or exact number.",
+            "The value must participate in native, Angular, React, or Vue form state.",
+            "A compact filter or toolbar needs a single-line search field that follows the shared control-density recipe."
+          ],
+          "avoidWhen": [
+            "The user chooses from a finite set of known values.",
+            "The user must enter multiple paragraphs or formatted content.",
+            "The value is adjusted primarily by dragging within a numeric range.",
+            "The value is a calendar date or a clock time."
+          ],
+          "alternatives": [
+            {
+              "when": "The value comes from a finite set of known choices.",
+              "component": "component:ds-select",
+              "reason": "Select exposes the available values and owns listbox selection behavior."
+            },
+            {
+              "when": "The value is a calendar date.",
+              "component": "component:ds-input-date",
+              "reason": "InputDate owns calendar date form values, shared Input density, and the Calendar picker."
+            },
+            {
+              "when": "The value is a clock time.",
+              "component": "component:ds-input-time",
+              "reason": "InputTime owns clock time form values, shared Input density, and the TimePicker."
+            },
+            {
+              "when": "The value is an immediate on/off setting.",
+              "component": "component:ds-switch",
+              "reason": "Switch communicates a binary setting instead of free text entry."
+            },
+            {
+              "when": "The value is chosen from a bounded numeric range.",
+              "component": "component:ds-slider",
+              "reason": "Slider supports direct range adjustment and communicates the current position."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-field",
+            "component:ds-icon",
+            "component:ds-text",
+            "component:ds-select"
+          ],
+          "accessibility": [
+            "Provide a persistent visible label through the owning field or an external native label; placeholder text is guidance and must not be the field's only label.",
+            "Choose the native input type that matches the value so browsers and assistive technology can provide appropriate semantics and keyboards.",
+            "Error text is associated with the native input and announced as an alert when the invalid state is rendered.",
+            "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission.",
+            "Password fields keep a named show-or-hide action beside the value. Revealing the value changes only the native input type; the submitted string does not change. The action restores focus to the field after activation.",
+            "Number stepper actions are pointer affordances hidden from the accessibility tree; the native spinbutton remains the single keyboard and assistive-technology control.",
+            "Prefix and suffix content must not carry information that is otherwise absent from the field's visible label, value, or description.",
+            "A nested prefix or suffix Select is a separate control from the editable value and must have its own accessible name."
+          ],
+          "states": [
+            "Every size applies one complete control-density recipe across frame height, inline padding, icon zones, text-container inset, gap, and radius; supporting error content follows the shared 4px field flow.",
+            "The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. Set hasBorder to false only in chrome that supplies enough surrounding structure; supporting error copy then insets to the field's text origin rather than the resting border box. Set hasInteractionFill to false when that containing chrome also owns hover and pressed feedback.",
+            "Placeholder text is secondary at rest and quaternary while the editable field is focused because it becomes decorative once typing begins. Single-line placeholder and entered value text truncate with an ellipsis when the field is narrower than its content.",
+            "Entered values use the parent surface's primary foreground; prefix icons, prefix text, suffix content, and resting placeholder text use its secondary foreground.",
+            "Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
+            "Password fields show a standard inset Eye action at the field's density. EyeDisabled replaces it while the value is visible. The action stays available on read-only fields and is inactive with the field.",
+            "Search fields disable browser autocomplete history, automatic capitalization, autocorrection, and spellchecking by default so browser-owned suggestions do not compete with product-owned results. Consumers can explicitly provide autoComplete when a different native history behavior is required.",
+            "Search fields used with owned result sets forward aria-controls and aria-activedescendant to the native field so keyboard focus can remain in the query while assistive technology tracks the active result.",
+            "The prefix and suffix slots host compact leading or trailing units such as a currency code, or a nested same-size inset Select. Text adornments use the control's balanced text inset. Nested Selects match the field density, set isInset, hasBorder false, width hug, and indicator up-down, keep a selected value, set allowClear false so the menu has no clear footer, set neutralTrigger so the selected unit stays on the secondary adornment foreground, and do not carry the field's error message. Configurable prefix and suffix controls are separated from the editable value by a vertical divider at the density icon height. The nested inset keeps its 2px remainder toward the line; the editable value keeps the same inline padding from the line as a non-prefixed field keeps from its border. The optional leading icon is decorative and does not replace the field label. Password, search-clear, and date or time actions stay type-owned trailing buttons rather than suffix-slot content.",
+            "Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
+            "Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Two borderless inset chevron actions split the available inner height, disable independently at their numeric bound, and restore focus to the spinbutton after pointer activation.",
+            "textAlign positions the editable value while the numeric stepper stays on the opposite inline edge, keeping the actions clear of the number: start-aligned values use an inline-end stepper and end-aligned values use an inline-start stepper.",
+            "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
+            "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts."
+          ],
+          "responsiveBehavior": [
+            "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
+            "Choose density from the containing layout: md for ordinary forms, lg for a touch-primary layout, and sm or xs only where surrounding controls use the same compact recipe.",
+            "The owner supplies layout constraints and decides when a compact field moves to its own row."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Listen for dsChange for user edits and dsClear for the search clear action.",
+              "Use the form attribute on the host when associating an input rendered outside its owning form."
+            ],
+            "react": [
+              "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear."
+            ],
+            "vue": [
+              "Use DsInput with v-model for the value, and listen for dsChange and dsClear."
+            ],
+            "angular": [
+              "Import DsInput with TextValueAccessor when integrating with Angular Forms."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/Input/Input.stories.ts"
+            },
+            {
+              "label": "Cross-browser form and accessibility coverage",
+              "path": "tests/e2e/forms.spec.ts"
+            }
+          ]
+        },
+        "props": {
+          "ariaActiveDescendant": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaControls": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "autoComplete": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "autoFocus": {
+            "type": "boolean",
+            "required": false
+          },
+          "clearLabel": {
+            "type": "string",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "enterKeyHint": {
+            "type": "string",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "form": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "hasInteractionFill": {
+            "type": "boolean",
+            "required": false
+          },
+          "hidePasswordLabel": {
+            "type": "string",
+            "required": false
+          },
+          "icon": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputMode": {
+            "type": "string",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "max": {
+            "type": "number | undefined",
+            "required": false
+          },
+          "min": {
+            "type": "number | undefined",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "placeholder": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "readOnly": {
+            "type": "boolean",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "showPasswordLabel": {
+            "type": "string",
+            "required": false
+          },
+          "size": {
+            "type": "InputSize",
+            "required": false
+          },
+          "step": {
+            "type": "number | undefined",
+            "required": false
+          },
+          "textAlign": {
+            "type": "InputTextAlign",
+            "required": false
+          },
+          "type": {
+            "type": "InputType",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "width": {
+            "type": "InputWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          },
+          {
+            "name": "dsClear",
+            "detail": "void"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-input",
+          "react": "DsInput",
+          "vue": "DsInput",
+          "angular": "DsInput"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "divider",
+        "icon",
+        "text"
+      ]
+    },
+    {
+      "name": "input-date",
+      "title": "InputDate",
+      "description": "Form-associated calendar date field that reuses Input density, focus, validation, and field composition, with a typeable value and a Calendar picker.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/input-date",
+        "source": "src/wc/components/InputDate/InputDate.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Form-associated calendar date field that reuses Input density, focus, validation, and field composition, with a typeable value and a Calendar picker.",
+          "useWhen": [
+            "A user must enter or edit a calendar date as an ISO date string.",
+            "The date must participate in native, Angular, React, or Vue form state.",
+            "The control should match Input geometry, typography, and field composition rather than a one-off native date input."
+          ],
+          "avoidWhen": [
+            "The value is freeform text, a number, or a search query.",
+            "The value is a clock time without a calendar date.",
+            "The user chooses a predefined relative range such as last 7 days."
+          ],
+          "alternatives": [
+            {
+              "when": "The value is one line of text, email, search, or an exact number.",
+              "component": "component:ds-input",
+              "reason": "Input owns those native types, adornments, search clearing, and numeric stepping."
+            },
+            {
+              "when": "The value is a clock time.",
+              "component": "component:ds-input-time",
+              "reason": "InputTime owns clock time form values and the TimePicker."
+            },
+            {
+              "when": "The user chooses a relative or bounded date range from presets.",
+              "component": "component:ds-filter-menu",
+              "reason": "FilterMenu owns relative date presets and range selection rather than a single calendar date."
+            },
+            {
+              "when": "The month grid is needed without a form field.",
+              "component": "component:ds-calendar",
+              "reason": "Calendar owns the shared month grid and can select a single date or a range."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-field",
+            "component:ds-calendar",
+            "component:ds-button-unfilled",
+            "component:ds-icon",
+            "component:ds-text",
+            "component:ds-input-time"
+          ],
+          "accessibility": [
+            "Provide a persistent visible label through the owning field or an external native label.",
+            "The text field remains the keyboard and assistive-technology value control. Users can type an ISO date, a numeric M/D/YYYY date, or a short-month label such as Sep 10, 2026.",
+            "The trailing calendar button is a named disclosure that opens a non-modal calendar dialog. It shares the field's density, uses the single inset recipe, and reports expanded state while the picker is open.",
+            "Filled values keep YYYY-MM-DD as the form value. Visible text uses a short-month calendar label such as Sep 10, 2026 so the field does not show ISO chrome. That label reuses Input's value typography and text-container inset.",
+            "Error text is associated with the text field and announced as an alert when the invalid state is rendered.",
+            "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission."
+          ],
+          "states": [
+            "Every size applies the shared control-density recipe, including md body-medium text, across frame height, inline padding, icon zones, and radius.",
+            "The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. When hasBorder is false, supporting error copy insets to the field's text origin rather than the resting border box.",
+            "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
+            "The trailing calendar action is an unfilled icon button of the same density as the field, borderless and square, with the single inset recipe so the 4px height reduction insets it equally from the field's top, end, and bottom edges. It does not replace the field label or the submitted date value. Inactive or disabled fields apply that treatment on the host only, so the nested button is not faded a second time.",
+            "Activating the calendar button opens the shared Calendar grid in a choice-popup dialog anchored to the field's end edge, beside the trailing calendar action. Choosing a day commits that date and closes the dialog. Typing in the field commits a parsed date without requiring the picker. Invalid typed text reverts to the last committed value on blur."
+          ],
+          "responsiveBehavior": [
+            "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
+            "Choose density from the containing layout: md for ordinary forms, lg for a touch-primary layout, and sm or xs only where surrounding controls use the same compact recipe.",
+            "The calendar dialog uses the shared choice-popup recipe with the same 4px sm chrome inset as choice lists, aligns to the field's end edge, flips when the field collides with the overlay boundary, and stays in the top layer."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Listen for dsChange for user edits. The detail is the ISO calendar date string YYYY-MM-DD.",
+              "Use the form attribute on the host when associating a date field rendered outside its owning form."
+            ],
+            "react": [
+              "Use DsInputDate, bind value for controlled application state, and handle onDsChange."
+            ],
+            "vue": [
+              "Use DsInputDate with v-model for the value, and listen for dsChange."
+            ],
+            "angular": [
+              "Import DsInputDate with TextValueAccessor when integrating with Angular Forms."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/InputDate/InputDate.stories.ts"
             },
             {
-              "label": "Preload API guidance",
-              "path": "src/wc/components/Icon/icon-cache.ts"
+              "label": "Cross-browser form and accessibility coverage",
+              "path": "tests/e2e/forms.spec.ts"
             }
           ]
         },
         "props": {
-          "color": {
-            "type": "IconColor",
+          "ariaDescribedby": {
+            "type": "string | undefined",
             "required": false
           },
-          "label": {
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "autoFocus": {
+            "type": "boolean",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "form": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "hasInteractionFill": {
+            "type": "boolean",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "max": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "min": {
             "type": "string | undefined",
             "required": false
           },
           "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "readOnly": {
+            "type": "boolean",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
             "type": "string",
             "required": false
           },
           "size": {
-            "type": "IconSize",
+            "type": "InputDateSize",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "width": {
+            "type": "InputDateWidth",
             "required": false
           }
         },
-        "events": [],
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
         "slots": [],
         "exports": {
-          "customElement": "ds-icon",
-          "react": "DsIcon",
-          "vue": "DsIcon",
-          "angular": "DsIcon"
+          "customElement": "ds-input-date",
+          "react": "DsInputDate",
+          "vue": "DsInputDate",
+          "angular": "DsInputDate"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "button-unfilled",
+        "calendar",
+        "text"
+      ]
     },
     {
-      "name": "input",
-      "title": "Input",
-      "description": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "name": "input-time",
+      "title": "InputTime",
+      "description": "Form-associated clock time field that reuses Input density, focus, validation, and field composition, with a typeable value and a TimePicker.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
         "distribution": "npm",
-        "storybook": "https://zainadeel.github.io/compomo/?path=/story/input",
-        "source": "src/wc/components/Input/Input.tsx",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/input-time",
+        "source": "src/wc/components/InputTime/InputTime.tsx",
         "intentStatus": "complete",
         "intent": {
           "audience": "general",
-          "status": "stable",
-          "summary": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+          "status": "experimental",
+          "summary": "Form-associated clock time field that reuses Input density, focus, validation, and field composition, with a typeable value and a TimePicker.",
           "useWhen": [
-            "A user must enter or edit one line of text, an email address, telephone number, URL, search query, password, or exact number.",
-            "The value must participate in native, Angular, React, or Vue form state.",
-            "A compact filter or toolbar needs a single-line search field that follows the shared control-density recipe."
+            "A user must enter or edit a clock time as a native time string.",
+            "The time must participate in native, Angular, React, or Vue form state.",
+            "The control should match Input geometry, typography, and field composition rather than a one-off native time input."
           ],
           "avoidWhen": [
-            "The user chooses from a finite set of known values.",
-            "The user must enter multiple paragraphs or formatted content.",
-            "The value is adjusted primarily by dragging within a numeric range."
+            "The value is freeform text, a number, or a search query.",
+            "The value is a calendar date without a clock time.",
+            "The user chooses from a finite set of named schedule options rather than an exact time."
           ],
           "alternatives": [
             {
-              "when": "The value comes from a finite set of known choices.",
-              "component": "component:ds-select",
-              "reason": "Select exposes the available values and owns listbox selection behavior."
+              "when": "The value is one line of text, email, search, or an exact number.",
+              "component": "component:ds-input",
+              "reason": "Input owns those native types, adornments, search clearing, and numeric stepping."
             },
             {
-              "when": "The value is an immediate on/off setting.",
-              "component": "component:ds-switch",
-              "reason": "Switch communicates a binary setting instead of free text entry."
+              "when": "The value is a calendar date.",
+              "component": "component:ds-input-date",
+              "reason": "InputDate owns calendar date form values and the Calendar picker."
             },
             {
-              "when": "The value is chosen from a bounded numeric range.",
-              "component": "component:ds-slider",
-              "reason": "Slider supports direct range adjustment and communicates the current position."
+              "when": "The hour, minute, and AM/PM lists are needed without a form field.",
+              "component": "component:ds-time-picker",
+              "reason": "TimePicker owns the bounded 12-hour lists and selected-tile treatment."
+            },
+            {
+              "when": "The user chooses from a finite set of named times or cadences.",
+              "component": "component:ds-select",
+              "reason": "Select exposes the available values and owns listbox selection behavior."
             }
           ],
           "commonlyComposedWith": [
             "component:ds-field",
+            "component:ds-time-picker",
+            "component:ds-button-unfilled",
             "component:ds-icon",
-            "component:ds-text"
+            "component:ds-text",
+            "component:ds-input-date"
           ],
           "accessibility": [
-            "Provide a persistent visible label through the owning field or an external native label; placeholder text is guidance and must not be the field's only label.",
-            "Choose the native input type that matches the value so browsers and assistive technology can provide appropriate semantics and keyboards.",
-            "Error text is associated with the native input and announced as an alert when the invalid state is rendered.",
-            "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission.",
-            "Number stepper actions are pointer affordances hidden from the accessibility tree; the native spinbutton remains the single keyboard and assistive-technology control.",
-            "Suffix content must not carry information that is otherwise absent from the field's visible label, value, or description."
+            "Provide a persistent visible label through the owning field or an external native label.",
+            "The text field remains the keyboard and assistive-technology value control. Users can type HH:MM, H:MM, or a 12-hour label such as 9:00 AM.",
+            "The trailing clock button is a named disclosure that opens a non-modal time dialog. It shares the field's density, uses the single inset recipe, and reports expanded state while the picker is open.",
+            "Filled values keep HH:MM as the form value. Visible text uses a 12-hour label such as 9:00 AM so the field does not show 24-hour chrome. That label reuses Input's value typography and text-container inset.",
+            "Error text is associated with the text field and announced as an alert when the invalid state is rendered.",
+            "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission."
           ],
           "states": [
-            "Every size applies one complete control-density recipe across frame height, inline padding, icon zones, text-container inset, gap, and radius; supporting error content follows the shared 4px field flow.",
-            "The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. Set hasBorder to false only in chrome that supplies enough surrounding structure; set hasInteractionFill to false when that containing chrome also owns hover and pressed feedback.",
-            "Placeholder text is secondary at rest and quaternary while the editable field is focused because it becomes decorative once typing begins. Single-line placeholder and entered value text truncate with an ellipsis when the field is narrower than its content.",
-            "Entered values use the parent surface's primary foreground; prefix icons, suffix content, and resting placeholder text use its secondary foreground.",
-            "Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
-            "Search fields disable browser autocomplete history, automatic capitalization, autocorrection, and spellchecking by default so browser-owned suggestions do not compete with product-owned results. Consumers can explicitly provide autoComplete when a different native history behavior is required.",
-            "Search fields used with owned result sets forward aria-controls and aria-activedescendant to the native field so keyboard focus can remain in the query while assistive technology tracks the active result.",
-            "The suffix slot is for compact units or decorations. The optional leading icon is decorative and does not replace the field label.",
-            "Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
-            "Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Two borderless inset chevron actions split the available inner height, disable independently at their numeric bound, and restore focus to the spinbutton after pointer activation.",
-            "textAlign positions the editable value while the numeric stepper stays on the opposite inline edge, keeping the actions clear of the number: start-aligned values use an inline-end stepper and end-aligned values use an inline-start stepper.",
+            "Every size applies the shared control-density recipe, including md body-medium text, across frame height, inline padding, icon zones, and radius.",
+            "The default step is one minute so the field matches ordinary schedule entry; override step only when a coarser minute increment is required.",
+            "The normal field boundary uses the shared secondary inset border. Focus promotes it to the thicker bold-brand inset stroke, while error uses the thicker bold-negative inset stroke without changing geometry. When hasBorder is false, supporting error copy insets to the field's text origin rather than the resting border box.",
             "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
-            "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts."
+            "The trailing clock action is an unfilled icon button of the same density as the field, borderless and square, with the single inset recipe so the 4px height reduction insets it equally from the field's top, end, and bottom edges. It does not replace the field label or the submitted time value. Inactive or disabled fields apply that treatment on the host only, so the nested button is not faded a second time.",
+            "Activating the clock button opens the shared TimePicker in a choice-popup dialog anchored to the field's end edge, beside the trailing clock action. Choosing hour, minute, or AM/PM commits that part of the time and leaves the dialog open so the other columns can be adjusted. Typing in the field commits a parsed time without requiring the picker. Invalid typed text reverts to the last committed value on blur."
           ],
           "responsiveBehavior": [
             "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
             "Choose density from the containing layout: md for ordinary forms, lg for a touch-primary layout, and sm or xs only where surrounding controls use the same compact recipe.",
-            "The owner supplies layout constraints and decides when a compact field moves to its own row."
+            "The time dialog uses the shared choice-popup recipe with the same 4px sm chrome inset as choice lists, aligns to the field's end edge, flips when the field collides with the overlay boundary, and stays in the top layer."
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Listen for dsChange for user edits and dsClear for the search clear action.",
-              "Use the form attribute on the host when associating an input rendered outside its owning form."
+              "Listen for dsChange for user edits. The detail is the clock time string HH:MM.",
+              "Use the form attribute on the host when associating a time field rendered outside its owning form."
             ],
             "react": [
-              "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear."
+              "Use DsInputTime, bind value for controlled application state, and handle onDsChange."
             ],
             "vue": [
-              "Use DsInput with v-model for the value, and listen for dsChange and dsClear."
+              "Use DsInputTime with v-model for the value, and listen for dsChange."
             ],
             "angular": [
-              "Import DsInput with TextValueAccessor when integrating with Angular Forms."
+              "Import DsInputTime with TextValueAccessor when integrating with Angular Forms."
             ]
           },
           "references": [
             {
               "label": "Storybook examples",
-              "path": "src/wc/components/Input/Input.stories.ts"
+              "path": "src/wc/components/InputTime/InputTime.stories.ts"
             },
             {
               "label": "Cross-browser form and accessibility coverage",
@@ -5055,14 +5924,6 @@
           ]
         },
         "props": {
-          "ariaActiveDescendant": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "ariaControls": {
-            "type": "string | undefined",
-            "required": false
-          },
           "ariaDescribedby": {
             "type": "string | undefined",
             "required": false
@@ -5075,26 +5936,14 @@
             "type": "string | undefined",
             "required": false
           },
-          "autoComplete": {
-            "type": "string | undefined",
-            "required": false
-          },
           "autoFocus": {
             "type": "boolean",
             "required": false
           },
-          "clearLabel": {
-            "type": "string",
-            "required": false
-          },
           "disabled": {
             "type": "boolean",
             "required": false
           },
-          "enterKeyHint": {
-            "type": "string",
-            "required": false
-          },
           "error": {
             "type": "boolean",
             "required": false
@@ -5115,35 +5964,23 @@
             "type": "boolean",
             "required": false
           },
-          "icon": {
-            "type": "string | undefined",
-            "required": false
-          },
           "inputId": {
             "type": "string | undefined",
             "required": false
           },
-          "inputMode": {
-            "type": "string",
-            "required": false
-          },
           "isInactive": {
             "type": "boolean",
             "required": false
           },
           "max": {
-            "type": "number | undefined",
+            "type": "string | undefined",
             "required": false
           },
           "min": {
-            "type": "number | undefined",
-            "required": false
-          },
-          "name": {
             "type": "string | undefined",
             "required": false
           },
-          "placeholder": {
+          "name": {
             "type": "string | undefined",
             "required": false
           },
@@ -5160,19 +5997,11 @@
             "required": false
           },
           "size": {
-            "type": "InputSize",
+            "type": "InputTimeSize",
             "required": false
           },
           "step": {
-            "type": "number | undefined",
-            "required": false
-          },
-          "textAlign": {
-            "type": "InputTextAlign",
-            "required": false
-          },
-          "type": {
-            "type": "InputType",
+            "type": "string | number",
             "required": false
           },
           "value": {
@@ -5180,7 +6009,7 @@
             "required": false
           },
           "width": {
-            "type": "InputWidth",
+            "type": "InputTimeWidth",
             "required": false
           }
         },
@@ -5188,29 +6017,24 @@
           {
             "name": "dsChange",
             "detail": "string"
-          },
-          {
-            "name": "dsClear",
-            "detail": "void"
           }
         ],
         "slots": [],
         "exports": {
-          "customElement": "ds-input",
-          "react": "DsInput",
-          "vue": "DsInput",
-          "angular": "DsInput"
+          "customElement": "ds-input-time",
+          "react": "DsInputTime",
+          "vue": "DsInputTime",
+          "angular": "DsInputTime"
         }
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens",
-        "@ds-mo/icons"
+        "@ds-mo/tokens"
       ],
       "registryDependencies": [
         "button-unfilled",
-        "icon",
-        "text"
+        "text",
+        "time-picker"
       ]
     },
     {
@@ -5477,7 +6301,8 @@
             "Use a swatch-picker section for a small curated visual preference and apply dsSwatchSelect immediately without closing the popup.",
             "Ordinary rows, section headings, and supporting text consume the Menu size. At xs, both the primary label and supporting text use caption metrics.",
             "A trailing tag resolves one density smaller than its menu row and uses the inset recipe so it nests without changing row height. Do not combine tag, dot, and switch suffixes on one item.",
-            "Reorderable rows use the Drag prefix and ignore icon. Prefix and drag-handle icons inherit the choice-popup secondary foreground, matching Select. When any row in a section has an icon or is reorderable, the remaining rows get a spacer so labels align."
+            "Reorderable rows use the Drag prefix and ignore icon. Prefix and drag-handle icons inherit the choice-popup secondary foreground, matching Select. When any row in a section has an icon or is reorderable, the remaining rows get a spacer so labels align.",
+            "Embedded mode renders the same controlled content inside a parent-owned surface; the parent owns positioning, initial focus, Escape, Tab exit, and dismissal."
           ],
           "responsiveBehavior": [
             "Keep the default choice-cell anchor alignment so the first or last interactive row edge aligns with its trigger, matching Select; use popup-frame only for deliberate custom frame geometry.",
@@ -5535,6 +6360,10 @@
             "type": "HTMLElement | undefined",
             "required": false
           },
+          "embedded": {
+            "type": "boolean",
+            "required": false
+          },
           "emptyMessage": {
             "type": "string",
             "required": false
@@ -8386,7 +9215,8 @@
             "component:ds-text",
             "component:ds-icon",
             "component:ds-empty-state",
-            "component:ds-loader"
+            "component:ds-loader",
+            "component:ds-input"
           ],
           "accessibility": [
             "In forms, provide a persistent visible external field label; placeholder text is guidance and must not be the field's only label. In a compact filter bar, the trigger's visible text may supply the accessible name.",
@@ -8400,9 +9230,10 @@
             "Use errorMessage with error so the trigger is described by the rendered alert."
           ],
           "states": [
-            "Selected trigger foreground communicates the current value independently of fill. Opt into activeFill when the trigger needs additional selected emphasis; popup option selection keeps its own treatment.",
+            "Selected trigger foreground communicates the current value independently of fill. Opt into activeFill when the trigger needs additional selected emphasis; popup option selection keeps its own treatment. Set neutralTrigger to keep the selected label on the resting secondary foreground, including Input prefix and suffix units.",
             "The multiple property changes cardinality without changing the component family: scalar mode selects and closes, while multiple mode toggles array values and keeps the popup open.",
-            "Every size applies one complete control-density recipe across trigger height, inline padding, icon zones, text-container inset, gap, and radius; error content follows the shared 4px field flow.",
+            "Every size applies one complete control-density recipe across trigger height, inline padding, icon zones, text-container inset, gap, and radius; error content follows the shared 4px field flow. Set rounded to use the same half-radius pill as buttons on the trigger only; the popup keeps the menu radius.",
+            "Set isInset only when the trigger is nested inside a same-size control, including an Input prefix or suffix. Match the host field's size, set hasBorder to false, use width hug, and set indicator to up-down. Prefix and suffix Selects keep a selected value, set allowClear false so the menu has no clear footer, and set neutralTrigger so the selected unit stays secondary like prefix text. The owning Input draws a vertical divider between the nested control and the editable value at the density icon height. The nested inset keeps its 2px remainder toward the line; the editable value keeps the same inline padding from the line as a non-prefixed field keeps from its border. The default single inset removes 4px overall; insetDepth double removes 8px overall so the parent can add 4px per edge while preserving its outer alignment box. Double inset falls back to single at xs to protect minimum icon geometry. Inset and rounded change only the trigger's outer box. Popup option rows, search, and footer always use the selected size recipe and do not change for single or double inset or for rounded. Do not put error copy on the nested Select; the owning Input keeps validation.",
             "Value is controlled through the mutable value property as a string in scalar mode or a string array in multiple mode; dsChange reports the matching shape.",
             "Multiple mode keeps the persistent placeholder label visible, appends the selected count, and submits one repeated form entry per selected value.",
             "Required Selects begin without an automatic selection and require the user to make an explicit choice; do not preselect the first option merely to satisfy validity.",
@@ -8417,7 +9248,7 @@
             "Option labels and the selected trigger label stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
             "Use an option action only for a contextual menu about that user-managed option. The fixed ellipsis action appears on hover, keyboard activity, focus, and touch; surfaceOpen keeps it visible while its controlled menu is rendered. Activating it emits dsOptionAction without selecting the option or closing the Select popup.",
             "Use option subtextActions for a compact set of immediate actions that belong to one option. They render beneath only that option's label using the standard supporting-text inset and rhythm, use action or negative semantic color, and emit dsOptionSubtextAction without selecting the option or closing the popup. Unlike descriptive subtext, they do not reserve a blank supporting line on neighboring options.",
-            "The optional prefix icon and trailing indicator always use the parent surface's secondary foreground color, including when a selected value promotes the label to primary. When collapseLabel compact icon-only chrome is active, a selected value promotes the prefix icon to primary instead. The default down indicator communicates disclosure; up-down is reserved for compact value steppers such as pagination page size.",
+            "The optional prefix icon and trailing indicator always use the parent surface's secondary foreground color, including when a selected value promotes the label to primary. When collapseLabel compact icon-only chrome is active, a selected value promotes the prefix icon to primary instead. The default down indicator communicates disclosure; up-down is for compact always-selected value pickers such as pagination page size and Input prefix or suffix units.",
             "While the popup is open, the trigger holds the pressed interaction wash without changing its resting foreground or selected-value treatment.",
             "The shared popup search control follows the Select density, using the same text, icon, and internal spacing as a borderless trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
             "When search contains text, the shared control shows a rounded icon-only ButtonUnfilled with the CrossCircle icon and no border, sized to remain inset within the current row density. It clears the local term, stays hidden for an empty term, and returns focus to search.",
@@ -8426,7 +9257,7 @@
             "An empty filtered list composes the message-only body variant of EmptyState. Keep the default neutral no-results message unless localized product guidance makes the outcome clearer.",
             "Enable searchable for more than roughly 20 options, user-managed listings, large domains such as addresses, or sets users cannot efficiently scan. Local matching includes option labels, subtext, and section headings; the owner resolves remote data before assigning options.",
             "Validation timing belongs to the form owner and may be immediate or deferred until blur or submit; the Select exposes validity and error presentation without imposing that policy.",
-            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry. Set hasBorder to false for chrome where the trigger must remain borderless at rest, when selected or focused, and when invalid; error semantics and supporting copy remain available.",
+            "The error trigger uses a 1.5px bold-negative inset stroke so invalid state remains distinguishable from the normal 1px border without changing control geometry. Set hasBorder to false for chrome where the trigger must remain borderless at rest, when selected or focused, and when invalid; error semantics remain available, and supporting error copy insets to the trigger text origin rather than the resting border box.",
             "An initially empty option set is not an expected Select use case. The no-results state describes a search with no matches, not a source with no choices.",
             "Use options for a flat list or sections for grouped choices; when sections are present they take precedence.",
             "The background prop describes the actual parent surface and uses the same surface set as ButtonUnfilled.",
@@ -8437,7 +9268,8 @@
             "When collapseLabel is set inside a named ds-table container narrower than 900px, the trigger omits its label and chevron, becomes icon-only, and exposes its label through a hover and keyboard-focus tooltip. A selected value promotes the prefix icon to primary.",
             "The popup matches the trigger minimum width, may grow for content, and clamps to the nearest data-ds-overlay-boundary rectangle or the viewport fallback. Assign boundary as an HTMLElement only for an explicit override.",
             "Keep popupAlign at start for ordinary fields and filters. Use end when a control sits against a right layout edge and the popup should grow inward.",
-            "Long option collections scroll inside the popup; virtualization and remote search are not part of this component."
+            "Long option collections scroll inside the popup; virtualization and remote search are not part of this component.",
+            "An explicitly compact composition can keep only the prefix icon while preserving the accessible name and tooltip."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -8533,6 +9365,10 @@
             "type": "string | undefined",
             "required": false
           },
+          "iconOnly": {
+            "type": "boolean",
+            "required": false
+          },
           "indicator": {
             "type": "SelectIndicator",
             "required": false
@@ -8541,10 +9377,18 @@
             "type": "string | undefined",
             "required": false
           },
+          "insetDepth": {
+            "type": "ControlInsetDepth",
+            "required": false
+          },
           "isInactive": {
             "type": "boolean",
             "required": false
           },
+          "isInset": {
+            "type": "boolean",
+            "required": false
+          },
           "isLoading": {
             "type": "boolean",
             "required": false
@@ -8561,6 +9405,10 @@
             "type": "string | undefined",
             "required": false
           },
+          "neutralTrigger": {
+            "type": "boolean",
+            "required": false
+          },
           "noResultsText": {
             "type": "string",
             "required": false
@@ -8589,6 +9437,10 @@
             "type": "string",
             "required": false
           },
+          "rounded": {
+            "type": "boolean",
+            "required": false
+          },
           "searchPlaceholder": {
             "type": "string",
             "required": false
@@ -8757,7 +9609,8 @@
             "Managed ShellApp keeps the selected desktop section-navigation presentation and ShellPage present and owns page header stickiness and the content scroller.",
             "Route-owned pageChrome independently selects ShellPage contentInset, page-header seams, scroll compaction, expanded and compact header-divider visibility, and contentSurface. ShellApp forwards them while resolving whether desktop title geometry is page-local or shell-bar-owned.",
             "The application filters unauthorized destinations, sections, and tools before passing them into shell components.",
-            "Application-owned header actions and the account trigger retain surface ownership across shell presentations. Supply surfaceOpen on header actions and accountMenuSurfaceOpen on navigation for rendered surface lifetimes; keep disclosure and selected-route state separate."
+            "Application-owned header actions and the account trigger retain surface ownership across shell presentations. Supply surfaceOpen on header actions and accountMenuSurfaceOpen on navigation for rendered surface lifetimes; keep disclosure and selected-route state separate.",
+            "Managed page chrome can explicitly choose page-local title presentation for pages that must remain compact rather than following capacity and scrolling."
           ],
           "responsiveBehavior": [
             "ShellApp owns the fixed system breakpoints and resolves desktop at 1200px and wider, tablet from 768px through 1199px, and mobile below 768px.",
@@ -10035,7 +10888,8 @@
             "Use one consistent content variant across every selectable tab in a group.",
             "Omitted background is for primary and secondary surfaces; pass the faint context explicitly on faint surfaces.",
             "Only the omitted default context emphasizes visible selected label text and keeps the filled track; every explicit surface context uses a transparent track, stable text weight, surface border, and its context-matched neutral active fill rather than a brand active fill.",
-            "Dividers visually separate related subsets inside one tab list but do not create nested navigation or independent selection groups."
+            "Dividers visually separate related subsets inside one tab list but do not create nested navigation or independent selection groups.",
+            "Simple navigation-style tabs use regular control geometry and selected text emphasis, without a selected pill fill or border."
           ],
           "responsiveBehavior": [
             "The component remains a single horizontal row and does not become vertical or wrap.",
@@ -10078,6 +10932,10 @@
             "type": "boolean",
             "required": false
           },
+          "presentation": {
+            "type": "'segmented' | 'tabs'",
+            "required": false
+          },
           "size": {
             "type": "TabGroupSize",
             "required": false
@@ -10193,7 +11051,9 @@
             "Score-and-text cells (`kind: score-text`) place the small 24px safety score at the top-right of the cell while the same one-, two-, or three-track copy stack as a standard text cell fills from the start edge. The score is top-aligned with the first text track, adds no inner padding, and defaults its accessible name prefix to Safety score. Score-and-text loading geometry uses the matching small score skeleton and declared copy tracks.",
             "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling.",
             "While any checkbox selection is active, row activation toggles selection instead of opening details. Clearing the selection restores ordinary row activation. Nested controls retain their own intent, and disabled or non-selectable rows cannot be selected by activating their row.",
-            "Use surfaceOpenRowId to identify the interactive row associated with a visible detail panel or other contextual surface. The application owns opening, same-row toggling, switching records, and closing; retain the identity through exit motion, then clear it. Move it when panel navigation changes the displayed record. This pressed wash spans sticky and scrolling cells, follows stable row identity through virtualization, and never checks a checkbox or changes selectedRowIds. Group expansion remains an inline disclosure."
+            "Use surfaceOpenRowId to identify the interactive row associated with a visible detail panel or other contextual surface. The application owns opening, same-row toggling, switching records, and closing; retain the identity through exit motion, then clear it. Move it when panel navigation changes the displayed record. This pressed wash spans sticky and scrolling cells, follows stable row identity through virtualization, and never checks a checkbox or changes selectedRowIds. Group expansion remains an inline disclosure.",
+            "An external ds-table-preferences may own column controls. Hide only the built-in Customize trigger, keep column customization enabled, and share hidden-column and ordering state with the external surface.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback."
           ],
           "responsiveBehavior": [
             "The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
@@ -10248,6 +11108,10 @@
             "type": "string",
             "required": true
           },
+          "captionControlsBorderless": {
+            "type": "boolean",
+            "required": false
+          },
           "captionVisibility": {
             "type": "TableCaptionVisibility",
             "required": false
@@ -10272,6 +11136,10 @@
             "type": "TableColumn[]",
             "required": false
           },
+          "customizeOptions": {
+            "type": "MenuItemData[]",
+            "required": false
+          },
           "dataMode": {
             "type": "TableDataMode",
             "required": false
@@ -10368,6 +11236,10 @@
             "type": "string[]",
             "required": false
           },
+          "hideColumnCustomizerTrigger": {
+            "type": "boolean",
+            "required": false
+          },
           "highlightFieldIds": {
             "type": "string[]",
             "required": false
@@ -10498,6 +11370,10 @@
             "name": "dsColumnsConfigChange",
             "detail": "TableColumnsConfigChangeDetail"
           },
+          {
+            "name": "dsCustomizeOptionChange",
+            "detail": "string"
+          },
           {
             "name": "dsDataModeChange",
             "detail": "TableDataModeChangeDetail"
@@ -10608,16 +11484,20 @@
           ],
           "states": [
             "filters, values, matchModes, and activeFilterId are controlled. dsChange, dsMatchModeChange, dsClear, and dsActiveFilterChange report intent without changing those inputs; the application applies query consequences and returns replacement values.",
-            "The visible trigger label stays singular Filter without appending an active-count suffix. Active criteria promote only the visible label from secondary to primary, matching the other table caption controls without redefining generic button active semantics.",
+            "The visible trigger label stays singular Filter without appending an active-count suffix. Active criteria retain the same neutral label and icon colors.",
             "The popup reserves a visually empty footer row inside the category pane for every state. Active criteria reveal its divider and only a left-aligned Clear action, without adding popup height or showing redundant selected-count copy; the option pane retains its full column.",
             "Every multiple-choice category exposes a right-pane footer where the blue any or all word toggles its controlled match mode. any is the default OR mode; the application applies the requested mode to its query.",
             "Every non-date category exposes a 40px secondary-background search header that filters its displayed option labels and descriptions without changing controlled filter values. Date retains only its Relative and Range header.",
             "Date categories use the shared compact-header Range and Relative experience. Persist relative values semantically and resolve them from the product's current date whenever rows or saved views are applied.",
-            "Popup visibility follows the same mutable open and dsOpenChange contract as ds-filter-menu."
+            "Popup visibility follows the same mutable open and dsOpenChange contract as ds-filter-menu.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron.",
+            "Selected views and applied filters do not promote trigger icon or label colors. Trigger colors remain neutral across value changes.",
+            "Apply-required filtering stages edits locally, including match mode. Clear immediately clears all filters and discards pending edits. The footer appears when filters are selected or applied; Apply stays in place and inactive without pending changes; applying emits controlled changes. Closing discards unapplied edits."
           ],
           "responsiveBehavior": [
             "Place the control in the trailing region of ds-table-toolbar.",
-            "Inside a named ds-table container narrower than 900px, the trigger becomes icon-only, exposes its visible label through a hover and keyboard-focus tooltip, and active criteria promote the Filters icon to primary."
+            "Inside a named ds-table container narrower than 900px, the trigger becomes icon-only, exposes its visible label through a hover and keyboard-focus tooltip, and the Filters icon remains neutral with active criteria."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -10662,6 +11542,10 @@
             "type": "FilterMenuFilter[]",
             "required": false
           },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": false
@@ -10785,7 +11669,11 @@
             "options and grouping are controlled. A data option may supply product-owned orderOptions; otherwise Order defaults to Ascending and Descending. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
             "Selecting a new data point starts at its first custom order option, or ascending when it has no custom order options. Re-selecting the active data point preserves its complete order state.",
             "Selecting a data point or direction applies immediately and leaves the dialog open so the other pane can be changed.",
-            "The grouping picker automatically holds the shared surface-open wash through exit. Opening this picker is separate from expanding an inline table group."
+            "The grouping picker automatically holds the shared surface-open wash through exit. Opening this picker is separate from expanding an inline table group.",
+            "Embedded mode renders the same controlled content inside a parent-owned surface; the parent owns positioning, initial focus, Escape, Tab exit, and dismissal.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron.",
+            "Vertical presentation stacks grouping data and ordering, with an explicit No grouping choice and no Clear footer."
           ],
           "responsiveBehavior": [
             "Use in the trailing region of ds-table-toolbar.",
@@ -10827,6 +11715,10 @@
             "type": "string",
             "required": false
           },
+          "embedded": {
+            "type": "boolean",
+            "required": false
+          },
           "emptyMessage": {
             "type": "string",
             "required": false
@@ -10835,6 +11727,10 @@
             "type": "TableGroupingState | null",
             "required": false
           },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
           "open": {
             "type": "boolean",
             "required": false
@@ -10842,6 +11738,10 @@
           "options": {
             "type": "TableGroupOption[]",
             "required": false
+          },
+          "vertical": {
+            "type": "boolean",
+            "required": false
           }
         },
         "events": [
@@ -10877,6 +11777,183 @@
         "text"
       ]
     },
+    {
+      "name": "table-preferences",
+      "title": "TablePreferences",
+      "description": "Compact table preferences dialog with Filters, Sort, Group, and Customize tabs.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/table-preferences",
+        "source": "src/wc/components/TablePreferences/TablePreferences.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Compact table preferences dialog with Filters, Sort, Group, and Customize tabs.",
+          "useWhen": [
+            "A narrow table toolbar or a user preference calls for one result-shaping control."
+          ],
+          "avoidWhen": [
+            "The application needs unrelated actions or a submitted form."
+          ],
+          "states": [
+            "The application owns all filter, sort, grouping, and column configuration values. Apply emitted changes to the table and replace the matching preferences inputs.",
+            "The component owns popup visibility, active tab, positioning, and dismissal; embedded controls reuse the same content as their standalone popups.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "Apply-required filtering stages edits locally, including match mode. Clear immediately clears all filters and discards pending edits. The footer appears when filters are selected or applied; Apply stays in place and inactive without pending changes; applying emits controlled changes. Closing discards unapplied edits.",
+            "Embedded presentation delegates its active tab, draft state, Apply, Reset, and dismissal to the owning panel; it renders vertical filter and grouping content without a popup trigger."
+          ],
+          "accessibility": [
+            "An icon-only Preferences trigger opens a named dialog. TabGroup owns section keyboard navigation; Escape and outside activation dismiss, returning focus to the trigger."
+          ],
+          "responsiveBehavior": [
+            "The popup fits the viewport and scrolls internally. The application chooses whether to show it instead of separate controls. Hide the table-owned Customize trigger while retaining column customization."
+          ],
+          "patterns": [],
+          "commonlyComposedWith": [
+            "component:ds-table",
+            "component:ds-table-toolbar",
+            "component:ds-filter-menu",
+            "component:ds-menu",
+            "component:ds-table-group",
+            "component:ds-tab-group"
+          ]
+        },
+        "props": {
+          "activeFilterId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "activeTab": {
+            "type": "PreferencesTab",
+            "required": false
+          },
+          "columnOrder": {
+            "type": "string[]",
+            "required": false
+          },
+          "columns": {
+            "type": "TableColumn[]",
+            "required": false
+          },
+          "customizeOptions": {
+            "type": "MenuItemData[]",
+            "required": false
+          },
+          "customizeSections": {
+            "type": "MenuSection[]",
+            "required": false
+          },
+          "embedded": {
+            "type": "boolean",
+            "required": false
+          },
+          "filters": {
+            "type": "FilterMenuFilter[]",
+            "required": false
+          },
+          "grouping": {
+            "type": "TableGroupingState | null",
+            "required": false
+          },
+          "groupingOptions": {
+            "type": "TableGroupOption[]",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "hiddenColumnIds": {
+            "type": "string[]",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "matchModes": {
+            "type": "FilterMenuMatchModes",
+            "required": false
+          },
+          "sort": {
+            "type": "TableSortState | null",
+            "required": false
+          },
+          "sortColumns": {
+            "type": "TableColumn[]",
+            "required": false
+          },
+          "values": {
+            "type": "FilterMenuValues",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsActiveFilterChange",
+            "detail": "string"
+          },
+          {
+            "name": "dsColumnsConfigChange",
+            "detail": "TableColumnsConfigChangeDetail"
+          },
+          {
+            "name": "dsCustomizeOptionChange",
+            "detail": "string"
+          },
+          {
+            "name": "dsFilterChange",
+            "detail": "FilterMenuChangeDetail"
+          },
+          {
+            "name": "dsFilterMatchModeChange",
+            "detail": "FilterMenuMatchModeChangeDetail"
+          },
+          {
+            "name": "dsFiltersClear",
+            "detail": "void"
+          },
+          {
+            "name": "dsGroupChange",
+            "detail": "TableGroupingState"
+          },
+          {
+            "name": "dsGroupClear",
+            "detail": "void"
+          },
+          {
+            "name": "dsPreferencesTabChange",
+            "detail": "PreferencesTab"
+          },
+          {
+            "name": "dsSortChange",
+            "detail": "TableSortChangeDetail"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-table-preferences",
+          "react": "DsTablePreferences",
+          "vue": "DsTablePreferences",
+          "angular": "DsTablePreferences"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "button-unfilled",
+        "filter-menu",
+        "menu",
+        "tab-group",
+        "table-group",
+        "tooltip"
+      ]
+    },
     {
       "name": "table-saved-views",
       "title": "TableSavedViews",
@@ -10905,7 +11982,8 @@
             "component:ds-table",
             "component:ds-select",
             "component:ds-menu",
-            "component:ds-modal"
+            "component:ds-modal",
+            "component:ds-field"
           ],
           "patterns": [
             "pattern:menu-trigger"
@@ -10913,17 +11991,22 @@
           "accessibility": [
             "The primary control retains combobox semantics and exposes a direct accessible name.",
             "Each custom view exposes a separately named options trigger. The options menu supports keyboard navigation and returns focus through the shared Select and Menu behavior.",
-            "The naming dialog traps focus through Modal behavior, associates validation text with the input through Field, and restores focus to the saved-views control after closing."
+            "The naming dialog traps focus through Modal behavior. The dialog heading names the task, so the name field omits a visible label; the input keeps aria-label Name, Field associates validation text, and focus returns to the saved-views control after closing.",
+            "Footer actions are assigned with slot=\"footer\" on each button so Modal owns the two-action layout."
           ],
           "states": [
             "views, value, and dirty are controlled. Dirty state is presented only for a selected custom view; the default template never shows the trigger dot or save/discard actions even if dirty is supplied. Selection, create, save, discard, rename, and remove events communicate intent and never mutate application records.",
             "The component owns only transient interaction state: the contextual menu, naming dialog, draft name, duplicate-name validation, and focus restoration.",
             "The default view is a non-editable template. Application-owned custom views appear in a separate section with Rename and Remove actions. New view opens the naming dialog. When an editable selected view is dirty, that view row shows Save and negative Discard supporting actions while the footer remains dedicated to New view. The application decides which table state to capture, restore, and persist.",
-            "The built-in picker and contextual option menu each retain their own surface-open treatment. Opening a view menu does not select that view."
+            "The built-in picker and contextual option menu each retain their own surface-open treatment. Opening a view menu does not select that view.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron.",
+            "Selected views and applied filters do not promote trigger icon or label colors. Trigger colors remain neutral across value changes."
           ],
           "responsiveBehavior": [
             "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior. Its trigger hugs short view names and is capped at the compact menu-width token so long names truncate while the dirty dot stays visible. Its choice popup keeps that same token as the minimum width.",
-            "Place it in the start region of ds-table-toolbar so the middle region can keep left-side and right-side controls on one spanning cluster."
+            "Place it in the start region of ds-table-toolbar so the middle region can keep left-side and right-side controls on one spanning cluster.",
+            "The ViewMenu prefix identifies saved views. Compact compositions and narrow table captions show only the icon while retaining the accessible name and tooltip."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -10952,6 +12035,10 @@
           ]
         },
         "props": {
+          "compact": {
+            "type": "boolean",
+            "required": false
+          },
           "createLabel": {
             "type": "string",
             "required": false
@@ -10968,6 +12055,10 @@
             "type": "boolean",
             "required": false
           },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": false
@@ -11069,7 +12160,7 @@
             "Typing slash opens the field listbox without inserting slash into the table query. Text typed while it is open filters data points by complete label, Up and Down change the active match, Enter selects it, Escape closes it, and Left and Right retain native text-cursor behavior because focus never leaves the input. Backspace edits the field-picker query first and closes the listbox when that query is empty.",
             "The query disables browser autocomplete history, automatic capitalization, autocorrection, and spellchecking so browser-owned suggestions never obscure the product-owned field menu or table results.",
             "Selected field Chips have individually labeled remove actions and are also described by the search input. Polite announcements report additions, removals, and clearing without duplicating the visible query.",
-            "The slash suffix is a labeled double-inset md button excluded from sequential keyboard navigation; the search input exposes the same action through aria-keyshortcuts and its description.",
+            "The search input exposes the slash command through aria-keyshortcuts and its description, without a visible suffix button.",
             "The clear action removes both free text and every selected field. It restores focus to the search input; each Chip's own remove action remains scoped to that field."
           ],
           "states": [
@@ -11079,12 +12170,13 @@
             "Backspace edits a non-empty field-picker query, then closes the open slash listbox when that query is empty. When the table query is empty and the listbox is already closed, the next Backspace removes the last selected field. Ordinary Backspace edits table query text when the listbox is closed.",
             "Duplicate, blank, and unknown field identities are ignored for presentation. Selected fields preserve the consumer's order.",
             "Inactive search leaves the tab order, closes the field listbox, and does not emit query or field changes.",
-            "The field-picker action holds the shared surface-open wash while its listbox is visible; chosen search fields remain independent."
+            "The field-picker action holds the shared surface-open wash while its listbox is visible; chosen search fields remain independent.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback."
           ],
           "responsiveBehavior": [
             "The control fills the available inline size supplied by the table toolbar search slot. Selected Chips and the editable query share one horizontal editor lane so the md control does not grow vertically.",
             "The field popup enters the top layer, aligns its first choice cell with the search control, flips or clamps to the viewport or nearest overlay boundary, and scrolls internally when its catalog is taller than available space.",
-            "Long selected field labels truncate inside their Chips while the input remains available at the inline end of the editor lane. Both suffix actions resolve to the same 24px height as selected Chips. Clear follows the standard md Input recipe—a non-inset sm icon button—while slash is a double-inset md label button. Slash remains rightmost; when query text exposes Clear, a vertical divider separates the two actions."
+            "Clear appears when query text is present and uses the standard sm icon button treatment."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -11130,6 +12222,10 @@
             "type": "string",
             "required": false
           },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
           "isInactive": {
             "type": "boolean",
             "required": false
@@ -11177,7 +12273,6 @@
       "registryDependencies": [
         "button-unfilled",
         "chip",
-        "divider",
         "empty-state",
         "icon",
         "text"
@@ -11235,7 +12330,9 @@
             "Selecting a different data field keeps the current direction, or starts ascending when no sort exists. Selecting a direction applies it to the current field, or to the first sortable field when no sort exists. Selecting the already-active field or direction is a no-op and does not toggle the way a header click does.",
             "The trigger stays Sort in regular-weight resting secondary chrome. Field and direction selection live in the menu and on column headers, so the trigger never uses active primary emphasis. It keeps pressed interaction paint without physically scaling inside the stable table caption row.",
             "Compound sortable headers contribute one Data row per segment. Action columns never appear.",
-            "The trigger automatically holds the shared surface-open wash through menu exit while the selected sort remains independently controlled."
+            "The trigger automatically holds the shared surface-open wash through menu exit while the selected sort remains independently controlled.",
+            "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
+            "Expanded toolbar triggers use an icon and regular-weight text without a trailing chevron."
           ],
           "responsiveBehavior": [
             "Place the control in the trailing region of ds-table-toolbar with Filter and Group.",
@@ -11277,6 +12374,10 @@
             "type": "TableColumn[]",
             "required": false
           },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
           "sort": {
             "type": "TableSortState | null",
             "required": false
@@ -11338,7 +12439,8 @@
             "component:ds-table-group",
             "component:ds-select",
             "component:ds-table-sort",
-            "component:ds-button-unfilled"
+            "component:ds-button-unfilled",
+            "component:ds-table-preferences"
           ],
           "patterns": [],
           "accessibility": [
@@ -11349,14 +12451,15 @@
           "states": [
             "The component owns layout only. It never mutates slotted control props, values, menus, loading, persistence, or consequences. Use ds-table-saved-views and ds-table-filter when those interactions need the shared CompoMo behavior while application data and persistence remain external.",
             "Buttons in the toolbar keep their hover and pressed interaction paint without physically scaling, so pointer feedback does not disturb the stable caption geometry.",
-            "The start cluster is followed by a decorative vertical divider, then Search, optional leading controls, and one trailing action cluster. The start cluster and divider hide when nothing is projected. Search is a dedicated slot that hides when nothing is projected and grows to consume available row space. Empty leading or trailing clusters add no placeholder chrome. Search is the only toolbar region that grows and shrinks; all action controls retain their control geometry and align directly before the table-owned actions.",
-            "Column customizer and data-mode switching stay table-owned caption actions. Do not recreate those menus in the toolbar. When slotted into a table header, the table caption owns overflow for the complete toolbar and table-owned action row."
+            "The start cluster is followed by Search, optional leading controls, and one trailing action cluster. The start cluster hides when nothing is projected. Search is a dedicated slot that hides when nothing is projected and grows to consume available row space. Empty leading or trailing clusters add no placeholder chrome. Search is the only toolbar region that grows and shrinks; all action controls retain their control geometry and align directly before the table-owned actions.",
+            "Data-mode switching remains a table-owned caption action. Column customization normally uses the table caption trigger; compact compositions use the shared ds-table-preferences control and hide that trigger. When slotted into a table header, the table caption owns overflow for the complete toolbar and table-owned action row.",
+            "Standard toolbars omit region dividers. Borderless compositions show dividers after populated start and search regions when another region follows; the application supplies borderless controls."
           ],
           "responsiveBehavior": [
             "The start cluster, search, trailing Filter/Sort/Group, and table caption trailing actions stay on one line. Saved views hug their current trigger content up to the compact menu-width token rather than reserving that full width; long names truncate while the dirty dot stays visible. Filter, Sort, and Group triggers cap at the same token, and Sort and Group popups keep that compact menu-width floor. A standalone toolbar owns its horizontal scrolling; inside a table, the complete caption row is the single overflow owner so table-owned actions never remain pinned over scrolling toolbar controls.",
-            "Search consumes the row space left between fixed control groups and flexes smaller when the complete row needs space. Inside a named ds-table container narrower than 900px, ds-table-filter, ds-table-group, and ds-table-sort omit their labels and chevrons; each exposes its label through a hover and keyboard-focus tooltip. Empty leading and trailing slot groups do not add spacing. Active filtering promotes its prefix icon to primary. Group and Sort keep resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width with the same tooltip behavior.",
+            "Search consumes the row space left between fixed control groups and flexes smaller when the complete row needs space. Inside a named ds-table container narrower than 900px, ds-table-filter, ds-table-group, and ds-table-sort omit their labels and chevrons; each exposes its label through a hover and keyboard-focus tooltip. Empty leading and trailing slot groups do not add spacing. Active filtering retains neutral trigger colors. Group and Sort keep resting secondary chrome. Table-owned Customize also becomes the icon-only Table menu button at that width with the same tooltip behavior.",
             "The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
-            "Trailing controls remain grouped after leading controls; the toolbar does not collapse controls into an application-specific overflow menu."
+            "For compact toolbars, the application can replace Filter, Sort, Group and the table Customize trigger with ds-table-preferences in the trailing slot. Share the same controlled values and events; the toolbar remains a data-agnostic layout."
           ],
           "frameworkCaveats": {
             "customElements": [
@@ -11381,6 +12484,10 @@
           ]
         },
         "props": {
+          "borderless": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": false
@@ -11794,7 +12901,7 @@
             "The default four visible rows can be changed with rows; rows is clamped to at least one.",
             "Vertical resizing is enabled by default and can be disabled when the surrounding layout owns the field height.",
             "Size changes typography and inset spacing without changing the authored row count.",
-            "Border, focus, error, placeholder, inactive, hover, and pressed treatments follow the same shared recipes as Input."
+            "Border, focus, error, placeholder, inactive, hover, and pressed treatments follow the same shared recipes as Input. When hasBorder is false, supporting error copy insets to the text origin rather than the resting border box."
           ],
           "responsiveBehavior": [
             "Textarea fills its parent by default and follows the width supplied by Field or the form layout.",
@@ -11952,6 +13059,122 @@
         "text"
       ]
     },
+    {
+      "name": "time-picker",
+      "title": "TimePicker",
+      "description": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/time-picker",
+        "source": "src/wc/components/TimePicker/TimePicker.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+          "useWhen": [
+            "A user picks a clock time from hour, minute, and AM/PM lists.",
+            "A time field needs 32px clock tiles that match calendar day geometry and the shared choice-list selected treatment."
+          ],
+          "avoidWhen": [
+            "The user types a time without opening a picker; the owning field keeps that editable value.",
+            "The value is a calendar date rather than a clock time.",
+            "The user chooses from a finite set of named schedule options rather than an exact time."
+          ],
+          "alternatives": [
+            {
+              "when": "The time is a form field that can be typed or picked.",
+              "component": "component:ds-input-time",
+              "reason": "InputTime owns the editable field, form association, and the time-picker popup."
+            },
+            {
+              "when": "The value is a calendar date.",
+              "component": "component:ds-calendar",
+              "reason": "Calendar owns the month grid for single dates and ranges."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-input-time",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "Hour, minute, and AM/PM are separate labelled listboxes without visible column headings. Each list keeps one tab stop on the selected option.",
+            "Arrow keys move to the next or previous option and stop at the first and last values; they do not wrap. Home and End jump to those ends. Left and Right move between columns and stop at Hour and AM/PM.",
+            "Inactive pickers disable every option. Optional min and max times disable combinations outside that inclusive bound."
+          ],
+          "states": [
+            "Selected hour, minute, and period tiles use the shared interaction-fill selected wash and primary text. Resting tiles use secondary text on a transparent 32px square.",
+            "Lists are finite. Hour runs 1 through 12, minutes follow the step, and AM/PM has two values. Scrolling and keyboard movement stop at those ends instead of looping.",
+            "An empty value highlights 12:00 AM so the lists have a resting selection without inventing a second empty state."
+          ],
+          "responsiveBehavior": [
+            "The three columns fill the width supplied by the owner. Tile size, 4px gaps, and the seven-tile list viewport are owned here; the owner supplies the popup or pane width."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Listen for dsChange. The detail is the clock time string HH:MM."
+            ],
+            "react": [
+              "Use DsTimePicker, bind value, and handle onDsChange."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/TimePicker/TimePicker.stories.ts"
+            }
+          ]
+        },
+        "props": {
+          "autoFocus": {
+            "type": "boolean",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "max": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "min": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "step": {
+            "type": "string | number",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-time-picker",
+          "react": "DsTimePicker",
+          "vue": "DsTimePicker",
+          "angular": "DsTimePicker"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
     {
       "name": "toast",
       "title": "Toast",