@ds-mo/ui 14.25.0 → 14.27.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.25.0","components":77,"digest":"f1a7aa473f373792c783db432b2f12160c7403108897991076ee1fc0412b6863","completedAt":"2026-09-02T01:26:05.059Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.27.0","components":79,"digest":"3f4a2aa3da16b2566ef7fbfbe59b6f6f9c44162f372b7a15ddd5e32a8eec04ff","completedAt":"2026-09-03T01:43:04.704Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.25.0",
+  "packageVersion": "14.27.0",
   "kind": "patterns",
   "entries": [
     {

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.25.0",
+  "packageVersion": "14.27.0",
   "kind": "components",
   "entries": [
     {
@@ -2353,6 +2353,7 @@
           }
         ],
         "commonlyComposedWith": [
+          "component:ds-score",
           "component:ds-select",
           "component:ds-button-unfilled",
           "component:ds-text",
@@ -2370,11 +2371,11 @@
           "Trend is supplied already resolved as a direction, a formatted value, and a tone. Whether a rise reads well is a product decision, so the component never infers tone from the numbers. Derive it with resolveMetricTrend.",
           "Omit a trend when there is nothing to report; resolveMetricTrend returns null in that case so no zero change is rendered.",
           "Omit score to render a centered Score unavailable cell with a tertiary border and no score fill. Set scoreErrorMessage to replace that copy while the measures remain readable.",
-          "Loading replaces the score and measures with skeletons and does not alter the slotted period control. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
+          "Loading replaces the score and measures with skeletons and does not alter the slotted period control. Score loading replaces only the fill figure; the overview still skeletons the score-copy spacer and trend. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
           "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
           "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
           "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
-          "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. The display value removes 8px from both block edges of its line box so it does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
+          "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg for the fill only. Comparison trend stays in the score-copy column, using the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
           "During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
           "compact is exactly 48px high and renders only the reporting bar. It omits Score, measures, and footer."
         ],
@@ -2483,6 +2484,7 @@
         "@ds-mo/tokens"
       ],
       "componentDependencies": [
+        "score",
         "skeleton",
         "text",
         "tooltip"
@@ -3743,14 +3745,14 @@
       "tag": "ds-field",
       "name": "field",
       "title": "Field",
-      "summary": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+      "summary": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+        "summary": "Accessible form-field composition that gives one Input, Textarea, or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
         "useWhen": [
-          "An Input or Select needs a persistent visible label in a form.",
+          "An Input, Textarea, or Select needs a persistent visible label in a form.",
           "Help text or an error message must be programmatically associated with one control.",
           "A form layout needs one consistent label-control-message rhythm."
         ],
@@ -3768,6 +3770,7 @@
         ],
         "commonlyComposedWith": [
           "component:ds-input",
+          "component:ds-textarea",
           "component:ds-select",
           "component:ds-text"
         ],
@@ -3795,7 +3798,7 @@
             "Assign child component values and option arrays through their normal JavaScript properties."
           ],
           "react": [
-            "Compose one DsInput or DsSelect child and control validation timing in the form owner."
+            "Compose one DsInput, DsTextarea, or DsSelect child and control validation timing in the form owner."
           ],
           "angular": [
             "Compose the generated Field adapter around the control adapter and its matching Angular value accessor."
@@ -6237,6 +6240,7 @@
           "A parent with children is not a standalone page: activating it while expanded resolves to the first enabled child; route state keeps that parent expanded and gives both parent and child selected styling.",
           "While one parent is expanded in nested presentation, other top-level destinations retain secondary foreground; flat and collapsed presentations keep their existing foreground treatment.",
           "Within a multi-item group, an expanded nested branch is bounded beside its siblings: the first branch adds a divider after its children, a middle branch adds dividers before its parent and after its children, and the final branch adds a divider before its parent. Single-item groups add neither. Divider space expands on the nested section-height timing while the line fades in, with equal visible spacing on both sides; collapsing the full rail contracts and fades the divider on the rail-collapse timing.",
+          "Expanded nested child rows share the group destination gap with the parent-to-first-child inset; that inset is owned by the first child so closed 0fr accordions still collapse flush with following destinations.",
           "Expanded nested branches animate to their full required height over 500ms while fixed-size child rows progressively fade over 500ms after a 250ms wait, with each row starting 50ms after the previous row. On close, child rows fade out in reverse order with secondary foreground and the height contraction waits 250ms; reduced-motion preferences collapse those transitions to the instant motion token.",
           "Collapsing the full navigation rail keeps the active nested branch mounted through the rail transition and contracts its height over the same duration, so following destinations reposition without snapping.",
           "Collapsed nested presentation opens a child-only flyout from the parent icon without navigating; the parent holds the transient pressed wash while the flyout is rendered, activates again to close, and emits navigation intent only after a child selection.",
@@ -7277,6 +7281,118 @@
         "text"
       ]
     },
