@ds-mo/ui 13.11.1 → 13.12.0

package/dist/types/components.d.ts

@@ -40,8 +40,9 @@ import { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 import { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
 import { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 import { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
-import { MobileHeaderHeadingLevel, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
+import { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
 import { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
+import { TabGroupSize } from "./components/TabGroup/TabGroup";
 import { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
 import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
@@ -59,7 +60,8 @@ import { ControlSize } from "./utils/control-text";
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 import { SwitchSize } from "./components/Switch/Switch";
-import { TabBackground } from "./components/TabGroup/TabGroup";
+import { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
+import { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 import { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 import { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 import { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -99,8 +101,9 @@ export { MessageBubbleVariant } from "./components/MessageBubble/MessageBubble";
 export { ButtonFilledIntent as ButtonFilledIntent1 } from "./components/ButtonFilled/ButtonFilled";
 export { PanelNavGroup, PanelNavItem, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
 export { MobileBarNavDestinationDetail } from "./components/MobileBarNav/mobile-bar-nav-types";
-export { MobileHeaderHeadingLevel, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
+export { MobileHeaderHeadingLevel, MobileHeaderSectionsPresentation, MobileHeaderTone } from "./components/MobileHeader/mobile-header-types";
 export { TabGroupItem, TabItem } from "./components/TabGroup/tab-item-utils";
+export { TabGroupSize } from "./components/TabGroup/TabGroup";
 export { ModalCloseDetail, ModalWidth } from "./components/Modal/Modal";
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
 export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
@@ -118,7 +121,8 @@ export { ControlSize } from "./utils/control-text";
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderValue } from "./components/Slider/Slider";
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
 export { SwitchSize } from "./components/Switch/Switch";
-export { TabBackground } from "./components/TabGroup/TabGroup";
+export { TabBackground, TabGroupSize as TabGroupSize1 } from "./components/TabGroup/TabGroup";
+export { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableGroup, TableGroupingChangeDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TableRow, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from "./components/Table/table-types";
 export { TagContrast, TagIntent, TagSize } from "./components/Tag/Tag";
 export { ToastActionEventDetail, ToastCloseEventDetail, ToastEventDetail, ToastManager, ToastSwipeDirection } from "./toast";
 export { TooltipAlign, TooltipSide, TooltipSize } from "./components/Tooltip/Tooltip";
@@ -1462,12 +1466,22 @@ export namespace Components {
           * Controlled peer sections. Their selected label replaces the static title.
           * @default []
          */
-        "sections": TabItem[];
+        "sections": TabGroupItem[];
         /**
           * Accessible name for the section chooser.
           * @default 'Change page section'
          */
         "sectionsAriaLabel": string;
+        /**
+          * Popup switcher or an inline segmented TabGroup for peer sections.
+          * @default 'switcher'
+         */
+        "sectionsPresentation": MobileHeaderSectionsPresentation;
+        /**
+          * Density for the segmented sections presentation.
+          * @default 'md'
+         */
+        "sectionsSize": TabGroupSize;
         /**
           * Controlled child sections within the selected page or detail screen.
           * @default []
@@ -2475,6 +2489,11 @@ export namespace Components {
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
         "background": TabBackground | undefined;
+        /**
+          * Control density: 24px small, 32px medium, or 40px large track.
+          * @default 'md'
+         */
+        "size": TabGroupSize1;
         /**
           * @default []
          */
@@ -2484,6 +2503,145 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsTable {
+        /**
+          * Required accessible table name, rendered as a native caption.
+         */
+        "caption": string;
+        /**
+          * @default 'hidden'
+         */
+        "captionVisibility": TableCaptionVisibility;
+        /**
+          * Stable column definitions. Assign through JavaScript.
+          * @default []
+         */
+        "columns": TableColumn[];
+        /**
+          * @default 'No data is available.'
+         */
+        "emptyBody": string;
+        /**
+          * @default 'Not available'
+         */
+        "emptyCellLabel": string;
+        /**
+          * @default 'No results'
+         */
+        "emptyHeading": string;
+        /**
+          * @default 'All results loaded'
+         */
+        "endOfResultsLabel": string;
+        /**
+          * Initial error state. Existing rows stay visible; incremental failures use loadMoreError.
+          * @default false
+         */
+        "error": boolean;
+        /**
+          * @default 'The data could not be loaded.'
+         */
+        "errorBody": string;
+        /**
+          * @default 'Unable to load data'
+         */
+        "errorHeading": string;
+        /**
+          * Controlled grouping column and group-order direction.
+          * @default null
+         */
+        "grouping": TableGroupingState | null;
+        /**
+          * One level of application-owned grouped data. Assign through JavaScript.
+          * @default []
+         */
+        "groups": TableGroup[];
+        /**
+          * @default false
+         */
+        "hasMore": boolean;
+        /**
+          * Enable application-owned incremental loading without pagination.
+          * @default false
+         */
+        "lazyLoading": boolean;
+        /**
+          * Reset key for a new query/group/sort dataset.
+          * @default 'default'
+         */
+        "loadIdentity": string | number;
+        "loadMoreError": string | undefined;
+        /**
+          * @default 'Load more'
+         */
+        "loadMoreLabel": string;
+        /**
+          * @default 'auto'
+         */
+        "loadMoreMode": TableLoadMoreMode;
+        /**
+          * IntersectionObserver root margin in CSS pixels.
+          * @default 0
+         */
+        "loadMoreThreshold": number;
+        /**
+          * Initial loading state. Existing rows stay visible; incremental loading uses loadingMore.
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * @default false
+         */
+        "loadingMore": boolean;
+        /**
+          * @default 'Loading more results'
+         */
+        "loadingMoreLabel": string;
+        /**
+          * Maximum scroll-region height. Numbers resolve to CSS pixels.
+         */
+        "maxHeight": string | number | undefined;
+        /**
+          * @default 'Retry'
+         */
+        "retryLabel": string;
+        /**
+          * Ungrouped row data. Ignored while grouping is active. Assign through JavaScript.
+          * @default []
+         */
+        "rows": TableRow[];
+        /**
+          * Supports {count} and {total} placeholders.
+          * @default '{count} more rows loaded. {total} rows loaded.'
+         */
+        "rowsLoadedLabel": string;
+        /**
+          * Optional explicit label for the horizontal/vertical scroll region.
+         */
+        "scrollLabel": string | undefined;
+        /**
+          * Controlled selected row identities. IDs outside the loaded rows are preserved.
+          * @default []
+         */
+        "selectedRowIds": string[];
+        /**
+          * @default 'none'
+         */
+        "selectionMode": TableSelectionMode;
+        /**
+          * @default 5
+         */
+        "skeletonRows": number;
+        /**
+          * Controlled member-row sort state.
+          * @default null
+         */
+        "sort": TableSortState | null;
+        /**
+          * @default false
+         */
+        "stickyHeader": boolean;
+    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -2517,6 +2675,11 @@ export namespace Components {
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Use the reduced outer geometry when nested inside a control of the same size.
+          * @default false
+         */
+        "isInset": boolean;
         "label": string;
         "maxWidth": string | number | undefined;
         /**
@@ -2871,6 +3034,10 @@ export interface DsTabGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTabGroupElement;
 }
+export interface DsTableCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsTableElement;
+}
 export interface DsTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsTagElement;
@@ -3752,6 +3919,27 @@ declare global {
         prototype: HTMLDsTabGroupElement;
         new (): HTMLDsTabGroupElement;
     };
+    interface HTMLDsTableElementEventMap {
+        "dsSortChange": TableSortChangeDetail;
+        "dsGroupingChange": TableGroupingChangeDetail;
+        "dsSelectionChange": TableSelectionChangeDetail;
+        "dsLoadMore": TableLoadMoreDetail;
+        "dsCellAction": TableCellActionDetail;
+    }
+    interface HTMLDsTableElement extends Components.DsTable, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[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 HTMLDsTableElementEventMap>(type: K, listener: (this: HTMLDsTableElement, ev: DsTableCustomEvent<HTMLDsTableElementEventMap[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 HTMLDsTableElement: {
+        prototype: HTMLDsTableElement;
+        new (): HTMLDsTableElement;
+    };
     interface HTMLDsTagElementEventMap {
         "dsClick": MouseEvent;
     }
@@ -3892,6 +4080,7 @@ declare global {
         "ds-swatch-picker": HTMLDsSwatchPickerElement;
         "ds-switch": HTMLDsSwitchElement;
         "ds-tab-group": HTMLDsTabGroupElement;
+        "ds-table": HTMLDsTableElement;
         "ds-tag": HTMLDsTagElement;
         "ds-text": HTMLDsTextElement;
         "ds-toast": HTMLDsToastElement;
@@ -5345,12 +5534,22 @@ declare namespace LocalJSX {
           * Controlled peer sections. Their selected label replaces the static title.
           * @default []
          */
-        "sections"?: TabItem[];
+        "sections"?: TabGroupItem[];
         /**
           * Accessible name for the section chooser.
           * @default 'Change page section'
          */
         "sectionsAriaLabel"?: string;
+        /**
+          * Popup switcher or an inline segmented TabGroup for peer sections.
+          * @default 'switcher'
+         */
+        "sectionsPresentation"?: MobileHeaderSectionsPresentation;
+        /**
+          * Density for the segmented sections presentation.
+          * @default 'md'
+         */
+        "sectionsSize"?: TabGroupSize;
         /**
           * Controlled child sections within the selected page or detail screen.
           * @default []
@@ -6480,6 +6679,11 @@ declare namespace LocalJSX {
         "ariaLabelledby"?: string | undefined;
         "background"?: TabBackground | undefined;
         "onDsChange"?: (event: DsTabGroupCustomEvent<string>) => void;
+        /**
+          * Control density: 24px small, 32px medium, or 40px large track.
+          * @default 'md'
+         */
+        "size"?: TabGroupSize1;
         /**
           * @default []
          */
@@ -6489,6 +6693,150 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsTable {
+        /**
+          * Required accessible table name, rendered as a native caption.
+         */
+        "caption": string;
+        /**
+          * @default 'hidden'
+         */
+        "captionVisibility"?: TableCaptionVisibility;
+        /**
+          * Stable column definitions. Assign through JavaScript.
+          * @default []
+         */
+        "columns"?: TableColumn[];
+        /**
+          * @default 'No data is available.'
+         */
+        "emptyBody"?: string;
+        /**
+          * @default 'Not available'
+         */
+        "emptyCellLabel"?: string;
+        /**
+          * @default 'No results'
+         */
+        "emptyHeading"?: string;
+        /**
+          * @default 'All results loaded'
+         */
+        "endOfResultsLabel"?: string;
+        /**
+          * Initial error state. Existing rows stay visible; incremental failures use loadMoreError.
+          * @default false
+         */
+        "error"?: boolean;
+        /**
+          * @default 'The data could not be loaded.'
+         */
+        "errorBody"?: string;
+        /**
+          * @default 'Unable to load data'
+         */
+        "errorHeading"?: string;
+        /**
+          * Controlled grouping column and group-order direction.
+          * @default null
+         */
+        "grouping"?: TableGroupingState | null;
+        /**
+          * One level of application-owned grouped data. Assign through JavaScript.
+          * @default []
+         */
+        "groups"?: TableGroup[];
+        /**
+          * @default false
+         */
+        "hasMore"?: boolean;
+        /**
+          * Enable application-owned incremental loading without pagination.
+          * @default false
+         */
+        "lazyLoading"?: boolean;
+        /**
+          * Reset key for a new query/group/sort dataset.
+          * @default 'default'
+         */
+        "loadIdentity"?: string | number;
+        "loadMoreError"?: string | undefined;
+        /**
+          * @default 'Load more'
+         */
+        "loadMoreLabel"?: string;
+        /**
+          * @default 'auto'
+         */
+        "loadMoreMode"?: TableLoadMoreMode;
+        /**
+          * IntersectionObserver root margin in CSS pixels.
+          * @default 0
+         */
+        "loadMoreThreshold"?: number;
+        /**
+          * Initial loading state. Existing rows stay visible; incremental loading uses loadingMore.
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * @default false
+         */
+        "loadingMore"?: boolean;
+        /**
+          * @default 'Loading more results'
+         */
+        "loadingMoreLabel"?: string;
+        /**
+          * Maximum scroll-region height. Numbers resolve to CSS pixels.
+         */
+        "maxHeight"?: string | number | undefined;
+        "onDsCellAction"?: (event: DsTableCustomEvent<TableCellActionDetail>) => void;
+        "onDsGroupingChange"?: (event: DsTableCustomEvent<TableGroupingChangeDetail>) => void;
+        "onDsLoadMore"?: (event: DsTableCustomEvent<TableLoadMoreDetail>) => void;
+        "onDsSelectionChange"?: (event: DsTableCustomEvent<TableSelectionChangeDetail>) => void;
+        "onDsSortChange"?: (event: DsTableCustomEvent<TableSortChangeDetail>) => void;
+        /**
+          * @default 'Retry'
+         */
+        "retryLabel"?: string;
+        /**
+          * Ungrouped row data. Ignored while grouping is active. Assign through JavaScript.
+          * @default []
+         */
+        "rows"?: TableRow[];
+        /**
+          * Supports {count} and {total} placeholders.
+          * @default '{count} more rows loaded. {total} rows loaded.'
+         */
+        "rowsLoadedLabel"?: string;
+        /**
+          * Optional explicit label for the horizontal/vertical scroll region.
+         */
+        "scrollLabel"?: string | undefined;
+        /**
+          * Controlled selected row identities. IDs outside the loaded rows are preserved.
+          * @default []
+         */
+        "selectedRowIds"?: string[];
+        /**
+          * @default 'none'
+         */
+        "selectionMode"?: TableSelectionMode;
+        /**
+          * @default 5
+         */
+        "skeletonRows"?: number;
+        /**
+          * Controlled member-row sort state.
+          * @default null
+         */
+        "sort"?: TableSortState | null;
+        /**
+          * @default false
+         */
+        "stickyHeader"?: boolean;
+    }
     interface DsTag {
         /**
           * ID of the menu controlled by an interactive Tag.
@@ -6522,6 +6870,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Use the reduced outer geometry when nested inside a control of the same size.
+          * @default false
+         */
+        "isInset"?: boolean;
         "label": string;
         "maxWidth"?: string | number | undefined;
         /**
@@ -7073,6 +7426,8 @@ declare namespace LocalJSX {
         "headingLevel": MobileHeaderHeadingLevel;
         "value": string;
         "sectionsAriaLabel": string;
+        "sectionsPresentation": MobileHeaderSectionsPresentation;
+        "sectionsSize": TabGroupSize;
         "subvalue": string;
         "subsectionsAriaLabel": string;
         "tone": MobileHeaderTone;
@@ -7292,16 +7647,46 @@ declare namespace LocalJSX {
     }
     interface DsTabGroupAttributes {
         "value": string;
+        "size": TabGroupSize;
         "background": TabBackground | undefined;
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
     }
+    interface DsTableAttributes {
+        "caption": string;
+        "captionVisibility": TableCaptionVisibility;
+        "stickyHeader": boolean;
+        "maxHeight": string;
+        "scrollLabel": string | undefined;
+        "selectionMode": TableSelectionMode;
+        "loading": boolean;
+        "skeletonRows": number;
+        "emptyHeading": string;
+        "emptyBody": string;
+        "error": boolean;
+        "errorHeading": string;
+        "errorBody": string;
+        "emptyCellLabel": string;
+        "lazyLoading": boolean;
+        "loadMoreMode": TableLoadMoreMode;
+        "hasMore": boolean;
+        "loadingMore": boolean;
+        "loadMoreError": string | undefined;
+        "loadIdentity": string;
+        "loadMoreThreshold": number;
+        "loadMoreLabel": string;
+        "retryLabel": string;
+        "loadingMoreLabel": string;
+        "endOfResultsLabel": string;
+        "rowsLoadedLabel": string;
+    }
     interface DsTagAttributes {
         "label": string;
         "icon": string;
         "intent": TagIntent;
         "contrast": TagContrast;
         "size": TagSize;
+        "isInset": boolean;
         "rounded": boolean;
         "maxWidth": string;
         "interactive": boolean;
@@ -7414,6 +7799,7 @@ declare namespace LocalJSX {
         "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] };
         "ds-switch": Omit<DsSwitch, keyof DsSwitchAttributes> & { [K in keyof DsSwitch & keyof DsSwitchAttributes]?: DsSwitch[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `attr:${K}`]?: DsSwitchAttributes[K] } & { [K in keyof DsSwitch & keyof DsSwitchAttributes as `prop:${K}`]?: DsSwitch[K] };
         "ds-tab-group": Omit<DsTabGroup, keyof DsTabGroupAttributes> & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes]?: DsTabGroup[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `attr:${K}`]?: DsTabGroupAttributes[K] } & { [K in keyof DsTabGroup & keyof DsTabGroupAttributes as `prop:${K}`]?: DsTabGroup[K] };
+        "ds-table": Omit<DsTable, keyof DsTableAttributes> & { [K in keyof DsTable & keyof DsTableAttributes]?: DsTable[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `attr:${K}`]?: DsTableAttributes[K] } & { [K in keyof DsTable & keyof DsTableAttributes as `prop:${K}`]?: DsTable[K] } & OneOf<"caption", DsTable["caption"], DsTableAttributes["caption"]>;
         "ds-tag": Omit<DsTag, keyof DsTagAttributes> & { [K in keyof DsTag & keyof DsTagAttributes]?: DsTag[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `attr:${K}`]?: DsTagAttributes[K] } & { [K in keyof DsTag & keyof DsTagAttributes as `prop:${K}`]?: DsTag[K] } & OneOf<"label", DsTag["label"], DsTagAttributes["label"]>;
         "ds-text": Omit<DsText, keyof DsTextAttributes> & { [K in keyof DsText & keyof DsTextAttributes]?: DsText[K] } & { [K in keyof DsText & keyof DsTextAttributes as `attr:${K}`]?: DsTextAttributes[K] } & { [K in keyof DsText & keyof DsTextAttributes as `prop:${K}`]?: DsText[K] };
         "ds-toast": Omit<DsToast, keyof DsToastAttributes> & { [K in keyof DsToast & keyof DsToastAttributes]?: DsToast[K] } & { [K in keyof DsToast & keyof DsToastAttributes as `attr:${K}`]?: DsToastAttributes[K] } & { [K in keyof DsToast & keyof DsToastAttributes as `prop:${K}`]?: DsToast[K] };
@@ -7501,6 +7887,7 @@ declare module "@stencil/core" {
             "ds-swatch-picker": LocalJSX.IntrinsicElements["ds-swatch-picker"] & JSXBase.HTMLAttributes<HTMLDsSwatchPickerElement>;
             "ds-switch": LocalJSX.IntrinsicElements["ds-switch"] & JSXBase.HTMLAttributes<HTMLDsSwitchElement>;
             "ds-tab-group": LocalJSX.IntrinsicElements["ds-tab-group"] & JSXBase.HTMLAttributes<HTMLDsTabGroupElement>;
+            "ds-table": LocalJSX.IntrinsicElements["ds-table"] & JSXBase.HTMLAttributes<HTMLDsTableElement>;
             "ds-tag": LocalJSX.IntrinsicElements["ds-tag"] & JSXBase.HTMLAttributes<HTMLDsTagElement>;
             "ds-text": LocalJSX.IntrinsicElements["ds-text"] & JSXBase.HTMLAttributes<HTMLDsTextElement>;
             "ds-toast": LocalJSX.IntrinsicElements["ds-toast"] & JSXBase.HTMLAttributes<HTMLDsToastElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "13.11.1",
+  "version": "13.12.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -66,6 +66,7 @@
     },
     "./control-elevation.css": "./dist/styles/control-elevation.css",
     "./prose.css": "./dist/styles/prose.css",
+    "./table.css": "./dist/styles/table.css",
     "./agent": "./dist/agent.json",
     "./agent/patterns": "./dist/agent-patterns.json",
     "./dist/components/*": "./dist/components/*",
@@ -137,7 +138,7 @@
     "@angular/forms": "^22.0.7",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^6.5.0",
-    "@ds-mo/tokens": "^6.0.2",
+    "@ds-mo/tokens": "^6.1.0",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/client": "^2.0.0",
     "@modelcontextprotocol/server": "^2.0.0",

package/dist/components/p-CVmtbj-6.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{o as a,a as n,r,b as h,d}from"./p-DkhE3BsH.js";import{i as c,r as m}from"./p-DNpE0RBz.js";import{d as u}from"./p-DwKC_9u2.js";import{d as b}from"./p-c1pY-Mqq.js";import{d as p}from"./p-DumWT7NN.js";import{d as f}from"./p-Ca-I2UnB.js";import{d as g}from"./p-BnGJrBPG.js";import{d as v}from"./p-DW9p068S.js";import{d as w}from"./p-DgglLVCj.js";import{d as k}from"./p-BRajO-Za.js";import{d as _}from"./p-DLwM1RNL.js";import{d as y}from"./p-BQ7Nzx9A.js";import{d as C}from"./p-BNiIyZCn.js";import{d as E}from"./p-CCYgBUUS.js";const j=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:transparent}[responsive-mode='mobile'].sc-ds-shell-tools-h{width:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header.sc-ds-shell-tools{grid-row:1}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{grid-row:2;overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!this.availableInboxTools.includes(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e})}}presentationChanged(s,e){if(s===e)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==s){this.panelToolsEl.setAttribute("presentation",s)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&(s.mobileDestination==="inbox"||c(s.id)))).map((s=>s.id))}get mobileViewOrder(){return a(this.resolvedItems).map((s=>s.id))}toolLabel(s){const e=this.resolvedItems.find((e=>e.id===s));return e?.label??e?.ariaLabel??n[s]??s}get mobileActiveTool(){const s=this.resolvedItems.find((s=>s.id===this.activeTool));const e=s?.mobileDestination==="inbox"||c(this.activeTool);if(!e)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=r(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=h(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=t||this.toolLabel(s);const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));const a=c(s)&&!e.showBack?this.availableInboxTools.map((s=>({id:s,label:this.toolLabel(s)}))):[];return o("ds-mobile-header",{class:"shell-tools__mobile-header",heading:i,headingLevel:"h2",sections:a,value:s,sectionsAriaLabel:this.inboxNavigationLabel,onDsSectionChange:this.selectInboxTool},e.showBack?o("ds-tooltip",{slot:"leading",label:e.backAriaLabel||"Back",side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",icon:e.backIcon||"ChevronLeft",size:"md","aria-label":e.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:s})})):null,l.map((e=>o("ds-tooltip",{slot:"trailing",key:e.id,label:e.ariaLabel,side:"bottom",size:"sm"},o("ds-button-unfilled",{id:e.triggerId||undefined,"data-header-action-id":e.id,variant:"icon",icon:e.icon,size:"md","aria-label":e.ariaLabel,haspopup:e.haspopup,controls:e.controls,expanded:e.expanded,pressed:e.pressed,isActive:!!e.expanded,isInactive:e.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(s,e.id,t)})))))}renderMobile(){const s=this.mobileActiveTool;return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,o("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return o(i,{key:"912937cbcf2428d74ef2b98810d133d0117bbe06",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return j()}},[262,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function D(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),x)}break;case"ds-badge":if(!customElements.get(l(s))){u()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){b()}break;case"ds-icon":if(!customElements.get(l(s))){p()}break;case"ds-loader":if(!customElements.get(l(s))){f()}break;case"ds-menu":if(!customElements.get(l(s))){g()}break;case"ds-mobile-header":if(!customElements.get(l(s))){v()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(s))){w()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){k()}break;case"ds-panel-tools":if(!customElements.get(l(s))){d()}break;case"ds-swatch-picker":if(!customElements.get(l(s))){_()}break;case"ds-switch":if(!customElements.get(l(s))){y()}break;case"ds-text":if(!customElements.get(l(s))){C()}break;case"ds-tooltip":if(!customElements.get(l(s))){E()}break}}))}D();export{x as S,D as d};
-//# sourceMappingURL=p-CVmtbj-6.js.map

package/dist/components/p-CVmtbj-6.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shellToolsCss","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","headers","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","availableInboxTools","includes","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","presentationChanged","next","previous","getAttribute","setAttribute","resolvedItems","filter","item","isInactive","mobileDestination","isShellInboxTool","map","mobileViewOrder","orderPanelToolsItems","toolLabel","find","candidate","label","ariaLabel","PANEL_TOOLS_LABELS","inbox","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","reconcilePanelToolsAvailability","resolvedHeaders","activeHeader","activateMobileTool","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","trim","actions","sections","showBack","heading","headingLevel","value","sectionsAriaLabel","onDsSectionChange","backAriaLabel","side","size","variant","icon","backIcon","activeFill","hasBorder","onDsClick","dsHeaderBack","key","triggerId","undefined","haspopup","controls","expanded","pressed","isActive","renderMobile","inert","active","hidden","render","mobile","Host","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n  width: 100%;\n  background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-header {\n  grid-row: 1;\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile-body {\n  grid-row: 2;\n  overflow: hidden;\n}\n\n.shell-tools__view {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n  display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n  min-height: 0;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  scoped: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox =\n      item?.mobileDestination === 'inbox' || isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  }\n\n  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <slot name={id} slot={id} />,\n      <slot name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const sections =\n      isShellInboxTool(tool) && !header.showBack\n        ? this.availableInboxTools.map(id => ({\n            id,\n            label: this.toolLabel(id),\n          }))\n        : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip\n            slot=\"leading\"\n            label={header.backAriaLabel || 'Back'}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\n          <ds-tooltip\n            slot=\"trailing\"\n            key={action.id}\n            label={action.ariaLabel}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              id={action.triggerId || undefined}\n              data-header-action-id={action.id}\n              variant=\"icon\"\n              icon={action.icon}\n              size=\"md\"\n              aria-label={action.ariaLabel}\n              haspopup={action.haspopup}\n              controls={action.controls}\n              expanded={action.expanded}\n              pressed={action.pressed}\n              isActive={!!action.expanded}\n              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)}\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile\n            ? this.presentation === 'fullscreen'\n              ? 'dialog'\n              : 'complementary'\n            : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}