@ds-mo/ui 15.2.0 → 15.4.0

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

@@ -12,8 +12,8 @@
     "themeSetup": "Set data-theme=\"dark\" on <html> for dark mode. Light is default.",
     "peerDependencies": {
       "required": [
-        "@ds-mo/tokens ^6.5.1",
-        "@ds-mo/icons ^8.1.0"
+        "@ds-mo/tokens ^6.6.1",
+        "@ds-mo/icons ^8.1.1"
       ],
       "optional": [],
       "frameworks": "None required for Custom Elements; generated React, Vue, and Angular adapters are included."
@@ -1346,7 +1346,7 @@
             }
           ],
           "styling": {
-            "rationale": "The host participates in shell-owned layout; internal tabs and chrome own their recipes.",
+            "rationale": "The host participates in ShellApp-owned layout; ShellApp owns the shared Chrome base and wash while BarNav owns Chrome foreground, border, and interaction recipes.",
             "protected": [],
             "customProperties": []
           }
@@ -2862,7 +2862,7 @@
             "General content UI keeps the selected interaction fill and border for pressed or active emphasis.",
             "Shell, navigation, and tool-rail composites use isActive with primary foreground across the complete control and no selected fill or border.",
             "The omitted default surface treatment is for primary and secondary parent surfaces and uses the brand-active selected fill; pass faint explicitly on faint surfaces to use the neutral active fill.",
-            "Surface context must match the actual parent surface; translucent, inverted, media, and always-dark treatments are reserved for those surfaces.",
+            "Surface context must match the actual parent surface; chrome, translucent, inverted, media, and always-dark treatments are reserved for those surfaces. The chrome variant uses the chrome foreground, border, and interaction families and does not paint the parent surface.",
             "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
             "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, or interaction semantics.",
             "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.",
@@ -3923,7 +3923,7 @@
     {
       "name": "card-setting",
       "title": "CardSetting",
-      "description": "Persistent settings-section surface with a heading, controlled view/edit chrome, fixed edit-save-cancel actions, and application-owned body content.",
+      "description": "Persistent settings-section surface with a heading, optional controlled edit chrome, and application-owned body content.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -3934,17 +3934,17 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Persistent settings-section surface with a heading, controlled view/edit chrome, fixed edit-save-cancel actions, and application-owned body content.",
+          "summary": "Persistent settings-section surface with a heading, optional controlled edit chrome, and application-owned body content.",
           "useWhen": [
             "A settings page needs a persistent section that switches between read-only and editable content.",
             "The parent can control one active editing section and owns validation, persistence, cancellation, and body content.",
-            "The section uses the standard Pencil, Save, and Cancel header workflow."
+            "The section uses the standard Pencil, Save, and Cancel header workflow.",
+            "Settings apply immediately through their own controls and share the standard section surface without edit, save, or cancel actions."
           ],
           "avoidWhen": [
             "The surface contains a chart, legend, metric visualization, or other data-visualization composition.",
             "The content is a general-purpose read-only card with no settings edit workflow.",
             "The task must block the rest of the interface or requires confirmation in a modal.",
-            "Several sections must remain editable at the same time.",
             "The header requires custom actions beyond the fixed edit-save-cancel workflow."
           ],
           "alternatives": [
@@ -3969,7 +3969,11 @@
             "component:ds-input",
             "component:ds-select",
             "component:ds-switch",
-            "component:ds-text"
+            "component:ds-text",
+            "component:ds-setting-row-toggle",
+            "component:ds-setting-row-radio",
+            "component:ds-setting-row-checkbox",
+            "component:ds-inline-banner-settings"
           ],
           "accessibility": [
             "Provide a concise heading that identifies the settings section; CardSetting renders it as an h2.",
@@ -3984,25 +3988,30 @@
             "The editing property is controlled; CardSetting never changes it internally.",
             "dsAction emits edit, save, or cancel with the original pointer event. The parent decides whether and when editing changes.",
             "When another section requests edit, the parent keeps one active section and resolves any dirty current section before switching.",
+            "Project persistent informational copy into the banner slot so it sits above the padded content body and does not receive content-area padding.",
             "The parent owns read-only versus editable body composition, dirty state, validation, persistence, loading, success, and error consequences.",
             "A save request keeps the section editing while validation or persistence is pending; the parent exits only after success.",
-            "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing."
+            "A cancel request does not persist changes; the parent restores its chosen value snapshot and exits editing.",
+            "The immediate variant keeps the resting card surface and omits header actions even if editing is supplied. The application applies and persists each control change independently."
           ],
           "responsiveBehavior": [
-            "Choose sm, md, or lg from the parent layout; each width uses its matching token-based minimum height.",
+            "Choose sm, md, or lg from the parent layout. Empty editable cards use the matching minimum height. Cards with body content, and immediate cards, fit that content.",
             "The surface never exceeds its parent width, while the parent owns wrapping, columns, stacking, and breakpoint changes.",
             "At narrow widths, keep the fixed header actions visible and let application-owned body layouts collapse before allowing horizontal overflow."
           ],
           "frameworkCaveats": {
             "customElements": [
+              "Project ds-inline-banner-settings with slot=\"banner\". Leave setting rows and other controls in the default slot.",
               "Set editing as a JavaScript property and inspect dsAction.detail.action before updating the controlled state.",
               "When one section emits edit, update every sibling CardSetting so only the requested section remains editing."
             ],
             "react": [
+              "Pass slot=\"banner\" on ds-inline-banner-settings. Leave setting rows and other controls in the default slot.",
               "Pass editing from parent state and inspect onDsAction event detail; do not treat Save as successful until validation and persistence complete.",
               "Store one active section id and derive each CardSetting editing prop from that id."
             ],
             "angular": [
+              "Set slot=\"banner\" on ds-inline-banner-settings. Leave setting rows and other controls in the default slot.",
               "Bind [editing] and inspect $event.detail.action from (dsAction); do not treat Save as successful until validation and persistence complete.",
               "Store one active section id and derive each CardSetting editing binding from that id."
             ]
@@ -4037,14 +4046,22 @@
                 "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
                 "props": []
               },
+              {
+                "properties": [
+                  "padding"
+                ],
+                "reason": "Content-area padding-block belongs on the body. The banner slot sits above that padding and does not receive it.",
+                "props": []
+              },
               {
                 "properties": [
                   "width",
                   "min-height"
                 ],
-                "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+                "reason": "Card width selects the component geometry. Empty editable cards keep the matching minimum height; cards with body content and immediate cards fit that content. Let the parent constrain available space.",
                 "props": [
-                  "cardWidth"
+                  "cardWidth",
+                  "variant"
                 ]
               }
             ],
