@ds-mo/ui 13.5.0 → 13.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (174) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +9 -2
  3. package/dist/agent.json +171 -8
  4. package/dist/angular/ds-banner.d.ts +23 -0
  5. package/dist/angular/ds-banner.js +45 -0
  6. package/dist/angular/ds-modal.d.ts +1 -1
  7. package/dist/angular/ds-modal.js +3 -3
  8. package/dist/angular/index.d.ts +1 -1
  9. package/dist/angular/index.js +1 -0
  10. package/dist/angular/proxies.d.ts +1 -0
  11. package/dist/angular/proxies.js +1 -0
  12. package/dist/components/ds-agent-activity.js +1 -1
  13. package/dist/components/ds-agent-response.js +1 -1
  14. package/dist/components/ds-agent-source-list.js +1 -1
  15. package/dist/components/ds-agent-tool-call.js +1 -1
  16. package/dist/components/ds-attachment-list.js +1 -1
  17. package/dist/components/ds-badge.js +1 -1
  18. package/dist/components/ds-banner.d.ts +11 -0
  19. package/dist/components/ds-banner.js +2 -0
  20. package/dist/components/ds-banner.js.map +1 -0
  21. package/dist/components/ds-bar-nav.js +1 -1
  22. package/dist/components/ds-bar-title.js +1 -1
  23. package/dist/components/ds-bar-workflow.js +1 -1
  24. package/dist/components/ds-breadcrumb.js +1 -1
  25. package/dist/components/ds-button-filled.js +1 -1
  26. package/dist/components/ds-button-unfilled.js +1 -1
  27. package/dist/components/ds-card-data-viz.js +1 -1
  28. package/dist/components/ds-card-overview.js +1 -1
  29. package/dist/components/ds-card-setting.js +1 -1
  30. package/dist/components/ds-card-setting.js.map +1 -1
  31. package/dist/components/ds-chart-bar.js +1 -1
  32. package/dist/components/ds-chart-donut.js +1 -1
  33. package/dist/components/ds-chart-legend.js +1 -1
  34. package/dist/components/ds-chart-line.js +1 -1
  35. package/dist/components/ds-checkbox.js +1 -1
  36. package/dist/components/ds-chip.js +1 -1
  37. package/dist/components/ds-code-block.js +1 -1
  38. package/dist/components/ds-conversation-list-item.js +1 -1
  39. package/dist/components/ds-conversation-list-section.js +1 -1
  40. package/dist/components/ds-conversation-list.js +1 -1
  41. package/dist/components/ds-divider.js +1 -1
  42. package/dist/components/ds-empty-state.js +1 -1
  43. package/dist/components/ds-field.js +1 -1
  44. package/dist/components/ds-input.js +1 -1
  45. package/dist/components/ds-markdown.js +1 -1
  46. package/dist/components/ds-menu.js +1 -1
  47. package/dist/components/ds-message-actions.js +1 -1
  48. package/dist/components/ds-message-actions.js.map +1 -1
  49. package/dist/components/ds-message-bubble.js +1 -1
  50. package/dist/components/ds-message-composer.js +1 -1
  51. package/dist/components/ds-message-scroller.js +1 -1
  52. package/dist/components/ds-message.js +1 -1
  53. package/dist/components/ds-mobile-bar-nav.js +1 -1
  54. package/dist/components/ds-mobile-header.js +1 -1
  55. package/dist/components/ds-mobile-section-switcher.js +1 -1
  56. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  57. package/dist/components/ds-modal.js +1 -1
  58. package/dist/components/ds-modal.js.map +1 -1
  59. package/dist/components/ds-panel-nav.js +1 -1
  60. package/dist/components/ds-panel-sub-nav.js +1 -1
  61. package/dist/components/ds-panel-tool-header.js +1 -1
  62. package/dist/components/ds-panel-tool-search.js +1 -1
  63. package/dist/components/ds-panel-tools.js +1 -1
  64. package/dist/components/ds-radio.js +1 -1
  65. package/dist/components/ds-scroll-overlay.js +1 -1
  66. package/dist/components/ds-scroll-overlay.js.map +1 -1
  67. package/dist/components/ds-select.js +1 -1
  68. package/dist/components/ds-shell-app.js +1 -1
  69. package/dist/components/ds-shell-app.js.map +1 -1
  70. package/dist/components/ds-shell-page.js +1 -1
  71. package/dist/components/ds-shell-tools.js +1 -1
  72. package/dist/components/ds-skeleton.js +1 -1
  73. package/dist/components/ds-slider.js +1 -1
  74. package/dist/components/ds-swatch-picker.js +1 -1
  75. package/dist/components/ds-switch.js +1 -1
  76. package/dist/components/ds-tab-group.js +1 -1
  77. package/dist/components/ds-tag.js +1 -1
  78. package/dist/components/ds-text.js +1 -1
  79. package/dist/components/ds-toast.js +1 -1
  80. package/dist/components/ds-tooltip-data-viz.js +1 -1
  81. package/dist/components/ds-tooltip.js +1 -1
  82. package/dist/components/ds-typing-indicator.js +1 -1
  83. package/dist/components/{p-BN9FZESH.js → p-1S9AW2MA.js} +2 -2
  84. package/dist/components/{p-D4bVE7e4.js → p-6B411hQA.js} +2 -2
  85. package/dist/components/{p-D5PN6zdD.js → p-B-kRByho.js} +2 -2
  86. package/dist/components/{p-CmUGA_q4.js → p-B4_0Ys4w.js} +2 -2
  87. package/dist/components/{p-BApNi_xA.js → p-B6RrZQqw.js} +2 -2
  88. package/dist/components/{p-CQ4vAZ9j.js → p-BBtjABBS.js} +2 -2
  89. package/dist/components/{p-CmMfRM1s.js → p-BFfHIu6y.js} +2 -2
  90. package/dist/components/{p-CBiAsFAZ.js → p-BPyymeuR.js} +2 -2
  91. package/dist/components/{p-Bgh0uG51.js → p-BR_oMaas.js} +2 -2
  92. package/dist/components/{p-w2kKeG_h.js → p-Bb4f5SuF.js} +2 -2
  93. package/dist/components/p-Bl6A5AJq.js +2 -0
  94. package/dist/components/{p-CIgag7g2.js.map → p-Bl6A5AJq.js.map} +1 -1
  95. package/dist/components/{p-B5snQKiP.js → p-BmNpPyzf.js} +2 -2
  96. package/dist/components/{p-CWItD0gL.js → p-Bmo4T96l.js} +2 -2
  97. package/dist/components/{p-DHAuidt1.js → p-Bsfpxto1.js} +2 -2
  98. package/dist/components/{p-BxEOlO5k.js → p-CKRJX0Y0.js} +2 -2
  99. package/dist/components/{p-1moOgMI-.js → p-Ca6s5fLR.js} +2 -2
  100. package/dist/components/{p-RT1mts9U.js → p-CbjFUpOj.js} +2 -2
  101. package/dist/components/{p-CqOswTy8.js → p-CuJ3J6OJ.js} +2 -2
  102. package/dist/components/{p-BQTJ7ePr.js → p-CxgMUvqg.js} +2 -2
  103. package/dist/components/{p-a6cnCKWk.js → p-CzraIk34.js} +2 -2
  104. package/dist/components/p-CzraIk34.js.map +1 -0
  105. package/dist/components/{p-CWKrq35a.js → p-D0bM3cKj.js} +2 -2
  106. package/dist/components/{p-UtfErnpX.js → p-D2cjoj2r.js} +2 -2
  107. package/dist/components/{p-CGwVooB6.js → p-DHF5cLzr.js} +2 -2
  108. package/dist/components/{p-BgjtMMye.js → p-DVuxzrCC.js} +2 -2
  109. package/dist/components/p-DX4c3kZ1.js +2 -0
  110. package/dist/components/p-DX4c3kZ1.js.map +1 -0
  111. package/dist/components/p-DaqFuVKZ.js +2 -0
  112. package/dist/components/p-DaqFuVKZ.js.map +1 -0
  113. package/dist/components/{p-DXGKfXTh.js → p-DfvDNcoq.js} +2 -2
  114. package/dist/components/p-Di81y9Q2.js +2 -0
  115. package/dist/components/{p-C_3mZMFK.js → p-Eep5mxtv.js} +2 -2
  116. package/dist/components/{p-DoNdiEly.js → p-IYy-jODg.js} +2 -2
  117. package/dist/components/{p-DtV263qO.js → p-iCjUWcp7.js} +2 -2
  118. package/dist/components/{p-BgASe-BH.js → p-og48Kh2i.js} +2 -2
  119. package/dist/components/{p-BSocHH2X.js → p-wOOAzVMC.js} +2 -2
  120. package/dist/docs/components.json +436 -1
  121. package/dist/mcp-data/registry/banner.json +333 -0
  122. package/dist/mcp-data/registry/bar-title.json +3 -3
  123. package/dist/mcp-data/registry/message-actions.json +2 -1
  124. package/dist/mcp-data/registry/mobile-bar-nav.json +3 -3
  125. package/dist/mcp-data/registry/modal.json +25 -5
  126. package/dist/mcp-data/registry/panel-tool-header.json +3 -3
  127. package/dist/mcp-data/registry/panel-tools.json +3 -2
  128. package/dist/mcp-data/registry/registry.json +173 -7
  129. package/dist/mcp-data/registry/shell-app.json +6 -2
  130. package/dist/react/components.d.ts +1 -0
  131. package/dist/react/components.js +1 -0
  132. package/dist/react/ds-banner.d.ts +13 -0
  133. package/dist/react/ds-banner.js +15 -0
  134. package/dist/types/components/Banner/Banner.d.ts +50 -0
  135. package/dist/types/components/Modal/Modal.d.ts +4 -0
  136. package/dist/types/components/PanelTools/PanelTools.d.ts +7 -0
  137. package/dist/types/components.d.ts +138 -0
  138. package/package.json +1 -1
  139. package/dist/components/p-4scN0Mgn.js +0 -2
  140. package/dist/components/p-B3PdrMP0.js +0 -2
  141. package/dist/components/p-B3PdrMP0.js.map +0 -1
  142. package/dist/components/p-CIgag7g2.js +0 -2
  143. package/dist/components/p-CUSz0JFa.js +0 -2
  144. package/dist/components/p-CUSz0JFa.js.map +0 -1
  145. package/dist/components/p-a6cnCKWk.js.map +0 -1
  146. /package/dist/components/{p-BN9FZESH.js.map → p-1S9AW2MA.js.map} +0 -0
  147. /package/dist/components/{p-D4bVE7e4.js.map → p-6B411hQA.js.map} +0 -0
  148. /package/dist/components/{p-D5PN6zdD.js.map → p-B-kRByho.js.map} +0 -0
  149. /package/dist/components/{p-CmUGA_q4.js.map → p-B4_0Ys4w.js.map} +0 -0
  150. /package/dist/components/{p-BApNi_xA.js.map → p-B6RrZQqw.js.map} +0 -0
  151. /package/dist/components/{p-CQ4vAZ9j.js.map → p-BBtjABBS.js.map} +0 -0
  152. /package/dist/components/{p-CmMfRM1s.js.map → p-BFfHIu6y.js.map} +0 -0
  153. /package/dist/components/{p-CBiAsFAZ.js.map → p-BPyymeuR.js.map} +0 -0
  154. /package/dist/components/{p-Bgh0uG51.js.map → p-BR_oMaas.js.map} +0 -0
  155. /package/dist/components/{p-w2kKeG_h.js.map → p-Bb4f5SuF.js.map} +0 -0
  156. /package/dist/components/{p-B5snQKiP.js.map → p-BmNpPyzf.js.map} +0 -0
  157. /package/dist/components/{p-CWItD0gL.js.map → p-Bmo4T96l.js.map} +0 -0
  158. /package/dist/components/{p-DHAuidt1.js.map → p-Bsfpxto1.js.map} +0 -0
  159. /package/dist/components/{p-BxEOlO5k.js.map → p-CKRJX0Y0.js.map} +0 -0
  160. /package/dist/components/{p-1moOgMI-.js.map → p-Ca6s5fLR.js.map} +0 -0
  161. /package/dist/components/{p-RT1mts9U.js.map → p-CbjFUpOj.js.map} +0 -0
  162. /package/dist/components/{p-CqOswTy8.js.map → p-CuJ3J6OJ.js.map} +0 -0
  163. /package/dist/components/{p-BQTJ7ePr.js.map → p-CxgMUvqg.js.map} +0 -0
  164. /package/dist/components/{p-CWKrq35a.js.map → p-D0bM3cKj.js.map} +0 -0
  165. /package/dist/components/{p-UtfErnpX.js.map → p-D2cjoj2r.js.map} +0 -0
  166. /package/dist/components/{p-CGwVooB6.js.map → p-DHF5cLzr.js.map} +0 -0
  167. /package/dist/components/{p-BgjtMMye.js.map → p-DVuxzrCC.js.map} +0 -0
  168. /package/dist/components/{p-DXGKfXTh.js.map → p-DfvDNcoq.js.map} +0 -0
  169. /package/dist/components/{p-4scN0Mgn.js.map → p-Di81y9Q2.js.map} +0 -0
  170. /package/dist/components/{p-C_3mZMFK.js.map → p-Eep5mxtv.js.map} +0 -0
  171. /package/dist/components/{p-DoNdiEly.js.map → p-IYy-jODg.js.map} +0 -0
  172. /package/dist/components/{p-DtV263qO.js.map → p-iCjUWcp7.js.map} +0 -0
  173. /package/dist/components/{p-BgASe-BH.js.map → p-og48Kh2i.js.map} +0 -0
  174. /package/dist/components/{p-BSocHH2X.js.map → p-wOOAzVMC.js.map} +0 -0
