@ds-mo/ui 12.7.0 → 12.8.0

package/dist/react/components.d.ts

@@ -18,6 +18,7 @@ export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
+export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
 export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";

package/dist/react/components.js

@@ -19,6 +19,7 @@ export { DsButtonUnfilled } from "./ds-button-unfilled.js";
 export { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
 export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
+export { DsCardOverview } from "./ds-card-overview.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
 export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";

package/dist/react/ds-card-overview.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsCardOverviewCustomEvent, type OverviewMetric } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardOverview as DsCardOverviewElement } from "@ds-mo/ui/dist/components/ds-card-overview.js";
+export type DsCardOverviewEvents = {
+    onDsMetricSelect: EventName<DsCardOverviewCustomEvent<OverviewMetric>>;
+};
+export declare const DsCardOverview: StencilReactComponent<DsCardOverviewElement, DsCardOverviewEvents, Components.DsCardOverview>;

package/dist/react/ds-card-overview.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsCardOverview as DsCardOverviewElement, defineCustomElement as defineDsCardOverview } from "@ds-mo/ui/dist/components/ds-card-overview.js";
+export const DsCardOverview = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-overview',
+    elementClass: DsCardOverviewElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsMetricSelect: 'dsMetricSelect' },
+    defineCustomElement: defineDsCardOverview
+});

package/dist/styles/control-elevation.css

@@ -7,14 +7,22 @@
  * approved press-scaling button so its surface and elevation move as one unit.
  * The owner still supplies layout, radius, surface, and any backdrop blur.
  * Keep wrapped controls' optional resting borders off.
+ *
+ * Both `:host(.ds-control-elevation)` and `.ds-control-elevation` are listed so
+ * Stencil scoped components work whether the class sits on the host (a component
+ * that is itself the elevated surface) or on an inner wrapper. Scoped builds
+ * suffix host and child classes differently, so a plain class alone silently
+ * misses the host.
  */
 
+:host(.ds-control-elevation),
 .ds-control-elevation {
   position: relative;
   overflow: visible;
   box-shadow: var(--ds-control-elevation-shadow, none);
 }
 
+:host(.ds-control-elevation)::after,
 .ds-control-elevation::after {
   content: '';
   position: absolute;
@@ -26,16 +34,19 @@
   pointer-events: none;
 }
 
+:host(.ds-control-elevation--sm),
 .ds-control-elevation--sm {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-sm);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-sm);
 }
 
+:host(.ds-control-elevation--md),
 .ds-control-elevation--md {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-md);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-md);
 }
 