+    {
+      "id": "component:ds-score",
+      "tag": "ds-score",
+      "name": "score",
+      "title": "Score",
+      "summary": "Safety-score figure in a semantic fill at the three control densities.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "experimental",
+        "summary": "Safety-score figure in a semantic fill at the three control densities.",
+        "useWhen": [
+          "A driver or fleet safety score needs its fair, good, or excellent fill and the numeric figure in one place.",
+          "The same score treatment appears in Card Overview, an in-card summary, or a compact row such as a table group header."
+        ],
+        "avoidWhen": [
+          "The figure is an ordinary metric without a safety-score color band; use Text.",
+          "The score is one cell in a comparable measures grid that also needs period chrome; use CardOverview, which composes Score.",
+          "The mark is a notification count or status label; use Badge or Tag.",
+          "A comparison trend should sit beside the fill; keep trend in the owner. Card Overview already renders score trend in its copy column."
+        ],
+        "alternatives": [
+          {
+            "when": "The figure is one of several comparable measures under a shared period bar.",
+            "component": "component:ds-card-overview",
+            "reason": "CardOverview owns the summary grid, period chrome, score-cell alignment, and score trend; it renders Score at lg for the fill."
+          },
+          {
+            "when": "The quantity is ordinary readable content without a safety-score fill.",
+            "component": "component:ds-text",
+            "reason": "Text preserves the figure as body content."
+          },
+          {
+            "when": "The compact mark is unread count or notification presence.",
+            "component": "component:ds-badge",
+            "reason": "Badge owns supplemental notification chrome, not a scored figure."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-card-overview",
+          "component:ds-table",
+          "component:ds-text",
+          "component:ds-skeleton"
+        ],
+        "accessibility": [
+          "Set label when the atomic score graphic needs a spoken prefix such as Safety score; the visible number remains in the fill.",
+          "Colour never carries score meaning alone; the numeric figure stays visible inside the fill.",
+          "Score is not interactive and is not a tab stop.",
+          "While loading, the host exposes a busy state and a skeleton whose type metrics match the resolved size."
+        ],
+        "states": [
+          "lg is the Card Overview fill: 56 by 40, display-small emphasis. md is the 32px control treatment: 40 by 32, title-large emphasis. sm is the 24px compact fill: 28 by 24, title-small emphasis. The fill box crops the type canvas so line-height does not change the declared size.",
+          "A numeric value from 0–100 infers fair from 0–50, good from 51–80, and excellent from 81–100. Empty or whitespace-only values stay on the faint neutral surface. Supply level explicitly when another displayed value needs a semantic fill.",
+          "The fill uses the safety-score background and keeps its foreground at AA text contrast in light and dark themes.",
+          "isLoading replaces the figure with a skeleton at the matching type metrics. The skeleton uses the faint context when no score level is known and the bold context when a known or explicitly supplied level keeps its semantic fill."
+        ],
+        "responsiveBehavior": [
+          "The owner selects sm, md, or lg to match the local layout. Score does not change size at breakpoints.",
+          "sm is the density for table group headers. md is the in-card summary fill. lg is the Card Overview fill."
+        ],
+        "references": [
+          {
+            "label": "Storybook examples",
+            "path": "src/wc/components/Score/Score.stories.ts"
+          },
+          {
+            "label": "Safety-score level unit coverage",
+            "path": "tests/score-model.test.ts"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "isLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "level": {
+            "type": "SafetyScoreLevel | undefined",
+            "required": false
+          },
+          "size": {
+            "type": "ScoreSize",
+            "required": false
+          },
+          "value": {
+            "type": "string | number",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-score",
+        "react": "DsScore",
+        "vue": "DsScore",
+        "angular": "DsScore"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": [
+        "skeleton",
+        "text"
+      ]
+    },
     {
       "id": "component:ds-scroll-overlay",
       "tag": "ds-scroll-overlay",
@@ -9121,6 +9237,7 @@
           "component:ds-menu",
           "component:ds-tooltip",
           "component:ds-tag",
+          "component:ds-score",
           "component:ds-icon"
         ],
         "patterns": [
@@ -9140,7 +9257,7 @@
         ],
         "states": [
           "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
-          "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
+          "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. A collapsed section with no supplied member rows uses that same total-only copy so collapse does not advertise a zero loaded window, including 0 when no total is known. An expanded empty section still shows loaded progress, for example Critical · 0 of 166. Optional accessories occupy a second 24px track under the label and count, middle-dot separated, at most four items. An accessory with help uses the shared dotted underline and a bottom-start ds-tooltip from that copy; explicit line breaks create an unbulleted list. Without accessories the section stays the single-track row height; with accessories it matches a two-track body row, with the checkbox and disclosure kept on the label track. An optional hero accessory sits before the label and count. The first supported hero is a safety-score fill using ds-score at sm on both single-track and two-track headers, top-aligned with the label track. A score hero does not use group intent coloring. The hero does not change the 40 or 64 row height. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. The complete section header is the expand/collapse target and paints hover and press on that viewport-width surface. The section separator stays on the dedicated trailing-edge rule so the interaction wash cannot replace it. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe, keeps the accessible disclosure name, and does not paint its own hover or press wash, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
           "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
           "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
           "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
@@ -9149,7 +9266,8 @@
           "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
           "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
           "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
-          "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Every later track adds 22px, so four tracks resolve to 106px, five to 128px, and the sequence may continue. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Their 2px block inset creates the 24px first track and each later wrapped line adds a 20px track plus the shared 2px gap. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
+          "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, wrapping multiple-Tag content, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. A run may supply help to add the shared dotted underline and a bottom-start Tooltip when compact visible copy summarizes supplementary details; explicit line breaks create a compact unbulleted list without obscuring the current cell's earlier tracks. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 64px and three-track cells grow to 88px. Every later track adds 24px, so four tracks resolve to 112px, five to 136px, and the sequence may continue. Tracks stack with no gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 64px row and three wrapped lines share the 88px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 88px row and three secondary lines share a 112px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill sits in the same 24px lane. Multiple-Tag cells use `kind: 'tags'`, a positive `tracks` count, and small single-inset Tags that wrap naturally at the column edge. Each wrap line is a 24px track with no stack gap, matching text. The tallest cell establishes the native row height, so all sibling cells match even at four, five, or more tracks; virtual tables use the declared count as the initial estimate and measure responsive wrapping after paint. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type, variant, and track-count hooks keep every cell family independently styleable.",
+          "Score-and-text cells (`kind: score-text`) place the small 24px safety score at the top-right of the cell while the same one-, two-, or three-track copy stack as a standard text cell fills from the start edge. The score is top-aligned with the first text track, adds no inner padding, and defaults its accessible name prefix to Safety score. Score-and-text loading geometry uses the matching small score skeleton and declared copy tracks.",
           "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
         ],
         "responsiveBehavior": [
@@ -9160,8 +9278,8 @@
           "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.",
           "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space. When every visible data column is explicitly sized, one internal presentational spacer absorbs unused inline space without stretching the final data column and collapses to zero when those widths introduce horizontal overflow. The spacer sits before trailing action and sticky-end lanes so those controls remain at the visible edge. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
           "Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
-          "Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; every additional track adds 22px and grows the complete native row so sibling cells match. Image previews fill the same content box as their declared track count. Wrapping multiple-Tag cells may declare any positive track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
-          "Long content truncates to one line by default. Hover (or keyboard-focus a primary link) shows the omitted value in one table-owned tooltip when that track overflows. maxLines 2 or 3 wrap onto the named 2-track and 3-track row heights, then ellipsize with the same tooltip. wrap: true remains unlimited and does not show a truncation tooltip. Wrapping 1-track primary occupies the named 2-track and 3-track row heights instead of a private line-height scale. Wrapping secondary on a 2-track cell occupies the named 3-track row and a 106px fourth track for three lines."
+          "Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; every additional track adds 24px and grows the complete native row so sibling cells match. Image previews fill the same content box as their declared track count. Wrapping multiple-Tag cells may declare any positive track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
+          "Long content truncates to one line by default. Hover (or keyboard-focus a primary link) shows the omitted value in one table-owned tooltip when that track overflows. maxLines 2 or 3 wrap onto the named 2-track and 3-track row heights, then ellipsize with the same tooltip. wrap: true remains unlimited and does not show a truncation tooltip. Wrapping 1-track primary occupies the named 2-track and 3-track row heights instead of a private line-height scale. Wrapping secondary on a 2-track cell occupies the named 3-track row and a 112px fourth track for three lines."
         ],
         "frameworkCaveats": {
           "customElements": [
@@ -9503,6 +9621,7 @@
         "loader",
         "menu",
         "pagination",
+        "score",
         "skeleton",
         "tag",
         "text",
@@ -9688,12 +9807,12 @@
       "tag": "ds-table-group",
       "name": "table-group",
       "title": "TableGroup",
-      "summary": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
+      "summary": "Two-panel toolbar control for choosing one table grouping data point and the order of its group sections.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Two-panel toolbar control for choosing one table grouping data point and the ascending or descending order of its group sections.",
+        "summary": "Two-panel toolbar control for choosing one table grouping data point and the order of its group sections.",
         "useWhen": [
           "A table toolbar needs explicit control of one grouping level and its section order.",
           "Grouping data-point labels differ from compact table-header labels."
@@ -9724,8 +9843,8 @@
           "The right pane remains present before a group is active as one complete empty state without the Order heading, and explains that a group must be selected."
         ],
         "states": [
-          "options and grouping are controlled. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
-          "Selecting a new data point starts its order at ascending. Re-selecting the active data point preserves its direction.",
+          "options and grouping are controlled. A data option may supply product-owned orderOptions; otherwise Order defaults to Ascending and Descending. dsGroupChange reports a complete TableGroupingState and dsClear requests null grouping without mutating either input.",
+          "Selecting a new data point starts at its first custom order option, or ascending when it has no custom order options. Re-selecting the active data point preserves its complete order state.",
           "Selecting a data point or direction applies immediately and leaves the dialog open so the other pane can be changed."
         ],
         "responsiveBehavior": [
@@ -10637,6 +10756,214 @@
       ],
       "componentDependencies": []
     },
+    {
+      "id": "component:ds-textarea",
+      "tag": "ds-textarea",
+      "name": "textarea",
+      "title": "Textarea",
+      "summary": "Form-associated multiline text control with shared Input density, focus, validation, and field-composition behavior.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "experimental",
+        "summary": "Form-associated multiline text control with shared Input density, focus, validation, and field-composition behavior.",
+        "useWhen": [
+          "A person needs to enter freeform text that may span several lines.",
+          "Notes, descriptions, comments, or explanations need native multiline editing and form submission.",
+          "A multiline control must compose with Field for its visible label, guidance, and error presentation."
+        ],
+        "avoidWhen": [
+          "The value is predictably one line; use Input instead.",
+          "The content is a conversational prompt with submit, stop, and tool actions; use MessageComposer instead.",
+          "The interface needs rich-text formatting, mentions, or structured blocks."
+        ],
+        "alternatives": [
+          {
+            "when": "The value is predictably one line.",
+            "component": "component:ds-input",
+            "reason": "Input supplies single-line semantics, adornments, search clearing, and numeric stepping."
+          },
+          {
+            "when": "The field is a conversational prompt with submission actions.",
+            "component": "component:ds-message-composer",
+            "reason": "MessageComposer owns chat-specific growth, submission, stop, tools, and recovery behavior."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-field",
+          "component:ds-text"
+        ],
+        "accessibility": [
+          "Give every Textarea an accessible name, preferably by wrapping it in Field with a persistent visible label.",
+          "Use description text for lasting guidance; placeholder text is an example or short prompt, not a label.",
+          "Required validation uses the native form contract and can provide a localized requiredMessage.",
+          "Read-only text remains focusable and submittable; inactive text is unavailable and omitted from form submission.",
+          "When Textarea renders its own errorMessage, it merges that message ID with authored aria-describedby references."
+        ],
+        "states": [
+          "Textarea exposes data-filled, data-focused, data-dirty, data-touched, data-invalid, data-disabled, data-readonly, and data-required state hooks.",
+          "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."
+        ],
+        "responsiveBehavior": [
+          "Textarea fills its parent by default and follows the width supplied by Field or the form layout.",
+          "The native value wraps within the available width and scrolls when its content exceeds the visible rows.",
+          "Use width hug only in intrinsically sized layouts with an explicit surrounding constraint."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Listen for dsChange; its detail is the complete current string value.",
+            "Set value through the component property for controlled updates and use setFocus() for imperative focus."
+          ],
+          "react": [
+            "Use the generated Textarea adapter and read the full string from the dsChange detail."
+          ],
+          "angular": [
+            "Use the generated Textarea adapter with its text value accessor for form bindings."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook examples",
+            "path": "src/wc/components/Textarea/Textarea.stories.ts"
+          },
+          {
+            "label": "Cross-browser form and accessibility coverage",
+            "path": "tests/e2e/forms.spec.ts"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "ariaDescribedby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "autoComplete": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "autoFocus": {
+            "type": "boolean",
+            "required": false
+          },
+          "disabled": {
+            "type": "boolean",
+            "required": false
+          },
+          "enterKeyHint": {
+            "type": "string",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorMessage": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "form": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "hasInteractionFill": {
+            "type": "boolean",
+            "required": false
+          },
+          "inputId": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "inputMode": {
+            "type": "string",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "name": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "placeholder": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "readOnly": {
+            "type": "boolean",
+            "required": false
+          },
+          "required": {
+            "type": "boolean",
+            "required": false
+          },
+          "requiredMessage": {
+            "type": "string",
+            "required": false
+          },
+          "resize": {
+            "type": "TextareaResize",
+            "required": false
+          },
+          "rows": {
+            "type": "number",
+            "required": false
+          },
+          "size": {
+            "type": "TextareaSize",
+            "required": false
+          },
+          "spellCheck": {
+            "type": "boolean",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "width": {
+            "type": "TextareaWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-textarea",
+        "react": "DsTextarea",
+        "vue": "DsTextarea",
+        "angular": "DsTextarea"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": [
+        "text"
+      ]
+    },
     {
       "id": "component:ds-toast",
       "tag": "ds-toast",
@@ -10865,7 +11192,7 @@
         "responsiveBehavior": [
           "The portaled popup follows trigger and popup resize, viewport resize, and nested scrolling while open.",
           "Touch users rely on the trigger's accessible and visible context rather than tooltip disclosure.",
-          "Keep labels concise and non-wrapping by default; omitted table cell values may wrap at panel-xs."
+          "Keep labels concise and non-wrapping by default; wrapLabel allows panel-xs wrapping and preserves explicit line breaks for compact, non-interactive lists."
         ],
         "frameworkCaveats": {
           "customElements": [

package/dist/angular/ds-score.d.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectorRef, ElementRef, NgZone } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsScore {
+    protected z: NgZone;
+    protected el: HTMLDsScoreElement;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsScore, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsScore, "ds-score", never, { "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "level": { "alias": "level"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export declare interface DsScore extends Components.DsScore {
+}

package/dist/angular/ds-score.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ProxyCmp } from './angular-component-lib/utils.js';
+import { defineCustomElement as defineDsScore } from '@ds-mo/ui/components/ds-score.js';
+import * as i0 from "@angular/core";
+let DsScore = class DsScore {
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsScore, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsScore, isStandalone: true, selector: "ds-score", inputs: { isLoading: "isLoading", label: "label", level: "level", size: "size", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+DsScore = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineDsScore,
+        inputs: ['isLoading', 'label', 'level', 'size', 'value']
+    })
+], DsScore);
+export { DsScore };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsScore, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ds-score',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['isLoading', 'label', 'level', 'size', 'value'],
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-textarea.d.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsTextareaCustomEvent } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsTextarea {
+    protected z: NgZone;
+    protected el: HTMLDsTextareaElement;
+    dsChange: EventEmitter<DsTextareaCustomEvent<string>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsTextarea, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTextarea, "ds-textarea", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "autoComplete": { "alias": "autoComplete"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "enterKeyHint": { "alias": "enterKeyHint"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "form": { "alias": "form"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "hasInteractionFill": { "alias": "hasInteractionFill"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "inputMode": { "alias": "inputMode"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "resize": { "alias": "resize"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "size": { "alias": "size"; "required": false; }; "spellCheck": { "alias": "spellCheck"; "required": false; }; "value": { "alias": "value"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsChange": "dsChange"; }, never, ["*"], true, never>;
+}
+export declare interface DsTextarea extends Components.DsTextarea {
+    dsChange: EventEmitter<DsTextareaCustomEvent<string>>;
+}