@ds-mo/ui 11.1.0 → 12.0.0

package/dist/types/components.d.ts

@@ -6,11 +6,11 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageDeliveryState, MessageDirection, MessageGroupPosition, MessageScrollerPosition } from "./components/conversation-types";
-import { NavChromeStyle } from "./shell/nav-chrome";
-import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 import { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
+import { NavChromeStyle } from "./shell/nav-chrome";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
+import { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 import { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 import { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
@@ -28,6 +28,7 @@ import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuSelectionMode } from "./components/Menu/Menu";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ChoicePopupAnchorAlignment } from "./utils";
+import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 import { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 import { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
 import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
@@ -40,6 +41,7 @@ import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
 import { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
 import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
+import { ShellPageContentInset, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
 import { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { ControlSize } from "./utils/control-text";
@@ -52,11 +54,11 @@ import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
 export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, ConversationAttachment, ConversationItemState, MessageComposerStatus, MessageDeliveryState, MessageDirection, MessageGroupPosition, MessageScrollerPosition } from "./components/conversation-types";
-export { NavChromeStyle } from "./shell/nav-chrome";
-export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 export { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
+export { NavChromeStyle } from "./shell/nav-chrome";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
+export { BarTitleActionItem, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 export { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
 export { CardDataVizDonutWidth } from "./components/CardDataVizDonut/CardDataVizDonut";
@@ -74,6 +76,7 @@ export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuSelectionMode } from "./components/Menu/Menu";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ChoicePopupAnchorAlignment } from "./utils";
+export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 export { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 export { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
 export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
@@ -86,6 +89,7 @@ export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { SelectBackground, SelectOption, SelectSection, SelectSize, SelectWidth } from "./components/Select/Select";
 export { SelectMultiBackground, SelectMultiOption, SelectMultiSection, SelectMultiSize, SelectMultiWidth } from "./components/SelectMulti/SelectMulti";
 export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
+export { ShellPageContentInset, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
 export { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { ControlSize } from "./utils/control-text";
@@ -173,23 +177,6 @@ export namespace Components {
          */
         "state": AgentToolState;
     }
-    interface DsAppShell {
-        /**
-          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
-          * @default 'neutral'
-         */
-        "gradientPreset": ShellGradientPreset;
-        /**
-          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'dashboard'
-         */
-        "navStyle": NavChromeStyle;
-        /**
-          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
-          * @default true
-         */
-        "shortcutsEnabled": boolean;
-    }
     interface DsAttachmentList {
         /**
           * @default []
@@ -227,7 +214,7 @@ export namespace Components {
          */
         "count": number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an AppShell with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground": boolean;
@@ -296,6 +283,67 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsBarTitle {
+        /**
+          * Secondary page actions shown in the overflow menu. Dividers create groups.
+          * @default []
+         */
+        "actions": BarTitleActionItem[];
+        /**
+          * Accessible name for the page-actions menu.
+          * @default 'More page actions'
+         */
+        "actionsAriaLabel": string;
+        /**
+          * Accessible name for the leading Back action.
+          * @default 'Back'
+         */
+        "backAriaLabel": string;
+        /**
+          * Visible parent-page label used by the expanded Back breadcrumb.
+          * @default 'Back'
+         */
+        "backLabel": string;
+        /**
+          * Optional supporting copy shown in the expanded presentation.
+          * @default ''
+         */
+        "description": string;
+        /**
+          * The page's single visible h1.
+         */
+        "heading": string;
+        /**
+          * The one highest-emphasis page action.
+          * @default null
+         */
+        "primaryAction": BarTitlePrimaryAction | null;
+        /**
+          * Optional page sections exposed through the active-section menu.
+          * @default []
+         */
+        "sections": BarTitleSectionItem[];
+        /**
+          * Accessible name for the page-section menu.
+          * @default 'Change page section'
+         */
+        "sectionsAriaLabel": string;
+        /**
+          * Show the leading page-level Back action.
+          * @default false
+         */
+        "showBack": boolean;
+        /**
+          * Id of the active page section.
+          * @default ''
+         */
+        "value": string;
+        /**
+          * Explicit visual/capacity variant. ShellPage owns automatic selection.
+          * @default 'expanded'
+         */
+        "variant": BarTitleVariant;
+    }
     interface DsButtonFilled {
         /**
           * Accessible name override. Required for icon-only buttons.
@@ -1808,6 +1856,23 @@ export namespace Components {
          */
         "width": SelectMultiWidth;
     }
+    interface DsShellApp {
+        /**
+          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
+          * @default 'neutral'
+         */
+        "gradientPreset": ShellGradientPreset;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'dashboard'
+         */
+        "navStyle": NavChromeStyle;
+        /**
+          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
+          * @default true
+         */
+        "shortcutsEnabled": boolean;
+    }
     /**
      * @deprecated Use `ds-swatch-picker` with shell preset options.
      */
@@ -1845,6 +1910,18 @@ export namespace Components {
          */
         "selected": boolean;
     }
+    interface DsShellPage {
+        /**
+          * Standard page gutters, or no inset for full-bleed page content.
+          * @default 'default'
+         */
+        "contentInset": ShellPageContentInset;
+        /**
+          * Automatic container/scroll behavior, or an explicit header variant override.
+          * @default 'auto'
+         */
+        "headerPresentation": ShellPageHeaderPresentation;
+    }
     interface DsSkeleton {
         /**
           * Actual parent surface context. Omit on primary and secondary surfaces.
@@ -2312,6 +2389,10 @@ export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBarNavElement;
 }
+export interface DsBarTitleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBarTitleElement;
+}
 export interface DsButtonFilledCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsButtonFilledElement;
@@ -2457,12 +2538,6 @@ declare global {
         prototype: HTMLDsAgentToolCallElement;
         new (): HTMLDsAgentToolCallElement;
     };
-    interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
-    }
-    var HTMLDsAppShellElement: {
-        prototype: HTMLDsAppShellElement;
-        new (): HTMLDsAppShellElement;
-    };
     interface HTMLDsAttachmentListElement extends Components.DsAttachmentList, HTMLStencilElement {
     }
     var HTMLDsAttachmentListElement: {
@@ -2498,6 +2573,25 @@ declare global {
         prototype: HTMLDsBarNavElement;
         new (): HTMLDsBarNavElement;
     };
+    interface HTMLDsBarTitleElementEventMap {
+        "dsBack": MouseEvent;
+        "dsSectionChange": string;
+        "dsAction": string;
+    }
+    interface HTMLDsBarTitleElement extends Components.DsBarTitle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBarTitleElementEventMap>(type: K, listener: (this: HTMLDsBarTitleElement, ev: DsBarTitleCustomEvent<HTMLDsBarTitleElementEventMap[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 HTMLDsBarTitleElementEventMap>(type: K, listener: (this: HTMLDsBarTitleElement, ev: DsBarTitleCustomEvent<HTMLDsBarTitleElementEventMap[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 HTMLDsBarTitleElement: {
+        prototype: HTMLDsBarTitleElement;
+        new (): HTMLDsBarTitleElement;
+    };
     interface HTMLDsButtonFilledElementEventMap {
         "dsClick": MouseEvent;
     }
@@ -3014,6 +3108,12 @@ declare global {
         prototype: HTMLDsSelectMultiElement;
         new (): HTMLDsSelectMultiElement;
     };
+    interface HTMLDsShellAppElement extends Components.DsShellApp, HTMLStencilElement {
+    }
+    var HTMLDsShellAppElement: {
+        prototype: HTMLDsShellAppElement;
+        new (): HTMLDsShellAppElement;
+    };
     interface HTMLDsShellGradientPickerElementEventMap {
         "dsChange": ShellGradientPreset1;
     }
@@ -3054,6 +3154,12 @@ declare global {
         prototype: HTMLDsShellGradientSwatchElement;
         new (): HTMLDsShellGradientSwatchElement;
     };
+    interface HTMLDsShellPageElement extends Components.DsShellPage, HTMLStencilElement {
+    }
+    var HTMLDsShellPageElement: {
+        prototype: HTMLDsShellPageElement;
+        new (): HTMLDsShellPageElement;
+    };
     interface HTMLDsSkeletonElement extends Components.DsSkeleton, HTMLStencilElement {
     }
     var HTMLDsSkeletonElement: {
@@ -3214,11 +3320,11 @@ declare global {
         "ds-agent-response": HTMLDsAgentResponseElement;
         "ds-agent-source-list": HTMLDsAgentSourceListElement;
         "ds-agent-tool-call": HTMLDsAgentToolCallElement;
-        "ds-app-shell": HTMLDsAppShellElement;
         "ds-attachment-list": HTMLDsAttachmentListElement;
         "ds-avatar": HTMLDsAvatarElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-bar-nav": HTMLDsBarNavElement;
+        "ds-bar-title": HTMLDsBarTitleElement;
         "ds-button-filled": HTMLDsButtonFilledElement;
         "ds-button-unfilled": HTMLDsButtonUnfilledElement;
         "ds-card-data-viz-donut": HTMLDsCardDataVizDonutElement;
@@ -3255,8 +3361,10 @@ declare global {
         "ds-radio": HTMLDsRadioElement;
         "ds-select": HTMLDsSelectElement;
         "ds-select-multi": HTMLDsSelectMultiElement;
+        "ds-shell-app": HTMLDsShellAppElement;
         "ds-shell-gradient-picker": HTMLDsShellGradientPickerElement;
         "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
+        "ds-shell-page": HTMLDsShellPageElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
         "ds-swatch-picker": HTMLDsSwatchPickerElement;
@@ -3348,23 +3456,6 @@ declare namespace LocalJSX {
          */
         "state"?: AgentToolState;
     }
-    interface DsAppShell {
-        /**
-          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
-          * @default 'neutral'
-         */
-        "gradientPreset"?: ShellGradientPreset;
-        /**
-          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'dashboard'
-         */
-        "navStyle"?: NavChromeStyle;
-        /**
-          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N/? toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
-          * @default true
-         */
-        "shortcutsEnabled"?: boolean;
-    }
     interface DsAttachmentList {
         /**
           * @default []
@@ -3402,7 +3493,7 @@ declare namespace LocalJSX {
          */
         "count"?: number;
         /**
-          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an AppShell with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
+          * Ring samples the shell gradient stack (base fill + wash) instead of a flat `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset; set `gradient-background` to opt in/out explicitly.  The attribute must NOT start with `on` — Stencil's setAccessor routes any unknown `on*` member down the event-listener path during attribute reflection, calling addEventListener with a non-listener and throwing.
           * @default false
          */
         "gradientBackground"?: boolean;
@@ -3475,6 +3566,79 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsBarTitle {
+        /**
+          * Secondary page actions shown in the overflow menu. Dividers create groups.
+          * @default []
+         */
+        "actions"?: BarTitleActionItem[];
+        /**
+          * Accessible name for the page-actions menu.
+          * @default 'More page actions'
+         */
+        "actionsAriaLabel"?: string;
+        /**
+          * Accessible name for the leading Back action.
+          * @default 'Back'
+         */
+        "backAriaLabel"?: string;
+        /**
+          * Visible parent-page label used by the expanded Back breadcrumb.
+          * @default 'Back'
+         */
+        "backLabel"?: string;
+        /**
+          * Optional supporting copy shown in the expanded presentation.
+          * @default ''
+         */
+        "description"?: string;
+        /**
+          * The page's single visible h1.
+         */
+        "heading": string;
+        /**
+          * Emitted with the activated primary or overflow action id.
+         */
+        "onDsAction"?: (event: DsBarTitleCustomEvent<string>) => void;
+        /**
+          * Emitted when the leading Back action is activated.
+         */
+        "onDsBack"?: (event: DsBarTitleCustomEvent<MouseEvent>) => void;
+        /**
+          * Emitted with the newly selected page-section id.
+         */
+        "onDsSectionChange"?: (event: DsBarTitleCustomEvent<string>) => void;
+        /**
+          * The one highest-emphasis page action.
+          * @default null
+         */
+        "primaryAction"?: BarTitlePrimaryAction | null;
+        /**
+          * Optional page sections exposed through the active-section menu.
+          * @default []
+         */
+        "sections"?: BarTitleSectionItem[];
+        /**
+          * Accessible name for the page-section menu.
+          * @default 'Change page section'
+         */
+        "sectionsAriaLabel"?: string;
+        /**
+          * Show the leading page-level Back action.
+          * @default false
+         */
+        "showBack"?: boolean;
+        /**
+          * Id of the active page section.
+          * @default ''
+         */
+        "value"?: string;
+        /**
+          * Explicit visual/capacity variant. ShellPage owns automatic selection.
+          * @default 'expanded'
+         */
+        "variant"?: BarTitleVariant;
+    }
     interface DsButtonFilled {
         /**
           * Accessible name override. Required for icon-only buttons.
@@ -4470,7 +4634,7 @@ declare namespace LocalJSX {
         "navigationItemsLabel"?: string;
         "onDsChromeTransitionEnd"?: (event: DsPanelNavCustomEvent<ChromeTransitionDetail>) => void;
         /**
-          * Bubbling lifecycle — `ds-app-shell` pauses chrome metrics during width motion.
+          * Bubbling lifecycle — `ds-shell-app` pauses chrome metrics during width motion.
          */
         "onDsChromeTransitionStart"?: (event: DsPanelNavCustomEvent<ChromeTransitionDetail>) => void;
         /**
@@ -5118,6 +5282,23 @@ declare namespace LocalJSX {
          */
         "width"?: SelectMultiWidth;
     }
+    interface DsShellApp {
+        /**
+          * Shell chrome wash preset. `none` renders solid chrome; the remaining presets use token-based washes that adapt to the active color theme.
+          * @default 'neutral'
+         */
+        "gradientPreset"?: ShellGradientPreset;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'dashboard'
+         */
+        "navStyle"?: NavChromeStyle;
+        /**
+          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
+          * @default true
+         */
+        "shortcutsEnabled"?: boolean;
+    }
     /**
      * @deprecated Use `ds-swatch-picker` with shell preset options.
      */
@@ -5157,6 +5338,18 @@ declare namespace LocalJSX {
          */
         "selected"?: boolean;
     }
+    interface DsShellPage {
+        /**
+          * Standard page gutters, or no inset for full-bleed page content.
+          * @default 'default'
+         */
+        "contentInset"?: ShellPageContentInset;
+        /**
+          * Automatic container/scroll behavior, or an explicit header variant override.
+          * @default 'auto'
+         */
+        "headerPresentation"?: ShellPageHeaderPresentation;
+    }
     interface DsSkeleton {
         /**
           * Actual parent surface context. Omit on primary and secondary surfaces.
@@ -5659,11 +5852,6 @@ declare namespace LocalJSX {
         "error": string;
         "open": boolean;
     }
-    interface DsAppShellAttributes {
-        "navStyle": NavChromeStyle;
-        "gradientPreset": ShellGradientPreset;
-        "shortcutsEnabled": boolean;
-    }
     interface DsAttachmentListAttributes {
         "label": string;
     }
@@ -5691,6 +5879,17 @@ declare namespace LocalJSX {
         "currentUrl": string;
         "moreTabsLabel": string;
     }
+    interface DsBarTitleAttributes {
+        "heading": string;
+        "description": string;
+        "showBack": boolean;
+        "backAriaLabel": string;
+        "backLabel": string;
+        "value": string;
+        "sectionsAriaLabel": string;
+        "actionsAriaLabel": string;
+        "variant": BarTitleVariant;
+    }
     interface DsButtonFilledAttributes {
         "variant": ButtonFilledVariant;
         "size": ButtonFilledSize;
@@ -6060,6 +6259,11 @@ declare namespace LocalJSX {
         "ariaLabelledby": string | undefined;
         "ariaDescribedby": string | undefined;
     }
+    interface DsShellAppAttributes {
+        "navStyle": NavChromeStyle;
+        "gradientPreset": ShellGradientPreset;
+        "shortcutsEnabled": boolean;
+    }
     interface DsShellGradientPickerAttributes {
         "value": ShellGradientPreset;
         "groupLabel": string;
@@ -6070,6 +6274,10 @@ declare namespace LocalJSX {
         "isInactive": boolean;
         "ariaLabel": string | null;
     }
+    interface DsShellPageAttributes {
+        "headerPresentation": ShellPageHeaderPresentation;
+        "contentInset": ShellPageContentInset;
+    }
     interface DsSkeletonAttributes {
         "variant": SkeletonVariant;
         "textVariant": TextVariant;
@@ -6193,11 +6401,11 @@ declare namespace LocalJSX {
         "ds-agent-response": Omit<DsAgentResponse, keyof DsAgentResponseAttributes> & { [K in keyof DsAgentResponse & keyof DsAgentResponseAttributes]?: DsAgentResponse[K] } & { [K in keyof DsAgentResponse & keyof DsAgentResponseAttributes as `attr:${K}`]?: DsAgentResponseAttributes[K] } & { [K in keyof DsAgentResponse & keyof DsAgentResponseAttributes as `prop:${K}`]?: DsAgentResponse[K] };
         "ds-agent-source-list": Omit<DsAgentSourceList, keyof DsAgentSourceListAttributes> & { [K in keyof DsAgentSourceList & keyof DsAgentSourceListAttributes]?: DsAgentSourceList[K] } & { [K in keyof DsAgentSourceList & keyof DsAgentSourceListAttributes as `attr:${K}`]?: DsAgentSourceListAttributes[K] } & { [K in keyof DsAgentSourceList & keyof DsAgentSourceListAttributes as `prop:${K}`]?: DsAgentSourceList[K] };
         "ds-agent-tool-call": Omit<DsAgentToolCall, keyof DsAgentToolCallAttributes> & { [K in keyof DsAgentToolCall & keyof DsAgentToolCallAttributes]?: DsAgentToolCall[K] } & { [K in keyof DsAgentToolCall & keyof DsAgentToolCallAttributes as `attr:${K}`]?: DsAgentToolCallAttributes[K] } & { [K in keyof DsAgentToolCall & keyof DsAgentToolCallAttributes as `prop:${K}`]?: DsAgentToolCall[K] };
-        "ds-app-shell": Omit<DsAppShell, keyof DsAppShellAttributes> & { [K in keyof DsAppShell & keyof DsAppShellAttributes]?: DsAppShell[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `attr:${K}`]?: DsAppShellAttributes[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `prop:${K}`]?: DsAppShell[K] };
         "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-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-button-filled": Omit<DsButtonFilled, keyof DsButtonFilledAttributes> & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes]?: DsButtonFilled[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `attr:${K}`]?: DsButtonFilledAttributes[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `prop:${K}`]?: DsButtonFilled[K] };
         "ds-button-unfilled": Omit<DsButtonUnfilled, keyof DsButtonUnfilledAttributes> & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes]?: DsButtonUnfilled[K] } & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes as `attr:${K}`]?: DsButtonUnfilledAttributes[K] } & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes as `prop:${K}`]?: DsButtonUnfilled[K] };
         "ds-card-data-viz-donut": Omit<DsCardDataVizDonut, keyof DsCardDataVizDonutAttributes> & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes]?: DsCardDataVizDonut[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `attr:${K}`]?: DsCardDataVizDonutAttributes[K] } & { [K in keyof DsCardDataVizDonut & keyof DsCardDataVizDonutAttributes as `prop:${K}`]?: DsCardDataVizDonut[K] } & OneOf<"heading", DsCardDataVizDonut["heading"], DsCardDataVizDonutAttributes["heading"]>;
@@ -6234,8 +6442,10 @@ declare namespace LocalJSX {
         "ds-radio": Omit<DsRadio, keyof DsRadioAttributes> & { [K in keyof DsRadio & keyof DsRadioAttributes]?: DsRadio[K] } & { [K in keyof DsRadio & keyof DsRadioAttributes as `attr:${K}`]?: DsRadioAttributes[K] } & { [K in keyof DsRadio & keyof DsRadioAttributes as `prop:${K}`]?: DsRadio[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
         "ds-select-multi": Omit<DsSelectMulti, keyof DsSelectMultiAttributes> & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes]?: DsSelectMulti[K] } & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes as `attr:${K}`]?: DsSelectMultiAttributes[K] } & { [K in keyof DsSelectMulti & keyof DsSelectMultiAttributes as `prop:${K}`]?: DsSelectMulti[K] };
+        "ds-shell-app": Omit<DsShellApp, keyof DsShellAppAttributes> & { [K in keyof DsShellApp & keyof DsShellAppAttributes]?: DsShellApp[K] } & { [K in keyof DsShellApp & keyof DsShellAppAttributes as `attr:${K}`]?: DsShellAppAttributes[K] } & { [K in keyof DsShellApp & keyof DsShellAppAttributes as `prop:${K}`]?: DsShellApp[K] };
         "ds-shell-gradient-picker": Omit<DsShellGradientPicker, keyof DsShellGradientPickerAttributes> & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes]?: DsShellGradientPicker[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `attr:${K}`]?: DsShellGradientPickerAttributes[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `prop:${K}`]?: DsShellGradientPicker[K] };
         "ds-shell-gradient-swatch": Omit<DsShellGradientSwatch, keyof DsShellGradientSwatchAttributes> & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes]?: DsShellGradientSwatch[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `attr:${K}`]?: DsShellGradientSwatchAttributes[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `prop:${K}`]?: DsShellGradientSwatch[K] };
+        "ds-shell-page": Omit<DsShellPage, keyof DsShellPageAttributes> & { [K in keyof DsShellPage & keyof DsShellPageAttributes]?: DsShellPage[K] } & { [K in keyof DsShellPage & keyof DsShellPageAttributes as `attr:${K}`]?: DsShellPageAttributes[K] } & { [K in keyof DsShellPage & keyof DsShellPageAttributes as `prop:${K}`]?: DsShellPage[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] };
         "ds-swatch-picker": Omit<DsSwatchPicker, keyof DsSwatchPickerAttributes> & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes]?: DsSwatchPicker[K] } & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes as `attr:${K}`]?: DsSwatchPickerAttributes[K] } & { [K in keyof DsSwatchPicker & keyof DsSwatchPickerAttributes as `prop:${K}`]?: DsSwatchPicker[K] };
@@ -6257,11 +6467,11 @@ declare module "@stencil/core" {
             "ds-agent-response": LocalJSX.IntrinsicElements["ds-agent-response"] & JSXBase.HTMLAttributes<HTMLDsAgentResponseElement>;
             "ds-agent-source-list": LocalJSX.IntrinsicElements["ds-agent-source-list"] & JSXBase.HTMLAttributes<HTMLDsAgentSourceListElement>;
             "ds-agent-tool-call": LocalJSX.IntrinsicElements["ds-agent-tool-call"] & JSXBase.HTMLAttributes<HTMLDsAgentToolCallElement>;
-            "ds-app-shell": LocalJSX.IntrinsicElements["ds-app-shell"] & JSXBase.HTMLAttributes<HTMLDsAppShellElement>;
             "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-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
+            "ds-bar-title": LocalJSX.IntrinsicElements["ds-bar-title"] & JSXBase.HTMLAttributes<HTMLDsBarTitleElement>;
             "ds-button-filled": LocalJSX.IntrinsicElements["ds-button-filled"] & JSXBase.HTMLAttributes<HTMLDsButtonFilledElement>;
             "ds-button-unfilled": LocalJSX.IntrinsicElements["ds-button-unfilled"] & JSXBase.HTMLAttributes<HTMLDsButtonUnfilledElement>;
             /**
@@ -6318,6 +6528,7 @@ declare module "@stencil/core" {
             "ds-radio": LocalJSX.IntrinsicElements["ds-radio"] & JSXBase.HTMLAttributes<HTMLDsRadioElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
             "ds-select-multi": LocalJSX.IntrinsicElements["ds-select-multi"] & JSXBase.HTMLAttributes<HTMLDsSelectMultiElement>;
+            "ds-shell-app": LocalJSX.IntrinsicElements["ds-shell-app"] & JSXBase.HTMLAttributes<HTMLDsShellAppElement>;
             /**
              * @deprecated Use `ds-swatch-picker` with shell preset options.
              */
@@ -6326,6 +6537,7 @@ declare module "@stencil/core" {
              * @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail.
              */
             "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
+            "ds-shell-page": LocalJSX.IntrinsicElements["ds-shell-page"] & JSXBase.HTMLAttributes<HTMLDsShellPageElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-swatch-picker": LocalJSX.IntrinsicElements["ds-swatch-picker"] & JSXBase.HTMLAttributes<HTMLDsSwatchPickerElement>;

package/dist/types/shell/chrome-transition.d.ts

@@ -1,4 +1,4 @@
-/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */
+/** Bubbling/composed events — `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */
 export declare const CHROME_TRANSITION_START = "dsChromeTransitionStart";
 export declare const CHROME_TRANSITION_END = "dsChromeTransitionEnd";
 export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';

package/dist/types/shell/shell-gradient.d.ts

@@ -1,4 +1,4 @@
-/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */
 import type { ShellGradientPreset } from './shell-gradient-presets';
 export type { ShellGradientPreset } from './shell-gradient-presets';
 export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from './shell-gradient-presets';
@@ -24,7 +24,7 @@ export interface ShellViewportDimensions {
 }
 /**
  * Viewport size for shell chrome with `background-attachment: fixed`.
- * Must not use the `ds-app-shell` element box — the shell can be shorter or
+ * Must not use the `ds-shell-app` element box — the shell can be shorter or
  * taller than the viewport when host height chains break or content overflows.
  */
 export declare function readShellViewportDimensions(win?: Window): ShellViewportDimensions;

package/dist/types/shell/shell-shortcuts.d.ts

@@ -1,6 +1,6 @@
 import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
 export type ShellShortcutAction = 'toggle-panel-nav' | 'close-panel-tools' | `open-tool:${PanelToolsToolId}`;
-/** Tool shortcut keys (K/A/S/M/N/?) toggle open/closed via `ds-panel-tools.activateTool`. */
+/** Tool shortcut keys (K, A, S, M, N, /) toggle open/closed via `ds-panel-tools.activateTool`. */
 /** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
 export declare function isBareShellShortcutKey(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
 /** Skip shell shortcuts while typing in an editable control. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "11.1.0",
+  "version": "12.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/ds-app-shell.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{D as l,b as a,n as o,a as r}from"./p-D1HFMTdC.js";import{e as h,c,r as d,a as p,b as f}from"./p-BKhG2xrW.js";const u="--ds-shell-gradient-image";const b="--ds-shell-gradient-size";const g="--ds-shell-gradient-position-panel";const v="--ds-shell-gradient-position-bar";const m="--ds-shell-gradient-opacity";function y(e=l){return a(e)}function _(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function w(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function x(){return"0 0"}function k(e){return`${-Math.round(e)}px 0`}const P={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function z(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function S(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function C(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function M(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!z(e))return null;const s=C(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=P[s];if(t)return`open-tool:${t}`;return null}function D(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function L(e){return{expandedPx:D(e,"--_nav-width"),collapsedPx:D(e,"--_nav-width-collapsed")}}function T(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function V(e,s){return s?e.collapsedPx:e.expandedPx}const j=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__panel.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__bar.sc-ds-app-shell,.app-shell--tools-fullscreen.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{visibility:hidden}`;const W=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=l;this.shortcutsEnabled=true;this.toolsFullscreen=false;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=_();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(d(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(p,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const e=this.el.querySelector("ds-panel-tools");this.toolsFullscreen=e?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(e){this.toolsFullscreen=e.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(p,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=L(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[u,b,m];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(g,t)}if(s){s.style.setProperty(v,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return _()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(S(e.target))return;const s=M(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(g);if(s)s.style.removeProperty(v)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const l=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const h=x();const c=k(a);this.syncChromeLayoutVars(e,s,h,c);const d=y(i);const p=w({width:l.width,height:l.height});const f=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[u]:d,[b]:p,[g]:h,[v]:c,[m]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[u]:d,[b]:p,[m]:f,[g]:s?null:h,[v]:s?c:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true,"app-shell--tools-fullscreen":this.toolsFullscreen};return t(n,{key:"c6e4c96932fc51b12b3ca96fc2cdac92d368bd77",class:s},t("div",{key:"39acfcf2a9efce13a51d89d8f280ec6c5f7beb5a",class:"app-shell__row"},t("div",{key:"d23609ea2d5e2fbaba807470149c100a47529668",class:"app-shell__chrome","aria-hidden":"true"}),t("div",{key:"71de4580c1f3d4e9294a9d1fc6d802c41a1c5ebc",class:"app-shell__panel","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"5e0aba7074330e5e1078764b0cbf2d5bc898df0c",name:"panel"})),t("div",{key:"2eb15d98da1bff20b898360a4af835d6b892d10c",class:"app-shell__main"},t("div",{key:"f9481f00f17942e393e86530ffcd2a6c5e668ed1",class:"app-shell__bar","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"42911a0187f7e49ff65bdf3eb378f7aa21cd6a14",name:"bar"})),t("div",{key:"04dd3cbb566184f9f25913503278ecc36c3a10a9",class:"app-shell__tools"},t("slot",{key:"e9de481761975b4da31bb25cfed8cc620f3ecea2",name:"tools"})),t("div",{key:"851c84f10dd4676a86edf68c98ef7354e6bd2503",class:"app-shell__content","aria-hidden":this.toolsFullscreen?"true":undefined,inert:this.toolsFullscreen?true:undefined},t("slot",{key:"6bb422ba64bc48970e651ffe78ab520bd8e17c05"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return j()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],toolsFullscreen:[32]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),W)}break}}))}$();const B=W;const E=$;export{B as DsAppShell,E as defineCustomElement};
-//# sourceMappingURL=ds-app-shell.js.map