@ds-mo/ui 13.4.0 → 13.6.0

package/dist/react/components.js

@@ -10,6 +10,7 @@ export { DsAgentToolCall } from "./ds-agent-tool-call.js";
 export { DsAttachmentList } from "./ds-attachment-list.js";
 export { DsAvatar } from "./ds-avatar.js";
 export { DsBadge } from "./ds-badge.js";
+export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 export { DsBarWorkflow } from "./ds-bar-workflow.js";

package/dist/react/ds-banner.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 './react-runtime.js';
+import { type DsBannerCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBanner as DsBannerElement } from "@ds-mo/ui/dist/components/ds-banner.js";
+export type DsBannerEvents = {
+    onDsClose: EventName<DsBannerCustomEvent<MouseEvent>>;
+    onDsAfterClose: EventName<DsBannerCustomEvent<void>>;
+};
+export declare const DsBanner: StencilReactComponent<DsBannerElement, DsBannerEvents, Components.DsBanner, 'description'>;

package/dist/react/ds-banner.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsBanner as DsBannerElement, defineCustomElement as defineDsBanner } from "@ds-mo/ui/dist/components/ds-banner.js";
+export const DsBanner = /*@__PURE__*/ createComponent({
+    tagName: 'ds-banner',
+    elementClass: DsBannerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsClose: 'dsClose',
+        onDsAfterClose: 'dsAfterClose'
+    },
+    defineCustomElement: defineDsBanner
+});

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';
+export type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';
+export type BannerAnnouncement = 'none' | 'polite' | 'assertive';
+export type BannerOrientation = 'horizontal' | 'vertical';
+export declare class Banner {
+    el: HTMLElement;
+    /** Required explanatory copy. */
+    description: string;
+    /** Optional visual heading rendered before the description. */
+    heading: string;
+    /** Semantic color family. */
+    intent: BannerIntent;
+    /** Surface fill weight. */
+    contrast: BannerContrast;
+    /** Copy and action-lane arrangement, selected by the application. */
+    orientation: BannerOrientation;
+    /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */
+    open: boolean;
+    /** Localized accessible label for the close control. */
+    dismissLabel: string;
+    /** Live-region urgency, independent of visual intent. */
+    announcement: BannerAnnouncement;
+    /** Emitted when the close control requests dismissal. The application controls open. */
+    dsClose: EventEmitter<MouseEvent>;
+    /** Emitted once after controlled exit motion and layout collapse complete. */
+    dsAfterClose: EventEmitter<void>;
+    private rendered;
+    private phase;
+    private hasActions;
+    private loaded;
+    private transitionTimer;
+    private openFrame;
+    private closePending;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onOpenChange(isOpen: boolean): void;
+    private get closeMotionMs();
+    private clearTransitionWork;
+    private startOpen;
+    private startClose;
+    private finishClose;
+    private updateActionsPresence;
+    private requestClose;
+    private get role();
+    private get ariaLive();
+    render(): any;
+}
+//# sourceMappingURL=Banner.d.ts.map

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/Modal/Modal.d.ts

