@ds-mo/ui 15.10.1 → 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/CodeBlock/CodeBlock.d.ts

@@ -3,8 +3,16 @@ export declare class CodeBlock {
     language: string;
     filename: string;
     private copied;
+    private scrollable;
+    private viewport?;
+    private content?;
+    private resizeObserver?;
     private readonly copyFeedback;
     connectedCallback(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private observeOverflow;
+    private syncOverflow;
     handleCodeChange(): void;
     disconnectedCallback(): void;
     private copy;

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.1",
+  "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-BE9ladwu.js

@@ -1,2 +0,0 @@
-import{p as e,H as o,h as s,a as t,t as a}from"./index.js";import{C as d}from"./p-BnhGV__o.js";import{d as i}from"./p-CzTJAO2J.js";import{d as n}from"./p-BrB05_X8.js";import{d as c}from"./p-BVsVUnAw.js";import{d as r}from"./p-0XTyQNRG.js";import{d as l}from"./p-CTAF7SkL.js";import{d as b}from"./p-PNY7auMh.js";const f=()=>`.sc-ds-code-block-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.code-block.sc-ds-code-block{width:100%;min-width:0;margin:0;overflow:hidden;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);box-sizing:border-box}.code-block__header.sc-ds-code-block{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-100);background:var(--color-background-strong-neutral);box-sizing:border-box}pre.sc-ds-code-block{margin:0;padding:var(--dimension-space-150);overflow:auto;font-family:var(     --typography-font-family-code,     'Fira Code',     ui-monospace,     'SFMono-Regular',     'Cascadia Code',     'Roboto Mono',     Menlo,     Monaco,     Consolas,     'Liberation Mono',     monospace   );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2;-webkit-user-select:text;user-select:text}code.sc-ds-code-block{font:inherit;white-space:pre}`;const p=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.code="";this.language="";this.filename="";this.copied=false;this.copyFeedback=new d((e=>{this.copied=e}));this.copy=async()=>{await this.copyFeedback.copy(this.code)}}connectedCallback(){this.copyFeedback.connect()}handleCodeChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}render(){const e=this.filename||this.language||"Code";return s(t,{key:"bf59b12fad24ccce0f645f96d7e3d165faa7a99e"},s("figure",{key:"a570ec37303143c6141a4d582f5e3d97d57d61b7",class:"code-block"},s("figcaption",{key:"53563363469413b4b8d6a203893b30902041653e",class:"code-block__header"},s("ds-text",{key:"e3e08fad862786ac543f206701693765e9d1402f",as:"span",variant:"text-caption",emphasis:true,color:"on-strong"},e),s("ds-tooltip",{key:"fd6d1a26fb85a706bcb0902dbe60923ad6c4265a",label:this.copied?"Copied":"Copy code",side:"bottom",size:"sm"},s("ds-button-unfilled",{key:"d878626be70801df24eb67899c38fdf52626124c",variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":this.copied?"Copied":"Copy code",hasBorder:false,onDsClick:this.copy}))),s("pre",{key:"46dac40da59cbb9650f1f7e8995d59a2f31c78e2"},s("code",{key:"2429b29d700529adc19cd6332f3de79741784442"},this.code))))}static get watchers(){return{code:[{handleCodeChange:0}]}}static get style(){return f()}},[2,"ds-code-block",{code:[1],language:[1],filename:[1],copied:[32]},undefined,{code:[{handleCodeChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-code-block","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-code-block":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"ds-badge":if(!customElements.get(a(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){n()}break;case"ds-icon":if(!customElements.get(a(e))){c()}break;case"ds-loader":if(!customElements.get(a(e))){r()}break;case"ds-text":if(!customElements.get(a(e))){l()}break;case"ds-tooltip":if(!customElements.get(a(e))){b()}break}}))}m();export{p as C,m as d};
-//# sourceMappingURL=p-BE9ladwu.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["codeBlockCss","CodeBlock","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","code","language","filename","copied","copyFeedback","ClipboardFeedbackController","copy","async","connectedCallback","connect","handleCodeChange","reset","disconnectedCallback","disconnect","render","label","h","Host","key","class","as","variant","emphasis","color","side","size","icon","hasBorder","onDsClick"],"sources":["src/wc/components/CodeBlock/CodeBlock.css?tag=ds-code-block&encapsulation=scoped","src/wc/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(\n    --typography-font-family-code,\n    'Fira Code',\n    ui-monospace,\n    'SFMono-Regular',\n    'Cascadia Code',\n    'Roboto Mono',\n    Menlo,\n    Monaco,\n    Consolas,\n    'Liberation Mono',\n    monospace\n  );\n  font-size: var(--typography-fontsize-sm);\n  font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);\n  font-weight: var(--typography-weight-regular);\n  line-height: var(--typography-lineheight-sm);\n  letter-spacing: var(--typography-letterspacing-none);\n  tab-size: 2;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ClipboardFeedbackController } from '../../utils/clipboard';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private readonly copyFeedback = new ClipboardFeedbackController(copied => {\n    this.copied = copied;\n  });\n\n  connectedCallback() {\n    this.copyFeedback.connect();\n  }\n\n  @Watch('code')\n  handleCodeChange() {\n    this.copyFeedback.reset();\n  }\n\n  disconnectedCallback() {\n    this.copyFeedback.disconnect();\n  }\n\n  private copy = async () => {\n    await this.copyFeedback.copy(this.code);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-tooltip label={this.copied ? 'Copied' : 'Copy code'} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.copied ? 'Check' : 'Copy'}\n                size=\"xs\"\n                aria-label={this.copied ? 'Copied' : 'Copy code'}\n                hasBorder={false}\n                onDsClick={this.copy}\n              />\n            </ds-tooltip>\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uTAAA,MAAMA,EAAe,IAAM,wyC,MCQdC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAe,GACfD,KAAAE,SAAmB,GACnBF,KAAAG,SAAmB,GAEVH,KAAAI,OAAkB,MAClBJ,KAAAK,aAAe,IAAIC,GAA4BF,IAC9DJ,KAAKI,OAASA,CAAM,IAgBdJ,KAAAO,KAAOC,gBACPR,KAAKK,aAAaE,KAAKP,KAAKC,KAAK,CA8B1C,CA5CC,iBAAAQ,GACET,KAAKK,aAAaK,S,CAIpB,gBAAAC,GACEX,KAAKK,aAAaO,O,CAGpB,oBAAAC,GACEb,KAAKK,aAAaS,Y,CAOpB,MAAAC,GACE,MAAMC,EAAQhB,KAAKG,UAAYH,KAAKE,UAAY,OAChD,OACEe,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,cACZH,EAAA,cAAAE,IAAA,2CAAYC,MAAM,sBAChBH,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,eAAeC,SAAQ,KAACC,MAAM,aACtDR,GAEHC,EAAA,cAAAE,IAAA,2CAAYH,MAAOhB,KAAKI,OAAS,SAAW,YAAaqB,KAAK,SAASC,KAAK,MAC1ET,EAAA,sBAAAE,IAAA,2CACEG,QAAQ,OACRK,KAAM3B,KAAKI,OAAS,QAAU,OAC9BsB,KAAK,KAAI,aACG1B,KAAKI,OAAS,SAAW,YACrCwB,UAAW,MACXC,UAAW7B,KAAKO,SAItBU,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,4CAAOnB,KAAKC,Q","ignoreList":[]}

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":[]}