@ds-mo/ui 12.7.0 → 12.8.0

package/dist/types/components.d.ts

@@ -15,11 +15,12 @@ import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/
 import { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 import { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 import { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
-import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
+import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 import { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 import { CardDataVizBarWidth } from "./components/CardDataVizBar/CardDataVizBar";
 import { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
 import { CardDataVizLineWidth } from "./components/CardDataVizLine/CardDataVizLine";
+import { OverviewMetric, OverviewScore } from "./components/CardOverview/card-overview-types";
 import { CardSettingActionDetail, CardSettingWidth } from "./components/CardSetting/CardSetting";
 import { CardShellDataVizWidth } from "./components/CardShellDataViz/CardShellDataViz";
 import { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
@@ -74,11 +75,12 @@ export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/
 export { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 export { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 export { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
-export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
+export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 export { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 export { CardDataVizBarWidth } from "./components/CardDataVizBar/CardDataVizBar";
 export { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
 export { CardDataVizLineWidth } from "./components/CardDataVizLine/CardDataVizLine";
+export { OverviewMetric, OverviewScore } from "./components/CardOverview/card-overview-types";
 export { CardSettingActionDetail, CardSettingWidth } from "./components/CardSetting/CardSetting";
 export { CardShellDataVizWidth } from "./components/CardShellDataViz/CardShellDataViz";
 export { ChartDatum, ChartLegendItem, ChartSeries } from "./utils/chart-types";
@@ -459,11 +461,28 @@ export namespace Components {
           * @default 'bold'
          */
         "contrast": ButtonFilledContrast;
+        /**
+          * ID of the popup this button controls.
+         */
+        "controls": string | undefined;
+        /**
+          * Controlled open state of the popup this button triggers. Holds the pressed wash for the popup's rendered lifecycle. ButtonFilled has no selected state, so an open popup never promotes to an active treatment.
+         */
+        "expanded": boolean | undefined;
         /**
           * Show a 1px secondary inset border.
           * @default false
          */
         "hasBorder": boolean;
+        /**
+          * This action *has* a menu: implies `aria-haspopup="menu"` and adds the trailing chevron that carries the affordance.  Only `label` and `icon-label` are supported. A filled button is never the overflow / more-options control — that role belongs to ButtonUnfilled with an `Ellipses` glyph, which conveys the menu without a chevron.  Use `haspopup` directly for non-menu popups.
+          * @default false
+         */
+        "hasMenu": boolean;
+        /**
+          * Popup type exposed to assistive technology.
+         */
+        "haspopup": ButtonFilledPopup | undefined;
         /**
           * Icon name passed to <ds-icon> for `icon` / `icon-label` variants.
           * @default ''
@@ -489,6 +508,15 @@ export namespace Components {
           * @default ''
          */
         "label": string;
+        /**
+          * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
+          * @default true
+         */
+        "pressScale": boolean;
+        /**
+          * Pressed semantics for a toggle command that reports state elsewhere.
+         */
+        "pressed": boolean | undefined;
         /**
           * Use the half-radius treatment instead of the default control radius.
           * @default false
@@ -547,6 +575,11 @@ export namespace Components {
           * @default true
          */
         "hasBorder": boolean;
+        /**
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * @default false
+         */
+        "hasMenu": boolean;
         "haspopup": ButtonUnfilledPopup | undefined;
         /**
           * Icon name passed to <ds-icon> for `icon` / `icon-label` variants.
@@ -573,6 +606,11 @@ export namespace Components {
           * @default ''
          */
         "label": string;
+        /**
+          * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
+          * @default true
+         */
+        "pressScale": boolean;
         "pressed": boolean | undefined;
         /**
           * Use the half-radius treatment instead of the default control radius.
@@ -658,6 +696,46 @@ export namespace Components {
          */
         "heading": string;
     }
+    interface DsCardOverview {
+        /**
+          * Comparison caption, for example `vs. previous score period`.
+          * @default ''
+         */
+        "comparisonLabel": string;
+        /**
+          * Replace the score and metrics with skeletons while data resolves.
+          * @default false
+         */
+        "isLoading": boolean;
+        /**
+          * 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.
+          * @default 'var(--dimension-menu-width-xs)'
+         */
+        "metricMinWidth": string;
+        /**
+          * Measures rendered in the responsive grid.
+          * @default []
+         */
+        "metrics": OverviewMetric[];
+        /**
+          * Accessible name for the region.
+          * @default 'Overview'
+         */
+        "overviewLabel": string;
+        /**
+          * Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`.
+          * @default ''
+         */
+        "periodLabel": string;
+        /**
+          * Leading summary block. Omit to render the bar without a headline figure.
+         */
+        "score": OverviewScore | undefined;
+        /**
+          * Message shown in place of the score when its figure cannot be resolved.
+         */
+        "scoreErrorMessage": string | undefined;
+    }
     interface DsCardSetting {
         /**
           * @default 'Cancel'
@@ -708,10 +786,12 @@ export namespace Components {
          */
         "data": ChartDatum[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height": number;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width": number;
@@ -723,6 +803,7 @@ export namespace Components {
          */
         "categories": string[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height": number;
@@ -736,6 +817,7 @@ export namespace Components {
          */
         "variant": ChartBarStackedVariant;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width": number;
@@ -835,6 +917,7 @@ export namespace Components {
          */
         "categories": string[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height": number;
@@ -848,6 +931,7 @@ export namespace Components {
          */
         "showPoints": boolean;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width": number;
@@ -2880,6 +2964,10 @@ export interface DsCardDataVizLineCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCardDataVizLineElement;
 }
+export interface DsCardOverviewCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCardOverviewElement;
+}
 export interface DsCardSettingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCardSettingElement;
@@ -3230,6 +3318,23 @@ declare global {
         prototype: HTMLDsCardDataVizLineElement;
         new (): HTMLDsCardDataVizLineElement;
     };
+    interface HTMLDsCardOverviewElementEventMap {
+        "dsMetricSelect": OverviewMetric;
+    }
+    interface HTMLDsCardOverviewElement extends Components.DsCardOverview, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCardOverviewElementEventMap>(type: K, listener: (this: HTMLDsCardOverviewElement, ev: DsCardOverviewCustomEvent<HTMLDsCardOverviewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsCardOverviewElementEventMap>(type: K, listener: (this: HTMLDsCardOverviewElement, ev: DsCardOverviewCustomEvent<HTMLDsCardOverviewElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsCardOverviewElement: {
+        prototype: HTMLDsCardOverviewElement;
+        new (): HTMLDsCardOverviewElement;
+    };
     interface HTMLDsCardSettingElementEventMap {
         "dsAction": CardSettingActionDetail;
     }
@@ -4050,6 +4155,7 @@ declare global {
         "ds-card-data-viz-bar": HTMLDsCardDataVizBarElement;
         "ds-card-data-viz-donut": HTMLDsCardDataVizDonutElement;
         "ds-card-data-viz-line": HTMLDsCardDataVizLineElement;
+        "ds-card-overview": HTMLDsCardOverviewElement;
         "ds-card-setting": HTMLDsCardSettingElement;
         "ds-card-shell-data-viz": HTMLDsCardShellDataVizElement;
         "ds-chart-bar": HTMLDsChartBarElement;
@@ -4481,11 +4587,28 @@ declare namespace LocalJSX {
           * @default 'bold'
          */
         "contrast"?: ButtonFilledContrast;
+        /**
+          * ID of the popup this button controls.
+         */
+        "controls"?: string | undefined;
+        /**
+          * Controlled open state of the popup this button triggers. Holds the pressed wash for the popup's rendered lifecycle. ButtonFilled has no selected state, so an open popup never promotes to an active treatment.
+         */
+        "expanded"?: boolean | undefined;
         /**
           * Show a 1px secondary inset border.
           * @default false
          */
         "hasBorder"?: boolean;
+        /**
+          * This action *has* a menu: implies `aria-haspopup="menu"` and adds the trailing chevron that carries the affordance.  Only `label` and `icon-label` are supported. A filled button is never the overflow / more-options control — that role belongs to ButtonUnfilled with an `Ellipses` glyph, which conveys the menu without a chevron.  Use `haspopup` directly for non-menu popups.
+          * @default false
+         */
+        "hasMenu"?: boolean;
+        /**
+          * Popup type exposed to assistive technology.
+         */
+        "haspopup"?: ButtonFilledPopup | undefined;
         /**
           * Icon name passed to <ds-icon> for `icon` / `icon-label` variants.
           * @default ''
@@ -4512,6 +4635,15 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         "onDsClick"?: (event: DsButtonFilledCustomEvent<MouseEvent>) => void;
+        /**
+          * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
+          * @default true
+         */
+        "pressScale"?: boolean;
+        /**
+          * Pressed semantics for a toggle command that reports state elsewhere.
+         */
+        "pressed"?: boolean | undefined;
         /**
           * Use the half-radius treatment instead of the default control radius.
           * @default false
@@ -4569,6 +4701,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "hasBorder"?: boolean;
+        /**
+          * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers both menu-button shapes:  - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries   the affordance. - `icon` — the button *is* a menu, i.e. the overflow / more-options control.   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.  Use `haspopup` directly for non-menu popups.
+          * @default false
+         */
+        "hasMenu"?: boolean;
         "haspopup"?: ButtonUnfilledPopup | undefined;
         /**
           * Icon name passed to <ds-icon> for `icon` / `icon-label` variants.
@@ -4597,6 +4734,11 @@ declare namespace LocalJSX {
         "label"?: string;
         "onDsChange"?: (event: DsButtonUnfilledCustomEvent<boolean>) => void;
         "onDsClick"?: (event: DsButtonUnfilledCustomEvent<MouseEvent>) => void;
+        /**
+          * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
+          * @default true
+         */
+        "pressScale"?: boolean;
         "pressed"?: boolean | undefined;
         /**
           * Use the half-radius treatment instead of the default control radius.
@@ -4693,6 +4835,50 @@ declare namespace LocalJSX {
          */
         "onDsFilterClick"?: (event: DsCardDataVizLineCustomEvent<void>) => void;
     }
+    interface DsCardOverview {
+        /**
+          * Comparison caption, for example `vs. previous score period`.
+          * @default ''
+         */
+        "comparisonLabel"?: string;
+        /**
+          * Replace the score and metrics with skeletons while data resolves.
+          * @default false
+         */
+        "isLoading"?: boolean;
+        /**
+          * 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.
+          * @default 'var(--dimension-menu-width-xs)'
+         */
+        "metricMinWidth"?: string;
+        /**
+          * Measures rendered in the responsive grid.
+          * @default []
+         */
+        "metrics"?: OverviewMetric[];
+        /**
+          * Emitted when a metric that is not inactive is activated.
+         */
+        "onDsMetricSelect"?: (event: DsCardOverviewCustomEvent<OverviewMetric>) => void;
+        /**
+          * Accessible name for the region.
+          * @default 'Overview'
+         */
+        "overviewLabel"?: string;
+        /**
+          * Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`.
+          * @default ''
+         */
+        "periodLabel"?: string;
+        /**
+          * Leading summary block. Omit to render the bar without a headline figure.
+         */
+        "score"?: OverviewScore | undefined;
+        /**
+          * Message shown in place of the score when its figure cannot be resolved.
+         */
+        "scoreErrorMessage"?: string | undefined;
+    }
     interface DsCardSetting {
         /**
           * @default 'Cancel'
@@ -4747,10 +4933,12 @@ declare namespace LocalJSX {
          */
         "data"?: ChartDatum[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height"?: number;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width"?: number;
@@ -4762,6 +4950,7 @@ declare namespace LocalJSX {
          */
         "categories"?: string[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height"?: number;
@@ -4775,6 +4964,7 @@ declare namespace LocalJSX {
          */
         "variant"?: ChartBarStackedVariant;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width"?: number;
@@ -4886,6 +5076,7 @@ declare namespace LocalJSX {
          */
         "categories"?: string[];
         /**
+          * Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size.
           * @default 240
          */
         "height"?: number;
@@ -4899,6 +5090,7 @@ declare namespace LocalJSX {
          */
         "showPoints"?: boolean;
         /**
+          * Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size.
           * @default 480
          */
         "width"?: number;
@@ -7124,10 +7316,16 @@ declare namespace LocalJSX {
         "hasBorder": boolean;
         "background": ButtonFilledBackground | undefined;
         "rounded": boolean;
+        "pressScale": boolean;
         "isInactive": boolean;
         "isLoading": boolean;
         "type": 'button' | 'submit' | 'reset';
         "ariaLabel": string | null;
+        "controls": string | undefined;
+        "expanded": boolean | undefined;
+        "haspopup": ButtonFilledPopup | undefined;
+        "pressed": boolean | undefined;
+        "hasMenu": boolean;
     }
     interface DsButtonUnfilledAttributes {
         "variant": ButtonUnfilledVariant;
@@ -7139,6 +7337,7 @@ declare namespace LocalJSX {
         "activeFill": boolean;
         "hasBorder": boolean;
         "rounded": boolean;
+        "pressScale": boolean;
         "dot": boolean;
         "isInactive": boolean;
         "isLoading": boolean;
@@ -7149,6 +7348,7 @@ declare namespace LocalJSX {
         "expanded": boolean | undefined;
         "haspopup": ButtonUnfilledPopup | undefined;
         "pressed": boolean | undefined;
+        "hasMenu": boolean;
         "focusTabIndex": number;
     }
     interface DsCardDataVizBarAttributes {
@@ -7166,6 +7366,14 @@ declare namespace LocalJSX {
         "cardWidth": CardDataVizLineWidth;
         "filterLabel": string;
     }
+    interface DsCardOverviewAttributes {
+        "periodLabel": string;
+        "comparisonLabel": string;
+        "metricMinWidth": string;
+        "isLoading": boolean;
+        "scoreErrorMessage": string | undefined;
+        "overviewLabel": string;
+    }
     interface DsCardSettingAttributes {
         "heading": string;
         "cardWidth": CardSettingWidth;
@@ -7716,6 +7924,7 @@ declare namespace LocalJSX {
         "ds-card-data-viz-bar": Omit<DsCardDataVizBar, keyof DsCardDataVizBarAttributes> & { [K in keyof DsCardDataVizBar & keyof DsCardDataVizBarAttributes]?: DsCardDataVizBar[K] } & { [K in keyof DsCardDataVizBar & keyof DsCardDataVizBarAttributes as `attr:${K}`]?: DsCardDataVizBarAttributes[K] } & { [K in keyof DsCardDataVizBar & keyof DsCardDataVizBarAttributes as `prop:${K}`]?: DsCardDataVizBar[K] } & OneOf<"heading", DsCardDataVizBar["heading"], DsCardDataVizBarAttributes["heading"]>;
         "ds-card-data-viz-donut": Omit<DsCardDataVizDonut, keyof DsCardDataVizDonutAttributes> & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes]?: DsCardDataVizDonut[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `attr:${K}`]?: DsCardDataVizDonutAttributes[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `prop:${K}`]?: DsCardDataVizDonut[K] } & OneOf<"heading", DsCardDataVizDonut["heading"], DsCardDataVizDonutAttributes["heading"]>;
         "ds-card-data-viz-line": Omit<DsCardDataVizLine, keyof DsCardDataVizLineAttributes> & { [K in keyof DsCardDataVizLine & keyof DsCardDataVizLineAttributes]?: DsCardDataVizLine[K] } & { [K in keyof DsCardDataVizLine & keyof DsCardDataVizLineAttributes as `attr:${K}`]?: DsCardDataVizLineAttributes[K] } & { [K in keyof DsCardDataVizLine & keyof DsCardDataVizLineAttributes as `prop:${K}`]?: DsCardDataVizLine[K] } & OneOf<"heading", DsCardDataVizLine["heading"], DsCardDataVizLineAttributes["heading"]>;
+        "ds-card-overview": Omit<DsCardOverview, keyof DsCardOverviewAttributes> & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes]?: DsCardOverview[K] } & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes as `attr:${K}`]?: DsCardOverviewAttributes[K] } & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes as `prop:${K}`]?: DsCardOverview[K] };
         "ds-card-setting": Omit<DsCardSetting, keyof DsCardSettingAttributes> & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes]?: DsCardSetting[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `attr:${K}`]?: DsCardSettingAttributes[K] } & { [K in keyof DsCardSetting & keyof DsCardSettingAttributes as `prop:${K}`]?: DsCardSetting[K] } & OneOf<"heading", DsCardSetting["heading"], DsCardSettingAttributes["heading"]>;
         "ds-card-shell-data-viz": Omit<DsCardShellDataViz, keyof DsCardShellDataVizAttributes> & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes]?: DsCardShellDataViz[K] } & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes as `attr:${K}`]?: DsCardShellDataVizAttributes[K] } & { [K in keyof DsCardShellDataViz & keyof DsCardShellDataVizAttributes as `prop:${K}`]?: DsCardShellDataViz[K] } & OneOf<"heading", DsCardShellDataViz["heading"], DsCardShellDataVizAttributes["heading"]>;
         "ds-chart-bar": Omit<DsChartBar, keyof DsChartBarAttributes> & { [K in keyof DsChartBar & keyof DsChartBarAttributes]?: DsChartBar[K] } & { [K in keyof DsChartBar & keyof DsChartBarAttributes as `attr:${K}`]?: DsChartBarAttributes[K] } & { [K in keyof DsChartBar & keyof DsChartBarAttributes as `prop:${K}`]?: DsChartBar[K] };
@@ -7805,6 +8014,7 @@ declare module "@stencil/core" {
              * region and a content-sized, static legend.
              */
             "ds-card-data-viz-line": LocalJSX.IntrinsicElements["ds-card-data-viz-line"] & JSXBase.HTMLAttributes<HTMLDsCardDataVizLineElement>;
+            "ds-card-overview": LocalJSX.IntrinsicElements["ds-card-overview"] & JSXBase.HTMLAttributes<HTMLDsCardOverviewElement>;
             "ds-card-setting": LocalJSX.IntrinsicElements["ds-card-setting"] & JSXBase.HTMLAttributes<HTMLDsCardSettingElement>;
             /**
              * Dedicated shell chrome for data-visualization cards. Chart-specific layout,

package/dist/types/toast/toast-types.d.ts

@@ -1,4 +1,4 @@
-import type { AnchoredPopupAlign, AnchoredPopupSide } from '../utils/anchored-popup';
+import type { AnchoredAlign, AnchoredSide } from '../utils/anchored-position';
 export type ToastPriority = 'low' | 'high';
 export type ToastTransitionStatus = 'starting' | 'active' | 'ending';
 export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
@@ -6,8 +6,8 @@ export type ToastCloseReason = 'timeout' | 'close-button' | 'swipe' | 'escape' |
 export interface ToastPositionerOptions {
     /** Element or document id used to position this toast outside the global stack. */
     anchor: HTMLElement | string;
-    side?: AnchoredPopupSide;
-    align?: AnchoredPopupAlign;
+    side?: AnchoredSide;
+    align?: AnchoredAlign;
     sideOffset?: number | string;
     alignOffset?: number | string;
 }

package/dist/types/utils/anchored-position-controller.d.ts

@@ -0,0 +1,96 @@
+import { type AnchoredPosition, type AnchoredPositionInput } from './anchored-position';
+/**
+ * How the scroll/resize path reschedules. Each consumer family measured
+ * differently before consolidation, and the differences are preserved verbatim
+ * so placement timing is unchanged.
+ *
+ * - `sync` — measure inside the listener. Selects.
+ * - `frame` — coalesce and measure on the next frame. Tooltips.
+ * - `double-frame` — coalesce, measure next frame, then measure once more the
+ *   frame after. Scroll-driven owners such as ShellPage commit a compact-header
+ *   render in the frame after the scroll event, so a single frame reads a stale
+ *   anchor rect. Menus.
+ */
+export type AnchoredLiveUpdateMode = 'sync' | 'frame' | 'double-frame';
+export interface AnchoredPositionControllerOptions {
+    /** Resolve the anchor at measure time; positioning retries while this is null. */
+    getAnchor: () => HTMLElement | null;
+    /** Resolve the popup at measure time; positioning retries while this is null. */
+    getPopup: () => HTMLElement | null;
+    /**
+     * Build the layout input for one measurement pass.
+     *
+     * The owning component keeps its own anchor semantics here — inner-cell align
+     * offsets, minimum widths, and token resolution stay with the component rather
+     * than moving into this controller. Return `null` when the component's own
+     * guards say the popup is not measurable yet, which schedules a retry.
+     */
+    measure: (anchor: HTMLElement, popup: HTMLElement) => AnchoredPositionInput | null;
+    /** Commit a changed position. Not called when the result is unchanged. */
+    apply: (position: AnchoredPosition) => void;
+    /** Fired once per `start()` when the first measurement succeeds. */
+    onReady?: () => void;
+    /** Scroll/resize behavior. Defaults to `sync`. */
+    liveUpdate?: AnchoredLiveUpdateMode;
+    /**
+     * Re-measure when the popup or anchor resizes. Tooltips need this because the
+     * label's `ds-text` upgrade changes the measured width after mount.
+     */
+    observeResize?: boolean;
+    retryBudget?: number;
+}
+/**
+ * Lifecycle owner for an element-anchored popup: listener binding, measurement
+ * retries, frame coalescing, and teardown.
+ *
+ * Pairs with `computeAnchoredPosition`, which owns the geometry. Split this way
+ * because the geometry is pure and exhaustively testable while the lifecycle is
+ * timing-dependent; keeping them separate means the risky half lives in exactly
+ * one place.
+ *
+ * Not suitable for overlays that place several popups in one shared pass — Toast
+ * positions N anchored records inside a single layout commit and keeps its own
+ * scheduler, using only the geometry function.
+ */
+export declare class AnchoredPositionController {
+    private readonly options;
+    private scrollResizeHandler;
+    private resizeObserver;
+    private retryRaf;
+    private liveRaf;
+    private last;
+    private isReady;
+    constructor(options: AnchoredPositionControllerOptions);
+    /** `true` once a measurement has succeeded, for gating popup reveal. */
+    get ready(): boolean;
+    /**
+     * Bind scroll/resize tracking for an opening popup.
+     *
+     * Deliberately does not schedule placement: every consumer binds listeners and
+     * then schedules in its own order, and folding both into one call produced two
+     * overlapping retry loops. Call `schedule()` or `update()` separately.
+     */
+    observe(): void;
+    /** Unbind tracking, cancel pending frames, and clear the cached position. */
+    unobserve(): void;
+    /**
+     * Retry measurement each frame until it succeeds or the budget runs out, so a
+     * popup is never revealed at 0,0 after a failed first pass.
+     */
+    schedule(onReady?: () => void): void;
+    /** Measure and commit once. @returns `false` when the popup is not measurable. */
+    update(): boolean;
+    /** Reposition an already-open popup without hiding it. */
+    scheduleLiveUpdate(): void;
+    /** Cancel pending retry and live frames without unbinding listeners. */
+    cancel(): void;
+    private cancelRetry;
+    private bindListeners;
+    private unbindListeners;
+    /**
+     * Re-attach the resize observer after the popup remounts. Safe to call
+     * repeatedly; `ResizeObserver.observe` ignores duplicate targets.
+     */
+    observeResizeTargets(): void;
+}
+//# sourceMappingURL=anchored-position-controller.d.ts.map

package/dist/types/utils/anchored-position.d.ts

@@ -0,0 +1,35 @@
+export type AnchoredSide = 'top' | 'right' | 'bottom' | 'left';
+export type AnchoredAlign = 'start' | 'center' | 'end';
+export interface AnchoredPositionInput {
+    anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;
+    popupWidth: number;
+    popupHeight: number;
+    side: AnchoredSide;
+    align: AnchoredAlign;
+    sideOffsetPx: number;
+    alignOffsetPx: number;
+    viewportPadPx: number;
+    viewportWidth: number;
+    viewportHeight: number;
+}
+export interface AnchoredPosition {
+    x: number;
+    y: number;
+    /** Side actually used, which differs from the request when placement flipped. */
+    resolvedSide: AnchoredSide;
+}
+/**
+ * Pure viewport-fixed anchored-popup layout math shared by every element-anchored
+ * overlay: menus, selects, tooltips, and anchored toasts.
+ *
+ * `side` is preferred. When the popup spills past the padded viewport there and
+ * the opposite side spills less, placement flips on the main axis; the result is
+ * then clamped into the viewport on both axes. Cross-axis `align` is applied
+ * before clamping so `alignOffsetPx` stays an additive nudge.
+ *
+ * Callers own their own anchor semantics — inner-cell alignment offsets and
+ * minimum widths belong to the calling component, not here.
+ * @see choice-popup-alignment.ts for the choice-cell alignment transform.
+ */
+export declare function computeAnchoredPosition(input: AnchoredPositionInput): AnchoredPosition;
+//# sourceMappingURL=anchored-position.d.ts.map

package/dist/types/utils/cartesian-chart-layout.d.ts

@@ -0,0 +1,13 @@
+export interface CartesianChartLayout {
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    axisLabelGap: number;
+    categoryLabelOffset: number;
+}
+/** Resolve shared Cartesian chart geometry from TokoMo dimension tokens. */
+export declare function resolveCartesianChartLayout(): CartesianChartLayout;
+//# sourceMappingURL=cartesian-chart-layout.d.ts.map

package/dist/types/utils/chart-viewport-controller.d.ts

@@ -0,0 +1,21 @@
+export interface ChartViewportSize {
+    width: number;
+    height: number;
+}
+/**
+ * Keeps SVG chart geometry matched to the rendered SVG viewport.
+ *
+ * Cartesian charts intentionally render without a viewBox: changing the host
+ * reflows plot geometry instead of scaling its strokes, text, radii, or points.
+ */
+export declare class ChartViewportController {
+    private readonly target;
+    private readonly onResize;
+    private resizeObserver;
+    constructor(target: Element, onResize: (size: ChartViewportSize) => void);
+    connect(): void;
+    measure(): void;
+    disconnect(): void;
+    private update;
+}
+//# sourceMappingURL=chart-viewport-controller.d.ts.map

package/dist/types/utils/choice-popup-alignment.d.ts

@@ -1,4 +1,4 @@
-import type { AnchoredPopupAlign } from './anchored-popup';
+import type { AnchoredAlign } from './anchored-position';
 /**
  * `choice-cell` aligns the first/last interactive row edge with the anchor,
  * allowing the popup frame to extend by the section inset. `popup-frame`
@@ -6,7 +6,7 @@ import type { AnchoredPopupAlign } from './anchored-popup';
  */
 export type ChoicePopupAnchorAlignment = 'choice-cell' | 'popup-frame';
 export interface ChoicePopupAlignOffsetInput {
-    align: AnchoredPopupAlign;
+    align: AnchoredAlign;
     alignOffsetPx: number;
     sectionInsetPx: number;
     anchorAlignment?: ChoicePopupAnchorAlignment;

package/dist/types/utils/index.d.ts

@@ -3,6 +3,8 @@ export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-
 export { formatCompactNumber } from './format-compact-number';
 export { formatPercentage } from './format-percentage';
 export type { PercentageDecimals } from './format-percentage';
+export { computeMetricChange, resolveMetricTrend } from './metric-change';
+export type { MetricChange, MetricTrend, MetricTrendDirection, MetricTrendTone, ResolveMetricTrendOptions, } from './metric-change';
 export { truncateSvgTextToWidth } from './truncate-svg-text';
 export { parseCssTimeMs, prefersReducedMotion, resolveCssTimeMs, resolveMotionTimeMs, } from './resolve-css-time-ms';
 export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, isScrollAtEdge, resolveScrollEdgeFadeSize, scrollEdgeFadeClassMap, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, scrollEdgeFadeSizeStyle, } from './scroll-edge-fade';