@@ -9,6 +9,8 @@ export declare class Modal {
     el: HTMLElement;
     open: boolean;
     heading: string;
+    /** Optional supporting copy shown below the heading. */
+    description: string;
     closeAriaLabel: string;
     modalWidth: ModalWidth | string;
     /** Optional id reference for explanatory content in the default slot. */
@@ -20,6 +22,7 @@ export declare class Modal {
     /** Emitted after exit motion completes, the top layer closes, and focus is restored. */
     dsAfterClose: EventEmitter<void>;
     private titleId;
+    private descriptionId;
     private dialogEl;
     private previousFocus;
     private closeTimer;
@@ -34,6 +37,7 @@ export declare class Modal {
     private handleBackdropPointerDown;
     private handleKeyDown;
     private get resolvedWidth();
+    private get describedBy();
     private get closeAnimationMs();
     private finishClose;
     render(): any;

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

@@ -56,6 +56,7 @@ export declare class PanelTools {
     private presentationMotionSuppressed;
     private rovingIndex;
     private fullViewToolIds;
+    private railBodyScrollable;
     private motionEnableGeneration;
     private presentationMotionGeneration;
     private transitionGeneration;
@@ -64,6 +65,8 @@ export declare class PanelTools {
     private ignoreReplacementTerminal;
     private focusBeforeFullscreen;
     private fullViewObserver;
+    private railBodyEl?;
+    private railBodyObserver?;
     private get railItems();
     private get orderedRailItems();
     disconnectedCallback(): void;
@@ -77,6 +80,10 @@ export declare class PanelTools {
     activeToolChanged(): void;
     storageKeyChanged(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
+    private connectRailBodyObserver;
+    private disconnectRailBodyObserver;
+    private updateRailBodyScrollable;
     itemsChanged(): void;
     private restoreLastActiveTool;
     private persistLastActiveTool;

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

@@ -9,6 +9,7 @@ import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
 import { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 import { AvatarSize } from "./components/Avatar/Avatar";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
+import { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
 import { NavChromeStyle } from "./shell/nav-chrome";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
@@ -65,6 +66,7 @@ export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
 export { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 export { AvatarSize } from "./components/Avatar/Avatar";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
+export { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
 export { NavChromeStyle } from "./shell/nav-chrome";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
@@ -269,6 +271,47 @@ export namespace Components {
          */
         "variant": BadgeVariant;
     }
+    interface DsBanner {
+        /**
+          * Live-region urgency, independent of visual intent.
+          * @default 'none'
+         */
+        "announcement": BannerAnnouncement;
+        /**
+          * Surface fill weight.
+          * @default 'faint'
+         */
+        "contrast": BannerContrast;
+        /**
+          * Required explanatory copy.
+         */
+        "description": string;
+        /**
+          * Localized accessible label for the close control.
+          * @default 'Dismiss banner'
+         */
+        "dismissLabel": string;
+        /**
+          * Optional visual heading rendered before the description.
+          * @default ''
+         */
+        "heading": string;
+        /**
+          * Semantic color family.
+          * @default 'neutral'
+         */
+        "intent": BannerIntent;
+        /**
+          * Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
+          * @default true
+         */
+        "open": boolean;
+        /**
+          * Copy and action-lane arrangement, selected by the application.
+          * @default 'horizontal'
+         */
+        "orientation": BannerOrientation;
+    }
     interface DsBarNav {
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
@@ -661,7 +704,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 +719,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 +734,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 +747,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 +1211,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;
@@ -1584,6 +1627,11 @@ export namespace Components {
           * @default 'Close'
          */
         "closeAriaLabel": string;
+        /**
+          * Optional supporting copy shown below the heading.
+          * @default ''
+         */
+        "description": string;
         "heading": string;
         /**
           * @default 'md'
@@ -2005,7 +2053,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;
@@ -2719,6 +2767,10 @@ export namespace Components {
         "label": string;
     }
 }
+export interface DsBannerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBannerElement;
+}
 export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBarNavElement;
@@ -2922,6 +2974,24 @@ declare global {
         prototype: HTMLDsBadgeElement;
         new (): HTMLDsBadgeElement;
     };
+    interface HTMLDsBannerElementEventMap {
+        "dsClose": MouseEvent;
+        "dsAfterClose": void;
+    }
+    interface HTMLDsBannerElement extends Components.DsBanner, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[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 HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[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 HTMLDsBannerElement: {
+        prototype: HTMLDsBannerElement;
+        new (): HTMLDsBannerElement;
+    };
     interface HTMLDsBarNavElementEventMap {
         "dsTabChange": string;
     }
@@ -3834,6 +3904,7 @@ declare global {
         "ds-attachment-list": HTMLDsAttachmentListElement;
         "ds-avatar": HTMLDsAvatarElement;
         "ds-badge": HTMLDsBadgeElement;
+        "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
         "ds-bar-title": HTMLDsBarTitleElement;
         "ds-bar-workflow": HTMLDsBarWorkflowElement;
@@ -4049,6 +4120,55 @@ declare namespace LocalJSX {
          */
         "variant"?: BadgeVariant;
     }
+    interface DsBanner {
+        /**
+          * Live-region urgency, independent of visual intent.
+          * @default 'none'
+         */
+        "announcement"?: BannerAnnouncement;
+        /**
+          * Surface fill weight.
+          * @default 'faint'
+         */
+        "contrast"?: BannerContrast;
+        /**
+          * Required explanatory copy.
+         */
+        "description": string;
+        /**
+          * Localized accessible label for the close control.
+          * @default 'Dismiss banner'
+         */
+        "dismissLabel"?: string;
+        /**
+          * Optional visual heading rendered before the description.
+          * @default ''
+         */
+        "heading"?: string;
+        /**
+          * Semantic color family.
+          * @default 'neutral'
+         */
+        "intent"?: BannerIntent;
+        /**
+          * Emitted once after controlled exit motion and layout collapse complete.
+         */
+        "onDsAfterClose"?: (event: DsBannerCustomEvent<void>) => void;
+        /**
+          * Emitted when the close control requests dismissal. The application controls open.
+         */
+        "onDsClose"?: (event: DsBannerCustomEvent<MouseEvent>) => void;
+        /**
+          * Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
+          * @default true
+         */
+        "open"?: boolean;
+        /**
+          * Copy and action-lane arrangement, selected by the application.
+          * @default 'horizontal'
+         */
+        "orientation"?: BannerOrientation;
+    }
     interface DsBarNav {
         /**
           * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
@@ -4482,7 +4602,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 +4617,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 +4636,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 +4649,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 +5142,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;
@@ -5467,6 +5587,11 @@ declare namespace LocalJSX {
           * @default 'Close'
          */
         "closeAriaLabel"?: string;
+        /**
+          * Optional supporting copy shown below the heading.
+          * @default ''
+         */
+        "description"?: string;
         "heading": string;
         /**
           * @default 'md'
@@ -5936,7 +6061,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;
@@ -6766,6 +6891,16 @@ declare namespace LocalJSX {
         "gradientBackground": boolean;
         "label": string | undefined;
     }
+    interface DsBannerAttributes {
+        "description": string;
+        "heading": string;
+        "intent": BannerIntent;
+        "contrast": BannerContrast;
+        "orientation": BannerOrientation;
+        "open": boolean;
+        "dismissLabel": string;
+        "announcement": BannerAnnouncement;
+    }
     interface DsBarNavAttributes {
         "navStyle": NavChromeStyle;
         "value": string;
@@ -7093,6 +7228,7 @@ declare namespace LocalJSX {
     interface DsModalAttributes {
         "open": boolean;
         "heading": string;
+        "description": string;
         "closeAriaLabel": string;
         "modalWidth": ModalWidth | string;
         "ariaDescribedby": string | undefined;
@@ -7358,6 +7494,7 @@ declare namespace LocalJSX {
         "ds-attachment-list": Omit<DsAttachmentList, keyof DsAttachmentListAttributes> & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes]?: DsAttachmentList[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `attr:${K}`]?: DsAttachmentListAttributes[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `prop:${K}`]?: DsAttachmentList[K] };
         "ds-avatar": Omit<DsAvatar, keyof DsAvatarAttributes> & { [K in keyof DsAvatar & keyof DsAvatarAttributes]?: DsAvatar[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `attr:${K}`]?: DsAvatarAttributes[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `prop:${K}`]?: DsAvatar[K] };
         "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
+        "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] } & OneOf<"description", DsBanner["description"], DsBannerAttributes["description"]>;
         "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
         "ds-bar-title": Omit<DsBarTitle, keyof DsBarTitleAttributes> & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes]?: DsBarTitle[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `attr:${K}`]?: DsBarTitleAttributes[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `prop:${K}`]?: DsBarTitle[K] } & OneOf<"heading", DsBarTitle["heading"], DsBarTitleAttributes["heading"]>;
         "ds-bar-workflow": Omit<DsBarWorkflow, keyof DsBarWorkflowAttributes> & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes]?: DsBarWorkflow[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `attr:${K}`]?: DsBarWorkflowAttributes[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `prop:${K}`]?: DsBarWorkflow[K] } & OneOf<"heading", DsBarWorkflow["heading"], DsBarWorkflowAttributes["heading"]>;
@@ -7430,6 +7567,7 @@ declare module "@stencil/core" {
             "ds-attachment-list": LocalJSX.IntrinsicElements["ds-attachment-list"] & JSXBase.HTMLAttributes<HTMLDsAttachmentListElement>;
             "ds-avatar": LocalJSX.IntrinsicElements["ds-avatar"] & JSXBase.HTMLAttributes<HTMLDsAvatarElement>;
             "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
+            "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
             "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
             "ds-bar-title": LocalJSX.IntrinsicElements["ds-bar-title"] & JSXBase.HTMLAttributes<HTMLDsBarTitleElement>;
             "ds-bar-workflow": LocalJSX.IntrinsicElements["ds-bar-workflow"] & JSXBase.HTMLAttributes<HTMLDsBarWorkflowElement>;