@ds-mo/ui 14.22.2 → 14.23.0

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -9,6 +9,7 @@ export declare const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId;
 export declare const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId;
 export declare const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string>;
 export declare const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>>;
+export type PanelToolsRailPlacement = 'header' | 'body' | 'footer';
 export interface PanelToolsItem {
     id: PanelToolsToolId;
     /** Icon name for <ds-icon>. */
@@ -16,7 +17,7 @@ export interface PanelToolsItem {
     /** Visible and accessible fallback label for custom tool ids. */
     label?: string;
     /** Explicit rail region; canonical Agents/Help placement is the fallback. */
-    railPlacement?: 'header' | 'body' | 'footer';
+    railPlacement?: PanelToolsRailPlacement;
     /** Stable ordering within the selected rail region. */
     order?: number;
     /** Optional shortcut label displayed by the tooltip. */
@@ -30,6 +31,79 @@ export interface PanelToolsItem {
     isInactive?: boolean;
     ariaLabel?: string;
 }
+export type PanelToolsRailAccessoryVisual = {
+    type: 'icon';
+    icon: string;
+} | {
+    type: 'initial';
+    initial: string;
+} | {
+    type: 'image';
+    src: string;
+};
+export interface PanelToolsRailAccessoryAction {
+    /** Stable application-owned action id emitted with the accessory id. */
+    id: string;
+    /** Overrides the accessory label for the primary action. */
+    ariaLabel?: string;
+    isInactive?: boolean;
+}
+export interface PanelToolsRailAccessorySecondaryAction {
+    id: string;
+    icon: string;
+    ariaLabel: string;
+    isInactive?: boolean;
+}
+export type PanelToolsRailTransientTone = 'active' | 'positive';
+interface PanelToolsRailAccessoryBase {
+    /** Stable application-owned identity. Duplicate or blank ids are omitted. */
+    id: string;
+    /** Explicit rail region; accessories never infer placement from their id. */
+    railPlacement: PanelToolsRailPlacement;
+    /** Stable ordering within the selected rail region. */
+    order: number;
+}
+/** Decorative boundary between application-owned rail accessory groups. */
+export interface PanelToolsRailDividerAccessory extends PanelToolsRailAccessoryBase {
+    type: 'divider';
+}
+/**
+ * A compact one-action shortcut that matches standard tool-button geometry.
+ * PanelTools owns its initial orb, notification dot, and transient interaction paint.
+ */
+export interface PanelToolsRailShortcutAccessory extends PanelToolsRailAccessoryBase {
+    type: 'shortcut';
+    /** Accessible shortcut name and action-label fallback. */
+    ariaLabel: string;
+    /** One or two displayed graphemes. Longer values are truncated visually. */
+    initials: string;
+    /** Supplemental notification dot. Include its meaning in the accessible label when needed. */
+    dot?: boolean;
+    action: PanelToolsRailAccessoryAction;
+}
+/**
+ * A direct application intent that never selects a tool or changes drawer state.
+ * PanelTools owns the two-control-height surface and its focus behavior.
+ */
+export interface PanelToolsRailTransientAccessory extends PanelToolsRailAccessoryBase {
+    type: 'transient';
+    /** Accessible accessory name and primary-action fallback label. */
+    ariaLabel: string;
+    visual: PanelToolsRailAccessoryVisual;
+    /** State announced with the primary action and shown in its tooltip. */
+    statusText: string;
+    /** Bold surface treatment. Active uses brand; positive uses positive semantic color. */
+    statusTone: PanelToolsRailTransientTone;
+    primaryAction: PanelToolsRailAccessoryAction;
+    secondaryAction?: PanelToolsRailAccessorySecondaryAction;
+}
+export type PanelToolsRailAccessory = PanelToolsRailDividerAccessory | PanelToolsRailShortcutAccessory | PanelToolsRailTransientAccessory;
+export interface PanelToolsRailAccessoryActionDetail {
+    accessoryId: string;
+    actionId: string;
+    /** Rendered action control, suitable for anchoring an application-owned overlay. */
+    anchor: HTMLElement;
+}
 /** Canonical shell recipe used by Lab and by managed ShellApp examples. */
 export declare const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[];
 export interface PanelToolsHeaderAction {
@@ -64,4 +138,5 @@ export interface PanelToolsHeaderConfig {
 }
 /** Per-tool header state. The application replaces the object when a tool changes depth or actions. */
 export type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;
+export {};
 //# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components/PanelTools/panel-tools-utils.d.ts

@@ -1,5 +1,21 @@
-import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
+import { type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from './panel-tools-types';
 export declare function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[];
+export type PanelToolsRailEntry = {
+    type: 'tool';
+    id: string;
+    item: PanelToolsItem;
+} | {
+    type: 'accessory';
+    id: string;
+    accessory: PanelToolsRailAccessory;
+};
+/** Merge tools and governed accessories into one visual and keyboard order. */
+export declare function orderPanelToolsRailEntries(items: PanelToolsItem[], accessories: PanelToolsRailAccessory[]): PanelToolsRailEntry[];
+/** Flatten interactive entries while leaving decorative boundaries out of focus order. */
+export declare function panelToolsRailFocusKeys(entries: PanelToolsRailEntry[]): string[];
+/** Preserve the current target across collection changes, or choose its nearest survivor. */
+export declare function reconcilePanelToolsRovingIndex(previousKeys: string[], nextKeys: string[], currentIndex: number): number;
+export declare function panelToolsRailAccessoryActionDetail(accessoryId: string, actionId: string, anchor: HTMLElement): PanelToolsRailAccessoryActionDetail;
 export declare function isPanelToolsToolId(value: string | null): value is PanelToolsToolId;
 export declare function panelToolsRailPlacement(item: PanelToolsItem): 'header' | 'body' | 'footer';
 export declare function reconcilePanelToolsAvailability(items: PanelToolsItem[], open: boolean, activeTool: PanelToolsToolId | ''): {

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import type { PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
 import { type MobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
@@ -67,6 +67,8 @@ export declare class ShellApp {
         tool: PanelToolsToolId;
         id: string;
     }>;
+    /** Managed desktop/tablet rail accessory intent. */
+    dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     /** Managed drawer/fullscreen presentation state. */
     dsPresentationChange: EventEmitter<{
         presentation: 'drawer' | 'fullscreen';
@@ -159,6 +161,7 @@ export declare class ShellApp {
     private handleManagedPresentationChange;
     private handleManagedHeaderBack;
     private handleManagedHeaderAction;
+    private handleManagedRailAccessoryAction;
     private handleManagedSheetToggle;
     private activateManagedMobileTool;
     private handleManagedMobileDestination;

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -3,7 +3,7 @@ import type { BarTitleActionItem, BarTitlePrimaryAction } from '../BarTitle/bar-
 import type { BreadcrumbItem } from '../Breadcrumb/breadcrumb-types';
 import type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';
 import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from '../PanelNav/panel-nav-types';
-import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem } from '../PanelTools/panel-tools-types';
+import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem, PanelToolsRailAccessory } from '../PanelTools/panel-tools-types';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
@@ -93,6 +93,8 @@ export interface ShellPageChromeConfig {
  */
 export interface ShellToolsConfig {
     items?: PanelToolsItem[];
+    /** Desktop/tablet-only direct rail intents and decorative group boundaries. */
+    accessories?: PanelToolsRailAccessory[];
     headers?: PanelToolsHeaders;
     storageKey?: string;
     fullscreenHeaderMode?: 'shared' | 'split';

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import { type ShellResponsiveMode } from '../../shell/shell-responsive';
 export declare class ShellTools {
     el: HTMLElement;
@@ -10,6 +10,8 @@ export declare class ShellTools {
     presentation: 'drawer' | 'fullscreen';
     fullscreenHeaderMode: 'shared' | 'split';
     items: PanelToolsItem[];
+    /** Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage. */
+    accessories: PanelToolsRailAccessory[];
     headers: PanelToolsHeaders;
     storageKey: string;
     toolsLabel: string;
@@ -31,6 +33,7 @@ export declare class ShellTools {
         tool: PanelToolsToolId;
         id: string;
     }>;
+    dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     private panelToolsEl;
     private get resolvedItems();
     private get availableInboxTools();
@@ -46,6 +49,7 @@ export declare class ShellTools {
     private selectInboxTool;
     private handlePanelToolChange;
     private handlePanelPresentationChange;
+    private handlePanelRailAccessoryAction;
     private handleMobileHeaderAction;
     /** Match PanelTools' imperative activation contract in every responsive mode. */
     activateTool(id: PanelToolsToolId): Promise<void>;

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

@@ -1,3 +1,3 @@
 export { ShellTools } from './ShellTools';
-export type { PanelToolsHeaderAction, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../PanelTools/panel-tools-types';
+export type { PanelToolsHeaderAction, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryAction, PanelToolsRailAccessoryActionDetail, PanelToolsRailAccessorySecondaryAction, PanelToolsRailAccessoryVisual, PanelToolsRailDividerAccessory, PanelToolsRailPlacement, PanelToolsRailShortcutAccessory, PanelToolsRailTransientAccessory, PanelToolsRailTransientTone, PanelToolsToolId, } from '../PanelTools/panel-tools-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components.d.ts

@@ -51,7 +51,7 @@ import { PaginationChangeDetail, PaginationPageSizeMode } from "./components/Pag
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
 import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
-import { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+import { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
@@ -121,7 +121,7 @@ export { PaginationChangeDetail, PaginationPageSizeMode } from "./components/Pag
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
 export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
-export { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+export { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
@@ -2249,6 +2249,11 @@ export namespace Components {
         "value": string;
     }
     interface DsPanelTools {
+        /**
+          * Desktop/tablet-only application-owned rail boundaries and direct intents. Set via JS property and replace the array reference to update.
+          * @default []
+         */
+        "accessories": PanelToolsRailAccessory[];
         /**
           * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
          */
@@ -2699,6 +2704,11 @@ export namespace Components {
         "scrollCompaction": boolean;
     }
     interface DsShellTools {
+        /**
+          * Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage.
+          * @default []
+         */
+        "accessories": PanelToolsRailAccessory[];
         /**
           * Match PanelTools' imperative activation contract in every responsive mode.
          */
@@ -4721,6 +4731,7 @@ declare global {
     tool: PanelToolsToolId;
   };
         "dsHeaderAction": PanelToolsHeaderActionDetail;
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
         "dsChromeTransitionStart": ChromeTransitionDetail;
         "dsChromeTransitionEnd": ChromeTransitionDetail;
     }
@@ -4812,6 +4823,7 @@ declare global {
         "dsToolChange": { id: PanelToolsToolId; selected: boolean };
         "dsHeaderBack": { tool: PanelToolsToolId };
         "dsHeaderAction": { tool: PanelToolsToolId; id: string };
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
         "dsPresentationChange": { presentation: 'drawer' | 'fullscreen' };
         "dsBrowseContextChange": NavChromeStyle;
         "dsNavFooterAction": void;
@@ -4852,6 +4864,7 @@ declare global {
     tool: PanelToolsToolId;
     id: string;
   };
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
     }
     interface HTMLDsShellToolsElement extends Components.DsShellTools, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsShellToolsElementEventMap>(type: K, listener: (this: HTMLDsShellToolsElement, ev: DsShellToolsCustomEvent<HTMLDsShellToolsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7527,6 +7540,11 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DsPanelTools {
+        /**
+          * Desktop/tablet-only application-owned rail boundaries and direct intents. Set via JS property and replace the array reference to update.
+          * @default []
+         */
+        "accessories"?: PanelToolsRailAccessory[];
         /**
           * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
@@ -7568,6 +7586,10 @@ declare namespace LocalJSX {
         "onDsPresentationChange"?: (event: DsPanelToolsCustomEvent<{
     presentation: 'drawer' | 'fullscreen';
   }>) => void;
+        /**
+          * Direct accessory intent. Emitting this event never changes the active tool or drawer.
+         */
+        "onDsRailAccessoryAction"?: (event: DsPanelToolsCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         /**
           * Emitted when a rail button is toggled. Detail = { id, selected }.
          */
@@ -7969,6 +7991,10 @@ declare namespace LocalJSX {
           * Managed drawer/fullscreen presentation state.
          */
         "onDsPresentationChange"?: (event: DsShellAppCustomEvent<{ presentation: 'drawer' | 'fullscreen' }>) => void;
+        /**
+          * Managed desktop/tablet rail accessory intent.
+         */
+        "onDsRailAccessoryAction"?: (event: DsShellAppCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         /**
           * Emitted after crossing the fixed 768px or 1200px shell boundaries.
          */
@@ -8060,6 +8086,11 @@ declare namespace LocalJSX {
         "scrollCompaction"?: boolean;
     }
     interface DsShellTools {
+        /**
+          * Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage.
+          * @default []
+         */
+        "accessories"?: PanelToolsRailAccessory[];
         /**
           * @default ''
          */
@@ -8094,6 +8125,7 @@ declare namespace LocalJSX {
         "onDsPresentationChange"?: (event: DsShellToolsCustomEvent<{
     presentation: 'drawer' | 'fullscreen';
   }>) => void;
+        "onDsRailAccessoryAction"?: (event: DsShellToolsCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         "onDsToolChange"?: (event: DsShellToolsCustomEvent<{
     id: PanelToolsToolId;
     selected: boolean;

package/dist/types/shell/index.d.ts

@@ -3,7 +3,7 @@ export type { PanelNavChildItem, PanelNavChildSelectDetail, PanelNavGroup, Panel
 export type { BarNavTab } from '../components/BarNav/bar-nav-types';
 export type { ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, } from '../components/ShellPage/shell-page-types';
 export type { ShellAppComposition, ShellNavigationConfig, ShellNavigationSelectDetail, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig, } from '../components/ShellApp/shell-app-types';
-export type { PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolHeaderActionDetail, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../components/PanelTools/panel-tools-types';
+export type { PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolHeaderActionDetail, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryAction, PanelToolsRailAccessoryActionDetail, PanelToolsRailAccessorySecondaryAction, PanelToolsRailAccessoryVisual, PanelToolsRailDividerAccessory, PanelToolsRailPlacement, PanelToolsRailShortcutAccessory, PanelToolsRailTransientAccessory, PanelToolsRailTransientTone, PanelToolsToolId, } from '../components/PanelTools/panel-tools-types';
 export { PANEL_TOOLS_DEFAULT_ITEMS } from '../components/PanelTools/panel-tools-types';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, } from './nav-chrome';
 export type { MenuPlacement } from '../components/Menu/menu-placement';

package/dist/vue/ds-panel-tools.js

@@ -9,6 +9,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'fullscreenHeaderMode',
     'activeTool',
     'items',
+    'accessories',
     'toolsLabel',
     'toolShortcutsLabel',
     'headers',
@@ -17,6 +18,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'dsPresentationChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd'
 ], [
@@ -24,6 +26,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'dsPresentationChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd'
 ]);

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

@@ -26,6 +26,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsToolChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsPresentationChange',
     'dsBrowseContextChange',
     'dsNavFooterAction',
@@ -42,6 +43,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsToolChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsPresentationChange',
     'dsBrowseContextChange',
     'dsNavFooterAction',

package/dist/vue/ds-shell-tools.js

@@ -10,6 +10,7 @@ export const DsShellTools = /*@__PURE__*/ defineContainer('ds-shell-tools', defi
     'presentation',
     'fullscreenHeaderMode',
     'items',
+    'accessories',
     'headers',
     'storageKey',
     'toolsLabel',
@@ -19,10 +20,12 @@ export const DsShellTools = /*@__PURE__*/ defineContainer('ds-shell-tools', defi
     'dsToolChange',
     'dsPresentationChange',
     'dsHeaderBack',
-    'dsHeaderAction'
+    'dsHeaderAction',
+    'dsRailAccessoryAction'
 ], [
     'dsToolChange',
     'dsPresentationChange',
     'dsHeaderBack',
-    'dsHeaderAction'
+    'dsHeaderAction',
+    'dsRailAccessoryAction'
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.22.2",
+  "version": "14.23.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -125,7 +125,7 @@
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
     "@ds-mo/icons": "^7.0.0",
-    "@ds-mo/tokens": "^6.5.0",
+    "@ds-mo/tokens": "^6.5.1",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "rxjs": "^7.8.0",
@@ -158,7 +158,7 @@
     "@angular/forms": "^22.0.7",
     "@axe-core/playwright": "^4.12.1",
     "@ds-mo/icons": "^7.0.0",
-    "@ds-mo/tokens": "^6.5.0",
+    "@ds-mo/tokens": "^6.5.1",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource/fira-code": "^5.3.0",

package/dist/components/p-COFw_fcj.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as t,h as o,a as i,t as n}from"./index.js";import{p as r}from"./p-CUL5_8JM.js";import{d as a}from"./p-DzPtYdXy.js";import{d as l}from"./p-7MWaWl8w.js";import{d}from"./p-Cea7rROU.js";import{d as c}from"./p-0XTyQNRG.js";import{d as h}from"./p-DzVYGJJv.js";import{d as f}from"./p-Cd1JnnVK.js";import{d as u}from"./p-9X_p0bHr.js";const p=["agents","messages","activity","search","stacks","help"];const m="agents";const g={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const v={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const b=[{id:"agents",icon:"AI",label:g.agents,railPlacement:"header",order:0,shortcutKey:v.agents,mobileDestination:"agents"},{id:"messages",icon:"MessageBubbleStack",label:g.messages,order:0,shortcutKey:v.messages,mobileDestination:"messages"},{id:"activity",icon:"Bell",label:g.activity,order:1,shortcutKey:v.activity,mobileDestination:"activity"},{id:"search",icon:"MagnifyingGlass",label:g.search,order:2,shortcutKey:v.search,mobileDestination:"search"},{id:"help",icon:"CircleQuestion",label:g.help,railPlacement:"footer",order:0,shortcutKey:v.help,mobileDestination:"help"}];function w(e){const s=new Map;for(const t of e){if(t.id.trim()&&!s.has(t.id))s.set(t.id,t)}const t={header:0,body:1,footer:2};return Array.from(s.values()).sort(((e,s)=>{const o=_(e);const i=_(s);const n=t[o]-t[i];if(n!==0)return n;const r=p.findIndex((s=>s===e.id));const a=p.findIndex((e=>e===s.id));const l=e.order??(r<0?Number.MAX_SAFE_INTEGER:r);const d=s.order??(a<0?Number.MAX_SAFE_INTEGER:a);return l-d}))}function y(e){return typeof e==="string"&&e.trim().length>0}function _(e){if(e.railPlacement)return e.railPlacement;if(e.id===m)return"header";if(e.id==="help")return"footer";return"body"}function x(e,s,t){if(!t||e.some((e=>e.id===t))){return{open:s,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function k(e){const s=e.transitionProperty.split(",").map((e=>e.trim()));const t=e.transitionDuration.split(",").map((e=>r(e.trim(),0)));const o=e.transitionDelay.split(",").map((e=>r(e.trim(),0)));return s.reduce(((e,s,i)=>{if(s!=="all"&&s!=="max-width")return e;const n=t[i%t.length]??0;const r=o[i%o.length]??0;return Math.max(e,n+r,0)}),0)}function T(e,s){return!e&&s==="idle"}function C(e,s,t){if(t==="closing")return e<=.5;if(t==="opening")return s>0&&e>=s-.5;return true}function A(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const z=()=>`.ds-control--lg,:host(.ds-control--lg),:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--lg),.ds-control--lg{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}:host(.ds-control--md),.ds-control--md{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}:host(.ds-control--sm),.ds-control--sm{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}:host(.ds-control--xs),.ds-control--xs{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}:host(.ds-chrome-space--sm),.ds-chrome-space--sm{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}:host(.ds-chrome-space--md),.ds-chrome-space--md{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}:host(.ds-chrome-space--lg),.ds-chrome-space--lg{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}:host(.ds-chrome-row),.ds-chrome-row,:host(.ds-chrome-column),.ds-chrome-column,:host(.ds-chrome-grid),.ds-chrome-grid{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}:host(.ds-chrome-row),.ds-chrome-row{flex-direction:row;align-items:center}:host(.ds-chrome-column),.ds-chrome-column{flex-direction:column}:host(.ds-chrome-grid),.ds-chrome-grid{display:grid;align-items:center}@media (forced-colors: active){:root,:host,.ds-forced-colors-scope{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}:host{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}:host(.ds-focus-ring),.ds-focus-ring,:host(.ds-focus-ring-inset),.ds-focus-ring-inset{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){:host{--ds-focus-ring-color:var(--ds-forced-color-selected)}}:host(.ds-scrollbar-hidden),.ds-scrollbar-hidden{scrollbar-width:none}:host(.ds-scrollbar-hidden)::-webkit-scrollbar,.ds-scrollbar-hidden::-webkit-scrollbar{display:none}:host{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}:host(.panel-tools--ready) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in-out, ease)}:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}:host(.panel-tools--open) .panel-tools__drawer{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views,.panel-tools__full-view{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view{height:100%}.panel-tools__full-view{display:none}.panel-tools__full-view--active{display:block}:host([presentation='fullscreen']){height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}:host([presentation='fullscreen']) .panel-tools__rail{display:none}:host([presentation='fullscreen']) .panel-tools__drawer{max-width:100vw;transition:none;width:100vw}:host([presentation='fullscreen']) .panel-tools__drawer--visible{border-left:none}:host([presentation='fullscreen']) .panel-tools__drawer-surface{background-color:transparent;width:100vw}:host([presentation='fullscreen']:not(.panel-tools--fullscreen)) .panel-tools__drawer-surface,:host(.panel-tools--fullscreen:not([presentation='fullscreen'])) .panel-tools__drawer-surface{visibility:hidden}:host(.panel-tools--presentation-snap) .panel-tools__drawer{transition:none}.panel-tools__body{flex:1 1 auto;min-height:0;overflow:auto;position:relative}:host(.panel-tools--drawer-resting) .panel-tools__body{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view ::slotted(*){margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active{display:block}.panel-tools__rail{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer,:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer{transition:none}}`;const S=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.dsToolChange=t(this,"dsToolChange",7);this.dsPresentationChange=t(this,"dsPresentationChange",7);this.dsHeaderBack=t(this,"dsHeaderBack",7);this.dsHeaderAction=t(this,"dsHeaderAction",7);this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart",7);this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd",7);this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.railBodyScrollable=false;this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=e=>{const s=e.detail;if(!this.activeTool||!s?.id)return;e.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:s.id,anchor:s.anchor})};this.handleTransitionEnd=e=>{const s=this.renderRoot.querySelector(".panel-tools__drawer");if(e.target!==s)return;if(e.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(e.type==="transitioncancel")return;if(s&&!this.drawerTransitionAtTerminal(s,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=e=>{const s=A(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return w(this.railItems)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null;this.disconnectRailBodyObserver()}presentationChanged(e,t){if(e===t)return;if(this.el.getAttribute("presentation")!==e){this.el.setAttribute("presentation",e)}const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(e==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof s?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const e=this.focusBeforeFullscreen;const s=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(e?.isConnected){e.focus({preventScroll:true})}const t=e?document.activeElement===e||e.contains(document.activeElement):false;if(!t&&s)await this.focusHeaderAction(s);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:e})}handleFullscreenEscape(e){if(this.presentation!=="fullscreen"||e.key!=="Escape")return;e.preventDefault();e.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(e,s){if(e)this.drawerSurfaceRetained=true;if(this.readyForMotion&&s!==undefined&&s!==e){this.startDrawerTransition(e?"opening":"closing")}else if(!e){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.connectRailBodyObserver();this.updateRailBodyScrollable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}componentDidRender(){this.updateRailBodyScrollable()}connectRailBodyObserver(){this.disconnectRailBodyObserver();if(!this.railBodyEl||typeof ResizeObserver==="undefined")return;this.railBodyObserver=new ResizeObserver((()=>this.updateRailBodyScrollable()));this.railBodyObserver.observe(this.railBodyEl)}disconnectRailBodyObserver(){this.railBodyObserver?.disconnect();this.railBodyObserver=undefined}updateRailBodyScrollable(){const e=Boolean(this.railBodyEl&&this.railBodyEl.scrollHeight>this.railBodyEl.clientHeight+1);if(e!==this.railBodyScrollable)this.railBodyScrollable=e}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const e=localStorage.getItem(this.storageKey);if(y(e))this.activeTool=e}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const e=x(this.railItems,this.open,this.activeTool);if(!e.removedTool)return;this.clearPersistedTool();this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:e.removedTool,selected:false})}startDrawerTransition(e){const s=this.renderRoot.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=e;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==e)return;if(!s){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(s,e)){this.finishDrawerTransition();return}const o=k(getComputedStyle(s));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(e,s){const t=e.getBoundingClientRect().width;const o=e.querySelector(".panel-tools__drawer-surface");const i=o?.getBoundingClientRect().width??0;return C(t,i,s)}finishDrawerTransition(){const e=this.motion;const s=e!=="idle";this.clearTransitionCompletion();if(!s)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(e==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}hasFullView(e){return this.fullViewToolIds.includes(e)}syncFullViewTools(){const e=this.orderedRailItems.map((e=>e.id));const s=e.filter((e=>Boolean(this.el.querySelector(`[slot="${e}-view"]`))));if(s.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=s}get renderRoot(){return this.el.shadowRoot??this.el}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const e=this.railItems.find((e=>e.id===this.activeTool));return e?.label??g[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.isInactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}async focusHeaderAction(e){const s=this.renderRoot.querySelector(`[data-header-action-id="${CSS.escape(e)}"]`);await(s?.setFocus?.())}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.renderRoot.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){const t=e.ariaLabel??e.label??g[e.id]??e.id;return o("ds-tooltip",{key:e.id,label:t,shortcutKey:e.shortcutKey??v[e.id],side:"left",size:"sm",boundary:"viewport"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,hasBorder:false,pressScale:false,dot:e.dot??false,isInactive:e.isInactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)}))}render(){const e=this.headerLabel();const s=this.activeHeader();const t=s.title?.trim()||e;const n=s.actions??[];const r=this.orderedRailItems;const a=r.filter((e=>_(e)==="header"));const l=r.filter((e=>_(e)==="body"));const d=r.filter((e=>_(e)==="footer"));const c=a.length;const h=c+l.length;const f=this.isDrawerPresent();const u=T(this.open,this.motion);const p=Boolean(f&&this.activeTool&&this.hasFullView(this.activeTool));const m=r.map((e=>e.id));return o(i,{key:"f0b68f1eba06350ea0e6e9cd49ac8af501e3d119",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":u,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"39d87b56af32d1b0c9df28ae753418b031bce592",class:"panel-tools__layout"},o("nav",{key:"49386a819594b99d83fad67035ba9b61dffef7b8",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},a.length?o("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},a.map(((e,s)=>this.renderRailAction(e,s)))):null,o("div",{key:"03b7594635006a2bd0dcd01328b67a470477fe22",class:{"panel-tools__rail-body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.railBodyScrollable},ref:e=>{const s=e??undefined;if(s===this.railBodyEl)return;this.railBodyEl=s;this.connectRailBodyObserver()},role:this.railBodyScrollable?"region":undefined,"aria-label":this.railBodyScrollable?this.toolShortcutsLabel:undefined,tabIndex:this.railBodyScrollable?0:undefined},o("div",{key:"fdbd54e7590e79decf8650a402f97655accde47a",class:"panel-tools__rail-actions"},l.map(((e,s)=>this.renderRailAction(e,c+s))))),d.length?o("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((e,s)=>this.renderRailAction(e,h+s)))):null),o("div",{key:"b52eb269ee5503602f7449cbcc98d3d8a79ac24e",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":f},"aria-hidden":f?null:"true",inert:f?undefined:true},o("div",{key:"8ae718b1e9e1cea92011c4f098fb2baf4f3088e6",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:s.showBack??false,backIcon:s.backIcon||"ChevronLeft",backAriaLabel:s.backAriaLabel||"Back",showMenu:false,ref:e=>{const s=e;if(s)s.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"b0ed560e468602805bc95ef3d30de2b7874f1ccf",class:"panel-tools__body",hidden:p},m.map((e=>{const s=this.isViewActive(e);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":s},hidden:!s},o("slot",{name:e}))}))),o("div",{key:"20e0ba3227e0b5fa1ca193e73660e73a0f84e986",class:"panel-tools__full-views",hidden:!p},m.map((e=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(e)&&this.hasFullView(e)},hidden:!(this.isViewActive(e)&&this.hasFullView(e))},o("slot",{name:`${e}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}}static get style(){return z()}},[257,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],railBodyScrollable:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}]);function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(n(e))){customElements.define(n(e),S)}break;case"ds-badge":if(!customElements.get(n(e))){a()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){l()}break;case"ds-icon":if(!customElements.get(n(e))){d()}break;case"ds-loader":if(!customElements.get(n(e))){c()}break;case"ds-panel-tool-header":if(!customElements.get(n(e))){h()}break;case"ds-text":if(!customElements.get(n(e))){f()}break;case"ds-tooltip":if(!customElements.get(n(e))){u()}break}}))}D();export{S as P,g as a,A as b,b as c,D as d,w as o,x as r};
-//# sourceMappingURL=p-COFw_fcj.js.map