@ds-mo/ui 13.5.0 → 13.6.1

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.5.0","components":66,"digest":"eebaa1f1eabb8a41935b6137f29b9e5a04282391042c802fc0025b1e4802e141","completedAt":"2026-07-31T23:33:12.355Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.6.1","components":67,"digest":"860dd632a0ab5a430878b0c760667f3f3d49e5097bbd9db8d879edfe4e55c8cd","completedAt":"2026-08-02T03:35:46.739Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "13.5.0",
+  "packageVersion": "13.6.1",
   "kind": "patterns",
   "entries": [
     {
@@ -136,6 +136,11 @@
           "component": "component:ds-mobile-bar-nav",
           "role": "Managed persistent mobile destinations for Menu, current area, Search, Agents, Inbox, and Help.",
           "required": false
+        },
+        {
+          "component": "component:ds-banner",
+          "role": "Optional application-owned global message placed in the single shell banner lane.",
+          "required": false
         }
       ],
       "stateOwnership": [
@@ -145,6 +150,7 @@
         "ShellApp owns responsive mode, PanelNav presentation, tool open state, active tool, mobile Inbox grouping, Menu state, fullscreen presentation, focus restoration, and breakpoint state preservation.",
         "Tool products and routed content are instantiated once by the application in named tool-view and default slots; ShellApp changes presentation without recreating those owners.",
         "The application owns account menus, tool product data, page actions, and the consequences of every emitted intent event.",
+        "The application resolves competing global messages to one Banner and owns its actions, controlled open state, orientation for the available shell capacity, dismissal persistence, and removal after exit motion.",
         "Use composition=\"slotted\" only when a team intentionally needs to assemble the public lower-level chrome components itself."
       ],
       "accessibility": [
@@ -157,7 +163,8 @@
       "responsiveBehavior": [
         "ShellApp automatically resolves desktop at 1200px and wider, tablet from 768px through 1199px, and mobile below 768px.",
         "Desktop and tablet use PanelNav, BarNav, PanelTools through ShellTools, and ShellPage chrome.",
-        "Mobile uses MobileSheetNav, MobileBarNav, MobileHeader, ShellTools mobile presentation, and the same routed content owner.",
+        "Mobile uses MobileSheetNav, MobileBarNav, MobileHeader, ShellTools mobile presentation, and the same routed content owner. MobileBarNav paints its primary surface through the bottom safe-area inset so light browser chrome and application chrome meet without a secondary-surface seam.",
+        "An optional Banner spans the complete application above desktop navigation, workspace, tools, and mobile global surfaces while remaining below the operating-system top safe area.",
         "Switching breakpoints changes presentation and inert state without recreating route or tool elements.",
         "Messages, Stacks, and Activity use explicit mobile grouping metadata and default to the canonical Inbox recipe."
       ],

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "13.5.0",
+  "packageVersion": "13.6.1",
   "kind": "components",
   "entries": [
     {
@@ -620,6 +620,157 @@
         "text"
       ]
     },
+    {
+      "id": "component:ds-banner",
+      "tag": "ds-banner",
+      "name": "banner",
+      "title": "Banner",
+      "summary": "Persistent in-flow application banner with semantic color intent, explicit announcement urgency, horizontal actions, and controlled dismissal motion.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Persistent in-flow application banner with semantic color intent, explicit announcement urgency, horizontal actions, and controlled dismissal motion.",
+        "useWhen": [
+          "A persistent application-wide condition or announcement must remain visible while the user works.",
+          "A shell-level message needs optional actions and dismissal while reflowing the application rather than floating over it.",
+          "Message urgency and color intent must be selected independently."
+        ],
+        "avoidWhen": [
+          "Feedback is transient, queued, promise-driven, or anchored to a control; use Toast.",
+          "The message belongs inside a field, card, or bounded content section; use the future inline banner rather than shrinking the application shell.",
+          "Several global messages must be prioritized or queued; the application must resolve them to one active banner before rendering."
+        ],
+        "alternatives": [
+          {
+            "when": "Feedback is transient or follows a completed action.",
+            "component": "component:ds-toast",
+            "reason": "Toast owns queues, timers, stacking, swipe dismissal, and anchored feedback."
+          },
+          {
+            "when": "A bounded region has no content to show.",
+            "component": "component:ds-empty-state",
+            "reason": "EmptyState explains an empty result without creating global application urgency."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-shell-app",
+          "component:ds-button-unfilled"
+        ],
+        "patterns": [
+          "pattern:application-shell"
+        ],
+        "accessibility": [
+          "Choose announcement=none for content present at page load, polite for non-urgent dynamic changes, and assertive only when immediate interruption is necessary.",
+          "Visual intent never chooses live-region urgency; a negative banner can be persistent and non-urgent, while a neutral banner can require prompt attention.",
+          "The close control is always available. Localize dismissLabel and keep the banner mounted until dsAfterClose before removing it.",
+          "Slotted actions retain their own accessible names, keyboard behavior, and outcome messaging."
+        ],
+        "states": [
+          "The application owns open. The always-present close control emits dsClose, and the application sets open=false to begin exit motion.",
+          "dsAfterClose fires once after the closing banner is inert, hidden from assistive technology, and no longer occupies layout space.",
+          "The opaque surface slides by its complete block size while occupied-shell space expands with the same short-3 duration. Opening uses the shell tool panel's ease-out curve; dismissal reverses with its ease-in curve, keeping the Banner boundary flush with the shell throughout.",
+          "Heading is optional and description is required. With orientation=horizontal they share one inline copy flow, so description begins after the heading and continuation lines use the complete text width beneath it. With orientation=vertical, description starts on the next line with a 4px gap.",
+          "The actions slot accepts at most two ds-button-unfilled controls. They stay in one horizontal trailing lane, align to the top of the dismiss control when sharing the copy row, and must receive the matching parent-surface background context.",
+          "Intent selects neutral, brand, positive, warning, caution, or negative hue. Contrast independently selects faint, medium, strong, or bold fill.",
+          "Banner has a real bottom boundary, no radius, no elevation, no icon, no timeout, and no internal queue."
+        ],
+        "responsiveBehavior": [
+          "Applications select orientation explicitly. Horizontal keeps copy and actions in one row, with actions top-aligned to dismissal. Vertical puts actions below copy on the 16px text boundary and keeps controls 16px above the bottom boundary; without actions it reserves no trailing row and keeps the copy visually balanced between the top and bottom edges.",
+          "When placed in ShellApp's banner slot, the banner spans the complete application above navigation, workspace, and tools.",
+          "ShellApp reserves the mobile top safe area once above the banner and keeps the banner visible while mobile tools or navigation surfaces replace the routed stage."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Listen for dsClose, set open=false, and wait for dsAfterClose before conditionally removing the element.",
+            "Place at most one ds-banner in ShellApp's banner slot, choose horizontal or vertical orientation for the available shell capacity, and assign no more than two ds-button-unfilled elements slot=actions."
+          ],
+          "react": [
+            "Keep the component mounted while open changes from true to false; remove it in onDsAfterClose when unmounting is required.",
+            "Project no more than two ds-button-unfilled actions and pass each the matching background context."
+          ],
+          "angular": [
+            "Bind open as controlled application state, handle dsClose to update it, and wait for dsAfterClose before removing an ngIf owner.",
+            "Import and project no more than two DsButtonUnfilled actions with slot=actions and their matching background input."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook examples",
+            "path": "src/wc/components/Banner/Banner.stories.ts"
+          },
+          {
+            "label": "Rendered behavior coverage",
+            "path": "tests/e2e/banner.spec.ts"
+          },
+          {
+            "label": "Application shell contract",
+            "path": "agent/patterns/application-shell/pattern.agent.json"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "announcement": {
+            "type": "BannerAnnouncement",
+            "required": false
+          },
+          "contrast": {
+            "type": "BannerContrast",
+            "required": false
+          },
+          "description": {
+            "type": "string",
+            "required": true
+          },
+          "dismissLabel": {
+            "type": "string",
+            "required": false
+          },
+          "heading": {
+            "type": "string",
+            "required": false
+          },
+          "intent": {
+            "type": "BannerIntent",
+            "required": false
+          },
+          "open": {
+            "type": "boolean",
+            "required": false
+          },
+          "orientation": {
+            "type": "BannerOrientation",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsAfterClose",
+            "detail": "void"
+          },
+          {
+            "name": "dsClose",
+            "detail": "MouseEvent"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-banner",
+        "react": "DsBanner",
+        "angular": "DsBanner"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": [
+        "button-unfilled",
+        "text",
+        "tooltip"
+      ]
+    },
     {
       "id": "component:ds-bar-nav",
       "tag": "ds-bar-nav",
@@ -846,7 +997,7 @@
         "responsiveBehavior": [
           "BarTitle does not observe viewport, shell, scroll, or container state. Its owner selects an explicit variant.",
           "ShellPage is the standard owner for automatic expanded, compact, and constrained selection.",
-          "Compact titles use the shared md control inset so top-level headings align with BarNav and inline Back geometry aligns with PanelToolHeader. Long headings and section labels truncate independently while Back and action controls retain complete hit targets and accessible names.",
+          "Compact titles use the shared compact-header geometry and md control inset so top-level headings align with BarNav and inline Back geometry aligns with PanelToolHeader. Long headings and section labels truncate independently while Back and action controls retain complete hit targets and accessible names.",
           "A never-collapse primary action remains visible in constrained mode; the title and section label yield space first."
         ],
         "frameworkCaveats": {
@@ -4400,6 +4551,7 @@
         "states": [
           "The component owns clipboard execution and temporary copied feedback while the application supplies the exact copyable text.",
           "Feedback is controlled: the component emits the requested positive, negative, or cleared value while the application owns persistence and consequences.",
+          "Selected feedback changes to the filled thumb icon without adding a persistent selected fill; hover and press feedback remain available.",
           "Copy, positive feedback, and negative feedback retain one stable order."
         ],
         "responsiveBehavior": [
@@ -4752,8 +4904,8 @@
           "Direct touch paints the pressed overlay immediately, keeps a quick tap visible for one short frame, and clears it after release or cancellation without relying on Safari's latch-prone active state."
         ],
         "responsiveBehavior": [
-          "Render only below the mobile breakpoint; its secondary surface extends through the bottom safe-area inset when the application enables viewport-fit=cover.",
-          "The secondary-background bar keeps an 8px outer inset; its two icon-only groups anchor to opposite edges while retaining fixed 40px targets and a divider between Menu and current area.",
+          "Render only below the mobile breakpoint; its primary surface extends through the bottom safe-area inset when the application enables viewport-fit=cover.",
+          "The primary-background bar keeps an 8px outer inset; its two icon-only groups anchor to opposite edges while retaining fixed 40px targets and a divider between Menu and current area.",
           "Bar chrome and its divider are not text-selectable and suppress the iOS touch callout."
         ],
         "references": [
@@ -5163,12 +5315,12 @@
       "tag": "ds-modal",
       "name": "modal",
       "title": "Modal",
-      "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
+      "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a compact title-and-close header, optional supporting description, composable content, and an optional two-action footer.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a fixed title-and-close header, composable content, and an optional two-action footer.",
+        "summary": "Dismissible native top-layer dialog for a focused confirmation or short blocking task, with a compact title-and-close header, optional supporting description, composable content, and an optional two-action footer.",
         "useWhen": [
           "The user must confirm or cancel one focused decision before returning to the underlying interface.",
           "A short blocking task or compact form needs dialog semantics, focus containment, and explicit completion actions.",
@@ -5206,6 +5358,7 @@
         ],
         "accessibility": [
           "Provide a concise visible heading; the component uses it as the dialog's accessible name.",
+          "When concise supporting context belongs in the header, provide description; it stays below the title and is included in the dialog's accessible description.",
           "Give the primary explanatory copy a stable id and pass it through aria-describedby so assistive technology receives the decision context.",
           "Opening the native modal dialog moves focus to the header Close action, whose visible tooltip matches its accessible name, traps Tab navigation inside the top layer, and makes outside content inert.",
           "Close, Escape, and backdrop activation emit dsClose with close-button, escape, or backdrop reason before beginning dismissal; use the component only when every dismissal path is safe.",
@@ -5218,12 +5371,13 @@
           "The owner opens the modal through the open property and responds to the typed dsClose detail for application state synchronization or dismissal analytics.",
           "The component mutates open to false for Close, Escape, and backdrop dismissal while retaining its rendered surface through exit motion.",
           "The default slot owns task content; the named footer slot is optional and is hidden when no actions are assigned.",
+          "The optional header description remains stacked beneath the title with the shared compact-header rhythm; longer task content belongs in the default slot.",
           "Primary actions use a bold filled button with semantic intent. Secondary and cancel actions use bordered label-only unfilled buttons.",
           "The owner performs save, delete, cancel, and other product consequences before or while closing the modal."
         ],
         "responsiveBehavior": [
           "Choose the smallest sm, md, or lg width that fits the focused task; the top-layer dialog clamps to the viewport with token-based outer space.",
-          "Content scrolls independently when needed while the 64px header and optional 64px footer remain fixed.",
+          "Content scrolls independently when needed while the header and optional 64px footer remain fixed. The title-only header uses the shared 48px compact geometry and grows when its optional description wraps.",
           "Avoid layouts whose minimum content width exceeds the narrow viewport clamp.",
           "The native top layer escapes transformed ancestors, clipping containers, and application stacking contexts without moving slotted content."
         ],
@@ -5269,6 +5423,10 @@
             "type": "string",
             "required": false
           },
+          "description": {
+            "type": "string",
+            "required": false
+          },
           "heading": {
             "type": "string",
             "required": true
@@ -5697,7 +5855,7 @@
         ],
         "states": [
           "The title remains left aligned whether the header has no actions, Back, one trailing action, or several trailing actions.",
-          "Leading and trailing control zones never shrink; only the title consumes and truncates within the remaining width, with a fixed 4px gap between zones.",
+          "Leading and trailing control zones never shrink; only the title consumes and truncates within the remaining width. The header uses the shared 8px compact-header zone gap, while adjacent trailing actions retain their 4px control gap.",
           "Header chrome text is not selectable; actions remain keyboard focusable and interactive.",
           "Adjacent trailing actions keep the shared 4px control gap in drawer and fullscreen presentations.",
           "When fullscreen and overflow actions appear together, author fullscreen before overflow so Ellipses remains the rightmost action.",
@@ -5981,6 +6139,7 @@
           "Provide localized accessible labels for the rail, shortcut group, and every rendered tool.",
           "Use the canonical default recipe when the product needs Search first and Help last; custom recipes must preserve a deliberate keyboard and visual order.",
           "Keep focus on the selected rail action when opening a drawer and allow normal Tab navigation into its content.",
+          "When the shortcut rail overflows, its labeled body becomes a keyboard-focusable scroll region without changing the rail action order.",
           "Do not trigger global shortcuts while focus is in an editable control.",
           "Use notification dots only as supplemental unread or new-content status and never as the sole status indication.",
           "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely."
@@ -6657,6 +6816,7 @@
           "component:ds-mobile-header",
           "component:ds-mobile-bar-nav",
           "component:ds-shell-page",
+          "component:ds-banner",
           "component:ds-swatch-picker"
         ],
         "patterns": [
@@ -6666,6 +6826,7 @@
         "accessibility": [
           "Supply primary destinations through navigation and secondary route sections through pageChrome so managed ShellApp preserves their correct semantics.",
           "Ensure the default content region contains the page's single main landmark.",
+          "Keep the shell-owned routed-content scroller keyboard-focusable while its page landmark retains content semantics.",
           "Keep the managed desktop/tablet and mobile presentations available without conditionally recreating routed or tool content.",
           "Do not override browser keyboard chords when enabling shell shortcuts.",
           "Require Search and Help as the minimum PanelTools actions and provide accessible labels for every tool.",
@@ -6678,6 +6839,7 @@
           "ShellApp renders the lower-level desktop, tablet, and mobile chrome, coordinates layout, gradient alignment, transitions, shortcuts, global surfaces, Inbox state, focus restoration, and mobile-stage visibility.",
           "The application router owns authorization, current URLs, history, and route execution; ShellApp forwards navigation and page intent events without routing.",
           "The application supplies each routed content owner and tool view once. ShellApp changes visibility, inert state, and presentation without recreating those nodes.",
+          "The optional banner slot accepts one application-owned ds-banner above the complete shell row. The application owns its open state, orientation for the current shell capacity, action consequences, dismissal persistence, and resolution when several messages compete.",
           "Use composition=slotted only for advanced application architectures that intentionally own all lower-level chrome wiring.",
           "Set gradientPreset to the single resolved global chrome preference: neutral by default, none for solid chrome, or cool, neutral, warm, and fresh for token-based washes.",
           "The application owns gradient preference persistence, cross-tab synchronization, and server or account precedence; ShellApp owns rendering the resolved preset across authenticated routes.",
@@ -6693,6 +6855,7 @@
           "On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
           "On mobile, ShellApp hides and inerts desktop chrome, uses a solid primary stage, and composes MobileHeader, MobileSheetNav, ShellTools, and the persistent MobileBarNav around the same application-owned content.",
           "When the application enables viewport-fit=cover, ShellApp reserves the shared top safe-area inset once for the complete mobile stage; nested routed, sheet, and tool headers must not add a second top inset.",
+          "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
           "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
           "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
           "The bottom bar remains visible at all route and tool depths in the foundation release."

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

@@ -0,0 +1,23 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsBannerCustomEvent } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsBanner {
+    protected z: NgZone;
+    protected el: HTMLDsBannerElement;
+    dsClose: EventEmitter<DsBannerCustomEvent<MouseEvent>>;
+    dsAfterClose: EventEmitter<DsBannerCustomEvent<void>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsBanner, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsBanner, "ds-banner", never, { "announcement": { "alias": "announcement"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "description": { "alias": "description"; "required": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "open": { "alias": "open"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; }, never, ["*"], true, never>;
+}
+export declare interface DsBanner extends Components.DsBanner {
+    /**
+     * Emitted when the close control requests dismissal. The application controls open.
+     */
+    dsClose: EventEmitter<DsBannerCustomEvent<MouseEvent>>;
+    /**
+     * Emitted once after controlled exit motion and layout collapse complete.
+     */
+    dsAfterClose: EventEmitter<DsBannerCustomEvent<void>>;
+}

package/dist/angular/ds-banner.js

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

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

@@ -10,7 +10,7 @@ export declare class DsModal {
     dsAfterClose: EventEmitter<DsModalCustomEvent<void>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsModal, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsModal, "ds-modal", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "modalWidth": { "alias": "modalWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsModal, "ds-modal", never, { "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "closeAriaLabel": { "alias": "closeAriaLabel"; "required": false; }; "description": { "alias": "description"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "modalWidth": { "alias": "modalWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; }, never, ["*"], true, never>;
 }
 export declare interface DsModal extends Components.DsModal {
     /**

package/dist/angular/ds-modal.js

@@ -19,12 +19,12 @@ let DsModal = class DsModal {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsModal, isStandalone: true, selector: "ds-modal", inputs: { ariaDescribedby: "ariaDescribedby", closeAriaLabel: "closeAriaLabel", heading: "heading", modalWidth: "modalWidth", open: "open" }, outputs: { dsClose: "dsClose", dsAfterClose: "dsAfterClose" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsModal, isStandalone: true, selector: "ds-modal", inputs: { ariaDescribedby: "ariaDescribedby", closeAriaLabel: "closeAriaLabel", description: "description", heading: "heading", modalWidth: "modalWidth", open: "open" }, outputs: { dsClose: "dsClose", dsAfterClose: "dsAfterClose" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsModal = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsModal,
-        inputs: ['ariaDescribedby', 'closeAriaLabel', 'heading', 'modalWidth', 'open']
+        inputs: ['ariaDescribedby', 'closeAriaLabel', 'description', 'heading', 'modalWidth', 'open']
     })
 ], DsModal);
 export { DsModal };
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['ariaDescribedby', 'closeAriaLabel', { name: 'heading', required: true }, 'modalWidth', 'open'],
+                    inputs: ['ariaDescribedby', 'closeAriaLabel', 'description', { name: 'heading', required: true }, 'modalWidth', 'open'],
                     outputs: ['dsClose', 'dsAfterClose'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClose: [{

package/dist/angular/index.d.ts

@@ -1,2 +1,2 @@
 import * as d from './proxies';
-export declare const DIRECTIVES: (typeof d.DsAgentActivity | typeof d.DsAgentResponse | typeof d.DsAgentSourceList | typeof d.DsAgentToolCall | typeof d.DsAttachmentList | typeof d.DsAvatar | typeof d.DsBadge | typeof d.DsBarNav | typeof d.DsBarTitle | typeof d.DsBarWorkflow | typeof d.DsBreadcrumb | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataViz | typeof d.DsCardOverview | typeof d.DsCardSetting | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsCodeBlock | typeof d.DsConversationListItem | typeof d.DsConversationListSection | typeof d.DsConversationList | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMarkdown | typeof d.DsMenu | typeof d.DsMessageActions | typeof d.DsMessageBubble | typeof d.DsMessageComposer | typeof d.DsMessageScroller | typeof d.DsMessage | typeof d.DsMobileBarNav | typeof d.DsMobileHeader | typeof d.DsMobileSectionSwitcher | typeof d.DsMobileSheetNav | typeof d.DsModal | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelToolHeader | typeof d.DsPanelToolSearch | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsScrollOverlay | typeof d.DsSelect | typeof d.DsShellApp | typeof d.DsShellPage | typeof d.DsShellTools | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwatchPicker | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTag | typeof d.DsText | typeof d.DsToast | typeof d.DsTooltipDataViz | typeof d.DsTooltip | typeof d.DsTypingIndicator)[];
+export declare const DIRECTIVES: (typeof d.DsAgentActivity | typeof d.DsAgentResponse | typeof d.DsAgentSourceList | typeof d.DsAgentToolCall | typeof d.DsAttachmentList | typeof d.DsAvatar | typeof d.DsBadge | typeof d.DsBanner | typeof d.DsBarNav | typeof d.DsBarTitle | typeof d.DsBarWorkflow | typeof d.DsBreadcrumb | typeof d.DsButtonFilled | typeof d.DsButtonUnfilled | typeof d.DsCardDataViz | typeof d.DsCardOverview | typeof d.DsCardSetting | typeof d.DsChartBar | typeof d.DsChartDonut | typeof d.DsChartLegend | typeof d.DsChartLine | typeof d.DsCheckbox | typeof d.DsChip | typeof d.DsCodeBlock | typeof d.DsConversationListItem | typeof d.DsConversationListSection | typeof d.DsConversationList | typeof d.DsDivider | typeof d.DsEmptyState | typeof d.DsField | typeof d.DsIcon | typeof d.DsInput | typeof d.DsLoader | typeof d.DsMarkdown | typeof d.DsMenu | typeof d.DsMessageActions | typeof d.DsMessageBubble | typeof d.DsMessageComposer | typeof d.DsMessageScroller | typeof d.DsMessage | typeof d.DsMobileBarNav | typeof d.DsMobileHeader | typeof d.DsMobileSectionSwitcher | typeof d.DsMobileSheetNav | typeof d.DsModal | typeof d.DsPanelNav | typeof d.DsPanelSubNav | typeof d.DsPanelToolHeader | typeof d.DsPanelToolSearch | typeof d.DsPanelTools | typeof d.DsRadio | typeof d.DsScrollOverlay | typeof d.DsSelect | typeof d.DsShellApp | typeof d.DsShellPage | typeof d.DsShellTools | typeof d.DsSkeleton | typeof d.DsSlider | typeof d.DsSwatchPicker | typeof d.DsSwitch | typeof d.DsTabGroup | typeof d.DsTag | typeof d.DsText | typeof d.DsToast | typeof d.DsTooltipDataViz | typeof d.DsTooltip | typeof d.DsTypingIndicator)[];

package/dist/angular/index.js

@@ -7,6 +7,7 @@ export const DIRECTIVES = [
     d.DsAttachmentList,
     d.DsAvatar,
     d.DsBadge,
+    d.DsBanner,
     d.DsBarNav,
     d.DsBarTitle,
     d.DsBarWorkflow,

package/dist/angular/proxies.d.ts

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

package/dist/angular/proxies.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/components/ds-agent-activity.js

@@ -1,2 +1,2 @@
-import{A as o,d as s}from"./p-BSocHH2X.js";const t=o;const c=s;export{t as DsAgentActivity,c as defineCustomElement};
+import{A as o,d as s}from"./p-wOOAzVMC.js";const t=o;const p=s;export{t as DsAgentActivity,p as defineCustomElement};
 //# sourceMappingURL=ds-agent-activity.js.map

package/dist/components/ds-agent-response.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-BSocHH2X.js";import{d as r}from"./p-B5snQKiP.js";import{d as n}from"./p-DXGKfXTh.js";import{d as c}from"./p-CWItD0gL.js";import{d}from"./p-DoNdiEly.js";import{d as m}from"./p-Bgh0uG51.js";import{d as l}from"./p-CWKrq35a.js";import{d as f}from"./p-BAfG3M8z.js";import{d as p}from"./p-Ca-I2UnB.js";import{d as u}from"./p-D5PN6zdD.js";import{d as b}from"./p-BxEOlO5k.js";import{d as h}from"./p-w2kKeG_h.js";import{d as k}from"./p-UtfErnpX.js";const g=()=>`.sc-ds-agent-response-h{display:block;width:100%;-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const y=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items})}}render(){return t(a,{key:"d656554a2bf32265363c1507270cbdf5b9f7d5ef"},t("ds-message",{key:"75d7f29eefc6d221d66ff665ce1ce9f4ed3a940b",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"8ce0d2c6b33fce4c4e9da4c0a2ae48cf7775ec36",class:"agent-response"},this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"5ebe02ae4d5991505d10f2815ced202961b29520",name:"footer",slot:"footer"}),t("slot",{key:"e6dcc5909049c72692bf00fd21846473ef8182be",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"8ee2602288b9b8a1ccf352e28ec44e167c1c20e8",name:"actions",slot:"actions"})))}static get style(){return g()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function E(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),y)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){r()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){n()}break;case"ds-attachment-list":if(!customElements.get(o(s))){c()}break;case"ds-badge":if(!customElements.get(o(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){m()}break;case"ds-code-block":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){f()}break;case"ds-loader":if(!customElements.get(o(s))){p()}break;case"ds-markdown":if(!customElements.get(o(s))){u()}break;case"ds-message":if(!customElements.get(o(s))){b()}break;case"ds-text":if(!customElements.get(o(s))){h()}break;case"ds-tooltip":if(!customElements.get(o(s))){k()}break}}))}E();const w=y;const j=E;export{w as DsAgentResponse,j as defineCustomElement};
+import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-wOOAzVMC.js";import{d as r}from"./p-BmNpPyzf.js";import{d as n}from"./p-DfvDNcoq.js";import{d}from"./p-Bmo4T96l.js";import{d as m}from"./p-IYy-jODg.js";import{d as c}from"./p-BR_oMaas.js";import{d as l}from"./p-D0bM3cKj.js";import{d as f}from"./p-BAfG3M8z.js";import{d as p}from"./p-Ca-I2UnB.js";import{d as u}from"./p-B-kRByho.js";import{d as b}from"./p-CKRJX0Y0.js";import{d as h}from"./p-Bb4f5SuF.js";import{d as k}from"./p-D2cjoj2r.js";const g=()=>`.sc-ds-agent-response-h{display:block;width:100%;-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const y=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items})}}render(){return t(a,{key:"f00ad2a6befb37d80646316eeb3224534da42e34"},t("ds-message",{key:"77cac049c395a0218ecfedd6d18ced731647c6c4",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"e8bae921851d7fbd338ddc7d7b2227f8a3096afb",class:"agent-response"},this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"64f8c39faeb3df471f38db3e502e1706eaa73fd3",name:"footer",slot:"footer"}),t("slot",{key:"da3417e79bf1f95ac416845f5488903345899974",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"faf899db5b58dc9b041ea83f666f849888490eff",name:"actions",slot:"actions"})))}static get style(){return g()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function j(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),y)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){r()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){n()}break;case"ds-attachment-list":if(!customElements.get(o(s))){d()}break;case"ds-badge":if(!customElements.get(o(s))){m()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){c()}break;case"ds-code-block":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){f()}break;case"ds-loader":if(!customElements.get(o(s))){p()}break;case"ds-markdown":if(!customElements.get(o(s))){u()}break;case"ds-message":if(!customElements.get(o(s))){b()}break;case"ds-text":if(!customElements.get(o(s))){h()}break;case"ds-tooltip":if(!customElements.get(o(s))){k()}break}}))}j();const w=y;const E=j;export{w as DsAgentResponse,E as defineCustomElement};
 //# sourceMappingURL=ds-agent-response.js.map

package/dist/components/ds-agent-source-list.js

@@ -1,2 +1,2 @@
-import{A as s,d as o}from"./p-B5snQKiP.js";const t=s;const n=o;export{t as DsAgentSourceList,n as defineCustomElement};
+import{A as o,d as s}from"./p-BmNpPyzf.js";const p=o;const t=s;export{p as DsAgentSourceList,t as defineCustomElement};
 //# sourceMappingURL=ds-agent-source-list.js.map

package/dist/components/ds-agent-tool-call.js

@@ -1,2 +1,2 @@
-import{A as o,d as s}from"./p-DXGKfXTh.js";const t=o;const p=s;export{t as DsAgentToolCall,p as defineCustomElement};
+import{A as o,d as s}from"./p-DfvDNcoq.js";const t=o;const c=s;export{t as DsAgentToolCall,c as defineCustomElement};
 //# sourceMappingURL=ds-agent-tool-call.js.map

package/dist/components/ds-attachment-list.js

@@ -1,2 +1,2 @@
-import{A as o,d as s}from"./p-CWItD0gL.js";const t=o;const p=s;export{t as DsAttachmentList,p as defineCustomElement};
+import{A as o,d as s}from"./p-Bmo4T96l.js";const t=o;const m=s;export{t as DsAttachmentList,m as defineCustomElement};
 //# sourceMappingURL=ds-attachment-list.js.map

package/dist/components/ds-badge.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-DoNdiEly.js";const t=o;const p=s;export{t as DsBadge,p as defineCustomElement};
+import{B as o,d as s}from"./p-IYy-jODg.js";const t=o;const p=s;export{t as DsBadge,p as defineCustomElement};
 //# sourceMappingURL=ds-badge.js.map

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBanner extends Components.DsBanner, HTMLElement {}
+export const DsBanner: {
+    prototype: DsBanner;
+    new (): DsBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-banner.js

@@ -0,0 +1,2 @@
+import{p as n,H as e,c as r,h as a,a as s,t as o}from"./index.js";import{d as i}from"./p-IYy-jODg.js";import{d}from"./p-BR_oMaas.js";import{d as t}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Bb4f5SuF.js";import{d as l}from"./p-D2cjoj2r.js";import{a as h}from"./p-B6Vuayt6.js";import{T as g}from"./p-C4uYvyq6.js";const u=()=>`@media (forced-colors: active){.sc-ds-banner:root,.sc-ds-banner-h,.ds-forced-colors-scope.sc-ds-banner{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control--lg.sc-ds-banner,.ds-control--lg.sc-ds-banner-h,.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner,.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner,.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-banner-h,.ds-control--lg.sc-ds-banner{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-banner{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-banner{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-banner{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-banner,.ds-chrome-header__trailing.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-banner{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-banner{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-banner{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-banner{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-banner,.ds-chrome-header__description.sc-ds-banner{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-banner{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-banner .ds-chrome-header__description.sc-ds-banner{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-banner-h{display:grid;overflow:hidden;min-width:0;grid-template-rows:0fr;transition:grid-template-rows var(--effect-animation-duration-short-3)     var(--_banner-motion-easing);--ds-banner-background:var(--color-background-faint-neutral);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary);--_banner-motion-easing:var(--effect-animation-easing-ease-in-out, ease)}.banner--open.sc-ds-banner-h{grid-template-rows:1fr;--_banner-motion-easing:var(--effect-animation-easing-ease-out, ease-out)}.banner--closing.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-in, ease-in)}.banner--hidden.sc-ds-banner-h{display:none}.banner-overflow.sc-ds-banner{min-height:0;overflow:visible}.banner-surface.sc-ds-banner{display:flex;position:relative;width:100%;padding-inline-end:calc(var(--dimension-size-400) + var(--dimension-space-200));color:var(--ds-banner-description);background-color:var(--ds-banner-background);border-bottom:var(--dimension-stroke-width-012) solid var(--ds-banner-border);transform:translateY(-100%);transition:transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing)}.banner--open.sc-ds-banner-h .banner-surface.sc-ds-banner{transform:translateY(0)}.banner-copy.sc-ds-banner{flex-basis:var(--dimension-card-width-sm)}.banner--orientation-horizontal.sc-ds-banner-h .banner-surface.sc-ds-banner{flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h .banner-copy.sc-ds-banner{flex-basis:100%}.banner-copy-flow.sc-ds-banner{box-sizing:border-box;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));color:var(--ds-banner-description)}.banner-heading.sc-ds-banner{display:inline-block;width:auto;max-width:100%;margin-inline-end:var(--dimension-space-100);vertical-align:baseline;color:var(--ds-banner-heading)}.banner-description.sc-ds-banner{color:var(--ds-banner-description)}.banner-actions.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;min-width:0;gap:var(--dimension-space-100)}.banner-actions.sc-ds-banner slot.sc-ds-banner{display:contents}.banner-actions.sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions .sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions.sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3),.banner-actions .sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3){display:none}.banner-actions--empty.sc-ds-banner{display:none}.banner-trailing.sc-ds-banner{align-self:flex-start;flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h:not(.banner--has-actions) .banner-trailing.sc-ds-banner{display:contents}.banner--orientation-vertical.banner--has-actions.sc-ds-banner-h .banner-trailing.sc-ds-banner{margin-inline:var(--dimension-space-100) auto;padding-block-end:var(--dimension-space-100);box-sizing:border-box}.banner--orientation-vertical.sc-ds-banner-h .banner-description.sc-ds-banner{display:block}.banner--orientation-vertical.sc-ds-banner-h .banner-heading.sc-ds-banner+.banner-description.sc-ds-banner{margin-block-start:var(--dimension-space-050)}.banner-close.sc-ds-banner{flex:0 0 auto}.banner-dismiss.sc-ds-banner{position:absolute;inset-block-start:var(--dimension-space-100);inset-inline-end:var(--dimension-space-100)}.banner--intent-neutral.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-neutral)}.banner--intent-brand.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-brand)}.banner--intent-positive.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-positive)}.banner--intent-warning.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-warning)}.banner--intent-caution.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-caution)}.banner--intent-negative.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-negative)}.banner--contrast-faint.sc-ds-banner-h{--ds-banner-background:var(--ds-banner-faint-background);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary)}.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-neutral);--ds-banner-heading:var(--color-foreground-on-medium-background-primary);--ds-banner-description:var(--color-foreground-on-medium-background-secondary);--ds-banner-border:var(--color-border-on-medium-background-tertiary)}.banner--intent-brand.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-brand)}.banner--intent-positive.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-positive)}.banner--intent-warning.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-warning)}.banner--intent-caution.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-caution)}.banner--intent-negative.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-negative)}.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-neutral);--ds-banner-heading:var(--color-foreground-on-strong-background-primary);--ds-banner-description:var(--color-foreground-on-strong-background-secondary);--ds-banner-border:var(--color-border-on-strong-background-tertiary)}.banner--intent-brand.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-brand)}.banner--intent-positive.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-positive)}.banner--intent-warning.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-warning)}.banner--intent-caution.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-caution)}.banner--intent-negative.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-negative)}.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-neutral);--ds-banner-heading:var(--color-foreground-on-bold-background-primary);--ds-banner-description:var(--color-foreground-on-bold-background-secondary);--ds-banner-border:var(--color-border-on-bold-background-tertiary)}.banner--intent-brand.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-brand)}.banner--intent-positive.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-positive)}.banner--intent-warning.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-warning)}.banner--intent-caution.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-caution)}.banner--intent-negative.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-negative)}@media (prefers-reduced-motion: reduce){.sc-ds-banner-h,.banner-surface.sc-ds-banner{transition:none}}@media (forced-colors: active){.banner-surface.sc-ds-banner{color:var(--ds-forced-color-content);background-color:var(--ds-forced-color-surface);border-bottom-color:var(--ds-forced-color-content)}.banner-heading.sc-ds-banner,.banner-description.sc-ds-banner{color:var(--ds-forced-color-content)}}`;const m=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClose=r(this,"dsClose");this.dsAfterClose=r(this,"dsAfterClose");this.heading="";this.intent="neutral";this.contrast="faint";this.orientation="horizontal";this.open=true;this.dismissLabel="Dismiss banner";this.announcement="none";this.rendered=false;this.phase="closed";this.hasActions=false;this.loaded=false;this.transitionTimer=null;this.openFrame=null;this.closePending=false}componentWillLoad(){this.rendered=this.open}componentDidLoad(){this.loaded=true;this.updateActionsPresence();if(this.open)this.startOpen()}disconnectedCallback(){this.clearTransitionWork()}onOpenChange(n){if(!this.loaded)return;if(n)this.startOpen();else this.startClose()}get closeMotionMs(){return h(g.motionShort3,g.animationDurationShort3)}clearTransitionWork(){if(this.transitionTimer)clearTimeout(this.transitionTimer);if(this.openFrame!==null)cancelAnimationFrame(this.openFrame);this.transitionTimer=null;this.openFrame=null}startOpen(){this.clearTransitionWork();this.closePending=false;this.rendered=true;this.phase="closed";this.openFrame=requestAnimationFrame((()=>{this.openFrame=null;if(this.open)this.phase="open"}))}startClose(){this.clearTransitionWork();if(!this.rendered||this.phase==="closed"){this.rendered=false;return}this.closePending=true;this.phase="closing";const n=this.closeMotionMs;if(n<=0){this.finishClose();return}this.transitionTimer=setTimeout((()=>{this.transitionTimer=null;this.finishClose()}),n)}finishClose(){if(this.open||!this.closePending)return;this.closePending=false;this.rendered=false;this.phase="closed";this.dsAfterClose.emit()}updateActionsPresence(n){const e=n?n.assignedElements().filter((n=>n.tagName==="DS-BUTTON-UNFILLED")):Array.from(this.el.querySelectorAll('ds-button-unfilled[slot="actions"]'));this.hasActions=e.length>0}requestClose(n){if(!this.open||this.phase==="closing")return;this.dsClose.emit(n.detail)}get role(){if(this.announcement==="polite")return"status";if(this.announcement==="assertive")return"alert";return undefined}get ariaLive(){return this.announcement==="none"?undefined:this.announcement}render(){const n=this.phase==="closing";const e={banner:true,"banner--open":this.phase==="open","banner--closing":n,"banner--hidden":!this.rendered,"banner--has-actions":this.hasActions,[`banner--orientation-${this.orientation}`]:true,[`banner--intent-${this.intent}`]:true,[`banner--contrast-${this.contrast}`]:true};return a(s,{key:"804b90a941a8963cef638db6811faf399f479ff7",class:e},this.rendered&&a("div",{key:"a613bfd482e12f7d707d3ea1732d4f3e7cf57350",class:"banner-overflow"},a("section",{key:"9f98ebdae3487938ae354087b01323c27dd438f8",class:"banner-surface ds-chrome-header ds-chrome-header--wrapping",role:this.role,"aria-live":this.ariaLive,"aria-atomic":this.announcement==="none"?undefined:"true","aria-hidden":n?"true":undefined,inert:n?true:undefined,"data-phase":this.phase},a("div",{key:"9f65def287a9a199fa923a81c7186e6435c404ec",class:"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md"},a("ds-text",{key:"b8cfa1e68b160eea4e2b7d8bf0c4ec6ef8066e75",class:"banner-copy-flow",as:"div",variant:"text-body-medium",color:"inherit"},this.heading&&a("ds-text",{key:"5fa61195f23d298727ff5f96e368ff24d6ed19a2",class:"banner-heading",as:"span",variant:"text-title-small",color:"inherit"},this.heading),a("span",{key:"fe5443ce3204552de06dfcefb799ff184c536a05",class:"banner-description"},this.description))),a("div",{key:"728a07a6968e81b6987875671d9f29e312f59304",class:"banner-trailing ds-chrome-header__trailing"},a("div",{key:"60bcb027ab50ce018d0794c3bbedb5a305e48939",class:{"banner-actions":true,"banner-actions--empty":!this.hasActions}},a("slot",{key:"d0b423ddfeac2a9b385a3f6e68fb597c168a0c44",name:"actions",onSlotchange:n=>this.updateActionsPresence(n.currentTarget)})),a("div",{key:"0a494df161ea1b794f444255bd4a64a8169588c7",class:"banner-dismiss"},a("ds-tooltip",{key:"740fa8199363dc7e34c2ab2db01d8dc96d0b24e2",label:this.dismissLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{key:"cf407d5e08a5e5bacfe53c4c42129adc01f6bd76",class:"banner-close",variant:"icon",icon:"Cross",size:"md",type:"button",background:this.contrast,"aria-label":this.dismissLabel,hasBorder:false,activeFill:false,onDsClick:n=>this.requestClose(n)})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return u()}},[262,"ds-banner",{description:[1],heading:[1],intent:[513],contrast:[513],orientation:[513],open:[516],dismissLabel:[1,"dismiss-label"],announcement:[1],rendered:[32],phase:[32],hasActions:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const n=["ds-banner","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-banner":if(!customElements.get(o(n))){customElements.define(o(n),m)}break;case"ds-badge":if(!customElements.get(o(n))){i()}break;case"ds-button-unfilled":if(!customElements.get(o(n))){d()}break;case"ds-icon":if(!customElements.get(o(n))){t()}break;case"ds-loader":if(!customElements.get(o(n))){c()}break;case"ds-text":if(!customElements.get(o(n))){b()}break;case"ds-tooltip":if(!customElements.get(o(n))){l()}break}}))}f();const p=m;const v=f;export{p as DsBanner,v as defineCustomElement};
+//# sourceMappingURL=ds-banner.js.map