@@ -0,0 +1,15 @@
1
+ 'use client';
2
+ import { createComponent } from './react-runtime.js';
3
+ import React from 'react';
4
+ import { DsBanner as DsBannerElement, defineCustomElement as defineDsBanner } from "@ds-mo/ui/dist/components/ds-banner.js";
5
+ export const DsBanner = /*@__PURE__*/ createComponent({
6
+ tagName: 'ds-banner',
7
+ elementClass: DsBannerElement,
8
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
9
+ react: React,
10
+ events: {
11
+ onDsClose: 'dsClose',
12
+ onDsAfterClose: 'dsAfterClose'
13
+ },
14
+ defineCustomElement: defineDsBanner
15
+ });
@@ -0,0 +1,50 @@
1
+ import { EventEmitter } from '../../stencil-public-runtime';
2
+ export type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';
3
+ export type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';
4
+ export type BannerAnnouncement = 'none' | 'polite' | 'assertive';
5
+ export type BannerOrientation = 'horizontal' | 'vertical';
6
+ export declare class Banner {
7
+ el: HTMLElement;
8
+ /** Required explanatory copy. */
9
+ description: string;
10
+ /** Optional visual heading rendered before the description. */
11
+ heading: string;
12
+ /** Semantic color family. */
13
+ intent: BannerIntent;
14
+ /** Surface fill weight. */
15
+ contrast: BannerContrast;
16
+ /** Copy and action-lane arrangement, selected by the application. */
17
+ orientation: BannerOrientation;
18
+ /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */
19
+ open: boolean;
20
+ /** Localized accessible label for the close control. */
21
+ dismissLabel: string;
22
+ /** Live-region urgency, independent of visual intent. */
23
+ announcement: BannerAnnouncement;
24
+ /** Emitted when the close control requests dismissal. The application controls open. */
25
+ dsClose: EventEmitter<MouseEvent>;
26
+ /** Emitted once after controlled exit motion and layout collapse complete. */
27
+ dsAfterClose: EventEmitter<void>;
28
+ private rendered;
29
+ private phase;
30
+ private hasActions;
31
+ private loaded;
32
+ private transitionTimer;
33
+ private openFrame;
34
+ private closePending;
35
+ componentWillLoad(): void;
36
+ componentDidLoad(): void;
37
+ disconnectedCallback(): void;
38
+ onOpenChange(isOpen: boolean): void;
39
+ private get closeMotionMs();
40
+ private clearTransitionWork;
41
+ private startOpen;
42
+ private startClose;
43
+ private finishClose;
44
+ private updateActionsPresence;
45
+ private requestClose;
46
+ private get role();
47
+ private get ariaLive();
48
+ render(): any;
49
+ }
50
+ //# sourceMappingURL=Banner.d.ts.map
@@ -9,6 +9,8 @@ export declare class Modal {
9
9
  el: HTMLElement;
10
10
  open: boolean;
11
11
  heading: string;
12
+ /** Optional supporting copy shown below the heading. */
13
+ description: string;
12
14
  closeAriaLabel: string;
13
15
  modalWidth: ModalWidth | string;
14
16
  /** Optional id reference for explanatory content in the default slot. */
@@ -20,6 +22,7 @@ export declare class Modal {
20
22
  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */
21
23
  dsAfterClose: EventEmitter<void>;
22
24
  private titleId;
25
+ private descriptionId;
23
26
  private dialogEl;
24
27
  private previousFocus;
25
28
  private closeTimer;
@@ -34,6 +37,7 @@ export declare class Modal {
34
37
  private handleBackdropPointerDown;
35
38
  private handleKeyDown;
36
39
  private get resolvedWidth();
40
+ private get describedBy();
37
41
  private get closeAnimationMs();
38
42
  private finishClose;
39
43
  render(): any;
@@ -56,6 +56,7 @@ export declare class PanelTools {
56
56
  private presentationMotionSuppressed;
57
57
  private rovingIndex;
58
58
  private fullViewToolIds;
59
+ private railBodyScrollable;
59
60
  private motionEnableGeneration;
60
61
  private presentationMotionGeneration;
61
62
  private transitionGeneration;
@@ -64,6 +65,8 @@ export declare class PanelTools {
64
65
  private ignoreReplacementTerminal;
65
66
  private focusBeforeFullscreen;
66
67
  private fullViewObserver;
68
+ private railBodyEl?;
69
+ private railBodyObserver?;
67
70
  private get railItems();
68
71
  private get orderedRailItems();
69
72
  disconnectedCallback(): void;
@@ -77,6 +80,10 @@ export declare class PanelTools {
77
80
  activeToolChanged(): void;
78
81
  storageKeyChanged(): void;
79
82
  componentDidLoad(): void;
83
+ componentDidRender(): void;
84
+ private connectRailBodyObserver;
85
+ private disconnectRailBodyObserver;
86
+ private updateRailBodyScrollable;
80
87
  itemsChanged(): void;
81
88
  private restoreLastActiveTool;
82
89
  private persistLastActiveTool;
@@ -9,6 +9,7 @@ import { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
9
9
  import { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
10
10
  import { AvatarSize } from "./components/Avatar/Avatar";
11
11
  import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
12
+ import { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
12
13
  import { NavChromeStyle } from "./shell/nav-chrome";
13
14
  import { BarNavTab } from "./components/BarNav/bar-nav-types";
14
15
  import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
@@ -65,6 +66,7 @@ export { AgentActivityItem, AgentResponsePart, AgentSource, AgentToolState, Conv
65
66
  export { IconColor, IconSize as IconSize1 } from "./components/Icon/Icon";
66
67
  export { AvatarSize } from "./components/Avatar/Avatar";
67
68
  export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
69
+ export { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } from "./components/Banner/Banner";
68
70
  export { NavChromeStyle } from "./shell/nav-chrome";
69
71
  export { BarNavTab } from "./components/BarNav/bar-nav-types";
70
72
  export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
@@ -269,6 +271,47 @@ export namespace Components {
269
271
  */
270
272
  "variant": BadgeVariant;
271
273
  }
274
+ interface DsBanner {
275
+ /**
276
+ * Live-region urgency, independent of visual intent.
277
+ * @default 'none'
278
+ */
279
+ "announcement": BannerAnnouncement;
280
+ /**
281
+ * Surface fill weight.
282
+ * @default 'faint'
283
+ */
284
+ "contrast": BannerContrast;
285
+ /**
286
+ * Required explanatory copy.
287
+ */
288
+ "description": string;
289
+ /**
290
+ * Localized accessible label for the close control.
291
+ * @default 'Dismiss banner'
292
+ */
293
+ "dismissLabel": string;
294
+ /**
295
+ * Optional visual heading rendered before the description.
296
+ * @default ''
297
+ */
298
+ "heading": string;
299
+ /**
300
+ * Semantic color family.
301
+ * @default 'neutral'
302
+ */
303
+ "intent": BannerIntent;
304
+ /**
305
+ * Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
306
+ * @default true
307
+ */
308
+ "open": boolean;
309
+ /**
310
+ * Copy and action-lane arrangement, selected by the application.
311
+ * @default 'horizontal'
312
+ */
313
+ "orientation": BannerOrientation;
314
+ }
272
315
  interface DsBarNav {
273
316
  /**
274
317
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
@@ -1584,6 +1627,11 @@ export namespace Components {
1584
1627
  * @default 'Close'
1585
1628
  */
1586
1629
  "closeAriaLabel": string;
1630
+ /**
1631
+ * Optional supporting copy shown below the heading.
1632
+ * @default ''
1633
+ */
1634
+ "description": string;
1587
1635
  "heading": string;
1588
1636
  /**
1589
1637
  * @default 'md'
@@ -2719,6 +2767,10 @@ export namespace Components {
2719
2767
  "label": string;
2720
2768
  }
2721
2769
  }
2770
+ export interface DsBannerCustomEvent<T> extends CustomEvent<T> {
2771
+ detail: T;
2772
+ target: HTMLDsBannerElement;
2773
+ }
2722
2774
  export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
2723
2775
  detail: T;
2724
2776
  target: HTMLDsBarNavElement;
@@ -2922,6 +2974,24 @@ declare global {
2922
2974
  prototype: HTMLDsBadgeElement;
2923
2975
  new (): HTMLDsBadgeElement;
2924
2976
  };
2977
+ interface HTMLDsBannerElementEventMap {
2978
+ "dsClose": MouseEvent;
2979
+ "dsAfterClose": void;
2980
+ }
2981
+ interface HTMLDsBannerElement extends Components.DsBanner, HTMLStencilElement {
2982
+ addEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
2983
+ addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2984
+ addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
2985
+ addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
2986
+ removeEventListener<K extends keyof HTMLDsBannerElementEventMap>(type: K, listener: (this: HTMLDsBannerElement, ev: DsBannerCustomEvent<HTMLDsBannerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
2987
+ removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2988
+ removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
2989
+ removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
2990
+ }
2991
+ var HTMLDsBannerElement: {
2992
+ prototype: HTMLDsBannerElement;
2993
+ new (): HTMLDsBannerElement;
2994
+ };
2925
2995
  interface HTMLDsBarNavElementEventMap {
2926
2996
  "dsTabChange": string;
2927
2997
  }
@@ -3834,6 +3904,7 @@ declare global {
3834
3904
  "ds-attachment-list": HTMLDsAttachmentListElement;
3835
3905
  "ds-avatar": HTMLDsAvatarElement;
3836
3906
  "ds-badge": HTMLDsBadgeElement;
3907
+ "ds-banner": HTMLDsBannerElement;
3837
3908
  "ds-bar-nav": HTMLDsBarNavElement;
3838
3909
  "ds-bar-title": HTMLDsBarTitleElement;
3839
3910
  "ds-bar-workflow": HTMLDsBarWorkflowElement;
@@ -4049,6 +4120,55 @@ declare namespace LocalJSX {
4049
4120
  */
4050
4121
  "variant"?: BadgeVariant;
4051
4122
  }
4123
+ interface DsBanner {
4124
+ /**
4125
+ * Live-region urgency, independent of visual intent.
4126
+ * @default 'none'
4127
+ */
4128
+ "announcement"?: BannerAnnouncement;
4129
+ /**
4130
+ * Surface fill weight.
4131
+ * @default 'faint'
4132
+ */
4133
+ "contrast"?: BannerContrast;
4134
+ /**
4135
+ * Required explanatory copy.
4136
+ */
4137
+ "description": string;
4138
+ /**
4139
+ * Localized accessible label for the close control.
4140
+ * @default 'Dismiss banner'
4141
+ */
4142
+ "dismissLabel"?: string;
4143
+ /**
4144
+ * Optional visual heading rendered before the description.
4145
+ * @default ''
4146
+ */
4147
+ "heading"?: string;
4148
+ /**
4149
+ * Semantic color family.
4150
+ * @default 'neutral'
4151
+ */
4152
+ "intent"?: BannerIntent;
4153
+ /**
4154
+ * Emitted once after controlled exit motion and layout collapse complete.
4155
+ */
4156
+ "onDsAfterClose"?: (event: DsBannerCustomEvent<void>) => void;
4157
+ /**
4158
+ * Emitted when the close control requests dismissal. The application controls open.
4159
+ */
4160
+ "onDsClose"?: (event: DsBannerCustomEvent<MouseEvent>) => void;
4161
+ /**
4162
+ * Controlled visibility. Keep the element mounted until dsAfterClose when unmounting.
4163
+ * @default true
4164
+ */
4165
+ "open"?: boolean;
4166
+ /**
4167
+ * Copy and action-lane arrangement, selected by the application.
4168
+ * @default 'horizontal'
4169
+ */
4170
+ "orientation"?: BannerOrientation;
4171
+ }
4052
4172
  interface DsBarNav {
4053
4173
  /**
4054
4174
  * Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`.
@@ -5467,6 +5587,11 @@ declare namespace LocalJSX {
5467
5587
  * @default 'Close'
5468
5588
  */
5469
5589
  "closeAriaLabel"?: string;
5590
+ /**
5591
+ * Optional supporting copy shown below the heading.
5592
+ * @default ''
5593
+ */
5594
+ "description"?: string;
5470
5595
  "heading": string;
5471
5596
  /**
5472
5597
  * @default 'md'
@@ -6766,6 +6891,16 @@ declare namespace LocalJSX {
6766
6891
  "gradientBackground": boolean;
6767
6892
  "label": string | undefined;
6768
6893
  }
6894
+ interface DsBannerAttributes {
6895
+ "description": string;
6896
+ "heading": string;
6897
+ "intent": BannerIntent;
6898
+ "contrast": BannerContrast;
6899
+ "orientation": BannerOrientation;
6900
+ "open": boolean;
6901
+ "dismissLabel": string;
6902
+ "announcement": BannerAnnouncement;
6903
+ }
6769
6904
  interface DsBarNavAttributes {
6770
6905
  "navStyle": NavChromeStyle;
6771
6906
  "value": string;
@@ -7093,6 +7228,7 @@ declare namespace LocalJSX {
7093
7228
  interface DsModalAttributes {
7094
7229
  "open": boolean;
7095
7230
  "heading": string;
7231
+ "description": string;
7096
7232
  "closeAriaLabel": string;
7097
7233
  "modalWidth": ModalWidth | string;
7098
7234
  "ariaDescribedby": string | undefined;
@@ -7358,6 +7494,7 @@ declare namespace LocalJSX {
7358
7494
  "ds-attachment-list": Omit<DsAttachmentList, keyof DsAttachmentListAttributes> & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes]?: DsAttachmentList[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `attr:${K}`]?: DsAttachmentListAttributes[K] } & { [K in keyof DsAttachmentList & keyof DsAttachmentListAttributes as `prop:${K}`]?: DsAttachmentList[K] };
7359
7495
  "ds-avatar": Omit<DsAvatar, keyof DsAvatarAttributes> & { [K in keyof DsAvatar & keyof DsAvatarAttributes]?: DsAvatar[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `attr:${K}`]?: DsAvatarAttributes[K] } & { [K in keyof DsAvatar & keyof DsAvatarAttributes as `prop:${K}`]?: DsAvatar[K] };
7360
7496
  "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
7497
+ "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] } & OneOf<"description", DsBanner["description"], DsBannerAttributes["description"]>;
7361
7498
  "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
7362
7499
  "ds-bar-title": Omit<DsBarTitle, keyof DsBarTitleAttributes> & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes]?: DsBarTitle[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `attr:${K}`]?: DsBarTitleAttributes[K] } & { [K in keyof DsBarTitle & keyof DsBarTitleAttributes as `prop:${K}`]?: DsBarTitle[K] } & OneOf<"heading", DsBarTitle["heading"], DsBarTitleAttributes["heading"]>;
7363
7500
  "ds-bar-workflow": Omit<DsBarWorkflow, keyof DsBarWorkflowAttributes> & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes]?: DsBarWorkflow[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `attr:${K}`]?: DsBarWorkflowAttributes[K] } & { [K in keyof DsBarWorkflow & keyof DsBarWorkflowAttributes as `prop:${K}`]?: DsBarWorkflow[K] } & OneOf<"heading", DsBarWorkflow["heading"], DsBarWorkflowAttributes["heading"]>;
@@ -7430,6 +7567,7 @@ declare module "@stencil/core" {
7430
7567
  "ds-attachment-list": LocalJSX.IntrinsicElements["ds-attachment-list"] & JSXBase.HTMLAttributes<HTMLDsAttachmentListElement>;
7431
7568
  "ds-avatar": LocalJSX.IntrinsicElements["ds-avatar"] & JSXBase.HTMLAttributes<HTMLDsAvatarElement>;
7432
7569
  "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
7570
+ "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
7433
7571
  "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
7434
7572
  "ds-bar-title": LocalJSX.IntrinsicElements["ds-bar-title"] & JSXBase.HTMLAttributes<HTMLDsBarTitleElement>;
7435
7573
  "ds-bar-workflow": LocalJSX.IntrinsicElements["ds-bar-workflow"] & JSXBase.HTMLAttributes<HTMLDsBarWorkflowElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "13.5.0",
3
+ "version": "13.6.1",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
@@ -1,2 +0,0 @@
1
- import{p as e,H as t,h as s,a,t as c}from"./index.js";import{d as i}from"./p-BAfG3M8z.js";import{d}from"./p-w2kKeG_h.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.sc-ds-empty-state-h,.empty-state.sc-ds-empty-state,.empty-state__text.sc-ds-empty-state{box-sizing:border-box}.empty-state.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--dimension-space-100);height:100%;width:100%;text-align:center}.empty-state__icon.sc-ds-empty-state{flex:0 0 auto}.empty-state__text.sc-ds-empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--dimension-space-050);width:100%}`;const o=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.body=""}render(){const e=Boolean(this.heading?.trim());const t=e&&Boolean(this.icon);return s(a,{key:"4b704391ddac87840c5b8b255ce1cc18301b09d5"},s("div",{key:"38c526f14a3d6d82b57bffd1629235d7810eb7c2",class:"empty-state"},t&&s("ds-icon",{key:"287f5ece1ee60e28a16504b7afd4ca30b419996e",class:"empty-state__icon",name:this.icon,size:"xl",color:"primary"}),s("div",{key:"303b970c26e43ef6bc86def5509979d1d32ca3fe",class:"empty-state__text"},e&&s("ds-text",{key:"e247bfacbd3f0c51588c713122fde0a21846ee9b",class:"empty-state__title",as:"div",variant:"text-title-small",color:"primary",align:"center"},this.heading),this.body&&s("ds-text",{key:"eea57e18abba91e439bd0cb9d5a6805fcd410548",class:"empty-state__body",as:"p",variant:"text-body-medium",color:"secondary",align:"center"},this.body))))}static get style(){return n()}},[2,"ds-empty-state",{icon:[1],heading:[1],body:[1]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-empty-state","ds-icon","ds-text"];e.forEach((e=>{switch(e){case"ds-empty-state":if(!customElements.get(c(e))){customElements.define(c(e),o)}break;case"ds-icon":if(!customElements.get(c(e))){i()}break;case"ds-text":if(!customElements.get(c(e))){d()}break}}))}m();export{o as E,m as d};
2
- //# sourceMappingURL=p-4scN0Mgn.js.map
@@ -1,2 +0,0 @@
1
- import{p as e,H as s,c as o,h as a,a as d,t as n}from"./index.js";import{d as l}from"./p-DoNdiEly.js";import{d as i}from"./p-Bgh0uG51.js";import{d as r}from"./p-BAfG3M8z.js";import{d as t}from"./p-Ca-I2UnB.js";import{d as c}from"./p-w2kKeG_h.js";import{d as h}from"./p-UtfErnpX.js";const p=()=>`.ds-control--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tool-header-h,.ds-chrome-space--sm.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-header-h,.ds-chrome-space--md.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-header-h,.ds-chrome-space--lg.sc-ds-panel-tool-header{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-header-h,.ds-chrome-row.sc-ds-panel-tool-header,.ds-chrome-column.sc-ds-panel-tool-header-h,.ds-chrome-column.sc-ds-panel-tool-header,.ds-chrome-grid.sc-ds-panel-tool-header-h,.ds-chrome-grid.sc-ds-panel-tool-header{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-header-h,.ds-chrome-row.sc-ds-panel-tool-header{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-header-h,.ds-chrome-column.sc-ds-panel-tool-header{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-header-h,.ds-chrome-grid.sc-ds-panel-tool-header{display:grid;align-items:center}.sc-ds-panel-tool-header-h{display:block;flex:0 0 auto;box-sizing:border-box}.panel-tool-header.sc-ds-panel-tool-header{height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary);-webkit-user-select:none;user-select:none}.panel-tool-header__leading.sc-ds-panel-tool-header,.panel-tool-header__trailing.sc-ds-panel-tool-header{display:flex;align-items:center;min-width:0}.panel-tool-header__leading.sc-ds-panel-tool-header:empty,.panel-tool-header__trailing.sc-ds-panel-tool-header:empty{display:none}.panel-tool-header__leading.sc-ds-panel-tool-header{flex:0 0 auto}.panel-tool-header__trailing.sc-ds-panel-tool-header{flex:0 0 auto;gap:var(--dimension-space-050);justify-content:flex-end}ds-text.panel-tool-header__heading.sc-ds-panel-tool-header{display:inline-flex;flex:1 1 0;align-items:center;width:auto;min-width:0;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;text-align:left;-webkit-user-select:none;user-select:none}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsBack=o(this,"dsBack");this.dsMenuToggle=o(this,"dsMenuToggle");this.dsAction=o(this,"dsAction");this.heading="";this.showBack=false;this.backIcon="ChevronLeft";this.backAriaLabel="Back";this.showMenu=true;this.menuAriaLabel="More options";this.menuTriggerId="";this.menuExpanded=false;this.actions=[]}async focusMenuTrigger(){const e=this.el.querySelector('ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id="menu"]');await(e?.setFocus?.())}render(){const e=this.actions.length>0;const s=e?this.actions:this.showMenu?[{id:"menu",icon:"Ellipses",ariaLabel:this.menuAriaLabel,triggerId:this.menuTriggerId,controls:this.menuControls,expanded:this.menuExpanded,haspopup:"menu"}]:[];return a(d,{key:"b431a602e3706af8fcec89215fd1004e180a92b5"},a("header",{key:"d4db46e2bc03d189524e0f2f5cfa418b81366f30",class:"panel-tool-header ds-chrome-row ds-chrome-space--md"},a("div",{key:"4b14a4cd7b5138b8f01cf5f1bf844b612f0027af",class:"panel-tool-header__leading"},this.showBack?a("ds-tooltip",{label:this.backAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{class:"panel-tool-header__back",variant:"icon",icon:this.backIcon,size:"md","aria-label":this.backAriaLabel,activeFill:false,hasBorder:false,onDsClick:e=>this.dsBack.emit(e.detail)})):null),a("ds-text",{key:"80ae342a37c7dee25da8918ec1a231ebfbe10c65",class:"panel-tool-header__heading ds-control--md",as:"h2",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.heading),a("div",{key:"6b6103f69efdacc7c4dbe287bd97b741385e5ce6",class:"panel-tool-header__trailing"},s.map((s=>a("ds-tooltip",{key:s.id,label:s.ariaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:s.triggerId||undefined,"data-header-action-id":s.id,class:{"panel-tool-header__action":true,"panel-tool-header__menu":s.id==="menu"},variant:"icon",icon:s.icon,size:"md","aria-label":s.ariaLabel,haspopup:s.haspopup,controls:s.controls,expanded:s.expanded,pressed:s.pressed,isActive:!!s.expanded,isInactive:s.isInactive,activeFill:false,hasBorder:false,onDsClick:o=>{if(!e&&s.id==="menu")this.dsMenuToggle.emit(o.detail);this.dsAction.emit({id:s.id,originalEvent:o.detail})}})))))))}get el(){return this}static get style(){return p()}},[2,"ds-panel-tool-header",{heading:[1],showBack:[4,"show-back"],backIcon:[1,"back-icon"],backAriaLabel:[1,"back-aria-label"],showMenu:[4,"show-menu"],menuAriaLabel:[1,"menu-aria-label"],menuTriggerId:[1,"menu-trigger-id"],menuControls:[1,"menu-controls"],menuExpanded:[4,"menu-expanded"],actions:[16],focusMenuTrigger:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-header":if(!customElements.get(n(e))){customElements.define(n(e),m)}break;case"ds-badge":if(!customElements.get(n(e))){l()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){i()}break;case"ds-icon":if(!customElements.get(n(e))){r()}break;case"ds-loader":if(!customElements.get(n(e))){t()}break;case"ds-text":if(!customElements.get(n(e))){c()}break;case"ds-tooltip":if(!customElements.get(n(e))){h()}break}}))}g();export{m as P,g as d};
2
- //# sourceMappingURL=p-B3PdrMP0.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","haspopup","h","Host","key","class","label","side","size","variant","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isActive","isInactive","dsMenuToggle","dsAction","originalEvent"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n\n:host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n}\n\n.panel-tool-header {\n height: var(--dimension-size-600);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n color: var(--color-foreground-primary);\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tool-header__leading,\n.panel-tool-header__trailing {\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n display: none;\n}\n\n.panel-tool-header__leading {\n flex: 0 0 auto;\n}\n\n.panel-tool-header__trailing {\n flex: 0 0 auto;\n gap: var(--dimension-space-050);\n justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n display: inline-flex;\n flex: 1 1 0;\n align-items: center;\n width: auto;\n min-width: 0;\n height: var(--ds-control-height);\n padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n box-sizing: border-box;\n text-align: left;\n -webkit-user-select: none;\n user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';\n\n@Component({\n tag: 'ds-panel-tool-header',\n styleUrl: 'PanelToolHeader.css',\n scoped: true,\n})\nexport class PanelToolHeader {\n @Element() el!: HTMLElement;\n\n /** Visible heading for the active tool view. */\n @Prop() heading: string = '';\n /** Show the leading Back action. */\n @Prop() showBack: boolean = false;\n /** Canonical icon for the leading navigation or dismiss action. */\n @Prop() backIcon: string = 'ChevronLeft';\n /** Accessible name for the leading navigation or dismiss action. */\n @Prop() backAriaLabel: string = 'Back';\n /** Show the trailing options-menu trigger. */\n @Prop() showMenu: boolean = true;\n /** Accessible name for the options-menu trigger. */\n @Prop() menuAriaLabel: string = 'More options';\n /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n @Prop() menuTriggerId: string = '';\n /** Id of the menu controlled by the trigger. */\n @Prop() menuControls: string | undefined;\n /** Whether the controlled menu is open. */\n @Prop() menuExpanded: boolean = false;\n /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n @Prop() actions: PanelToolsHeaderAction[] = [];\n\n @Event() dsBack!: EventEmitter<MouseEvent>;\n @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n @Event() dsAction!: EventEmitter<{ id: string; originalEvent: MouseEvent }>;\n\n @Method()\n async focusMenuTrigger() {\n const trigger = this.el.querySelector(\n 'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n await trigger?.setFocus?.();\n }\n\n render() {\n const authoredActions = this.actions.length > 0;\n const actions: PanelToolsHeaderAction[] = authoredActions\n ? this.actions\n : this.showMenu\n ? [\n {\n id: 'menu',\n icon: 'Ellipses',\n ariaLabel: this.menuAriaLabel,\n triggerId: this.menuTriggerId,\n controls: this.menuControls,\n expanded: this.menuExpanded,\n haspopup: 'menu',\n },\n ]\n : [];\n\n return (\n <Host>\n <header class=\"panel-tool-header ds-chrome-row ds-chrome-space--md\">\n <div class=\"panel-tool-header__leading\">\n {this.showBack ? (\n <ds-tooltip label={this.backAriaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"panel-tool-header__back\"\n variant=\"icon\"\n icon={this.backIcon}\n size=\"md\"\n aria-label={this.backAriaLabel}\n activeFill={false}\n hasBorder={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n />\n </ds-tooltip>\n ) : null}\n </div>\n <ds-text\n class=\"panel-tool-header__heading ds-control--md\"\n as=\"h2\"\n variant=\"text-body-medium\"\n emphasis\n color=\"primary\"\n lineTruncation={1}\n >\n {this.heading}\n </ds-text>\n <div class=\"panel-tool-header__trailing\">\n {actions.map(action => (\n <ds-tooltip key={action.id} label={action.ariaLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n id={action.triggerId || undefined}\n data-header-action-id={action.id}\n class={{\n 'panel-tool-header__action': true,\n 'panel-tool-header__menu': action.id === 'menu',\n }}\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 if (!authoredActions && action.id === 'menu')\n this.dsMenuToggle.emit(event.detail);\n this.dsAction.emit({ id: action.id, originalEvent: event.detail });\n }}\n />\n </ds-tooltip>\n ))}\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAqB,IAAM,m+H,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,mJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAExBR,KAAAS,QAAoC,EAgG7C,CAzFC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACL,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,SAAU,SAGd,GAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uDACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACR7B,KAAKE,SACJwB,EAAA,cAAYI,MAAO9B,KAAKI,cAAe2B,KAAK,SAASC,KAAK,MACxDN,EAAA,sBACEG,MAAM,0BACNI,QAAQ,OACRd,KAAMnB,KAAKG,SACX6B,KAAK,KAAI,aACGhC,KAAKI,cACjB8B,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCrC,KAAKsC,OAAOC,KAAKF,EAAMG,WAGxE,MAENd,EAAA,WAAAE,IAAA,2CACEC,MAAM,4CACNY,GAAG,KACHR,QAAQ,mBACRS,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf5C,KAAKC,SAERyB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACRpB,EAAQoC,KAAIC,GACXpB,EAAA,cAAYE,IAAKkB,EAAO5B,GAAIY,MAAOgB,EAAO1B,UAAWW,KAAK,SAASC,KAAK,MACtEN,EAAA,sBACER,GAAI4B,EAAOzB,WAAa0B,UAAS,wBACVD,EAAO5B,GAC9BW,MAAO,CACL,4BAA6B,KAC7B,0BAA2BiB,EAAO5B,KAAO,QAE3Ce,QAAQ,OACRd,KAAM2B,EAAO3B,KACba,KAAK,KAAI,aACGc,EAAO1B,UACnBK,SAAUqB,EAAOrB,SACjBH,SAAUwB,EAAOxB,SACjBE,SAAUsB,EAAOtB,SACjBwB,QAASF,EAAOE,QAChBC,WAAYH,EAAOtB,SACnB0B,WAAYJ,EAAOI,WACnBhB,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKrB,GAAmB8B,EAAO5B,KAAO,OACpClB,KAAKmD,aAAaZ,KAAKF,EAAMG,QAC/BxC,KAAKoD,SAASb,KAAK,CAAErB,GAAI4B,EAAO5B,GAAImC,cAAehB,EAAMG,QAAS,S","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- import{p as t,H as i,c as e,h as s,a as r,t as n}from"./index.js";import{d as o}from"./p-DoNdiEly.js";import{d as a}from"./p-CBiAsFAZ.js";import{d as c}from"./p-CmMfRM1s.js";import{d}from"./p-Bgh0uG51.js";import{d as l}from"./p-BAfG3M8z.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-BN9FZESH.js";import{d as u}from"./p-BgjtMMye.js";import{d as f}from"./p-CGwVooB6.js";import{d as m}from"./p-w2kKeG_h.js";import{d as v}from"./p-UtfErnpX.js";function g(t){return"type"in t&&t.type==="divider"}const p=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-bar-title-h,.ds-chrome-space--sm.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-title-h,.ds-chrome-space--md.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-title-h,.ds-chrome-space--lg.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-title-h,.ds-chrome-row.sc-ds-bar-title,.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title,.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-title-h,.ds-chrome-row.sc-ds-bar-title{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title{flex-direction:column}.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--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}}.sc-ds-bar-title-h{--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)}.ds-focus-ring.sc-ds-bar-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::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){.sc-ds-bar-title-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-title:root,.sc-ds-bar-title-h,.ds-forced-colors-scope.sc-ds-bar-title{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after,.bar-title__section-trigger--expanded.sc-ds-bar-title:hover::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let _=0;const k=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsBack=e(this,"dsBack");this.dsBreadcrumbSelect=e(this,"dsBreadcrumbSelect");this.dsSectionChange=e(this,"dsSectionChange");this.dsAction=e(this,"dsAction");this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=_++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=t=>{this.sectionMenuInitialFocusVisible=t.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=t=>{const i=String(t.detail?.value??"");const e=this.selectableSections.find((t=>t.id===i));if(!e||e.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(i);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=t=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=t=>{const i=String(t.detail?.value??"");const e=this.primaryCollapsed&&this.primaryAction?.id===i;const s=this.selectableActions.find((t=>t.id===i));if(!e&&!s)return;if(e&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||s?.isInactive){return}this.closeActionMenu();this.dsAction.emit(i);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=t=>{if(this.breadcrumbs.length===0){this.dsBack.emit(t.detail.originalEvent);return}const i=this.dsBreadcrumbSelect.emit(t.detail);if(i.defaultPrevented)t.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((t=>!g(t)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((t=>t.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((t=>t.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(t,i){const e=[];let s=[];const r=()=>{if(s.length>0)e.push({items:s});s=[]};for(const e of t){if(g(e)){r()}else{s.push(i(e))}}r();return e}get sectionMenuSections(){return this.groupsFromItems(this.sections,(t=>({label:t.label,value:t.id,isSelected:t.id===this.effectiveValue,isInactive:t.isInactive})))}get selectableActions(){return this.actions.filter((t=>!g(t)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(t){const i=t;return{label:t.label,value:t.id,isInactive:t.isInactive||i.isLoading,isDestructive:t.isDestructive||i.intent==="negative"}}get actionMenuSections(){const t=this.groupsFromItems(this.actions,(t=>this.actionMenuItem(t)));if(!this.primaryCollapsed||!this.primaryAction)return t;return[{items:[this.actionMenuItem(this.primaryAction)]},...t]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[s("div",{class:"bar-title__divider","aria-hidden":"true"}),s("div",{class:"bar-title__section-selector"},s("button",{ref:t=>{this.sectionTriggerEl=t??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},s("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),s("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const t=this.primaryAction;if(!t&&!this.showActionMenuTrigger)return null;return s("div",{class:"bar-title__actions"},t&&!this.primaryCollapsed?s("ds-button-filled",{class:"bar-title__primary-action",variant:t.icon?"icon-label":"label",icon:t.icon??"",label:t.label,intent:t.intent??"brand",contrast:t.contrast??"bold",size:"md",type:t.type??"button",isInactive:t.isInactive,isLoading:t.isLoading,onDsClick:()=>this.dsAction.emit(t.id)}):null,this.showActionMenuTrigger?s("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},s("ds-button-unfilled",{ref:t=>{this.actionTriggerEl=t??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:t!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:t=>this.toggleActionMenu(t.detail)})):null)}renderBreadcrumb(){const t=this.expandedBreadcrumbItems;if(t.length===0)return null;return s("ds-breadcrumb",{class:"bar-title__breadcrumb",items:t,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return s("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},s("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:t=>this.dsBack.emit(t.detail)}))}render(){const t=this.compact;return s(r,{key:"b3e31d877fc214a569147328b4c2b6b6f2737aaa",class:{"bar-title-host--compact":t,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!t&&this.expandedBreadcrumbItems.length>0}},s("div",{key:"636587723c16ee822c6ea7f7447af9c328b8e96e",class:{"bar-title":true,"ds-chrome-row":t,"ds-chrome-space--md":t}},s("div",{key:"11be2019fe4f0a7ad00decc54717be727c9685af",class:"bar-title__inner"},!t?this.renderBreadcrumb():null,s("div",{key:"b71007568fb009f0e1d64d8a0a8905376864f69d",class:"bar-title__row"},s("div",{key:"64c88036bb723cee7de0b4d4057b761b9265be88",class:"bar-title__leading"},s("div",{key:"91446412dd910a8906a98ca8fc9ae13a5ac185f8",class:"bar-title__title-row","data-shell-page-header-anchor":true},s("div",{key:"3d40604834817225660c01e1f6c195aba9e596a3",class:"bar-title__identity"},t?this.renderBack():null,s("ds-text",{key:"b1dabcd3cd58f0bf74bfa63f0739b98812ae7e62",class:"bar-title__heading ds-control--md",variant:t?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!t?s("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?s("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?s("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return p()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text","ds-tooltip"];t.forEach((t=>{switch(t){case"ds-bar-title":if(!customElements.get(n(t))){customElements.define(n(t),k)}break;case"ds-badge":if(!customElements.get(n(t))){o()}break;case"ds-breadcrumb":if(!customElements.get(n(t))){a()}break;case"ds-button-filled":if(!customElements.get(n(t))){c()}break;case"ds-button-unfilled":if(!customElements.get(n(t))){d()}break;case"ds-icon":if(!customElements.get(n(t))){l()}break;case"ds-loader":if(!customElements.get(n(t))){h()}break;case"ds-menu":if(!customElements.get(n(t))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(t))){u()}break;case"ds-switch":if(!customElements.get(n(t))){f()}break;case"ds-text":if(!customElements.get(n(t))){m()}break;case"ds-tooltip":if(!customElements.get(n(t))){v()}break}}))}x();export{k as B,x as d};
2
- //# sourceMappingURL=p-CIgag7g2.js.map
@@ -1,2 +0,0 @@
1
- import{p as s,H as e,c as t,h as o,a as n,t as i}from"./index.js";import{p as a}from"./p-B6Vuayt6.js";import{d as l}from"./p-DoNdiEly.js";import{d as r}from"./p-Bgh0uG51.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-B3PdrMP0.js";import{d as p}from"./p-w2kKeG_h.js";import{d as f}from"./p-UtfErnpX.js";const u=["search","agents","messages","stacks","activity","help"];const m={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const g={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const v=[{id:"search",icon:"MagnifyingGlass",label:m.search,railPlacement:"header",order:0,shortcutKey:g.search,mobileDestination:"search"},{id:"agents",icon:"AI",label:m.agents,order:1,shortcutKey:g.agents,mobileDestination:"agents"},{id:"messages",icon:"MessageBubbleStack",label:m.messages,order:2,shortcutKey:g.messages,mobileDestination:"inbox"},{id:"stacks",icon:"ViewMenu",label:m.stacks,order:3,shortcutKey:g.stacks,mobileDestination:"inbox"},{id:"activity",icon:"Bell",label:m.activity,order:4,shortcutKey:g.activity,mobileDestination:"inbox"},{id:"help",icon:"CircleQuestion",label:m.help,railPlacement:"footer",order:5,shortcutKey:g.help,mobileDestination:"help"}];function b(s){const e=new Map;for(const t of s){if(t.id.trim()&&!e.has(t.id))e.set(t.id,t)}const t={header:0,body:1,footer:2};return Array.from(e.values()).sort(((s,e)=>{const o=_(s);const n=_(e);const i=t[o]-t[n];if(i!==0)return i;const a=u.findIndex((e=>e===s.id));const l=u.findIndex((s=>s===e.id));const r=s.order??(a<0?Number.MAX_SAFE_INTEGER:a);const d=e.order??(l<0?Number.MAX_SAFE_INTEGER:l);return r-d}))}function w(s){return typeof s==="string"&&s.trim().length>0}function _(s){if(s.railPlacement)return s.railPlacement;if(s.id==="search")return"header";if(s.id==="help")return"footer";return"body"}function y(s,e,t){if(!t||s.some((s=>s.id===t))){return{open:e,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function x(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const t=s.transitionDuration.split(",").map((s=>a(s.trim(),0)));const o=s.transitionDelay.split(",").map((s=>a(s.trim(),0)));return e.reduce(((s,e,n)=>{if(e!=="all"&&e!=="max-width")return s;const i=t[n%t.length]??0;const a=o[n%o.length]??0;return Math.max(s,i+a,0)}),0)}function k(s,e){return!s&&e==="idle"}function T(s,e,t){if(t==="closing")return s<=.5;if(t==="opening")return e>0&&s>=e-.5;return true}function A(s,e,t){if(s&&e===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const C=()=>`.ds-control--lg.sc-ds-panel-tools,.ds-control--lg.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tools-h,.ds-control--lg.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tools-h,.ds-chrome-space--sm.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tools-h,.ds-chrome-space--md.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tools-h,.ds-chrome-space--lg.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools,.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools,.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:grid;align-items:center}.ds-scrollbar-hidden.sc-ds-panel-tools-h,.ds-scrollbar-hidden.sc-ds-panel-tools{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-tools-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-tools::-webkit-scrollbar{display:none}.sc-ds-panel-tools-h{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.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{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.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h:not(.panel-tools--fullscreen) .panel-tools__drawer-surface.sc-ds-panel-tools,.panel-tools--fullscreen.sc-ds-panel-tools-h:not([presentation='fullscreen']) .panel-tools__drawer-surface.sc-ds-panel-tools{visibility:hidden}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{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);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.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);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.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{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.sc-ds-panel-tools{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions.sc-ds-panel-tools{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer.sc-ds-panel-tools{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const z=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.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");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.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=A(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const t=this.orderedRailItems;if(!t.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(t[e].id);return}if(s.key==="ArrowDown"){if(e>=t.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return b(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}presentationChanged(s,t){if(s===t)return;if(this.el.getAttribute("presentation")!==s){this.el.setAttribute("presentation",s)}const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const t=s?document.activeElement===s||s.contains(document.activeElement):false;if(!t&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==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(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(w(s))this.activeTool=s}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 s=y(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const o=x(getComputedStyle(e));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(s,e){const t=s.getBoundingClientRect().width;const o=s.querySelector(".panel-tools__drawer-surface");const n=o?.getBoundingClientRect().width??0;return T(t,n,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="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(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=this.orderedRailItems.map((s=>s.id));const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const s=this.railItems.find((s=>s.id===this.activeTool));return s?.label??m[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const t=Math.max(0,Math.min(s,e.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(s,e){const t=s.ariaLabel??s.label??m[s.id]??s.id;return o("ds-tooltip",{key:s.id,label:t,shortcutKey:s.shortcutKey??g[s.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,pressScale:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const t=e.title?.trim()||s;const i=e.actions??[];const a=this.orderedRailItems;const l=a.filter((s=>_(s)==="header"));const r=a.filter((s=>_(s)==="body"));const d=a.filter((s=>_(s)==="footer"));const c=l.length;const h=c+r.length;const p=this.isDrawerPresent();const f=k(this.open,this.motion);const u=Boolean(p&&this.activeTool&&this.hasFullView(this.activeTool));const m=a.map((s=>s.id));return o(n,{key:"dd809d0cc10ff00c93624b0e3eaa51b70b9f9c51",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":f,"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:"8e0008db8a33971773df96fffae2b5540a1d607b",class:"panel-tools__layout"},o("nav",{key:"3f455acbb1888e612c02a4b2713f60fe5323b3c4",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},l.length?o("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},l.map(((s,e)=>this.renderRailAction(s,e)))):null,o("div",{key:"c3a30de8b20afb9fa5bf4383d5d8afb489a53894",class:"panel-tools__rail-body ds-chrome-column ds-chrome-space--md ds-scrollbar-hidden"},o("div",{key:"ce9771834280720d2ce451fdc5ee7eab318e73a6",class:"panel-tools__rail-actions"},r.map(((s,e)=>this.renderRailAction(s,c+e))))),d.length?o("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((s,e)=>this.renderRailAction(s,h+e)))):null),o("div",{key:"9e665d65da3989eeb6139882d360473cabb75ae5",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":p},"aria-hidden":p?null:"true",inert:p?undefined:true},o("div",{key:"bd11a5d904198b7c6c037c15b01a3befabe3414e",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=i},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"321166c776ed14d9cb0add9eaefa3c414df19d52",class:"panel-tools__body",hidden:u},m.map((s=>{const e=this.isViewActive(s);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},o("slot",{name:s}))}))),o("div",{key:"12fa4ae95974660986d4d961ea0cfd69f0d1cbe9",class:"panel-tools__full-views",hidden:!u},m.map((s=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},o("slot",{name:`${s}-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 C()}},[262,"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],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 S(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(i(s))){customElements.define(i(s),z)}break;case"ds-badge":if(!customElements.get(i(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){r()}break;case"ds-icon":if(!customElements.get(i(s))){d()}break;case"ds-loader":if(!customElements.get(i(s))){c()}break;case"ds-panel-tool-header":if(!customElements.get(i(s))){h()}break;case"ds-text":if(!customElements.get(i(s))){p()}break;case"ds-tooltip":if(!customElements.get(i(s))){f()}break}}))}S();export{z as P,m as a,A as b,v as c,S as d,b as o,y as r};
2
- //# sourceMappingURL=p-CUSz0JFa.js.map