@@ -4075,6 +4092,10 @@
           "saveLabel": {
             "type": "string",
             "required": false
+          },
+          "variant": {
+            "type": "CardSettingVariant",
+            "required": false
           }
         },
         "events": [
@@ -4570,7 +4591,8 @@
             "The initial checked and indeterminate values are restored by native form reset; checked values submit under name and unchecked values submit nothing.",
             "Sizes are lg with a 20px box in a 24px placement, md with a 16px box in a 20px placement, sm with a 12px box in a 16px placement, and xs with an 8px box in a 12px placement.",
             "Presentation mode removes checkbox semantics, focus, interaction, label rendering, description rendering, and form submission while preserving the visual state.",
-            "Description-rich checkboxes grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy."
+            "Description-rich checkboxes grow beyond the fixed density height while retaining its minimum target size and align the checkbox placement with the primary label line.",
+            "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when the checkbox itself is presented as a choice-list row."
           ],
           "responsiveBehavior": [
             "Choose size from the density of the containing row; labels and descriptions may wrap while the placement box stays fixed.",
@@ -4631,7 +4653,8 @@
                 "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
                 "props": [
                   "size",
-                  "presentation"
+                  "presentation",
+                  "hasInteractionFill"
                 ]
               }
             ],
@@ -4651,6 +4674,10 @@
             "type": "boolean",
             "required": false
           },
+          "hasInteractionFill": {
+            "type": "boolean",
+            "required": false
+          },
           "indeterminate": {
             "type": "boolean",
             "required": false
@@ -4710,6 +4737,140 @@
         "text"
       ]
     },