+:host(.ds-control-elevation--floating),
 .ds-control-elevation--floating {
   --ds-control-elevation-shadow: var(--effect-shadow-elevated-floating);
   --ds-control-elevation-highlight: var(--effect-highlight-elevated-floating);

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

@@ -7,6 +7,7 @@ export type ButtonFilledBackground = ChoiceBackground;
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
 export type ButtonFilledSize = 'lg' | 'md' | 'sm' | 'xs';
 export type ButtonFilledWidth = ControlWidth;
+export type ButtonFilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 export declare class ButtonFilled {
     el: HTMLElement;
     /**
@@ -38,6 +39,11 @@ export declare class ButtonFilled {
     background: ButtonFilledBackground | undefined;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
+    /**
+     * Scale down during a physical pointer press.
+     * Disable when an owning composite requires fixed child or background geometry.
+     */
+    pressScale: boolean;
     /** Disables interaction. */
     isInactive: boolean;
     /** Shows an inline loader and prevents interaction without applying inactive opacity. */
@@ -46,12 +52,38 @@ export declare class ButtonFilled {
     type: 'button' | 'submit' | 'reset';
     /** Accessible name override. Required for icon-only buttons. */
     ariaLabel: string | null;
+    /** 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;
+    /** Popup type exposed to assistive technology. */
+    haspopup: ButtonFilledPopup | undefined;
+    /** Pressed semantics for a toggle command that reports state elsewhere. */
+    pressed: boolean | undefined;
+    /**
+     * 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.
+     */
+    hasMenu: boolean;
     dsClick: EventEmitter<MouseEvent>;
     private buttonEl;
     setFocus(): Promise<void>;
     private handleClick;
     private get showIcon();
     private get showLabel();
+    /** Icon-only triggers rely on their own glyph, so the chevron is label-bound. */
+    private get showChevron();
+    private get resolvedHaspopup();
     private get accessibleName();
     render(): any;
 }

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

@@ -32,6 +32,11 @@ export declare class ButtonUnfilled {
     hasBorder: boolean;
     /** Use the half-radius treatment instead of the default control radius. */
     rounded: boolean;
+    /**
+     * Scale down during a physical pointer press.
+     * Disable when an owning composite requires fixed child or background geometry.
+     */
+    pressScale: boolean;
     /** Show a notification dot at the top-right of the icon zone (icon variant only). */
     dot: boolean;
     /** Disables interaction. */
@@ -48,6 +53,18 @@ export declare class ButtonUnfilled {
     expanded: boolean | undefined;
     haspopup: ButtonUnfilledPopup | undefined;
     pressed: boolean | undefined;
+    /**
+     * 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.
+     */
+    hasMenu: boolean;
     /**
      * Native `tabindex` for roving keyboard groups in shell chrome.
      * Omit for the default button tab stop (`0`).
@@ -61,6 +78,9 @@ export declare class ButtonUnfilled {
     private get showIcon();
     private get showLabel();
     private get showDot();
+    /** Icon-only triggers rely on their own glyph, so the chevron is label-bound. */
+    private get showChevron();
+    private get resolvedHaspopup();
     /** An expanded popup trigger is visually active even when selection is controlled separately. */
     private get visuallyActive();
     /** Knock-out ring: selected fill → active wash; otherwise surface token. */

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

@@ -0,0 +1,59 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { OverviewMetric, OverviewScore } from './card-overview-types';
+export declare class CardOverview {
+    el: HTMLElement;
+    /** Leading summary block. Omit to render the bar without a headline figure. */
+    score: OverviewScore | undefined;
+    /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */
+    periodLabel: string;
+    /** Comparison caption, for example `vs. previous score period`. */
+    comparisonLabel: string;
+    /** Measures rendered in the responsive grid. */
+    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.
+     */
+    metricMinWidth: string;
+    /** Replace the score and metrics with skeletons while data resolves. */
+    isLoading: boolean;
+    /** Message shown in place of the score when its figure cannot be resolved. */
+    scoreErrorMessage: string | undefined;
+    /** Accessible name for the region. */
+    overviewLabel: string;
+    /** Emitted when a metric that is not inactive is activated. */
+    dsMetricSelect: EventEmitter<OverviewMetric>;
+    /** Roving tab stop across selectable metrics. */
+    private focusedMetricIndex;
+    private get hasScore();
+    /** Index of the roving tab stop, skipping inactive metrics. */
+    private get rovingIndex();
+    private selectMetric;
+    /** Move the roving tab stop, wrapping and skipping inactive metrics. */
+    private moveFocus;
+    private handleMetricKeyDown;
+    /**
+     * A skeleton bar matching the type metrics of the text it stands in for, so the
+     * loading state holds the same shape and rhythm as the resolved content.
+     *
+     * `background` is always passed: the default base is the theme's quaternary
+     * foreground, which is black and therefore invisible on this permanently dark
+     * surface.
+     */
+    private bar;
+    /**
+     * Arrow and change in one text node.
+     *
+     * The arrow is a typeface glyph rather than an icon so it inherits the exact
+     * size, weight, and baseline of the value beside it; an icon would need its
+     * own size scale and would drift whenever the type scale changed.
+     *
+     * Tone is supplied by the caller and never inferred here.
+     */
+    private renderTrend;
+    private renderScore;
+    private renderMetric;
+    private renderMetrics;
+    render(): any;
+}
+//# sourceMappingURL=CardOverview.d.ts.map

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

@@ -0,0 +1,32 @@
+import type { MetricTrend } from '../../utils/metric-change';
+/**
+ * Leading summary block — the headline figure the rest of the bar contextualises.
+ *
+ * Derive `trend` with `resolveMetricTrend` so whether a rise reads well stays a
+ * product decision rather than a design-system one.
+ */
+export interface OverviewScore {
+    /** Category above the 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)`. */
+    band?: string;
+}
+/** One measure in the overview grid. */
+export interface OverviewMetric {
+    /** Stable identity for keyed rendering and selection events. */
+    id: string;
+    label: string;
+    /** Display-ready value; format compactly before passing it in. */
+    value: string | number;
+    /** Change against the comparison period. Omit when there is nothing to report. */
+    trend?: MetricTrend;
+    /** Present the measure without making it selectable. */
+    isInactive?: boolean;
+    /** Supplementary explanation for the label. */
+    labelTooltip?: string;
+}
+//# sourceMappingURL=card-overview-types.d.ts.map

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

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

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

@@ -2,8 +2,19 @@ import type { ChartDatum } from '../../utils/chart-types';
 export declare class ChartBar {
     /** Bars to render. Set as a JS property (not an HTML attribute). */
     data: ChartDatum[];
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     render(): any;
 }
 //# sourceMappingURL=ChartBar.d.ts.map

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

@@ -6,8 +6,19 @@ export declare class ChartBarStacked {
     /** X-axis labels — must match each series' `data` length. Set as a JS property. */
     categories: string[];
     variant: ChartBarStackedVariant;
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     private valuesForCategory;
     private accessibleLabel;
     render(): any;

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

@@ -4,9 +4,20 @@ export declare class ChartLine {
     series: ChartSeries[];
     /** X-axis labels — must match each series' `data` length. Set as a JS property. */
     categories: string[];
+    /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */
     width: number;
+    /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */
     height: number;
     showPoints: boolean;
+    private viewport;
+    private viewportController;
+    private svgEl;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
+    private connectViewportController;
+    disconnectedCallback(): void;
+    handleIntrinsicSizeChange(): void;
     render(): any;
 }
 //# sourceMappingURL=ChartLine.d.ts.map

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ChoicePopupAnchorAlignment, type ControlSize } from '../../utils';
-import { type MenuAlign, type MenuSide } from './menu-position';
+import type { MenuAlign, MenuSide } from './menu-position';
 import type { MenuItemData, MenuSection } from './menu-types';
 export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
@@ -48,10 +48,13 @@ export declare class Menu {
     /** Emitted when a generic `swatch-picker` section option is chosen. */
     dsSwatchSelect: EventEmitter<string>;
     private clickOutsideHandler;
-    private scrollResizeHandler;
     private closeTimer;
-    private positionRetryRaf;
-    private livePositionRaf;
+    /**
+     * Anchored placement. The choice-cell measurement stays here on purpose: the
+     * inner-cell align offset and the `--dimension-menu-width-xs` floor are Menu
+     * semantics, not shared geometry.
+     */
+    private readonly position;
     /** Last content actually painted while open; retained unchanged through exit motion. */
     private lastRenderedSections;
     private closingSections;

package/dist/types/components/Menu/menu-position.d.ts

@@ -1,7 +1,7 @@
-import { computeAnchoredPopupPosition, type AnchoredPopupAlign, type AnchoredPopupPositionInput, type AnchoredPopupSide } from '../../utils/anchored-popup';
-export type MenuSide = AnchoredPopupSide;
-export type MenuAlign = AnchoredPopupAlign;
-export type MenuPositionInput = AnchoredPopupPositionInput;
-/** Backward-compatible menu alias for the shared anchored-popup layout math. */
-export declare const computeMenuPosition: typeof computeAnchoredPopupPosition;
+import { computeAnchoredPosition, type AnchoredAlign, type AnchoredPositionInput, type AnchoredSide } from '../../utils/anchored-position';
+export type MenuSide = AnchoredSide;
+export type MenuAlign = AnchoredAlign;
+export type MenuPositionInput = AnchoredPositionInput;
+/** Backward-compatible menu alias for the shared anchored-position layout math. */
+export declare const computeMenuPosition: typeof computeAnchoredPosition;
 //# sourceMappingURL=menu-position.d.ts.map

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

@@ -39,6 +39,7 @@ export declare class ShellPage {
     private handleScroll;
     private findHeader;
     private get compactHeaderHeight();
+    private syncHeaderDividerInset;
     private setHeaderTravel;
     private measureHeaderTravel;
     private captureExpandedHeaderGeometry;

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

@@ -37,9 +37,8 @@ export declare class Tooltip {
     private closeTimer;
     private anchor;
     private popupEl;
-    private positionObserver;
     private anchorObserver;
-    private positionFrame;
+    private readonly position;
     private skipEnterAnimation;
     private isOpen;
     private lastInteractionWasKeyboard;
@@ -50,7 +49,6 @@ export declare class Tooltip {
     /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */
     private focusHandler;
     private blurHandler;
-    private scrollResizeHandler;
     private escapeHandler;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -83,7 +81,6 @@ export declare class Tooltip {
     private hide;
     private mountPopup;
     private renderPopupContent;
-    private calculatePosition;
     render(): any;
 }
 //# sourceMappingURL=Tooltip.d.ts.map