@ds-mo/ui 14.35.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,104 +2713,231 @@
       ]
     },
     {
-      "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": [],
         "exports": {
@@ -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."
           ],
@@ -4840,7 +5190,7 @@
       ],
       "registryDependencies": [
         "badge",
-        "button-unfilled",
+        "calendar",
         "checkbox",
         "empty-state",
         "icon",
@@ -4947,129 +5297,625 @@
             "type": "IconColor",
             "required": false
           },
-          "label": {
+          "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": "Cross-browser form and accessibility coverage",
+              "path": "tests/e2e/forms.spec.ts"
+            }
+          ]
+        },
+        "props": {
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "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",
@@ -5078,14 +5924,6 @@
           ]
         },
         "props": {
-          "ariaActiveDescendant": {
-            "type": "string | undefined",
-            "required": false
-          },
-          "ariaControls": {
-            "type": "string | undefined",
-            "required": false
-          },
           "ariaDescribedby": {
             "type": "string | undefined",
             "required": false
@@ -5098,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
@@ -5138,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
           },
@@ -5183,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": {
@@ -5203,7 +6009,7 @@
             "required": false
           },
           "width": {
-            "type": "InputWidth",
+            "type": "InputTimeWidth",
             "required": false
           }
         },
@@ -5211,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"
       ]
     },
     {
@@ -8414,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.",
@@ -8428,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.",
@@ -8445,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.",
@@ -8454,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.",
@@ -8574,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
@@ -8626,6 +9437,10 @@
             "type": "string",
             "required": false
           },
+          "rounded": {
+            "type": "boolean",
+            "required": false
+          },
           "searchPlaceholder": {
             "type": "string",
             "required": false
@@ -11167,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"
@@ -11175,7 +11991,8 @@
           "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.",
@@ -12084,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.",
@@ -12242,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",