@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,255 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "message",
+  "title": "Message",
+  "description": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and accessory regions.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/message",
+    "source": "src/wc/components/Message/Message.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Channel-neutral message row owning direction, grouping, author, time, delivery metadata, and accessory regions.",
+      "useWhen": [
+        "A transcript contains messages that need consistent incoming, outgoing, or system layout."
+      ],
+      "avoidWhen": [
+        "Content is not an authored message in a conversation."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-message-bubble",
+        "component:ds-message-scroller"
+      ],
+      "patterns": [
+        "pattern:conversation"
+      ],
+      "accessibility": [
+        "Author and time metadata remain textual when they are necessary to interpret the transcript.",
+        "Delivery failure must be expressed in text rather than color alone."
+      ],
+      "states": [
+        "Pass an ISO timestamp. Message keeps the full value in dateTime and formats the visible value as a localized time; applications must not render a raw ISO string as visible transcript metadata.",
+        "Grouping joins adjacent bubble corners, shows the incoming author only at the start, and shows delivery/time metadata only at the end. Outgoing author remains in the accessible message label without repeating a visible You label.",
+        "Set showAuthor false only when the product makes participant and assistant roles visually self-evident; continue passing author so the accessible message label remains specific."
+      ],
+      "responsiveBehavior": [
+        "Outgoing and incoming rows adapt to available width while preserving their directional alignment."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "author": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "author",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "deliveryState": {
+          "type": "MessageDeliveryState | undefined",
+          "resolvedType": "\"delivered\" | \"failed\" | \"read\" | \"sending\" | \"sent\" | undefined",
+          "attribute": "delivery-state",
+          "required": false,
+          "mutable": false
+        },
+        "direction": {
+          "type": "MessageDirection",
+          "resolvedType": "\"incoming\" | \"outgoing\" | \"system\"",
+          "attribute": "direction",
+          "default": "'incoming'",
+          "required": false,
+          "mutable": false
+        },
+        "groupPosition": {
+          "type": "MessageGroupPosition",
+          "resolvedType": "\"first\" | \"last\" | \"middle\" | \"single\"",
+          "attribute": "group-position",
+          "default": "'single'",
+          "required": false,
+          "mutable": false
+        },
+        "messageId": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "message-id",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "scrollAnchor": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "scroll-anchor",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "showAuthor": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "show-author",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Keep author semantics while allowing products with self-evident roles to hide the visible label."
+        },
+        "streaming": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "streaming",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "timestamp": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "timestamp",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "ISO timestamp."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "author": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "author",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "deliveryState": {
+        "type": "MessageDeliveryState | undefined",
+        "resolvedType": "\"delivered\" | \"failed\" | \"read\" | \"sending\" | \"sent\" | undefined",
+        "attribute": "delivery-state",
+        "required": false,
+        "mutable": false
+      },
+      "direction": {
+        "type": "MessageDirection",
+        "resolvedType": "\"incoming\" | \"outgoing\" | \"system\"",
+        "attribute": "direction",
+        "default": "'incoming'",
+        "required": false,
+        "mutable": false
+      },
+      "groupPosition": {
+        "type": "MessageGroupPosition",
+        "resolvedType": "\"first\" | \"last\" | \"middle\" | \"single\"",
+        "attribute": "group-position",
+        "default": "'single'",
+        "required": false,
+        "mutable": false
+      },
+      "messageId": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "message-id",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "scrollAnchor": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "scroll-anchor",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "showAuthor": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "show-author",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Keep author semantics while allowing products with self-evident roles to hide the visible label."
+      },
+      "streaming": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "streaming",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "timestamp": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "timestamp",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "ISO timestamp."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-message",
+      "react": "DsMessage",
+      "angular": "DsMessage"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-message.js';",
+        "example": "<ds-message></ds-message>"
+      },
+      "react": {
+        "import": "import { DsMessage } from '@ds-mo/ui/react';",
+        "example": "<DsMessage />"
+      },
+      "angular": {
+        "import": "import { DsMessage } from '@ds-mo/ui/angular/ds-message';",
+        "example": "<ds-message></ds-message>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Message/Message.css",
+      "content": ":host {\n  display: block;\n  box-sizing: border-box;\n  content-visibility: auto;\n  contain-intrinsic-size: auto var(--dimension-size-800);\n}\n\n:host(.message-host--group-middle),\n:host(.message-host--group-last) {\n  margin-block-start: calc(-1 * var(--dimension-space-100));\n}\n\n.message {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.message--outgoing {\n  grid-template-columns: minmax(0, 1fr) auto;\n}\n\n.message--outgoing .message__avatar {\n  display: none;\n}\n\n.message__avatar:empty,\n.message__header:empty,\n.message__footer:empty,\n.message__actions:empty {\n  display: none;\n}\n\n.message__avatar:not(:empty) {\n  margin-inline-end: var(--dimension-space-075);\n}\n\n.message__actions:not(:empty) {\n  margin-inline-start: var(--dimension-space-075);\n}\n\n.message__body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-025);\n}\n\n.message--incoming .message__body {\n  width: 100%;\n}\n\n.message--outgoing .message__body {\n  align-items: flex-end;\n}\n\n.message--outgoing .message__header {\n  display: none;\n}\n\n.message--system .message__body {\n  align-items: center;\n}\n\n.message__header,\n.message__footer,\n.message__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.message__content {\n  width: 100%;\n  min-width: 0;\n}\n\n.message--outgoing .message__content {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.message__footer time {\n  display: inline-flex;\n}\n\n.message--group-middle .message__header,\n.message--group-last .message__header {\n  display: none;\n}\n\n.message--group-first .message__footer,\n.message--group-middle .message__footer {\n  display: none;\n}\n\n.message--incoming.message--group-first .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-end-start: var(--dimension-radius-025);\n}\n\n.message--incoming.message--group-middle .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-start-start: var(--dimension-radius-025);\n  --ds-message-bubble-radius-end-start: var(--dimension-radius-025);\n}\n\n.message--incoming.message--group-last .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-start-start: var(--dimension-radius-025);\n}\n\n.message--outgoing.message--group-first .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-end-end: var(--dimension-radius-025);\n}\n\n.message--outgoing.message--group-middle .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-start-end: var(--dimension-radius-025);\n  --ds-message-bubble-radius-end-end: var(--dimension-radius-025);\n}\n\n.message--outgoing.message--group-last .message__content ::slotted(ds-message-bubble) {\n  --ds-message-bubble-radius-start-end: var(--dimension-radius-025);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Message/Message.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\nimport type {\n  MessageDeliveryState,\n  MessageDirection,\n  MessageGroupPosition,\n} from '../conversation-types';\n\nconst DELIVERY_LABELS: Record<MessageDeliveryState, string> = {\n  sending: 'Sending',\n  sent: 'Sent',\n  delivered: 'Delivered',\n  read: 'Read',\n  failed: 'Failed to send',\n};\n\n@Component({\n  tag: 'ds-message',\n  styleUrl: 'Message.css',\n  scoped: true,\n})\nexport class Message {\n  @Prop({ reflect: true }) messageId: string = '';\n  @Prop({ reflect: true }) direction: MessageDirection = 'incoming';\n  @Prop() groupPosition: MessageGroupPosition = 'single';\n  @Prop() author: string = '';\n  /** Keep author semantics while allowing products with self-evident roles to hide the visible label. */\n  @Prop() showAuthor: boolean = true;\n  /** ISO timestamp. */\n  @Prop() timestamp: string = '';\n  @Prop() deliveryState: MessageDeliveryState | undefined;\n  @Prop() streaming: boolean = false;\n  @Prop({ reflect: true }) scrollAnchor: boolean = false;\n\n  private formattedTimestamp(): string {\n    if (!this.timestamp) return '';\n    const parsed = Date.parse(this.timestamp);\n    if (Number.isNaN(parsed)) return this.timestamp;\n    return new Intl.DateTimeFormat(undefined, {\n      hour: 'numeric',\n      minute: '2-digit',\n    }).format(new Date(parsed));\n  }\n\n  render() {\n    const delivery = this.deliveryState ? DELIVERY_LABELS[this.deliveryState] : '';\n    const formattedTimestamp = this.formattedTimestamp();\n    return (\n      <Host\n        class={`message-host--group-${this.groupPosition}`}\n        data-message-id={this.messageId || undefined}\n        data-scroll-anchor={this.scrollAnchor ? 'true' : undefined}\n        aria-busy={this.streaming ? 'true' : undefined}\n      >\n        <article\n          class={{\n            message: true,\n            [`message--${this.direction}`]: true,\n            [`message--group-${this.groupPosition}`]: true,\n          }}\n          aria-label={this.author ? `Message from ${this.author}` : 'Message'}\n        >\n          <div class=\"message__avatar\">\n            <slot name=\"avatar\" />\n          </div>\n          <div class=\"message__body\">\n            <div class=\"message__header\">\n              <slot name=\"header\" />\n              {this.author && this.showAuthor ? (\n                <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"secondary\">\n                  {this.author}\n                </ds-text>\n              ) : null}\n            </div>\n            <div class=\"message__content\">\n              <slot />\n            </div>\n            <div class=\"message__footer\">\n              <slot name=\"footer\" />\n              {delivery ? (\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-caption\"\n                  color={this.deliveryState === 'failed' ? 'negative' : 'secondary'}\n                >\n                  {delivery}\n                </ds-text>\n              ) : null}\n              {formattedTimestamp ? (\n                <time dateTime={this.timestamp}>\n                  <ds-text as=\"span\" variant=\"text-caption\" color=\"secondary\">\n                    {formattedTimestamp}\n                  </ds-text>\n                </time>\n              ) : null}\n            </div>\n          </div>\n          <div class=\"message__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "modal",
+  "title": "Modal",
+  "description": "Dialog overlay with portal rendering, escape-to-close, backdrop click, focus management, and entry/exit animations.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/modal",
+    "source": "src/wc/components/Modal/Modal.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false
+        },
+        "modalWidth": {
+          "type": "ModalWidth | string",
+          "resolvedType": "string",
+          "attribute": "modal-width",
+          "default": "'md'",
+          "required": false,
+          "mutable": false
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": true
+        },
+        "subtitle": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "subtitle",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false
+      },
+      "modalWidth": {
+        "type": "ModalWidth | string",
+        "resolvedType": "string",
+        "attribute": "modal-width",
+        "default": "'md'",
+        "required": false,
+        "mutable": false
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": true
+      },
+      "subtitle": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "subtitle",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-modal",
+      "react": "DsModal",
+      "angular": "DsModal"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-modal.js';",
+        "example": "<ds-modal></ds-modal>"
+      },
+      "react": {
+        "import": "import { DsModal } from '@ds-mo/ui/react';",
+        "example": "<DsModal />"
+      },
+      "angular": {
+        "import": "import { DsModal } from '@ds-mo/ui/angular/ds-modal';",
+        "example": "<ds-modal></ds-modal>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Modal/Modal.css",
+      "content": ".modal-backdrop {\n  background-color: var(--color-background-shade);\n  backdrop-filter: blur(var(--effect-blur-sm));\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n.modal-dialog {\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-300);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-backdrop,\n  .modal-dialog {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-backdrop {\n    opacity: 1;\n  }\n\n  .modal-backdrop--closing,\n  .modal-backdrop--closing .modal-dialog {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n  flex-shrink: 0;\n}\n\n.modal-subtitle {\n  margin-top: var(--dimension-space-100);\n}\n\n.modal-body {\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.modal-footer {\n  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n  flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Modal/Modal.tsx",
+      "content": "import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\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;\nconst activeModalStack: object[] = [];\nconst modalInertState = new WeakMap<HTMLElement, { count: number; wasInert: boolean }>();\n\nfunction makeInert(element: HTMLElement) {\n  const state = modalInertState.get(element);\n  if (state) {\n    state.count += 1;\n    return;\n  }\n  modalInertState.set(element, { count: 1, wasInert: element.inert });\n  element.inert = true;\n}\n\nfunction releaseInert(element: HTMLElement) {\n  const state = modalInertState.get(element);\n  if (!state) return;\n  state.count -= 1;\n  if (state.count > 0) return;\n  element.inert = state.wasInert;\n  modalInertState.delete(element);\n}\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  @Prop() subtitle: string | undefined;\n  @Prop() modalWidth: ModalWidth | string = 'md';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n\n  private instanceId = ++modalIdCounter;\n  private titleId = `ds-modal-title-${modalIdCounter}`;\n  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n  private previousFocus: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private inertedElements: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n    this.deactivateModal();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.activateModal();\n      requestAnimationFrame(() => {\n        this.focusFirst();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\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\n  private focusFirst() {\n    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n    if (!dialog) return;\n    const focusables = this.getFocusables(dialog);\n    (focusables[0] ?? dialog).focus();\n  }\n\n  private getFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n    );\n  }\n\n  private setupListeners() {\n    this.escapeHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && this.isTopModal) { e.preventDefault(); this.close(); }\n    };\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || !this.isTopModal) return;\n      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n      if (!dialog) return;\n      const focusables = this.getFocusables(dialog);\n      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (e.shiftKey) {\n        if (active === first || active === dialog || !dialog.contains(active)) {\n          e.preventDefault(); last.focus();\n        }\n      } else {\n        if (active === last || !dialog.contains(active)) {\n          e.preventDefault(); first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', this.escapeHandler);\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownListeners() {\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    if (!this.open || this.closing || !this.isTopModal) return;\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  private handleBackdropMouseDown(e: MouseEvent) {\n    if (e.target === e.currentTarget && this.isTopModal) this.close();\n  }\n\n  private get isTopModal(): boolean {\n    return activeModalStack[activeModalStack.length - 1] === this;\n  }\n\n  /** Inert every sibling branch outside the modal without assuming it is a body child. */\n  private activateModal() {\n    if (!activeModalStack.includes(this)) activeModalStack.push(this);\n    if (this.inertedElements.length) return;\n\n    let branch: HTMLElement = this.el;\n    let parent = branch.parentElement;\n    while (parent) {\n      for (const sibling of Array.from(parent.children)) {\n        if (sibling === branch || !(sibling instanceof HTMLElement)) continue;\n        makeInert(sibling);\n        this.inertedElements.push(sibling);\n      }\n      if (parent === document.body) break;\n      branch = parent;\n      parent = parent.parentElement;\n    }\n  }\n\n  private deactivateModal() {\n    const stackIndex = activeModalStack.lastIndexOf(this);\n    if (stackIndex >= 0) activeModalStack.splice(stackIndex, 1);\n    for (const element of this.inertedElements) releaseInert(element);\n    this.inertedElements = [];\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 closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n    this.teardownListeners();\n    this.deactivateModal();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n  }\n\n  render() {\n    // Always render slots so scoped-mode slot distribution doesn't leak content.\n    // The backdrop is hidden via CSS when not active.\n    const hidden = !this.shouldRender && !this.closing;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n        >\n          <div\n            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.titleId}\n            aria-describedby={this.subtitle ? this.subtitleId : undefined}\n            tabIndex={-1}\n            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}\n          >\n            <div class=\"modal-header\">\n              <ds-text\n                as=\"h2\"\n                variant=\"text-title-small\"\n                textId={this.titleId}\n              >\n                {this.heading}\n              </ds-text>\n              {this.subtitle && (\n                <ds-text\n                  class=\"modal-subtitle\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  wrap=\"balance\"\n                  textId={this.subtitleId}\n                >\n                  {this.subtitle}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"modal-body\">\n              <slot />\n            </div>\n            <div class=\"modal-footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}