@ds-mo/ui 15.10.2 → 15.11.0

package/dist/mcp-data/registry/toast.json

@@ -353,7 +353,7 @@
   "files": [
     {
       "path": "src/wc/components/Toast/Toast.css",
-      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/radius.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n}\n\n@media (max-width: 767px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) + var(--dimension-stroke-width-012) + var(--dimension-space-100) +\n        var(--dimension-size-500) + max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(calc(-1 * var(--toast-index) * var(--dimension-space-100)));\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(100% - 2 * var(--toast-index) * var(--dimension-space-100));\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-radius-modal);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(var(--toast-swipe-movement-x), var(--toast-swipe-movement-y));\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(var(--dimension-space-200) + var(--dimension-space-025));\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
+      "content": "@import '../../utils/visually-hidden.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/radius.css';\n\n:host {\n  display: contents;\n}\n\n.toast-region {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dimension-z-index-floating);\n  pointer-events: none;\n  outline: none;\n}\n\n.toast-viewport {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  display: grid;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n}\n\n@media (width < 768px) {\n  :host([avoid-mobile-shell-bar]) .toast-viewport {\n    bottom: calc(\n      var(--dimension-space-200) + var(--dimension-space-100) + var(--dimension-size-400) +\n        max(var(--dimension-space-100), env(safe-area-inset-bottom))\n    );\n  }\n}\n\n.toast-positioner {\n  grid-area: 1 / 1;\n  align-self: end;\n  justify-self: center;\n  width: 100%;\n  pointer-events: auto;\n  transform: translateY(calc(-1 * var(--toast-index) * var(--dimension-space-100)));\n  transition:\n    transform var(--effect-motion-short-3),\n    width var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner {\n  width: calc(100% - 2 * var(--toast-index) * var(--dimension-space-100));\n}\n\n.toast-viewport[data-expanded] .toast-positioner {\n  transform: translateY(calc(-1 * var(--toast-offset-y)));\n}\n\n.toast-positioner[data-limited] {\n  visibility: hidden;\n  pointer-events: none;\n}\n\n.toast-positioner--anchored {\n  position: fixed;\n  width: min(var(--dimension-card-width-sm), calc(100vw - 2 * var(--dimension-space-200)));\n  transform: none;\n}\n\n.toast-positioner--anchored[data-positioned='false'] {\n  visibility: hidden;\n}\n\n.toast-surface {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  height: var(--toast-height, auto);\n  padding: var(--dimension-space-200);\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-radius-modal);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  transform: translate(var(--toast-swipe-movement-x), var(--toast-swipe-movement-y));\n  animation: toast-enter var(--effect-motion-short-2) both;\n}\n\n.toast-positioner--ending .toast-surface {\n  animation: toast-exit var(--effect-motion-short-3) both;\n}\n\n.toast-surface--swiping {\n  transition: none;\n  user-select: none;\n}\n\n.toast-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding-inline-end: var(--dimension-size-500);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: var(--typography-lineheight-md);\n  margin-block: calc(-1 * var(--dimension-space-025));\n  gap: var(--dimension-space-050);\n}\n\n.toast-title,\n.toast-description {\n  min-width: 0;\n}\n\n.toast-action {\n  align-self: start;\n  margin-top: calc(var(--dimension-space-200) + var(--dimension-space-025));\n}\n\n.toast-close {\n  position: absolute;\n  top: var(--dimension-space-100);\n  right: var(--dimension-space-100);\n  transition: opacity var(--effect-motion-short-3);\n}\n\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-content,\n.toast-viewport:not([data-expanded]) .toast-positioner[data-behind] .toast-close {\n  opacity: 0;\n}\n\n@keyframes toast-enter {\n  from {\n    opacity: 0;\n    transform: translateY(var(--dimension-space-100));\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes toast-exit {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-positioner,\n  .toast-surface,\n  .toast-content,\n  .toast-close,\n  .toast-positioner--ending .toast-surface {\n    transition: none;\n    animation: none;\n  }\n\n  .toast-positioner--ending .toast-surface {\n    opacity: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  .toast-surface {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/react/ds-shell-app.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail, type PanelNavUserActionDetail, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
+import { type BreadcrumbSelectDetail, type DsShellAppCustomEvent, type NavChromeStyle, type PanelNavChildSelectDetail, type PanelNavUserActionDetail, type PanelToolsHeaderActionDetail, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId, type ShellResponsiveMode } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
 export type DsShellAppEvents = {
@@ -24,10 +24,7 @@ export type DsShellAppEvents = {
     onDsHeaderBack: EventName<DsShellAppCustomEvent<{
         tool: PanelToolsToolId;
     }>>;
-    onDsHeaderAction: EventName<DsShellAppCustomEvent<{
-        tool: PanelToolsToolId;
-        id: string;
-    }>>;
+    onDsHeaderAction: EventName<DsShellAppCustomEvent<PanelToolsHeaderActionDetail>>;
     onDsRailAccessoryAction: EventName<DsShellAppCustomEvent<PanelToolsRailAccessoryActionDetail>>;
     onDsPresentationChange: EventName<DsShellAppCustomEvent<{
         presentation: 'drawer' | 'fullscreen';

package/dist/react/ds-shell-tools.d.ts

@@ -3,7 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from './react-runtime.js';
-import { type DsShellToolsCustomEvent, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from "@ds-mo/ui";
+import { type DsShellToolsCustomEvent, type PanelToolsHeaderActionDetail, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellTools as DsShellToolsElement } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
 export type DsShellToolsEvents = {
@@ -17,10 +17,7 @@ export type DsShellToolsEvents = {
     onDsHeaderBack: EventName<DsShellToolsCustomEvent<{
         tool: PanelToolsToolId;
     }>>;
-    onDsHeaderAction: EventName<DsShellToolsCustomEvent<{
-        tool: PanelToolsToolId;
-        id: string;
-    }>>;
+    onDsHeaderAction: EventName<DsShellToolsCustomEvent<PanelToolsHeaderActionDetail>>;
     onDsRailAccessoryAction: EventName<DsShellToolsCustomEvent<PanelToolsRailAccessoryActionDetail>>;
 };
 export declare const DsShellTools: StencilReactComponent<DsShellToolsElement, DsShellToolsEvents, Components.DsShellTools>;

package/dist/styles/responsive.css

@@ -0,0 +1,293 @@
+/*
+ * Import after @ds-mo/tokens at the application root.
+ * Every dimensional category uses the same mobile multiplier.
+ * Capture independent length tokens on html before replacing their inherited
+ * values on body. A self-reference on the same element would create a cycle.
+ * Percentages, transform scales, z-index, and the activation breakpoint retain
+ * their structural meaning; only spatial lengths are scaled.
+ */
+@media (width < 768px) {
+  :root {
+    --ds-responsive-scale: 1.25;
+    --dimension-size-base: calc(var(--dimension-base) * var(--ds-responsive-scale));
+    --dimension-space-base: calc(var(--dimension-base) * var(--ds-responsive-scale));
+    --dimension-radius-base: calc(var(--dimension-base) * var(--ds-responsive-scale));
+    --dimension-stroke-width-base: calc(var(--dimension-base) * var(--ds-responsive-scale));
+
+    --ds-responsive-source-typography-fontsize-xs: var(--typography-fontsize-xs);
+    --ds-responsive-source-typography-fontsize-sm: var(--typography-fontsize-sm);
+    --ds-responsive-source-typography-fontsize-md: var(--typography-fontsize-md);
+    --ds-responsive-source-typography-fontsize-lg: var(--typography-fontsize-lg);
+    --ds-responsive-source-typography-fontsize-xl: var(--typography-fontsize-xl);
+    --ds-responsive-source-typography-fontsize-2xl: var(--typography-fontsize-2xl);
+    --ds-responsive-source-typography-fontsize-3xl: var(--typography-fontsize-3xl);
+    --ds-responsive-source-typography-lineheight-xs: var(--typography-lineheight-xs);
+    --ds-responsive-source-typography-lineheight-sm: var(--typography-lineheight-sm);
+    --ds-responsive-source-typography-lineheight-md: var(--typography-lineheight-md);
+    --ds-responsive-source-typography-lineheight-lg: var(--typography-lineheight-lg);
+    --ds-responsive-source-typography-lineheight-xl: var(--typography-lineheight-xl);
+    --ds-responsive-source-typography-lineheight-2xl: var(--typography-lineheight-2xl);
+    --ds-responsive-source-typography-lineheight-3xl: var(--typography-lineheight-3xl);
+    --ds-responsive-source-typography-letterspacing-none: var(--typography-letterspacing-none);
+    --ds-responsive-source-typography-letterspacing-positive: var(
+      --typography-letterspacing-positive
+    );
+    --ds-responsive-source-typography-letterspacing-negative-half: var(
+      --typography-letterspacing-negative-half
+    );
+    --ds-responsive-source-typography-letterspacing-negative: var(
+      --typography-letterspacing-negative
+    );
+    --ds-responsive-source-typography-letterspacing-negative-double: var(
+      --typography-letterspacing-negative-double
+    );
+    --ds-responsive-source-typography-paragraphspacing-none: var(
+      --typography-paragraphspacing-none
+    );
+    --ds-responsive-source-typography-paragraphspacing-sm: var(--typography-paragraphspacing-sm);
+    --ds-responsive-source-typography-paragraphspacing-md: var(--typography-paragraphspacing-md);
+    --ds-responsive-source-typography-paragraphspacing-lg: var(--typography-paragraphspacing-lg);
+    --ds-responsive-source-dimension-card-width-xs: var(--dimension-card-width-xs);
+    --ds-responsive-source-dimension-card-width-sm: var(--dimension-card-width-sm);
+    --ds-responsive-source-dimension-card-width-md: var(--dimension-card-width-md);
+    --ds-responsive-source-dimension-card-width-lg: var(--dimension-card-width-lg);
+    --ds-responsive-source-dimension-modal-width-xs: var(--dimension-modal-width-xs);
+    --ds-responsive-source-dimension-modal-width-sm: var(--dimension-modal-width-sm);
+    --ds-responsive-source-dimension-modal-width-md: var(--dimension-modal-width-md);
+    --ds-responsive-source-dimension-modal-width-lg: var(--dimension-modal-width-lg);
+    --ds-responsive-source-dimension-modal-width-xl: var(--dimension-modal-width-xl);
+    --ds-responsive-source-dimension-modal-width-2xl: var(--dimension-modal-width-2xl);
+    --ds-responsive-source-dimension-form-width-xs: var(--dimension-form-width-xs);
+    --ds-responsive-source-dimension-form-width-sm: var(--dimension-form-width-sm);
+    --ds-responsive-source-dimension-form-width-md: var(--dimension-form-width-md);
+    --ds-responsive-source-dimension-form-width-lg: var(--dimension-form-width-lg);
+    --ds-responsive-source-dimension-form-width-xl: var(--dimension-form-width-xl);
+    --ds-responsive-source-dimension-table-column-width-xs: var(--dimension-table-column-width-xs);
+    --ds-responsive-source-dimension-table-column-width-sm: var(--dimension-table-column-width-sm);
+    --ds-responsive-source-dimension-table-column-width-md: var(--dimension-table-column-width-md);
+    --ds-responsive-source-dimension-table-column-width-lg: var(--dimension-table-column-width-lg);
+    --ds-responsive-source-dimension-table-column-width-xl: var(--dimension-table-column-width-xl);
+    --ds-responsive-source-dimension-menu-width-xs: var(--dimension-menu-width-xs);
+    --ds-responsive-source-dimension-menu-width-sm: var(--dimension-menu-width-sm);
+    --ds-responsive-source-dimension-menu-width-md: var(--dimension-menu-width-md);
+    --ds-responsive-source-dimension-menu-width-lg: var(--dimension-menu-width-lg);
+    --ds-responsive-source-dimension-tooltip-width-sm: var(--dimension-tooltip-width-sm);
+    --ds-responsive-source-dimension-tooltip-width-md: var(--dimension-tooltip-width-md);
+    --ds-responsive-source-dimension-tooltip-width-lg: var(--dimension-tooltip-width-lg);
+    --ds-responsive-source-dimension-panel-width-2xs: var(--dimension-panel-width-2xs);
+    --ds-responsive-source-dimension-panel-width-xs: var(--dimension-panel-width-xs);
+    --ds-responsive-source-dimension-panel-width-sm: var(--dimension-panel-width-sm);
+    --ds-responsive-source-dimension-panel-width-md: var(--dimension-panel-width-md);
+    --ds-responsive-source-dimension-panel-width-lg: var(--dimension-panel-width-lg);
+    --ds-responsive-source-dimension-panel-width-xl: var(--dimension-panel-width-xl);
+    --ds-responsive-source-dimension-panel-width-2xl: var(--dimension-panel-width-2xl);
+    --ds-responsive-source-dimension-card-height-xs: var(--dimension-card-height-xs);
+    --ds-responsive-source-dimension-card-height-sm: var(--dimension-card-height-sm);
+    --ds-responsive-source-dimension-card-height-md: var(--dimension-card-height-md);
+    --ds-responsive-source-dimension-card-height-lg: var(--dimension-card-height-lg);
+    --ds-responsive-source-dimension-modal-height-xs: var(--dimension-modal-height-xs);
+    --ds-responsive-source-dimension-modal-height-sm: var(--dimension-modal-height-sm);
+    --ds-responsive-source-dimension-modal-height-md: var(--dimension-modal-height-md);
+    --ds-responsive-source-dimension-modal-height-lg: var(--dimension-modal-height-lg);
+  }
+
+  body {
+    --typography-fontsize-xs: calc(
+      var(--ds-responsive-source-typography-fontsize-xs) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-sm: calc(
+      var(--ds-responsive-source-typography-fontsize-sm) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-md: calc(
+      var(--ds-responsive-source-typography-fontsize-md) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-lg: calc(
+      var(--ds-responsive-source-typography-fontsize-lg) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-xl: calc(
+      var(--ds-responsive-source-typography-fontsize-xl) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-2xl: calc(
+      var(--ds-responsive-source-typography-fontsize-2xl) * var(--ds-responsive-scale)
+    );
+    --typography-fontsize-3xl: calc(
+      var(--ds-responsive-source-typography-fontsize-3xl) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-xs: calc(
+      var(--ds-responsive-source-typography-lineheight-xs) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-sm: calc(
+      var(--ds-responsive-source-typography-lineheight-sm) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-md: calc(
+      var(--ds-responsive-source-typography-lineheight-md) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-lg: calc(
+      var(--ds-responsive-source-typography-lineheight-lg) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-xl: calc(
+      var(--ds-responsive-source-typography-lineheight-xl) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-2xl: calc(
+      var(--ds-responsive-source-typography-lineheight-2xl) * var(--ds-responsive-scale)
+    );
+    --typography-lineheight-3xl: calc(
+      var(--ds-responsive-source-typography-lineheight-3xl) * var(--ds-responsive-scale)
+    );
+    --typography-letterspacing-none: calc(
+      var(--ds-responsive-source-typography-letterspacing-none) * var(--ds-responsive-scale)
+    );
+    --typography-letterspacing-positive: calc(
+      var(--ds-responsive-source-typography-letterspacing-positive) * var(--ds-responsive-scale)
+    );
+    --typography-letterspacing-negative-half: calc(
+      var(--ds-responsive-source-typography-letterspacing-negative-half) *
+        var(--ds-responsive-scale)
+    );
+    --typography-letterspacing-negative: calc(
+      var(--ds-responsive-source-typography-letterspacing-negative) * var(--ds-responsive-scale)
+    );
+    --typography-letterspacing-negative-double: calc(
+      var(--ds-responsive-source-typography-letterspacing-negative-double) *
+        var(--ds-responsive-scale)
+    );
+    --typography-paragraphspacing-none: calc(
+      var(--ds-responsive-source-typography-paragraphspacing-none) * var(--ds-responsive-scale)
+    );
+    --typography-paragraphspacing-sm: calc(
+      var(--ds-responsive-source-typography-paragraphspacing-sm) * var(--ds-responsive-scale)
+    );
+    --typography-paragraphspacing-md: calc(
+      var(--ds-responsive-source-typography-paragraphspacing-md) * var(--ds-responsive-scale)
+    );
+    --typography-paragraphspacing-lg: calc(
+      var(--ds-responsive-source-typography-paragraphspacing-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-card-width-xs: calc(
+      var(--ds-responsive-source-dimension-card-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-card-width-sm: calc(
+      var(--ds-responsive-source-dimension-card-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-card-width-md: calc(
+      var(--ds-responsive-source-dimension-card-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-card-width-lg: calc(
+      var(--ds-responsive-source-dimension-card-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-xs: calc(
+      var(--ds-responsive-source-dimension-modal-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-sm: calc(
+      var(--ds-responsive-source-dimension-modal-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-md: calc(
+      var(--ds-responsive-source-dimension-modal-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-lg: calc(
+      var(--ds-responsive-source-dimension-modal-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-xl: calc(
+      var(--ds-responsive-source-dimension-modal-width-xl) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-width-2xl: calc(
+      var(--ds-responsive-source-dimension-modal-width-2xl) * var(--ds-responsive-scale)
+    );
+    --dimension-form-width-xs: calc(
+      var(--ds-responsive-source-dimension-form-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-form-width-sm: calc(
+      var(--ds-responsive-source-dimension-form-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-form-width-md: calc(
+      var(--ds-responsive-source-dimension-form-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-form-width-lg: calc(
+      var(--ds-responsive-source-dimension-form-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-form-width-xl: calc(
+      var(--ds-responsive-source-dimension-form-width-xl) * var(--ds-responsive-scale)
+    );
+    --dimension-table-column-width-xs: calc(
+      var(--ds-responsive-source-dimension-table-column-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-table-column-width-sm: calc(
+      var(--ds-responsive-source-dimension-table-column-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-table-column-width-md: calc(
+      var(--ds-responsive-source-dimension-table-column-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-table-column-width-lg: calc(
+      var(--ds-responsive-source-dimension-table-column-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-table-column-width-xl: calc(
+      var(--ds-responsive-source-dimension-table-column-width-xl) * var(--ds-responsive-scale)
+    );
+    --dimension-menu-width-xs: calc(
+      var(--ds-responsive-source-dimension-menu-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-menu-width-sm: calc(
+      var(--ds-responsive-source-dimension-menu-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-menu-width-md: calc(
+      var(--ds-responsive-source-dimension-menu-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-menu-width-lg: calc(
+      var(--ds-responsive-source-dimension-menu-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-tooltip-width-sm: calc(
+      var(--ds-responsive-source-dimension-tooltip-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-tooltip-width-md: calc(
+      var(--ds-responsive-source-dimension-tooltip-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-tooltip-width-lg: calc(
+      var(--ds-responsive-source-dimension-tooltip-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-2xs: calc(
+      var(--ds-responsive-source-dimension-panel-width-2xs) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-xs: calc(
+      var(--ds-responsive-source-dimension-panel-width-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-sm: calc(
+      var(--ds-responsive-source-dimension-panel-width-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-md: calc(
+      var(--ds-responsive-source-dimension-panel-width-md) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-lg: calc(
+      var(--ds-responsive-source-dimension-panel-width-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-xl: calc(
+      var(--ds-responsive-source-dimension-panel-width-xl) * var(--ds-responsive-scale)
+    );
+    --dimension-panel-width-2xl: calc(
+      var(--ds-responsive-source-dimension-panel-width-2xl) * var(--ds-responsive-scale)
+    );
+    --dimension-card-height-xs: calc(
+      var(--ds-responsive-source-dimension-card-height-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-card-height-sm: calc(
+      var(--ds-responsive-source-dimension-card-height-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-card-height-md: calc(
+      var(--ds-responsive-source-dimension-card-height-md) * var(--ds-responsive-scale)
+    );
+    --dimension-card-height-lg: calc(
+      var(--ds-responsive-source-dimension-card-height-lg) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-height-xs: calc(
+      var(--ds-responsive-source-dimension-modal-height-xs) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-height-sm: calc(
+      var(--ds-responsive-source-dimension-modal-height-sm) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-height-md: calc(
+      var(--ds-responsive-source-dimension-modal-height-md) * var(--ds-responsive-scale)
+    );
+    --dimension-modal-height-lg: calc(
+      var(--ds-responsive-source-dimension-modal-height-lg) * var(--ds-responsive-scale)
+    );
+  }
+}

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import type { PanelToolsHeaderActionDetail, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
 import { type MobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
@@ -63,10 +63,7 @@ export declare class ShellApp {
         tool: PanelToolsToolId;
     }>;
     /** Managed tool-header action intent. */
-    dsHeaderAction: EventEmitter<{
-        tool: PanelToolsToolId;
-        id: string;
-    }>;
+    dsHeaderAction: EventEmitter<PanelToolsHeaderActionDetail>;
     /** Managed desktop/tablet rail accessory intent. */
     dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     /** Managed drawer/fullscreen presentation state. */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import { type PanelToolsHeaderActionDetail, type PanelToolsHeaders, type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import { type ShellResponsiveMode } from '../../shell/shell-responsive';
 export declare class ShellTools {
     el: HTMLElement;
@@ -29,10 +29,7 @@ export declare class ShellTools {
     dsHeaderBack: EventEmitter<{
         tool: PanelToolsToolId;
     }>;
-    dsHeaderAction: EventEmitter<{
-        tool: PanelToolsToolId;
-        id: string;
-    }>;
+    dsHeaderAction: EventEmitter<PanelToolsHeaderActionDetail>;
     dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     private panelToolsEl;
     private get resolvedItems();

package/dist/types/components.d.ts

@@ -6786,7 +6786,7 @@ declare global {
         "dsPageAction": string;
         "dsToolChange": { id: PanelToolsToolId; selected: boolean };
         "dsHeaderBack": { tool: PanelToolsToolId };
-        "dsHeaderAction": { tool: PanelToolsToolId; id: string };
+        "dsHeaderAction": PanelToolsHeaderActionDetail;
         "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
         "dsPresentationChange": { presentation: 'drawer' | 'fullscreen' };
         "dsBrowseContextChange": NavChromeStyle;
@@ -6824,10 +6824,7 @@ declare global {
         "dsHeaderBack": {
     tool: PanelToolsToolId;
   };
-        "dsHeaderAction": {
-    tool: PanelToolsToolId;
-    id: string;
-  };
+        "dsHeaderAction": PanelToolsHeaderActionDetail;
         "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
     }
     interface HTMLDsShellToolsElement extends Components.DsShellTools, HTMLStencilElement {
@@ -11361,7 +11358,7 @@ declare namespace LocalJSX {
         /**
           * Managed tool-header action intent.
          */
-        "onDsHeaderAction"?: (event: DsShellAppCustomEvent<{ tool: PanelToolsToolId; id: string }>) => void;
+        "onDsHeaderAction"?: (event: DsShellAppCustomEvent<PanelToolsHeaderActionDetail>) => void;
         /**
           * Managed tool-header Back intent.
          */
@@ -11518,10 +11515,7 @@ declare namespace LocalJSX {
           * @default []
          */
         "items"?: PanelToolsItem[];
-        "onDsHeaderAction"?: (event: DsShellToolsCustomEvent<{
-    tool: PanelToolsToolId;
-    id: string;
-  }>) => void;
+        "onDsHeaderAction"?: (event: DsShellToolsCustomEvent<PanelToolsHeaderActionDetail>) => void;
         "onDsHeaderBack"?: (event: DsShellToolsCustomEvent<{
     tool: PanelToolsToolId;
   }>) => void;

package/dist/types/utils/resolve-css-length-px.d.ts

@@ -2,7 +2,7 @@
 export declare function clearCssLengthPxCache(): void;
 /**
  * Resolve a CSS length to pixels for layout math. Dynamic expressions are read
- * from the current document and optional component scope on every call. Relative
+ * from the body (application token scope) or explicit component scope on every call. Relative
  * font units use that scope; percentage lengths use the viewport's inline size.
  */
 export declare function resolveCssLengthPx(value: number | string | undefined, fallback: number | string, context?: Element): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "15.10.2",
+  "version": "15.11.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -72,6 +72,7 @@
     "./control-elevation.css": "./dist/styles/control-elevation.css",
     "./prose.css": "./dist/styles/prose.css",
     "./table.css": "./dist/styles/table.css",
+    "./responsive.css": "./dist/styles/responsive.css",
     "./agent": "./dist/agent.json",
     "./agent/patterns": "./dist/agent-patterns.json",
     "./dist/components/*": "./dist/components/*",

package/dist/components/p-BfdYb8L4.js

@@ -1,2 +0,0 @@
-import{p as s,H as o,c as d,h as e,a,t as i}from"./index.js";import{C as t}from"./p-DlsjHRU3.js";import{d as r}from"./p-CzTJAO2J.js";import{d as n}from"./p-BrB05_X8.js";import{d as c}from"./p-BVsVUnAw.js";import{d as l}from"./p-0XTyQNRG.js";import{d as m}from"./p-CTAF7SkL.js";import{d as h}from"./p-PNY7auMh.js";import{b as p,T as f}from"./p-CeXf9-X3.js";const u=()=>`.sc-ds-modal-h,.sc-ds-modal:where(.ds-table),.sc-ds-modal:where(.tooltip-popup),.sc-ds-modal:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-modal,.ds-control--lg.sc-ds-modal-h,.ds-control--md.sc-ds-modal-h,.ds-control--md.sc-ds-modal,.ds-control--sm.sc-ds-modal-h,.ds-control--sm.sc-ds-modal,.ds-control--xs.sc-ds-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-modal-h,.ds-control--lg.sc-ds-modal{--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-modal-h,.ds-control--md.sc-ds-modal{--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-modal-h,.ds-control--sm.sc-ds-modal{--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-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-modal{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-modal{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-modal{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-modal,.ds-chrome-header__trailing.sc-ds-modal{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-modal{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-modal{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-modal{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-modal{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-modal,.ds-chrome-header__description.sc-ds-modal{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-modal{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-modal .ds-chrome-header__description.sc-ds-modal{flex:1 1 var(--dimension-card-width-xs)}.ds-chrome-space--sm.sc-ds-modal-h,.ds-chrome-space--sm.sc-ds-modal{--ds-chrome-padding:var(--ds-chrome-space-sm-padding, var(--dimension-space-050));--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-modal-h,.ds-chrome-space--md.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-modal-h,.ds-chrome-space--lg.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal,.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal,.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{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-modal-h,.ds-chrome-row.sc-ds-modal{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal{flex-direction:column}.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-modal:root,.sc-ds-modal-h,.ds-forced-colors-scope.sc-ds-modal{--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-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--ds-radius-modal);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog[open].sc-ds-modal{display:flex}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-2) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{align-items:flex-start;flex:0 0 auto;color:var(--color-foreground-primary)}.modal-copy.sc-ds-modal,ds-text.modal-heading.sc-ds-modal,ds-text.modal-description.sc-ds-modal{width:auto;text-align:left}ds-text.modal-heading.sc-ds-modal{-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{justify-content:flex-start;height:var(--dimension-size-800);flex:0 0 auto;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer__actions.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer__actions.sc-ds-modal slot.sc-ds-modal{display:contents}@media (forced-colors: active){.modal-dialog.sc-ds-modal{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const g={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const b=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let v=0;const y=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsClose=d(this,"dsClose",7);this.dsAfterClose=d(this,"dsAfterClose",7);this.open=false;this.description="";this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++v}`;this.descriptionId=`${this.titleId}-description`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null;this.loaded=false;this.tasks=new t((()=>this.el.isConnected))}connectedCallback(){if(!this.loaded)return;this.updateFooterPresence();this.onOpenChange(this.open)}componentDidLoad(){this.loaded=true;this.updateFooterPresence();if(this.open)this.onOpenChange(true)}componentDidRender(){if(!this.el.isConnected)return;if(!this.closing||!this.dialogEl?.open||this.closeTimer)return;const s=this.closeAnimationMs;if(s<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),s)}disconnectedCallback(){this.tasks.cancel();this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close();this.closing=false;this.previousFocus=null}onOpenChange(s){if(!this.loaded||!this.el.isConnected)return;this.tasks.cancel();if(s){this.clearCloseTimer();const s=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||s)return;this.previousFocus=this.el.ownerDocument.activeElement;this.dialogEl.showModal();this.tasks.frame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true}}focusClose(){const s=this.el.querySelector("ds-button-unfilled.modal-close");void s?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(s,o){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:s,originalEvent:o});this.open=false}updateFooterPresence(s){const o=s?.assignedNodes()??[];this.hasFooter=o.some((s=>s.nodeType!==Node.TEXT_NODE||!!s.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(s){s.preventDefault();this.requestClose("escape",s)}handleBackdropPointerDown(s){if(s.target===this.dialogEl)this.requestClose("backdrop",s)}handleKeyDown(s){if(s.key==="Escape"){s.preventDefault();this.requestClose("escape",s);return}if(s.key!=="Tab"||!this.dialogEl)return;const o=Array.from(this.dialogEl.querySelectorAll(b)).filter((s=>!s.hasAttribute("disabled")&&s.getAttribute("aria-hidden")!=="true"));if(!o.length){s.preventDefault();this.dialogEl.focus();return}const d=o[0];const e=o[o.length-1];const a=document.activeElement;if(s.shiftKey&&(a===d||a===this.dialogEl)){s.preventDefault();e.focus()}else if(!s.shiftKey&&a===e){s.preventDefault();d.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return g[this.modalWidth]}return this.modalWidth}get describedBy(){const s=[this.description?this.descriptionId:"",this.ariaDescribedby??""].filter(Boolean);return s.length>0?s.join(" "):undefined}get closeAnimationMs(){return p(f.motionShort2,f.animationDurationShort3)}finishClose(){if(this.open||!this.el.isConnected||!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return e(a,{key:"d2075fa906020435b5c58d5ac22ccba516d52001"},e("dialog",{key:"596ac03c1b449092e82af87bade3ee5aae421e30",ref:s=>{this.dialogEl=s??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.describedBy,onCancel:s=>this.handleCancel(s),onPointerDown:s=>this.handleBackdropPointerDown(s),onKeyDown:s=>this.handleKeyDown(s),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},e("div",{key:"3e5e0f2720fe843627905df9af74c71c0c620563",class:"modal-header ds-chrome-header ds-chrome-header--bounded"},e("div",{key:"6478eaa4b3f2ffad571a772292e10a29cc339bf2",class:"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md"},e("ds-text",{key:"8e10e180895342c5293ea7e539e5b7615c319512",class:"modal-heading ds-chrome-header__heading",as:"h2",variant:"text-title-small",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),this.description?e("ds-text",{class:"modal-description ds-chrome-header__description",as:"p",variant:"text-body-medium",color:"secondary",wrap:"wrap",textId:this.descriptionId},this.description):null),e("ds-tooltip",{key:"9615e2c0067f29f5ccf94fb7bf0d0483dbae174f",class:"modal-close-tooltip ds-chrome-header__trailing",label:this.closeAriaLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{key:"d317f0ef4c0fb0451191185a9591ca01e8708bfe",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:s=>this.requestClose("close-button",s.detail)}))),e("div",{key:"60c74c8424f3504c27f5401b0690ca942b2f08a4",class:"modal-content"},e("slot",{key:"ad9d251efc6b47f8e12ffb4edeea828c7ca64753"})),e("div",{key:"f1b901c808c9418c9d6aed04cb401cd11108eff2",class:{"modal-footer":true,"ds-chrome-row":true,"ds-chrome-space--lg":true,"modal-footer--empty":!this.hasFooter}},e("div",{key:"2a8fa4ba539d793f55eb72671ae8c8ceee92b397",class:"modal-footer__actions"},e("slot",{key:"ca74e39cd447a33bd4464427ec5a721265de784f",name:"footer",onSlotchange:s=>this.updateFooterPresence(s.currentTarget)})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return u()}},[262,"ds-modal",{open:[1028],heading:[1],description:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const s=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-modal":if(!customElements.get(i(s))){customElements.define(i(s),y)}break;case"ds-badge":if(!customElements.get(i(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){n()}break;case"ds-icon":if(!customElements.get(i(s))){c()}break;case"ds-loader":if(!customElements.get(i(s))){l()}break;case"ds-text":if(!customElements.get(i(s))){m()}break;case"ds-tooltip":if(!customElements.get(i(s))){h()}break}}))}x();export{y as M,x as d};
-//# sourceMappingURL=p-BfdYb8L4.js.map

package/dist/components/p-BfdYb8L4.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","description","closeAriaLabel","modalWidth","closing","hasFooter","titleId","descriptionId","dialogEl","previousFocus","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","connectedCallback","updateFooterPresence","onOpenChange","componentDidLoad","componentDidRender","closeAnimationMs","finishClose","setTimeout","disconnectedCallback","cancel","clearCloseTimer","close","isOpen","alreadyOpen","ownerDocument","activeElement","showModal","frame","focusClose","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","document","shiftKey","resolvedWidth","describedBy","ids","ariaDescribedby","Boolean","undefined","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","wrap","label","side","size","icon","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--ds-radius-modal);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog[open] {\n  display: flex;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modalBackdropOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalDialogIn {\n  from {\n    opacity: 0;\n    transform: scale(0.97) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modalDialogOut {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.97) translateY(4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  align-items: flex-start;\n  flex: 0 0 auto;\n  color: var(--color-foreground-primary);\n}\n\n.modal-copy,\nds-text.modal-heading,\nds-text.modal-description {\n  width: auto;\n  text-align: left;\n}\n\nds-text.modal-heading {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  justify-content: flex-start;\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer__actions slot {\n  display: contents;\n}\n\n@media (forced-colors: active) {\n  .modal-dialog {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n  reason: ModalCloseReason;\n  originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string = '';\n  @Prop() closeAriaLabel: string = 'Close';\n  @Prop() modalWidth: ModalWidth | string = 'md';\n  /** Optional id reference for explanatory content in the default slot. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private hasFooter: boolean = false;\n\n  /** Emitted when an internal dismissal control requests that the modal close. */\n  @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private titleId = `ds-modal-title-${++modalIdCounter}`;\n  private descriptionId = `${this.titleId}-description`;\n  private dialogEl: HTMLDialogElement | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private loaded = false;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n  connectedCallback() {\n    if (!this.loaded) return;\n    this.updateFooterPresence();\n    this.onOpenChange(this.open);\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateFooterPresence();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    if (!this.closing || !this.dialogEl?.open || this.closeTimer) return;\n    const closeAnimationMs = this.closeAnimationMs;\n    if (closeAnimationMs <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.finishClose();\n    }, closeAnimationMs);\n  }\n\n  disconnectedCallback() {\n    this.tasks.cancel();\n    this.clearCloseTimer();\n    if (this.dialogEl?.open) this.dialogEl.close();\n    this.closing = false;\n    this.previousFocus = null;\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded || !this.el.isConnected) return;\n    this.tasks.cancel();\n    if (isOpen) {\n      this.clearCloseTimer();\n      const alreadyOpen = !!this.dialogEl?.open;\n      this.closing = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = this.el.ownerDocument.activeElement as HTMLElement | null;\n      this.dialogEl.showModal();\n      this.tasks.frame(() => {\n        if (this.open && this.dialogEl?.open) this.focusClose();\n      });\n    } else if (this.dialogEl?.open) {\n      this.closing = true;\n    }\n  }\n\n  private focusClose() {\n    const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void close?.setFocus?.();\n  }\n\n  private clearCloseTimer() {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n    if (!this.open || this.closing || !this.dialogEl?.open) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private updateFooterPresence(slot?: HTMLSlotElement) {\n    const assignedNodes = slot?.assignedNodes() ?? [];\n    this.hasFooter =\n      assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n      this.el.querySelector('[slot=\"footer\"]') !== null;\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.requestClose('escape', event);\n      return;\n    }\n    if (event.key !== 'Tab' || !this.dialogEl) return;\n    const focusables = Array.from(\n      this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n    ).filter(\n      element => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n    );\n    if (!focusables.length) {\n      event.preventDefault();\n      this.dialogEl.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey && (active === first || active === this.dialogEl)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get describedBy(): string | undefined {\n    const ids = [this.description ? this.descriptionId : '', this.ariaDescribedby ?? ''].filter(\n      Boolean\n    );\n    return ids.length > 0 ? ids.join(' ') : undefined;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    if (this.open || !this.el.isConnected || !this.dialogEl?.open) return;\n    this.dialogEl.close();\n    this.closing = false;\n    this.clearCloseTimer();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.dsAfterClose.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            this.dialogEl = element ?? null;\n          }}\n          class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.describedBy}\n          onCancel={(event: Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          style={{\n            width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n          }}\n        >\n          <div class=\"modal-header ds-chrome-header ds-chrome-header--bounded\">\n            <div class=\"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md\">\n              <ds-text\n                class=\"modal-heading ds-chrome-header__heading\"\n                as=\"h2\"\n                variant=\"text-title-small\"\n                emphasis\n                color=\"primary\"\n                lineTruncation={1}\n                textId={this.titleId}\n              >\n                {this.heading}\n              </ds-text>\n              {this.description ? (\n                <ds-text\n                  class=\"modal-description ds-chrome-header__description\"\n                  as=\"p\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  wrap=\"wrap\"\n                  textId={this.descriptionId}\n                >\n                  {this.description}\n                </ds-text>\n              ) : null}\n            </div>\n            <ds-tooltip\n              class=\"modal-close-tooltip ds-chrome-header__trailing\"\n              label={this.closeAriaLabel}\n              side=\"bottom\"\n              size=\"sm\"\n            >\n              <ds-button-unfilled\n                class=\"modal-close\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                size=\"md\"\n                aria-label={this.closeAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.requestClose('close-button', event.detail)\n                }\n              />\n            </ds-tooltip>\n          </div>\n          <div class=\"modal-content\">\n            <slot />\n          </div>\n          <div\n            class={{\n              'modal-footer': true,\n              'ds-chrome-row': true,\n              'ds-chrome-space--lg': true,\n              'modal-footer--empty': !this.hasFooter,\n            }}\n          >\n            <div class=\"modal-footer__actions\">\n              <slot\n                name=\"footer\"\n                onSlotchange={(event: Event) =>\n                  this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n                }\n              />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-BuwYiPCW.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,c as t,h as i,a as o,t as l}from"./index.js";import{o as a,a as r,r as n,b as h,d}from"./p-iEhBF5Oi.js";import{i as c,r as m,a as u}from"./p-QU4czL2k.js";import{d as b}from"./p-CzTJAO2J.js";import{d as p}from"./p-BrB05_X8.js";import{d as f}from"./p-D_iZPukF.js";import{d as g}from"./p-BVsVUnAw.js";import{d as v}from"./p-0XTyQNRG.js";import{d as k}from"./p-z_8aZHHo.js";import{d as _}from"./p-BQE2Uj4p.js";import{d as w}from"./p-YmJYwnhW.js";import{d as y}from"./p-lJeAJKa5.js";import{d as E}from"./p-Ch00yccW.js";import{d as j}from"./p-CAARHqjE.js";import{d as C}from"./p-0EpjqRWc.js";import{d as x}from"./p-M9pOLcyK.js";import{d as A}from"./p-CTAF7SkL.js";import{d as L}from"./p-PNY7auMh.js";const T=()=>`:host{display:block;min-width:0;min-height:0;height:100%;background:transparent}:host([responsive-mode='mobile']){width:100%;background:var(--color-background-primary)}.shell-tools__desktop,.shell-tools__desktop ds-panel-tools,.shell-tools__mobile{display:block;min-width:0;min-height:0;height:100%}.shell-tools__slot-proxy{display:block;width:100%;height:100%;min-width:0;min-height:0}.shell-tools__mobile{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header{grid-row:1}.shell-tools__mobile-body,.shell-tools__view{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body{grid-row:2;overflow:hidden}.shell-tools__view{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden]{display:none}.shell-tools__view ::slotted(*){min-height:0}`;const H=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsToolChange=t(this,"dsToolChange",7);this.dsPresentationChange=t(this,"dsPresentationChange",7);this.dsHeaderBack=t(this,"dsHeaderBack",7);this.dsHeaderAction=t(this,"dsHeaderAction",7);this.dsRailAccessoryAction=t(this,"dsRailAccessoryAction",7);this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.accessories=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!this.availableInboxTools.includes(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handlePanelRailAccessoryAction=s=>{s.stopPropagation();this.dsRailAccessoryAction.emit(s.detail)};this.handleMobileHeaderAction=(s,e,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e})}}presentationChanged(s,e){if(s===e)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==s){this.panelToolsEl.setAttribute("presentation",s)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&c(s))).map((s=>s.id))}get mobileViewOrder(){return a(this.resolvedItems).map((s=>s.id))}toolLabel(s){const e=this.resolvedItems.find((e=>e.id===s));return e?.label??e?.ariaLabel??r[s]??s}get mobileActiveTool(){const s=this.resolvedItems.find((s=>s.id===this.activeTool));const e=s?c(s):u(this.activeTool);if(!e)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=n(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=h(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=(this.el.shadowRoot??this.el).querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((s=>[i("div",{key:`tool:${s}`,class:"shell-tools__slot-proxy",slot:s},i("slot",{name:s})),i("div",{key:`tool-view:${s}`,class:"shell-tools__slot-proxy",slot:`${s}-view`},i("slot",{name:`${s}-view`}))]))}renderDesktop(){return i("div",{class:"shell-tools__desktop"},i("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,accessories:this.accessories??[],headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange,onDsRailAccessoryAction:this.handlePanelRailAccessoryAction},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const o=t||this.toolLabel(s);const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));const a=this.resolvedItems.find((e=>e.id===s));const r=Boolean(a&&c(a)&&!e.showBack);const n=r?this.availableInboxTools.map((s=>{const e=this.resolvedItems.find((e=>e.id===s));return{id:s,label:this.toolLabel(s),variant:"label",dot:e?.dot}})):[];return i("ds-mobile-header",{class:"shell-tools__mobile-header",heading:o,headingLevel:"h2",sections:n,value:s,sectionsAriaLabel:this.inboxNavigationLabel,sectionsPresentation:r?"segmented":"switcher",sectionsSize:"lg",onDsSectionChange:this.selectInboxTool},e.showBack?i("ds-tooltip",{slot:"leading",label:e.backAriaLabel||"Back",side:"bottom",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:e.backIcon||"ChevronLeft",size:"md","aria-label":e.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:s})})):null,l.map((e=>i("ds-tooltip",{slot:"trailing",key:e.id,label:e.ariaLabel,side:"bottom",size:"sm"},i("ds-button-unfilled",{id:e.triggerId||undefined,"data-header-action-id":e.id,variant:"icon",icon:e.icon,size:"md","aria-label":e.ariaLabel,haspopup:e.haspopup,controls:e.controls,expanded:e.expanded,surfaceOpen:e.surfaceOpen,pressed:e.pressed,isInactive:e.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(s,e.id,t)})))))}renderMobile(){const s=this.mobileActiveTool;return i("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,i("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((e=>{const t=this.open&&e===s;return i("div",{key:`mobile-tool-view:${e}`,class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},i("slot",{name:`${e}-view`},i("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return i(o,{key:"35dcb1e6d30909cd3df7347ae3ed034b69bc96b9",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return T()}},[257,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],accessories:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function B(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),H)}break;case"ds-badge":if(!customElements.get(l(s))){b()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){p()}break;case"ds-divider":if(!customElements.get(l(s))){f()}break;case"ds-icon":if(!customElements.get(l(s))){g()}break;case"ds-loader":if(!customElements.get(l(s))){v()}break;case"ds-menu":if(!customElements.get(l(s))){k()}break;case"ds-mobile-header":if(!customElements.get(l(s))){_()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(s))){w()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){y()}break;case"ds-panel-tools":if(!customElements.get(l(s))){d()}break;case"ds-swatch-picker":if(!customElements.get(l(s))){E()}break;case"ds-switch":if(!customElements.get(l(s))){j()}break;case"ds-tab-group":if(!customElements.get(l(s))){C()}break;case"ds-tag":if(!customElements.get(l(s))){x()}break;case"ds-text":if(!customElements.get(l(s))){A()}break;case"ds-tooltip":if(!customElements.get(l(s))){L()}break}}))}B();export{H as S,B as d};
-//# sourceMappingURL=p-BuwYiPCW.js.map