@ds-mo/ui 13.4.0 → 13.5.0

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

@@ -556,7 +556,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: navigation, pageChrome, tools.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -204,7 +204,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -390,7 +390,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: headers, items.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -255,7 +255,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -629,7 +629,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: formatOptions, valueTexts.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -199,7 +199,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: options, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -334,7 +334,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -218,7 +218,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: tabs.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -321,7 +321,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -334,7 +334,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -307,7 +307,7 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: manager, swipeDirections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -195,7 +195,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -277,7 +277,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

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

@@ -98,7 +98,7 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^5.1.0",
+          "@ds-mo/tokens ^5.1.1",
           "@ds-mo/icons ^6.4.0"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."

package/dist/types/components/CardOverview/CardOverview.d.ts

@@ -6,17 +6,17 @@ export declare class CardOverview {
     variant: CardOverviewVariant;
     /** Intrinsic responsive layout, or a page-owned single-column stack. */
     layout: CardOverviewLayout;
-    /** Leading summary block. Omit to render the bar without a headline figure. */
+    /** Optional nonselectable safety score rendered as the first grid cell. */
     score: OverviewScore | undefined;
-    /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */
+    /** Fixed current date or range. Replaced by content in the `period` slot. */
     periodLabel: string;
-    /** Comparison caption, for example `vs Previous period`. */
+    /** Copy between the current period and comparison control, usually `vs.`. */
     comparisonLabel: string;
-    /** Measures rendered in the responsive grid. Only the first six are shown. */
+    /** Measures rendered in the responsive grid. Only the first seven are shown. */
     metrics: OverviewMetric[];
     /**
      * Width a metric cell may shrink to before the grid drops a column. The grid
-     * reflows and then stacks from this alone, so no measurement is required.
+     * uses this threshold while choosing an evenly distributed column count.
      */
     metricMinWidth: string;
     /** Replace the score and metrics with skeletons while data resolves. */
@@ -28,9 +28,8 @@ export declare class CardOverview {
     /**
      * Page-controlled visual collapse from the full card (`0`) toward its 48px
      * compact handoff height (`1`). The component preserves its expanded flow
-     * height, keeps elevation on the shrinking surface, and clips translated
-     * content internally. The page still owns sticky positioning and the final
-     * swap to `variant="compact"`.
+     * height, keeps the period bar stationary, and moves/clips the grid beneath
+     * it. The page still owns sticky positioning and the final compact handoff.
      */
     scrollCollapseProgress: number;
     /** Emitted when a metric that is not inactive is activated. */
@@ -38,16 +37,18 @@ export declare class CardOverview {
     /** Roving tab stop across selectable metrics. */
     private focusedMetricIndex;
     private expandedHeight;
+    private gridColumns;
     private layoutEl?;
     private layoutResizeObserver;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
-    private get hasScore();
     private get visibleMetrics();
+    private get visibleCellCount();
     private get resolvedScrollCollapseProgress();
     private get scrollCollapseGeometry();
     private observeLayout;
+    private updateLayoutGeometry;
     /** Index of the roving tab stop, skipping inactive metrics. */
     private get rovingIndex();
     private selectMetric;

package/dist/types/components/CardOverview/card-overview-controller.d.ts

@@ -1,16 +1,28 @@
-import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';
+import type { CardOverviewVariant, OverviewMetric, SafetyScoreLevel } from './card-overview-types';
 export interface CardOverviewCollapseGeometry {
     active: boolean;
     expandedHeight: number;
     offset: number;
     visibleHeight: number;
 }
+/**
+ * Choose the densest column count that fits without leaving an incomplete row
+ * for even cell totals. Odd totals retain the densest fitting layout and may
+ * therefore leave an orphan in the final row.
+ */
+export declare function resolveOverviewGridColumns(options: {
+    cellCount: number;
+    availableWidth: number;
+    minCellWidth: number;
+    maxColumns?: number;
+}): number;
 export declare function resolveCardOverviewCollapseGeometry(options: {
     variant: CardOverviewVariant;
     progress: number;
     expandedHeight: number;
     compactHeight: number;
 }): CardOverviewCollapseGeometry;
+export declare function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined;
 export declare function resolveOverviewRovingIndex(metrics: readonly OverviewMetric[], focusedIndex: number): number;
 export declare function findNextOverviewMetricIndex(metrics: readonly OverviewMetric[], from: number, step: -1 | 1): number;
 //# sourceMappingURL=card-overview-controller.d.ts.map

package/dist/types/components/CardOverview/card-overview-types.d.ts

@@ -1,6 +1,7 @@
 import type { MetricTrend } from '../../utils/metric-change';
 export type CardOverviewVariant = 'default' | 'compact';
 export type CardOverviewLayout = 'auto' | 'stacked';
+export type SafetyScoreLevel = 'fair' | 'good' | 'excellent';
 /**
  * Leading summary block — the headline figure the rest of the bar contextualises.
  *
@@ -8,13 +9,18 @@ export type CardOverviewLayout = 'auto' | 'stacked';
  * product decision rather than a design-system one.
  */
 export interface OverviewScore {
-    /** Category above the figure, for example `Safety score`. */
+    /** Category before the trend and figure, for example `Safety score`. */
     label: string;
     /** Display-ready headline figure. */
     value: string | number;
     /** Change against the comparison period. Omit when there is nothing to report. */
     trend?: MetricTrend;
-    /** Qualitative band beneath the figure, for example `Good (67–83)`. */
+    /**
+     * Safety score color level. Numeric values from 0–100 infer fair (0–50),
+     * good (51–80), or excellent (81–100) when this is omitted.
+     */
+    level?: SafetyScoreLevel;
+    /** @deprecated Ignored. The redesigned score cell no longer renders a band. */
     band?: string;
 }
 /** One measure in the overview grid. */

package/dist/types/components/CardOverview/index.d.ts

@@ -1,2 +1,2 @@
-export type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore, } from './card-overview-types';
+export type { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore, SafetyScoreLevel, } from './card-overview-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Input/Input.d.ts

@@ -29,7 +29,7 @@ export declare class Input {
     size: InputSize;
     /** Width fit — fill the parent (default) or hug the available content. */
     width: InputWidth;
-    /** Show the standard inset border. */
+    /** Show the standard inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional leading icon name. */
     icon: string | undefined;

package/dist/types/components/Select/Select.d.ts

@@ -40,7 +40,7 @@ export declare class Select {
     isLoading: boolean;
     /** Show the selected interaction fill when a valid value exists. */
     activeFill: boolean;
-    /** Show the surface-aware inset border. */
+    /** Show the surface-aware inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */
     icon: string | undefined;

package/dist/types/components.d.ts

@@ -661,7 +661,7 @@ export namespace Components {
     }
     interface DsCardOverview {
         /**
-          * Comparison caption, for example `vs Previous period`.
+          * Copy between the current period and comparison control, usually `vs.`.
           * @default ''
          */
         "comparisonLabel": string;
@@ -676,12 +676,12 @@ export namespace Components {
          */
         "layout": CardOverviewLayout;
         /**
-          * Width a metric cell may shrink to before the grid drops a column. The grid reflows and then stacks from this alone, so no measurement is required.
+          * Width a metric cell may shrink to before the grid drops a column. The grid uses this threshold while choosing an evenly distributed column count.
           * @default 'var(--dimension-menu-width-xs)'
          */
         "metricMinWidth": string;
         /**
-          * Measures rendered in the responsive grid. Only the first six are shown.
+          * Measures rendered in the responsive grid. Only the first seven are shown.
           * @default []
          */
         "metrics": OverviewMetric[];
@@ -691,12 +691,12 @@ export namespace Components {
          */
         "overviewLabel": string;
         /**
-          * Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`.
+          * Fixed current date or range. Replaced by content in the `period` slot.
           * @default ''
          */
         "periodLabel": string;
         /**
-          * Leading summary block. Omit to render the bar without a headline figure.
+          * Optional nonselectable safety score rendered as the first grid cell.
          */
         "score": OverviewScore | undefined;
         /**
@@ -704,7 +704,7 @@ export namespace Components {
          */
         "scoreErrorMessage": string | undefined;
         /**
-          * Page-controlled visual collapse from the full card (`0`) toward its 48px compact handoff height (`1`). The component preserves its expanded flow height, keeps elevation on the shrinking surface, and clips translated content internally. The page still owns sticky positioning and the final swap to `variant="compact"`.
+          * Page-controlled visual collapse from the full card (`0`) toward its 48px compact handoff height (`1`). The component preserves its expanded flow height, keeps the period bar stationary, and moves/clips the grid beneath it. The page still owns sticky positioning and the final compact handoff.
           * @default 0
          */
         "scrollCollapseProgress": number;
@@ -1168,7 +1168,7 @@ export namespace Components {
         "errorMessage": string | undefined;
         "form": string | undefined;
         /**
-          * Show the standard inset border.
+          * Show the standard inset border, including focused and invalid strokes.
           * @default true
          */
         "hasBorder": boolean;
@@ -2005,7 +2005,7 @@ export namespace Components {
          */
         "errorMessage": string | undefined;
         /**
-          * Show the surface-aware inset border.
+          * Show the surface-aware inset border, including focused and invalid strokes.
           * @default true
          */
         "hasBorder": boolean;
@@ -4482,7 +4482,7 @@ declare namespace LocalJSX {
     }
     interface DsCardOverview {
         /**
-          * Comparison caption, for example `vs Previous period`.
+          * Copy between the current period and comparison control, usually `vs.`.
           * @default ''
          */
         "comparisonLabel"?: string;
@@ -4497,12 +4497,12 @@ declare namespace LocalJSX {
          */
         "layout"?: CardOverviewLayout;
         /**
-          * Width a metric cell may shrink to before the grid drops a column. The grid reflows and then stacks from this alone, so no measurement is required.
+          * Width a metric cell may shrink to before the grid drops a column. The grid uses this threshold while choosing an evenly distributed column count.
           * @default 'var(--dimension-menu-width-xs)'
          */
         "metricMinWidth"?: string;
         /**
-          * Measures rendered in the responsive grid. Only the first six are shown.
+          * Measures rendered in the responsive grid. Only the first seven are shown.
           * @default []
          */
         "metrics"?: OverviewMetric[];
@@ -4516,12 +4516,12 @@ declare namespace LocalJSX {
          */
         "overviewLabel"?: string;
         /**
-          * Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`.
+          * Fixed current date or range. Replaced by content in the `period` slot.
           * @default ''
          */
         "periodLabel"?: string;
         /**
-          * Leading summary block. Omit to render the bar without a headline figure.
+          * Optional nonselectable safety score rendered as the first grid cell.
          */
         "score"?: OverviewScore | undefined;
         /**
@@ -4529,7 +4529,7 @@ declare namespace LocalJSX {
          */
         "scoreErrorMessage"?: string | undefined;
         /**
-          * Page-controlled visual collapse from the full card (`0`) toward its 48px compact handoff height (`1`). The component preserves its expanded flow height, keeps elevation on the shrinking surface, and clips translated content internally. The page still owns sticky positioning and the final swap to `variant="compact"`.
+          * Page-controlled visual collapse from the full card (`0`) toward its 48px compact handoff height (`1`). The component preserves its expanded flow height, keeps the period bar stationary, and moves/clips the grid beneath it. The page still owns sticky positioning and the final compact handoff.
           * @default 0
          */
         "scrollCollapseProgress"?: number;
@@ -5022,7 +5022,7 @@ declare namespace LocalJSX {
         "errorMessage"?: string | undefined;
         "form"?: string | undefined;
         /**
-          * Show the standard inset border.
+          * Show the standard inset border, including focused and invalid strokes.
           * @default true
          */
         "hasBorder"?: boolean;
@@ -5936,7 +5936,7 @@ declare namespace LocalJSX {
          */
         "form"?: string;
         /**
-          * Show the surface-aware inset border.
+          * Show the surface-aware inset border, including focused and invalid strokes.
           * @default true
          */
         "hasBorder"?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "13.4.0",
+  "version": "13.5.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -108,7 +108,7 @@
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
     "@ds-mo/icons": "^6.4.0",
-    "@ds-mo/tokens": "^5.1.0",
+    "@ds-mo/tokens": "^5.1.1",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "rxjs": "^7.8.0"
@@ -137,7 +137,7 @@
     "@angular/forms": "^22.0.7",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^6.4.0",
-    "@ds-mo/tokens": "^5.1.0",
+    "@ds-mo/tokens": "^5.1.1",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/client": "^2.0.0",
     "@modelcontextprotocol/server": "^2.0.0",