+    {
+      "name": "checkbox-group",
+      "title": "CheckboxGroup",
+      "description": "A visible, accessible label and shared vertical rhythm for a list of independent Checkbox controls.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/checkbox-group",
+        "source": "src/wc/components/CheckboxGroup/CheckboxGroup.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "A visible, accessible label and shared vertical rhythm for a list of independent Checkbox controls.",
+          "useWhen": [
+            "Two or more related checkboxes need one visible group label in a form.",
+            "A checkbox list should use the same density-aligned heading geometry as other compact option lists."
+          ],
+          "avoidWhen": [
+            "Only one standalone checkbox is needed.",
+            "Exactly one option may be selected; use Radio instead.",
+            "The list is a settings-card row; use component:ds-setting-row-checkbox, which owns the heading and view/edit presentation."
+          ],
+          "alternatives": [
+            {
+              "when": "Exactly one option may be selected.",
+              "component": "component:ds-radio",
+              "reason": "Radio owns mutually exclusive selection and keyboard traversal."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-checkbox",
+            "component:ds-text",
+            "component:ds-setting-row-checkbox"
+          ],
+          "accessibility": [
+            "The visible label names the role=group container; each slotted Checkbox keeps its own visible label, state, focus, and form value.",
+            "Inside ds-setting-row-checkbox the visible form label is omitted on first paint; the row heading is the accessible name via aria-labelledby.",
+            "Use aria-describedby to associate group-level guidance or validation copy.",
+            "Use the same size on CheckboxGroup and every slotted Checkbox so their text origins and density remain aligned."
+          ],
+          "states": [
+            "The label uses the shared density section-heading row and body-small emphasis.",
+            "Vertical checkbox options use a 4px gap; at medium density the group label and each single-line checkbox row are 32px high.",
+            "Selection, mixed, inactive, validation, and form behavior remain owned by each slotted Checkbox."
+          ],
+          "responsiveBehavior": [
+            "The group fills the width supplied by its parent while each Checkbox keeps its intrinsic row width and allows copy to wrap."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Slot two or more ds-checkbox children and keep their name, value, and checked state application-owned."
+            ],
+            "react": [
+              "Compose DsCheckbox children inside DsCheckboxGroup."
+            ],
+            "vue": [
+              "Compose DsCheckbox children inside DsCheckboxGroup."
+            ],
+            "angular": [
+              "Compose generated DsCheckbox adapters inside DsCheckboxGroup."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/CheckboxGroup/CheckboxGroup.stories.ts"
+            },
+            {
+              "label": "Rendered form geometry coverage",
+              "path": "tests/e2e/forms.spec.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The group owns only its label and option-list rhythm; each Checkbox owns its own selection anatomy.",
+            "protected": [
+              {
+                "properties": [
+                  "gap",
+                  "padding",
+                  "font",
+                  "font-size",
+                  "font-weight",
+                  "line-height"
+                ],
+                "reason": "Use size to keep the heading and slotted controls on the shared density recipe.",
+                "props": [
+                  "size"
+                ]
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "size": {
+            "type": "CheckboxGroupSize",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-checkbox-group",
+          "react": "DsCheckboxGroup",
+          "vue": "DsCheckboxGroup",
+          "angular": "DsCheckboxGroup"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
     {
       "name": "chip",
       "title": "Chip",
@@ -6856,7 +7017,7 @@
     {
       "name": "empty-state",
       "title": "EmptyState",
-      "description": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+      "description": "Centered empty-content message with optional consumer-owned recovery actions.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -6867,16 +7028,16 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+          "summary": "Centered empty-content message with optional consumer-owned recovery actions.",
           "useWhen": [
             "A bounded content area is in a first-use, no-content, filtered no-results, or no-access state and needs a calm explanatory message tailored to that cause.",
             "A prominent empty region benefits from a decorative icon, visual title, and supporting body copy.",
-            "A compact owner such as a Select popup needs only centered body copy."
+            "A compact owner such as a Select popup needs only centered body copy.",
+            "An empty region needs a concise recovery action that helps the user reveal or create content."
           ],
           "avoidWhen": [
             "Content is still loading; use Skeleton for predictable structure or Loader for an indeterminate operation.",
             "The state is an error, warning, or confirmation that needs semantic intent and announcement from the owning workflow.",
-            "The state needs a recovery action, link, or other interactive content; the current EmptyState pattern is intentionally message-only.",
             "A decorative illustration, arbitrary rich content, or custom layout is required."
           ],
           "alternatives": [
@@ -6900,20 +7061,23 @@
             "component:ds-table",
             "component:ds-select",
             "component:ds-text",
-            "component:ds-icon"
+            "component:ds-icon",
+            "component:ds-button-unfilled"
           ],
           "accessibility": [
             "The optional icon is decorative; the title and body provide all meaning in text.",
             "EmptyState does not create a live region or alert automatically. The owner decides whether a dynamic transition requires announcement.",
             "The visual title does not impose a document heading level because the correct hierarchy belongs to the consuming page or region.",
-            "Keep localized body copy concise and sufficient when using the body-only variant."
+            "Keep localized body copy concise and sufficient when using the body-only variant.",
+            "Give recovery controls explicit accessible names and keep their behavior with the owning workflow."
           ],
           "states": [
             "Supported compositions are icon plus title plus body, title plus body, and body only; body copy is present in every supported composition.",
             "The decorative icon renders at xl in the primary foreground with an 8px gap before the text group and only when a title is also provided.",
             "The visual title uses title-small primary text; body uses body-medium secondary text with a 4px title-to-body gap.",
-            "All content is centered. The owner supplies container size and surrounding padding; repeated panel and master-detail owners should share one empty-region geometry instead of wrapping each EmptyState differently. Do not compose actions into or immediately alongside the current EmptyState pattern.",
-            "First-use, no-content, no-results, and no-access states reuse this primitive with cause-specific localized messages rather than visual variants."
+            "All content is centered. The owner supplies container size and surrounding padding; repeated panel and master-detail owners should share one empty-region geometry instead of wrapping each EmptyState differently.",
+            "First-use, no-content, no-results, and no-access states reuse this primitive with cause-specific localized messages rather than visual variants.",
+            "Recovery actions are optional. The consumer owns the action labels, control choice, and behavior; the component centers them below the message and wraps multiple actions when needed."
           ],
           "responsiveBehavior": [
             "The owner controls available width and height; text wraps naturally while remaining centered.",
@@ -6961,7 +7125,9 @@
           }
         },
         "events": [],
-        "slots": [],
+        "slots": [
+          "actions"
+        ],
         "exports": {
           "customElement": "ds-empty-state",
           "react": "DsEmptyState",
@@ -7034,7 +7200,8 @@
             "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.",
-            "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text."
+            "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text.",
+            "Input and Textarea contribute constraint messages and character counts to the supporting row. Helper text yields to an error, with the count at the opposite edge; a count alone begins at the text origin."
           ],
           "responsiveBehavior": [
             "Field fills the width supplied by its parent and makes the slotted control fill that field width.",
@@ -7601,10 +7768,125 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "inline-banner-settings",
+      "title": "InlineBannerSettings",
+      "description": "Compact non-interactive informational copy row for settings cards.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/inline-banner-settings",
+        "source": "src/wc/components/InlineBannerSettings/InlineBannerSettings.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "stable",
+          "summary": "Compact non-interactive informational copy row for settings cards.",
+          "useWhen": [
+            "A settings card needs persistent informational copy above its content.",
+            "The message should remain visible in both read-only and editing presentations of the settings card.",
+            "The message needs body-small typography, compact spacing, and a single tertiary bottom boundary."
+          ],
+          "avoidWhen": [
+            "The message belongs in general bounded content outside a settings card; reserve the general inline-banner component for that use case.",
+            "The message is application-wide or needs dismissal, actions, or announcement urgency; use Banner.",
+            "The message is transient or follows a completed action; use Toast."
+          ],
+          "alternatives": [
+            {
+              "when": "A persistent application-wide condition needs optional actions or dismissal.",
+              "component": "component:ds-banner",
+              "reason": "Banner owns shell-level messaging, actions, dismissal, and announcement behavior."
+            },
+            {
+              "when": "A field needs supporting or validation copy tied to its control.",
+              "component": "component:ds-field",
+              "reason": "Field owns the control relationship and supporting-message semantics."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-card-setting",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "Keep the description concise and authored; InlineBannerSettings does not transform, truncate, or announce the copy.",
+            "Use InlineBannerSettings for static context. Applications must choose a live-region component when a dynamic announcement is required.",
+            "The informational copy remains plain text and has no interactive controls or dismissal affordance."
+          ],
+          "states": [
+            "The description renders verbatim in every state in which the owning settings card projects the component.",
+            "The component has no internal visibility, editing, or dismissal state; the owning settings card controls whether it is present.",
+            "The content height is intrinsic: the banner contributes 8px block padding and its inner content container contributes 4px block padding. A single body-small line is 24px inside that container (4px + 16px line-height + 4px), followed by the tertiary bottom boundary."
+          ],
+          "responsiveBehavior": [
+            "The component fills the available inline size and lets body-small copy wrap naturally.",
+            "The effective inline inset remains 16px: 8px banner padding, 6px inner content padding, and 2px text-side padding."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Pass the complete authored message through description, assign slot=\"banner\" on CardSetting, and do not apply a CSS casing transform or mutate the text for presentation."
+            ],
+            "react": [
+              "Pass the complete authored message through the description prop, set slot=\"banner\" on CardSetting, and keep the component mounted for every settings-card state that needs the context."
+            ],
+            "angular": [
+              "Bind [description] from the settings card's stable copy source and project the component into CardSetting's banner slot for every state that needs the context."
+            ]
+          },
+          "references": [
+            {
+              "label": "Settings inline banner examples",
+              "path": "src/wc/components/InlineBannerSettings/InlineBannerSettings.stories.ts"
+            },
+            {
+              "label": "Rendered geometry coverage",
+              "path": "tests/e2e/inline-banner-settings.spec.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The component owns only the compact settings informational row recipe; its card owns the surrounding surface and layout.",
+            "protected": [
+              {
+                "properties": [
+                  "border-bottom",
+                  "color",
+                  "padding"
+                ],
+                "reason": "The component owns the readable informational row treatment and keeps its spacing consistent across settings cards.",
+                "props": []
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "description": {
+            "type": "string",
+            "required": true
+          }
+        },
+        "events": [],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-inline-banner-settings",
+          "react": "DsInlineBannerSettings",
+          "vue": "DsInlineBannerSettings",
+          "angular": "DsInlineBannerSettings"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "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.",
+      "description": "Form-associated text and number input with constraints, optional free-text suggestions, token entry, and character counts.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -7615,7 +7897,7 @@
         "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.",
+          "summary": "Form-associated text and number input with constraints, optional free-text suggestions, token entry, and character counts.",
           "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.",
@@ -7666,7 +7948,7 @@
             "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.",
+            "Optional number stepper actions are named buttons available to keyboard and assistive-technology users. The native spinbutton also retains arrow-key stepping; activating either button returns focus to the field.",
             "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."
           ],
@@ -7681,10 +7963,13 @@
             "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.",
+            "Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Optional borderless inset Plus and Minus buttons share the field density, appear in that order, disable independently at their numeric bound, and restore focus to the spinbutton after activation. Hide them when direct numeric entry is preferable; browser spinner chrome stays hidden.",
             "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."
+            "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts.",
+            "Length constraints validate both typed and programmatic values. By default excess text is retained and shown as an error; restrict mode uses a hard input limit. Counters show the draft length and maximum below the field, beside helper or error text when present.",
+            "Suggestions assist free text rather than constrain selection. Arrow keys highlight suggestions, Enter accepts one, and Escape dismisses the popup without changing the value.",
+            "Tokenized text and search fields use removable double-inset chips and commit trimmed, unique values with Enter or comma, accept delimited paste, and remove the last token with Backspace on an empty draft. Committed tokens submit as repeated entries; value remains the draft and must be committed before submission. Length and pattern constraints apply per token."
           ],
           "responsiveBehavior": [
             "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
@@ -7694,16 +7979,20 @@
           "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."
+              "Use the form attribute on the host when associating an input rendered outside its owning form.",
+              "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
             ],
             "react": [
-              "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear."
+              "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear.",
+              "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
             ],
             "vue": [
-              "Use DsInput with v-model for the value, and listen for dsChange and dsClear."
+              "Use DsInput with v-model for the value, and listen for dsChange and dsClear.",
+              "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
             ],
             "angular": [
-              "Import DsInput with TextValueAccessor when integrating with Angular Forms."
+              "Use TextValueAccessor for text inputs and NumericValueAccessor for a statically declared type=\"number\" input. Numeric forms receive numbers or null while the component event remains a string.",
+              "For tokenized input bind tokens and dsTokensChange explicitly; value and dsChange represent only the draft. Do not attach a scalar form value accessor to token mode."
             ]
           },
           "references": [
@@ -7797,6 +8086,10 @@
             "type": "string",
             "required": false
           },
+          "decrementLabel": {
+            "type": "string",
+            "required": false
+          },
           "disabled": {
             "type": "boolean",
             "required": false
@@ -7833,6 +8126,10 @@
             "type": "string | undefined",
             "required": false
           },
+          "incrementLabel": {
+            "type": "string",
+            "required": false
+          },
           "inputId": {
             "type": "string | undefined",
             "required": false
@@ -7845,18 +8142,38 @@
             "type": "boolean",
             "required": false
           },
+          "lengthBehavior": {
+            "type": "'error' | 'restrict'",
+            "required": false
+          },
           "max": {
             "type": "number | undefined",
             "required": false
           },
+          "maxLength": {
+            "type": "number | undefined",
+            "required": false
+          },
           "min": {
             "type": "number | undefined",
             "required": false
           },
+          "minLength": {
+            "type": "number | undefined",
+            "required": false
+          },
           "name": {
             "type": "string | undefined",
             "required": false
           },
+          "pattern": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "patternMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
           "placeholder": {
             "type": "string | undefined",
             "required": false
@@ -7865,6 +8182,10 @@
             "type": "boolean",
             "required": false
           },
+          "removeTokenLabel": {
+            "type": "string",
+            "required": false
+          },
           "required": {
             "type": "boolean",
             "required": false
@@ -7873,10 +8194,18 @@
             "type": "string",
             "required": false
           },
+          "showCharacterCount": {
+            "type": "boolean",
+            "required": false
+          },
           "showPasswordLabel": {
             "type": "string",
             "required": false
           },
+          "showStepper": {
+            "type": "boolean",
+            "required": false
+          },
           "size": {
             "type": "InputSize",
             "required": false
@@ -7885,10 +8214,22 @@
             "type": "number | undefined",
             "required": false
           },
+          "suggestions": {
+            "type": "string[]",
+            "required": false
+          },
           "textAlign": {
             "type": "InputTextAlign",
             "required": false
           },
+          "tokenized": {
+            "type": "boolean",
+            "required": false
+          },
+          "tokens": {
+            "type": "string[]",
+            "required": false
+          },
           "type": {
             "type": "InputType",
             "required": false
@@ -7910,6 +8251,14 @@
           {
             "name": "dsClear",
             "detail": "void"
+          },
+          {
+            "name": "dsSuggestionSelect",
+            "detail": "string"
+          },
+          {
+            "name": "dsTokensChange",
+            "detail": "string[]"
           }
         ],
         "slots": [],
@@ -7927,8 +8276,10 @@
       ],
       "registryDependencies": [
         "button-unfilled",
+        "chip",
         "divider",
         "icon",
+        "input",
         "text"
       ]
     },
@@ -8229,7 +8580,7 @@
             {
               "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."
+              "reason": "TimePicker owns the bounded clock lists and selected-tile treatment."
             },
             {
               "when": "The user chooses from a finite set of named times or cadences.",
@@ -8247,9 +8598,9 @@
           ],
           "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 HH:MM, H:MM, or a 12-hour label such as 9:00 AM.",
+            "The text field remains the keyboard and assistive-technology value control. Users can type HH:MM, H:MM, or a 12- or 24-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.",
+            "Filled values keep HH:MM as the form value. Visible text uses a 12- or 24-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."
           ],
@@ -8259,7 +8610,8 @@
             "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 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."
+            "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.",
+            "The default twelve-hour presentation includes AM/PM. Twenty-four-hour presentation uses hours 00–23 and omits the period column; both keep HH:MM form values and the same time bounds."
           ],
           "responsiveBehavior": [
             "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
@@ -8380,6 +8732,10 @@
             "type": "boolean",
             "required": false
           },
+          "hourFormat": {
+            "type": "'12' | '24'",
+            "required": false
+          },
           "inputId": {
             "type": "string | undefined",
             "required": false
@@ -8609,7 +8965,7 @@
           ],
           "alternatives": [
             {
-              "when": "One map entity needs operating state, heading, and stale treatment.",
+              "when": "One map entity needs operating state, bearing, and an optional dashed outline.",
               "component": "component:ds-map-entity-marker",
               "reason": "MapEntityMarker owns single-entity marker semantics and geometry."
             },
@@ -8722,7 +9078,7 @@
     {
       "name": "map-entity-marker",
       "title": "MapEntityMarker",
-      "description": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, heading, stale treatment, and a hover or focus caption.",
+      "description": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, bearing, an optional dashed outline, and a hover or focus caption.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -8733,7 +9089,7 @@
         "intent": {
           "audience": "general",
           "status": "experimental",
-          "summary": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, heading, stale treatment, and a hover or focus caption.",
+          "summary": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, bearing, an optional dashed outline, and a hover or focus caption.",
           "useWhen": [
             "An application map needs a consistent interactive marker for one entity.",
             "The map engine can mount a custom element and retain ownership of coordinates, anchoring, and camera behavior."
@@ -8758,14 +9114,14 @@
             "The component renders a native button and label is its accessible action name. Prefer an action-oriented label such as ‘Open vehicle 412’.",
             "Caption is a supplemental visual identifier and is hidden from assistive technology to avoid duplicating label.",
             "Keyboard focus reveals the same caption as hover and uses the shared visible focus ring.",
-            "State and stale meaning must be present in nearby map legend or application detail content; do not rely on marker color alone.",
-            "The stale outline remains differentiated by a dashed border in forced-colors mode."
+            "Operating-state and outline meaning must be present in nearby map legend or application detail content; do not rely on marker color alone.",
+            "The optional dashed outline remains differentiated by a dashed border in forced-colors mode."
           ],
           "states": [
-            "state selects the semantic operating-state color. Use stale as a standalone state only when no last-known operating state is available.",
-            "stale adds a dashed outline while preserving state, matching last-known map data.",
-            "immobilized always renders the upright MapKey glyph instead of the entity icon so the state is identifiable without interpreting heading.",
-            "heading rotates only MapEntityTravelGroup and MapEntityVehicle glyphs and is normalized to a clockwise value from 0 through 359 degrees. Immobilized, asset, person, and other glyphs remain upright.",
+            "Unknown represents unavailable current motion and uses the existing stale-background token. The application resolves stale telemetry to Unknown regardless of previous motion; a known Immobilized state takes precedence.",
+            "The dashed outline is an independent visual option. Unknown is solid unless the owner explicitly requests dashes.",
+            "immobilized always renders the upright MapKey glyph instead of the entity icon so the state is identifiable without interpreting bearing.",
+            "bearing rotates only MapEntityTravelGroup and MapEntityVehicle glyphs and is normalized to a clockwise value from 0 through 359 degrees. Immobilized, asset, person, and other glyphs remain upright.",
             "dimmed is visual de-emphasis only. The map owner decides when selection context should dim peer markers and keeps every marker operable. A dimmed marker returns to full opacity while hovered or keyboard-focused so its revealed caption remains legible.",
             "Activation emits dsClick without changing application selection internally."
           ],
@@ -8779,10 +9135,10 @@
               "Listen for dsClick and keep selected entity, z-index, coordinates, and camera movement in application state."
             ],
             "react": [
-              "Pass numeric heading as a property and handle dsClick through the generated event binding."
+              "Pass numeric bearing as a property and handle dsClick through the generated event binding."
             ],
             "angular": [
-              "Bind heading as a number and keep map-engine marker lifecycle in the owning map adapter."
+              "Bind bearing as a number and keep map-engine marker lifecycle in the owning map adapter."
             ]
           },
           "references": [
@@ -8806,10 +9162,10 @@
                   "color",
                   "opacity"
                 ],
-                "reason": "Marker geometry, operating-state colors, stale distinction, and de-emphasis are one accessible visual recipe.",
+                "reason": "Marker geometry, operating-state colors, outline distinction, and de-emphasis are one accessible visual recipe.",
                 "props": [
                   "state",
-                  "stale",
+                  "dashed",
                   "dimmed"
                 ]
               }
@@ -8818,16 +9174,20 @@
           }
         },
         "props": {
+          "bearing": {
+            "type": "number",
+            "required": false
+          },
           "caption": {
             "type": "string",
             "required": false
           },
-          "dimmed": {
+          "dashed": {
             "type": "boolean",
             "required": false
           },
-          "heading": {
-            "type": "number",
+          "dimmed": {
+            "type": "boolean",
             "required": false
           },
           "icon": {
@@ -8838,10 +9198,6 @@
             "type": "string",
             "required": true
           },
-          "stale": {
-            "type": "boolean",
-            "required": false
-          },
           "state": {
             "type": "MapEntityMarkerState",
             "required": false
@@ -9468,8 +9824,8 @@
             "Surface styling does not add semantics; failed delivery belongs in Message metadata below the unchanged bubble rather than in an error bubble treatment."
           ],
           "states": [
-            "The user variant represents user-sent copy in agent and person-to-person channels and uses secondary foreground.",
-            "The received variant represents ordinary incoming person-to-person copy.",
+            "The user variant represents user-sent copy in agent and person-to-person channels, uses primary foreground, and uses the Chrome primary background so body-medium copy meets contrast on that surface.",
+            "The received variant represents ordinary incoming person-to-person copy, uses secondary foreground, and uses the Chrome secondary background.",
             "Typing and rich agent output are not MessageBubble variants."
           ],
           "responsiveBehavior": [
@@ -9566,10 +9922,10 @@
           "states": [
             "The owner controls draft value and transport state; the composer emits intent without performing transport.",
             "Error status never clears or disables the draft; the application supplies recovery actions through error-actions and owns retry semantics. The negative support surface appears above and attached to the composer box, within the component's measured ownership.",
-            "Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last with an 8px gap from the preceding action. These icon buttons use the standard non-rounded control radius, and the application supplies tooltips for slotted icon actions.",
-            "The composer surface uses the 10px --dimension-radius-125 token.",
+            "Use the tools slot for leading actions such as add and the actions slot for trailing actions such as dictation; the built-in submit or stop action remains last with an 8px gap from the preceding action. The built-in and application-provided composer buttons use the standard rounded control treatment, and the application supplies tooltips for slotted icon actions.",
+            "The composer surface uses the 4px --dimension-radius-050 token.",
             "Mouse or keyboard focus on the textarea gives the complete composer surface the same bold-brand inset stroke width and color as an active Input; the native textarea never draws a separate outline.",
-            "The empty or otherwise inactive submit action is a disabled bordered ButtonUnfilled. Ready submit actions use submitIntent, while the streaming stop action remains a bold-brand ButtonFilled.",
+            "The empty or otherwise inactive submit action is a disabled bordered, rounded ButtonUnfilled. Ready submit actions use submitIntent and the rounded control treatment, while the streaming stop action remains a rounded bold-brand ButtonFilled.",
             "The attached error unit keeps a real boundary in forced colors and lets message text and application-owned recovery actions wrap at narrow widths."
           ],
           "responsiveBehavior": [
@@ -11897,7 +12253,7 @@
     {
       "name": "radio",
       "title": "Radio",
-      "description": "Form-associated one-of-many radio selection set with vertical or horizontal layout, optional per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
+      "description": "Form-associated one-of-many radio selection set with an optional visible group label, vertical or horizontal layout, per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -11908,7 +12264,7 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Form-associated one-of-many radio selection set with vertical or horizontal layout, optional per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
+          "summary": "Form-associated one-of-many radio selection set with an optional visible group label, vertical or horizontal layout, per-option descriptions, four densities, per-option inactive state, and roving keyboard focus.",
           "useWhen": [
             "A user must select exactly one visible option from a small set.",
             "All available choices should remain visible for comparison.",
@@ -11941,7 +12297,9 @@
             "component:ds-text"
           ],
           "accessibility": [
-            "The host exposes radiogroup semantics and requires an accessible group name from aria-label or aria-labelledby.",
+            "The host exposes radiogroup semantics and requires an accessible group name from the visible label, aria-label, or aria-labelledby.",
+            "When groupLabel is provided, Radio renders it above the options and uses the same text as the radiogroup's accessible name.",
+            "Inside ds-setting-row-radio the visible form groupLabel is omitted on first paint; the row heading is the accessible name via aria-labelledby. Independent multi-select settings use ds-setting-row-checkbox with ds-checkbox-group instead.",
             "Each visible option exposes radio semantics, its checked state, its label text, optional supporting description, and any inactive state.",
             "Arrow keys move and select through active options; Home and End select the first and last active options; Space and Enter select the focused option.",
             "Roving tabindex keeps one active option in the tab order, preferring the selected option; setFocus uses that same public focus target."
@@ -11951,7 +12309,10 @@
             "Selected circles remove the border, use a brand fill, and draw a centered on-bold foreground dot sized 10px at lg, 8px at md, 6px at sm, and 4px at xs.",
             "Sizes are lg with a 20px circle in a 24px placement, md with a 16px circle in a 20px placement, sm with a 12px circle in a 16px placement, and xs with an 8px circle in a 12px placement.",
             "The initial value is restored by native form reset; the selected value submits under name and a required set is invalid until one active option is selected.",
-            "Description-rich options grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy."
+            "Description-rich options grow beyond the fixed density height while retaining its minimum target size and primitive-owned selection anatomy.",
+            "A visible group label uses the same density height and horizontal text origin as a menu section heading above the option list without adding a second interaction target. Copy uses text-body-small emphasis.",
+            "Vertical form options use a 4px gap; a medium single-line option and its group label each use the shared 32px control height.",
+            "Form and settings usage omits a row hover or pressed wash by default; set hasInteractionFill only when each radio option is presented as a choice-list row."
           ],
           "responsiveBehavior": [
             "Choose size from the density of the containing form or settings row.",
@@ -12010,7 +12371,8 @@
                 ],
                 "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
                 "props": [
-                  "size"
+                  "size",
+                  "hasInteractionFill"
                 ]
               }
             ],
@@ -12038,6 +12400,14 @@
             "type": "string | undefined",
             "required": false
           },
+          "groupLabel": {
+            "type": "string",
+            "required": false
+          },
+          "hasInteractionFill": {
+            "type": "boolean",
+            "required": false
+          },
           "isInactive": {
             "type": "boolean",
             "required": false
@@ -12089,6 +12459,177 @@
         "text"
       ]
     },
+    {
+      "name": "radio-tile",
+      "title": "RadioTile",
+      "description": "A form-associated group of fully clickable radio tiles with labels and optional descriptions.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/radio-tile",
+        "source": "src/wc/components/RadioTile/RadioTile.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "A form-associated group of fully clickable radio tiles with labels and optional descriptions.",
+          "useWhen": [
+            "A small set of mutually exclusive choices benefits from descriptive cards and large click targets."
+          ],
+          "avoidWhen": [
+            "The choices are brief and compact; use Radio.",
+            "More than one value may be chosen."
+          ],
+          "alternatives": [
+            {
+              "when": "A user may select zero or multiple independent choices.",
+              "component": "component:ds-checkbox",
+              "reason": "Checkbox communicates independent selection rather than one-of-many choice."
+            },
+            {
+              "when": "A binary setting applies immediately.",
+              "component": "component:ds-switch",
+              "reason": "Switch communicates an immediately applied on/off setting."
+            },
+            {
+              "when": "The option list is long or the available space is constrained.",
+              "component": "component:ds-select",
+              "reason": "Select keeps a larger one-of-many choice set compact."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-field",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "Native radio inputs own keyboard selection, focus, and checked semantics; the complete tile activates its input.",
+            "Label the group with Field or an accessible name. Descriptions name each option separately."
+          ],
+          "states": [
+            "Selection is shown by the 16px radio indicator centered in a 20px placement box while the tile keeps its neutral border. The placement box and copy have a 12px gap inside the tile's 16px padding, and the tile uses the 2px compact radius. Error retains the negative border, and keyboard focus keeps the focus-token outline. Inactive options cannot be selected.",
+            "Options with descriptions use primary body-medium emphasis for the title and secondary body-medium supporting text with a 4px gap. Text-only options use secondary body-medium text without emphasis.",
+            "The component owns form values, required validation, reset, and disabled-fieldset behavior."
+          ],
+          "responsiveBehavior": [
+            "Horizontal tiles wrap to available space; use a vertical group when descriptions need more room."
+          ],
+          "frameworkCaveats": {
+            "angular": [
+              "Use the generated radio value accessor with the standalone adapter."
+            ],
+            "vue": [
+              "Bind value with v-model."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook review",
+              "path": "src/wc/components/RadioTile/RadioTile.stories.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "Tile anatomy and radio treatment belong to the component; the owner controls group width.",
+            "protected": [
+              {
+                "properties": [
+                  "padding",
+                  "gap",
+                  "border-radius",
+                  "background",
+                  "border",
+                  "box-shadow",
+                  "color"
+                ],
+                "reason": "Use the supported group direction and state instead of replacing tile internals.",
+                "props": [
+                  "direction"
+                ]
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "direction": {
+            "type": "'horizontal' | 'vertical'",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "form": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "options": {
+            "type": "RadioTileOption[]",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-radio-tile",
+          "react": "DsRadioTile",
+          "vue": "DsRadioTile",
+          "angular": "DsRadioTile"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
     {
       "name": "score",
       "title": "Score",
@@ -12742,6 +13283,309 @@
         "tooltip"
       ]
     },
+    {
+      "name": "setting-row-checkbox",
+      "title": "SettingRowCheckbox",
+      "description": "Padded settings-row composition for an editable Checkbox group and its non-interactive saved-value readout.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-checkbox",
+        "source": "src/wc/components/SettingRowCheckbox/SettingRowCheckbox.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Padded settings-row composition for an editable Checkbox group and its non-interactive saved-value readout.",
+          "useWhen": [
+            "A settings card needs an independent multi-select Checkbox group as one padded row item.",
+            "The same settings card needs to display the saved selected values without interactive checkbox controls in view mode."
+          ],
+          "avoidWhen": [
+            "The Checkbox group is not part of a settings-row surface; compose ds-checkbox-group directly.",
+            "Exactly one option may be selected; use component:ds-setting-row-radio.",
+            "The setting is a single immediate on/off choice; use component:ds-setting-row-toggle."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-card-setting",
+            "component:ds-checkbox-group",
+            "component:ds-checkbox"
+          ],
+          "accessibility": [
+            "Pass the settings heading as the row label. Do not pass CheckboxGroup's form label; the row owns the visible heading and points the slotted group at it with aria-labelledby.",
+            "Keep each Checkbox's label, checked state, name, value, and dsChange owned by the application. Leave the Checkbox group slotted in view and edit; the row hides it in view.",
+            "Do not add a second interaction layer to the row; each Checkbox owns its own focus and activation while settings usage keeps hasInteractionFill false.",
+            "View presentation exposes readable label, saved selected-value copy, and optional supporting copy without checkbox semantics, checkbox controls, or a focus target."
+          ],
+          "states": [
+            "The row is a neutral padded composition; selected, focus, mixed, and inactive states belong to the slotted Checkboxes without a choice-list hover or pressed wash.",
+            "The owning application handles dsChange on each Checkbox and supplies valueLabel by joining the currently selected option labels.",
+            "Heading, saved-value choice, and slotted Checkbox group stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the group.",
+            "View presentation hides the slotted Checkbox group with ::slotted host CSS and shows the saved selected values plus optional consequence copy. Omit description on the row and on each Checkbox when there is no supporting copy; view then shows only the selected-value labels. The group stays in the tree."
+          ],
+          "responsiveBehavior": [
+            "The row never exceeds its parent width; the slotted Checkbox group keeps option copy in the flexible column and wraps descriptions when needed."
+          ],
+          "references": [
+            {
+              "label": "Settings mock",
+              "path": "src/wc/components/SettingRowCheckbox/SettingRowCheckbox.stories.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The row uses the shared settings-row inline inset so view and edit copy share the same 16px origin, and zeros host padding-block because the heading, choice, and checkbox options already own vertical spacing. The heading is row-owned CSS, not CheckboxGroup's form label or control section-heading recipe. Checkbox owns option geometry.",
+            "protected": [
+              {
+                "properties": [
+                  "padding"
+                ],
+                "reason": "Keep space-200 inline inset in view and edit, with no extra host padding-block.",
+                "props": []
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "description": {
+            "type": "string",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "presentation": {
+            "type": "SettingRowCheckboxPresentation",
+            "required": false
+          },
+          "valueLabel": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-setting-row-checkbox",
+          "react": "DsSettingRowCheckbox",
+          "vue": "DsSettingRowCheckbox",
+          "angular": "DsSettingRowCheckbox"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
+    {
+      "name": "setting-row-radio",
+      "title": "SettingRowRadio",
+      "description": "Padded settings-row composition for an editable Radio group and its non-interactive saved-value readout.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-radio",
+        "source": "src/wc/components/SettingRowRadio/SettingRowRadio.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Padded settings-row composition for an editable Radio group and its non-interactive saved-value readout.",
+          "useWhen": [
+            "A settings card needs a mutually exclusive Radio group as one padded row item.",
+            "The same settings card needs to display the saved option without an interactive control in view mode."
+          ],
+          "avoidWhen": [
+            "The Radio group is not part of a settings-row surface; compose ds-radio directly.",
+            "The setting allows more than one option to be selected; use component:ds-setting-row-checkbox.",
+            "The setting is a single immediate on/off choice; use component:ds-setting-row-toggle."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-card-setting",
+            "component:ds-radio"
+          ],
+          "accessibility": [
+            "Pass the settings heading as the row label. Do not pass Radio groupLabel; the row owns the visible heading and points the slotted radiogroup at it with aria-labelledby.",
+            "Keep the Radio group's options, value, required state, and selection event owned by the application. Leave the Radio slotted in view and edit; the row hides it in view.",
+            "Do not add a second interaction layer to the row; Radio owns option focus and keyboard selection while settings usage keeps hasInteractionFill false.",
+            "View presentation exposes readable label, saved value, and optional supporting copy without radio semantics, a radio toggle, or a focus target."
+          ],
+          "states": [
+            "The row is a neutral padded composition; selected, focus, and inactive states belong to the slotted Radio without a choice-list hover or pressed wash.",
+            "The owning application handles dsChange and updates the slotted Radio value.",
+            "Heading, saved-value choice, and slotted Radio stay mounted. presentation reflects on the host so view/edit is CSS visibility only; do not swap Host children or ngIf the Radio.",
+            "View presentation hides the slotted Radio with ::slotted host CSS and shows the saved option label plus optional consequence copy. The Radio stays in the tree."
+          ],
+          "responsiveBehavior": [
+            "The row never exceeds its parent width; the slotted Radio keeps its option copy in the flexible column and wraps descriptions when needed."
+          ],
+          "references": [
+            {
+              "label": "Settings mock",
+              "path": "src/wc/components/SettingRowRadio/SettingRowRadio.stories.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The row uses the shared settings-row inline inset so view and edit copy share the same 16px origin, and zeros host padding-block because the heading, choice, and radio options already own vertical spacing. The heading is row-owned CSS, not Radio's form group-label or control section-heading recipe. Radio owns option geometry.",
+            "protected": [
+              {
+                "properties": [
+                  "padding"
+                ],
+                "reason": "Keep space-200 inline inset in view and edit, with no extra host padding-block.",
+                "props": []
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "description": {
+            "type": "string",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "presentation": {
+            "type": "SettingRowRadioPresentation",
+            "required": false
+          },
+          "valueLabel": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-setting-row-radio",
+          "react": "DsSettingRowRadio",
+          "vue": "DsSettingRowRadio",
+          "angular": "DsSettingRowRadio"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "text"
+      ]
+    },
+    {
+      "name": "setting-row-toggle",
+      "title": "SettingRowToggle",
+      "description": "Two-column immediate binary setting with descriptive copy and an accessible switch.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/setting-row-toggle",
+        "source": "src/wc/components/SettingRowToggle/SettingRowToggle.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Two-column immediate binary setting with descriptive copy and an accessible switch.",
+          "useWhen": [
+            "A settings list pairs a setting name and explanation with one immediate on/off control."
+          ],
+          "avoidWhen": [
+            "The value needs a text input, multiple choices, or an explicit Save workflow."
+          ],
+          "commonlyComposedWith": [
+            "component:ds-card-setting",
+            "component:ds-switch",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "The visible label names the switch and the optional description supplies its accessible description.",
+            "Switch owns focus, keyboard activation, checked state, and disabled semantics. The row adds no second tab stop.",
+            "For a settings list, the owner supplies list semantics and marks each row as a list item."
+          ],
+          "states": [
+            "The application accepts or rejects change requests by updating the controlled checked value and owns persistence and errors.",
+            "Name the enabled setting consistently; the label must not change when the switch is toggled.",
+            "Non-emphasis rows without supporting copy use ds-text color secondary (foreground-secondary) on the title. Non-emphasis rows with description keep a primary title.",
+            "Supporting copy is text-body-small in every variant."
+          ],
+          "responsiveBehavior": [
+            "The copy wraps while the switch keeps its natural size in the trailing column, including at narrow widths."
+          ],
+          "references": [
+            {
+              "label": "Usage states",
+              "path": "src/wc/components/SettingRowToggle/SettingRowToggle.stories.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The row uses the shared settings-row inset; copy/control columns and the parent section surface stay component-owned.",
+            "protected": [
+              {
+                "properties": [
+                  "padding",
+                  "gap"
+                ],
+                "reason": "Preserve the shared settings-row inset (space-100 block, space-200 inline) and copy-to-control gap.",
+                "props": []
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "checked": {
+            "type": "boolean",
+            "required": false
+          },
+          "description": {
+            "type": "string",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": true
+          },
+          "variant": {
+            "type": "SettingRowToggleVariant",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "boolean"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-setting-row-toggle",
+          "react": "DsSettingRowToggle",
+          "vue": "DsSettingRowToggle",
+          "angular": "DsSettingRowToggle"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "switch",
+        "text"
+      ]
+    },
     {
       "name": "shell-app",
       "title": "ShellApp",
@@ -13669,14 +14513,15 @@
             "Assign a two-number array through the JavaScript value property to create a range; values are ordered, clamped, stepped, and prevented from crossing.",
             "minStepsBetweenValues reserves a minimum stepped distance between range thumbs.",
             "The initial normalized value is the native form-reset baseline and range values submit as repeated entries under the same name.",
-            "Focused, filled, dirty, touched, dragging, valid, disabled, read-only, and orientation data hooks expose interaction state without changing the value contract."
+            "Focused, filled, dirty, touched, dragging, valid, disabled, read-only, and orientation data hooks expose interaction state without changing the value contract.",
+            "Explicit ticks define the only selectable snap points and may carry labels. Marks sit below a horizontal track, or beside a vertical track, with labels beyond the marks. Horizontal labels center on their marks and shift inward only when they reach the control edges. Without ticks, step=\"any\" permits smooth adjustment; ordinary stepped behavior remains available. Arrow keys traverse adjacent ticks and Home/End reach the available extremes."
           ],
           "responsiveBehavior": [
             "The visible label uses the same primary emphasized text-body-small recipe as Field at every density; the value uses the same primary metric without emphasis.",
             "Horizontal Slider fills the width supplied by its parent; the parent chooses an appropriate readable track length.",
             "Vertical Slider owns a token-based default length that may be overridden with --ds-slider-vertical-length in layout-specific compositions.",
             "Use md in ordinary forms and sm or xs only when the surrounding control density uses the same recipe.",
-            "Track thickness scales with density: 8px at md, 6px at sm, and 4px at xs. The unfilled track is transparent with a tertiary-foreground inset outline, the filled range is brand, and the square thumb uses a 2px radius with a 1.5px brand inset ring.",
+            "Track thickness scales with density. The unfilled track has a neutral border, the filled range uses brand color, and the thumb uses the primary surface with subtle elevation.",
             "Horizontal value direction is left-to-right; the design system does not author RTL-specific component behavior."
           ],
           "frameworkCaveats": {
@@ -13688,7 +14533,10 @@
               "Use DsSlider with a number or two-number value array and handle onDsChange and onDsCommit custom events."
             ],
             "angular": [
-              "Use DsSlider with property binding for range arrays; the generated number value accessor is appropriate only for a single numeric value."
+              "Use DsSlider with SelectValueAccessor for Angular Forms; it preserves either a number or a two-number array."
+            ],
+            "vue": [
+              "Use v-model for a number or a two-number array. Assign ticks through property binding."
             ]
           },
           "references": [
@@ -13829,13 +14677,17 @@
             "required": false
           },
           "step": {
-            "type": "number",
+            "type": "number | 'any'",
             "required": false
           },
           "thumbAlignment": {
             "type": "SliderThumbAlignment",
             "required": false
           },
+          "ticks": {
+            "type": "SliderTick[]",
+            "required": false
+          },
           "value": {
             "type": "SliderValue",
             "required": false
@@ -14480,7 +15332,7 @@
             "pattern:menu-trigger"
           ],
           "accessibility": [
-            "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the data scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Table menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
+            "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the data scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Customize menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
             "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
             "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
             "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-data-sort in the toolbar trailing cluster is the matching menu of Data and Order sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-data-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
@@ -14512,7 +15364,7 @@
           ],
           "responsiveBehavior": [
             "The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
-            "Inside the named ds-table container, caption Search retains its standard maximum width and flexes smaller only when the complete row needs space. Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Table menu button below 900px and keeps its neutral resting foreground regardless of the controlled column configuration. The caption, frame, and footer remain within the table host at every width. The complete caption row scrolls together only when those compact controls no longer fit, while data columns scroll inside the viewport; table-owned trailing actions never stay pinned over the scrolling toolbar.",
+            "Inside the named ds-table container, caption Search retains its standard maximum width and flexes smaller only when the complete row needs space. Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Customize menu button below 900px and keeps its neutral resting foreground regardless of the controlled column configuration. The caption, frame, and footer remain within the table host at every width. The complete caption row scrolls together only when those compact controls no longer fit, while data columns scroll inside the viewport; table-owned trailing actions never stay pinned over the scrolling toolbar.",
             "stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
             "fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. Bounded grouped tables use browser-native sticky section rows inside real block row-group boundaries, so scroll and resize do not run component JavaScript or trigger reactive section swaps. Document-flow tables retain the synchronized visual lane required by their separate horizontal scrollport.",
             "Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
@@ -15455,7 +16307,8 @@
             "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. When hasBorder is false, supporting error copy insets to the text origin rather than the resting border box."
+            "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.",
+            "Length constraints validate typed and programmatic text. Excess content is retained with an error by default; restrict mode enforces the maximum during editing. A character count appears below the field, right of supporting text or left when no supporting text exists."
           ],
           "responsiveBehavior": [
             "Textarea fills its parent by default and follows the width supplied by Field or the form layout.",
@@ -15583,6 +16436,18 @@
             "type": "boolean",
             "required": false
           },
+          "lengthBehavior": {
+            "type": "'error' | 'restrict'",
+            "required": false
+          },
+          "maxLength": {
+            "type": "number | undefined",
+            "required": false
+          },
+          "minLength": {
+            "type": "number | undefined",
+            "required": false
+          },
           "name": {
             "type": "string | undefined",
             "required": false
@@ -15611,6 +16476,10 @@
             "type": "number",
             "required": false
           },
+          "showCharacterCount": {
+            "type": "boolean",
+            "required": false
+          },
           "size": {
             "type": "TextareaSize",
             "required": false
@@ -15653,7 +16522,7 @@
     {
       "name": "time-picker",
       "title": "TimePicker",
-      "description": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+      "description": "Bounded 12- or 24-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -15664,7 +16533,7 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Bounded 12-hour clock lists for choosing hour, minute, and AM/PM, reused by form time fields.",
+          "summary": "Bounded 12- or 24-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."
@@ -15692,13 +16561,14 @@
           ],
           "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.",
+            "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 the first and last visible columns.",
             "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."
+            "Lists are finite. Hours follow the selected clock format, minutes follow the step, and the twelve-hour period list 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.",
+            "The default twelve-hour presentation includes AM/PM. Twenty-four-hour presentation uses hours 00–23 and omits the period column; both keep HH:MM form values and the same time bounds."
           ],
           "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."
@@ -15736,6 +16606,10 @@
             "type": "boolean",
             "required": false
           },
+          "hourFormat": {
+            "type": "'12' | '24'",
+            "required": false
+          },
           "isInactive": {
             "type": "boolean",
             "required": false