@ds-mo/ui 16.1.3 → 16.3.0

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

@@ -0,0 +1,567 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "drawer",
+  "title": "Drawer",
+  "description": "Edge-attached details panel beside the current page with a generic header, a composable content slot, and a footer for record actions and previous/next paging; non-modal by default with an optional modal presentation and a Back action for multi-depth content.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/drawer",
+    "source": "src/wc/components/Drawer/Drawer.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Edge-attached details panel beside the current page with a generic header, a composable content slot, and a footer for record actions and previous/next paging; non-modal by default with an optional modal presentation and a Back action for multi-depth content.",
+      "useWhen": [
+        "The user inspects the details of an item selected from a list, table, or map while the page stays visible and interactive.",
+        "The user steps through records in order from the details view; enable navigation for previous and next paging.",
+        "Details drill into a related record, such as vehicle to driver; set backLabel and swap content in place.",
+        "A contained task such as a multi-field edit needs more room than a Modal but not a new page; set modal."
+      ],
+      "avoidWhen": [
+        "The user must confirm a single focused decision; Modal is more direct.",
+        "The content is a short contextual control anchored to a trigger.",
+        "The panel is persistent application navigation or a shell tool panel.",
+        "The workflow is long enough to need its own URL, history, or deep links; offer an open-full-page header action instead.",
+        "A second drawer would be stacked over an existing one; only one non-modal drawer is open per document, so swap content in place and use backLabel."
+      ],
+      "alternatives": [
+        {
+          "when": "The user confirms or cancels one focused decision.",
+          "component": "component:ds-modal",
+          "reason": "Modal centers a short blocking decision without moving the user's attention to a page edge."
+        },
+        {
+          "when": "A trigger reveals short interactive content anchored to it.",
+          "component": "component:ds-popover",
+          "reason": "Popover keeps the content beside its trigger and dismisses on outside activation."
+        },
+        {
+          "when": "Supplementary tools such as search, inbox, or agents live beside every page.",
+          "component": "component:ds-shell-tools",
+          "reason": "ShellTools owns the persistent application tool panel and its responsive layout."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-shell-app",
+        "component:ds-button-filled",
+        "component:ds-button-unfilled",
+        "component:ds-tooltip",
+        "component:ds-text",
+        "component:ds-divider"
+      ],
+      "accessibility": [
+        "The heading is the dialog's accessible name. Keep it a generic label for what the panel shows, such as Event details or Vehicle details; record identity belongs in the content.",
+        "Connect explanatory content through aria-describedby when the task needs context beyond the heading.",
+        "Opening moves focus to the leading header action: Back when backLabel is set, otherwise Close. Changing backLabel while focus is in the drawer moves focus to the new leading action.",
+        "A modal drawer makes the page inert, traps Tab, and shows a shade. A non-modal drawer leaves the page interactive, lets Tab leave the panel, and ignores outside clicks.",
+        "Close, Escape, and shade activation emit dsClose with close-button, escape, or backdrop before dismissal. A non-modal drawer handles Escape at the document unless another handler prevented it or a modal dialog is open.",
+        "With navigation enabled, ArrowLeft and ArrowRight page records from anywhere in the document, respecting writing direction, except inside text fields, selects, sliders, menus, listboxes, tablists, comboboxes, and editable content. Set navigationShortcutsBlocked while the page needs those keys.",
+        "Focus return after close follows the presentation. A modal drawer returns focus to its trigger and reports restoreFocus false. A non-modal drawer moves no focus itself; dsAfterClose reports restoreFocus true unless another drawer replaced it, and the owner then focuses the record now shown, such as the current row or map marker, since paging may have moved past the original trigger.",
+        "Header actions and footer navigation are icon buttons with tooltips; give header-actions their own accessible names and keep them to one or two."
+      ],
+      "states": [
+        "The owner controls open, heading, content, and paging availability; the component mutates open to false on dismissal and emits dsAfterClose after exit motion.",
+        "Only one non-modal drawer is open per document. Opening another closes the previous one with reason replaced and restoreFocus false.",
+        "The header holds optional Back, the heading, optional header-actions such as open full page, a divider when actions exist, and Close. Back and Close appear together at depth.",
+        "The default slot is composable content with a 16px inset; bodyInset none removes it for content that owns its edges.",
+        "The footer holds slot footer actions at the start and, with navigation, previous and next at the end. It is hidden when both are empty.",
+        "previousAvailable and nextAvailable make the paging actions inactive at list edges; the owner advances the selection on dsPrevious and dsNext.",
+        "modal is read on open; changing it while open re-presents the same surface in the new mode.",
+        "dsClose, dsAfterClose, dsBack, dsPrevious, and dsNext from slotted components, such as a footer ds-menu, stop at the drawer boundary, so owner listeners on the drawer only receive the drawer's own events; listen on the nested component directly."
+      ],
+      "responsiveBehavior": [
+        "Rendered anywhere inside ShellApp page content, a non-modal drawer covers the page content lane only, below the shell bar and beside the navigation and tool panels, and stays in place while the page scrolls; outside a shell it attaches to the viewport edge.",
+        "Modal drawers always present in the top layer against the viewport edge.",
+        "Width comes from drawerWidth, defaulting to the small panel width, and is clamped to the available lane.",
+        "Below 768px the panel spans the full width of its lane; header and footer stay fixed while content scrolls."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set open, modal, previousAvailable, and nextAvailable as JavaScript properties when controlling the drawer.",
+          "Render a page details drawer in the page's own markup next to the list it describes; assign footer actions with slot=\"footer\" and icon actions with slot=\"header-actions\"."
+        ],
+        "react": [
+          "Pass open, modal, previousAvailable, and nextAvailable to DsDrawer; handle onDsClose, onDsPrevious, onDsNext, onDsBack, and onDsAfterClose.",
+          "Render the drawer inside the routed page component; assign footer and header-actions slots on its children."
+        ],
+        "angular": [
+          "Bind [open], [modal], [previousAvailable], and [nextAvailable]; handle (dsClose), (dsPrevious), (dsNext), (dsBack), and (dsAfterClose) with $event.detail.",
+          "Render the drawer in the routed page template; assign footer and header-actions slots on its children."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook event details, standalone, multi-depth, modal, and flush examples",
+          "path": "src/wc/components/Drawer/Drawer.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns its panel surface, edge elevation, motion, and fixed header and footer chrome so every details drawer shares one rhythm; the content slot is application-owned.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "box-shadow",
+              "color"
+            ],
+            "reason": "The component owns its surface and edge elevation; compose an application-owned surface inside the content slot when needed.",
+            "props": []
+          },
+          {
+            "properties": [
+              "width"
+            ],
+            "reason": "Width comes from panel-width tokens through drawerWidth and is clamped to the lane.",
+            "props": [
+              "drawerWidth"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "ariaDescribedby": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "aria-describedby",
+          "required": false,
+          "mutable": false,
+          "description": "Optional id reference for explanatory content in the body."
+        },
+        "backLabel": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "back-label",
+          "required": false,
+          "mutable": false,
+          "description": "When set, shows a leading Back action for multi-depth content and emits dsBack."
+        },
+        "bodyInset": {
+          "type": "DrawerBodyInset",
+          "resolvedType": "\"default\" | \"none\"",
+          "attribute": "body-inset",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "`none` removes the body inset for content that owns its own edges."
+        },
+        "closeAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "close-aria-label",
+          "default": "'Close'",
+          "required": false,
+          "mutable": false
+        },
+        "drawerWidth": {
+          "type": "DrawerWidth | string",
+          "resolvedType": "string",
+          "attribute": "drawer-width",
+          "default": "'sm'",
+          "required": false,
+          "mutable": false,
+          "description": "Panel width token (`sm`, `md`, `lg`) or a CSS length. Narrow viewports use the full width."
+        },
+        "heading": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "heading",
+          "required": true,
+          "mutable": false,
+          "description": "Generic label for what the drawer shows, such as \"Event details\". Record identity belongs in the body."
+        },
+        "modal": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "modal",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Block the page behind a shade and contain focus. The default non-modal\ndrawer leaves the page interactive beside it."
+        },
+        "navigation": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "navigation",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Shows Previous and Next record actions at the end of the footer."
+        },
+        "navigationAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "navigation-aria-label",
+          "default": "'Record navigation'",
+          "required": false,
+          "mutable": false
+        },
+        "navigationShortcutsBlocked": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "navigation-shortcuts-blocked",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Suspends Left/Right record paging, for example while a menu in the drawer is open."
+        },
+        "nextAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "next-aria-label",
+          "default": "'Next item'",
+          "required": false,
+          "mutable": false
+        },
+        "nextAvailable": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "next-available",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": true
+        },
+        "previousAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "previous-aria-label",
+          "default": "'Previous item'",
+          "required": false,
+          "mutable": false
+        },
+        "previousAvailable": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "previous-available",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "side": {
+          "type": "DrawerSide",
+          "resolvedType": "\"end\" | \"start\"",
+          "attribute": "side",
+          "default": "'end'",
+          "required": false,
+          "mutable": false,
+          "description": "Edge the panel attaches to."
+        }
+      },
+      "events": [
+        {
+          "name": "dsAfterClose",
+          "detail": "DrawerAfterCloseDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after exit motion completes."
+        },
+        {
+          "name": "dsBack",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted when the leading Back action is activated. The owner swaps heading and body."
+        },
+        {
+          "name": "dsClose",
+          "detail": "DrawerCloseDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted when the drawer requests to close; open is already false."
+        },
+        {
+          "name": "dsNext",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted by the Next action or ArrowRight while navigation is shown and available."
+        },
+        {
+          "name": "dsPrevious",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted by the Previous action or ArrowLeft while navigation is shown and available."
+        }
+      ],
+      "methods": [],
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        },
+        {
+          "name": "footer"
+        },
+        {
+          "name": "header-actions"
+        }
+      ]
+    },
+    "props": {
+      "ariaDescribedby": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "aria-describedby",
+        "required": false,
+        "mutable": false,
+        "description": "Optional id reference for explanatory content in the body."
+      },
+      "backLabel": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "back-label",
+        "required": false,
+        "mutable": false,
+        "description": "When set, shows a leading Back action for multi-depth content and emits dsBack."
+      },
+      "bodyInset": {
+        "type": "DrawerBodyInset",
+        "resolvedType": "\"default\" | \"none\"",
+        "attribute": "body-inset",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "`none` removes the body inset for content that owns its own edges."
+      },
+      "closeAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "close-aria-label",
+        "default": "'Close'",
+        "required": false,
+        "mutable": false
+      },
+      "drawerWidth": {
+        "type": "DrawerWidth | string",
+        "resolvedType": "string",
+        "attribute": "drawer-width",
+        "default": "'sm'",
+        "required": false,
+        "mutable": false,
+        "description": "Panel width token (`sm`, `md`, `lg`) or a CSS length. Narrow viewports use the full width."
+      },
+      "heading": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "heading",
+        "required": true,
+        "mutable": false,
+        "description": "Generic label for what the drawer shows, such as \"Event details\". Record identity belongs in the body."
+      },
+      "modal": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "modal",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Block the page behind a shade and contain focus. The default non-modal\ndrawer leaves the page interactive beside it."
+      },
+      "navigation": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "navigation",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Shows Previous and Next record actions at the end of the footer."
+      },
+      "navigationAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "navigation-aria-label",
+        "default": "'Record navigation'",
+        "required": false,
+        "mutable": false
+      },
+      "navigationShortcutsBlocked": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "navigation-shortcuts-blocked",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Suspends Left/Right record paging, for example while a menu in the drawer is open."
+      },
+      "nextAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "next-aria-label",
+        "default": "'Next item'",
+        "required": false,
+        "mutable": false
+      },
+      "nextAvailable": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "next-available",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": true
+      },
+      "previousAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "previous-aria-label",
+        "default": "'Previous item'",
+        "required": false,
+        "mutable": false
+      },
+      "previousAvailable": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "previous-available",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "side": {
+        "type": "DrawerSide",
+        "resolvedType": "\"end\" | \"start\"",
+        "attribute": "side",
+        "default": "'end'",
+        "required": false,
+        "mutable": false,
+        "description": "Edge the panel attaches to."
+      }
+    },
+    "events": [
+      {
+        "name": "dsAfterClose",
+        "detail": "DrawerAfterCloseDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after exit motion completes."
+      },
+      {
+        "name": "dsBack",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted when the leading Back action is activated. The owner swaps heading and body."
+      },
+      {
+        "name": "dsClose",
+        "detail": "DrawerCloseDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted when the drawer requests to close; open is already false."
+      },
+      {
+        "name": "dsNext",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted by the Next action or ArrowRight while navigation is shown and available."
+      },
+      {
+        "name": "dsPrevious",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted by the Previous action or ArrowLeft while navigation is shown and available."
+      }
+    ],
+    "methods": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      },
+      {
+        "name": "footer"
+      },
+      {
+        "name": "header-actions"
+      }
+    ],
+    "exports": {
+      "customElement": "ds-drawer",
+      "react": "DsDrawer",
+      "vue": "DsDrawer",
+      "angular": "DsDrawer"
+    },
+    "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-drawer.js';",
+        "example": "<ds-drawer></ds-drawer>"
+      },
+      "react": {
+        "import": "import { DsDrawer } from '@ds-mo/ui/react';",
+        "example": "<DsDrawer />"
+      },
+      "vue": {
+        "import": "import { DsDrawer } from '@ds-mo/ui/vue';",
+        "example": "<DsDrawer />"
+      },
+      "angular": {
+        "import": "import { DsDrawer } from '@ds-mo/ui/angular/ds-drawer';",
+        "example": "<ds-drawer></ds-drawer>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^9.0.0",
+          "@ds-mo/icons ^8.2.2"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "button-unfilled",
+    "divider",
+    "text",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Drawer/Drawer.css",
+      "content": "@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n/*\n * Edge-attached details panel. Non-modal by default: it sits beside the page,\n * which stays interactive. Inside ShellApp page content, the shell's content\n * frame contains fixed descendants, so the panel covers only the content lane\n * and stays put while the page scrolls; elsewhere it attaches to the viewport.\n * Modal drawers present in the top layer against the viewport edge.\n */\n.drawer-dialog {\n  --_drawer-enter-from: translateX(100%);\n  position: fixed;\n  z-index: var(--dimension-z-index-overlay);\n  inset-block: 0;\n  inset-inline: auto 0;\n  display: none;\n  flex-direction: column;\n  width: min(100%, var(--_drawer-width));\n  min-width: 0;\n  max-width: none;\n  height: auto;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  overflow: visible;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: 0;\n  box-shadow: var(--effect-elevation-elevated-panel-right);\n  outline: none;\n  box-sizing: border-box;\n  pointer-events: auto;\n  animation: drawerIn var(--effect-animation-duration-medium-1)\n    var(--effect-animation-easing-ease-out) forwards;\n}\n\n.drawer-dialog--start {\n  --_drawer-enter-from: translateX(-100%);\n  inset-inline: 0 auto;\n  box-shadow: var(--effect-elevation-elevated-panel-left);\n}\n\n.drawer-dialog[open],\n.drawer-dialog--shown {\n  display: flex;\n}\n\n.drawer-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: drawerBackdropIn var(--effect-animation-duration-medium-1) forwards;\n}\n\n.drawer-dialog--closing {\n  animation: drawerOut var(--effect-animation-duration-medium-1)\n    var(--effect-animation-easing-ease-in) forwards;\n}\n\n.drawer-dialog--closing::backdrop {\n  animation: drawerBackdropOut var(--effect-animation-duration-medium-1) forwards;\n}\n\n@keyframes drawerIn {\n  from {\n    transform: var(--_drawer-enter-from);\n  }\n  to {\n    transform: none;\n  }\n}\n\n@keyframes drawerOut {\n  from {\n    transform: none;\n  }\n  to {\n    transform: var(--_drawer-enter-from);\n  }\n}\n\n@keyframes drawerBackdropIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes drawerBackdropOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Narrow viewports, matching the shell breakpoint, give the panel the full width. */\n@media (width < 768px) {\n  .drawer-dialog {\n    width: 100%;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drawer-dialog,\n  .drawer-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .drawer-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .drawer-dialog--closing,\n  .drawer-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n/*\n * Header: a generic label for what the drawer shows, never record data.\n * Title glyphs sit 16px from the edge; a leading Back action sits 4px before\n * the title's own 8px inset.\n */\n.drawer-header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  block-size: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-block-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\nds-text.drawer-heading {\n  display: block;\n  flex: 1 1 0;\n  min-width: 0;\n  padding-inline: var(--dimension-space-100);\n  text-align: start;\n}\n\n.drawer-back-tooltip,\n.drawer-close-tooltip,\n.drawer-previous-tooltip,\n.drawer-next-tooltip {\n  flex: 0 0 auto;\n}\n\n.drawer-header__trailing {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  padding-inline-start: var(--dimension-space-050);\n}\n\n.drawer-header__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.drawer-header__actions--empty {\n  display: none;\n}\n\n.drawer-header__actions slot,\n.drawer-footer__actions slot {\n  display: contents;\n}\n\n/* The body is a composable slot; the drawer owns only its inset and scrolling. */\n.drawer-body {\n  flex: 1 1 auto;\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.drawer-body--flush {\n  padding: 0;\n}\n\n/* Footer: actions at the start, record navigation at the end. */\n.drawer-footer {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--dimension-space-100);\n  min-block-size: var(--dimension-size-600);\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n  border-block-start: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.drawer-footer--empty {\n  display: none;\n}\n\n.drawer-footer__actions {\n  display: flex;\n  flex: 1 1 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: min-content;\n}\n\n.drawer-footer__actions--empty {\n  display: none;\n}\n\n.drawer-footer__navigation {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  margin-inline-start: auto;\n}\n\n@media (forced-colors: active) {\n  .drawer-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",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Drawer/Drawer.tsx",
+      "content": "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 DrawerSide = 'end' | 'start';\nexport type DrawerWidth = 'sm' | 'md' | 'lg';\nexport type DrawerBodyInset = 'default' | 'none';\nexport type DrawerCloseReason = 'close-button' | 'escape' | 'backdrop' | 'replaced';\n\nexport interface DrawerCloseDetail {\n  reason: DrawerCloseReason;\n  originalEvent?: globalThis.Event;\n}\n\nexport interface DrawerAfterCloseDetail {\n  /**\n   * True when the owner should place focus, typically on the record now shown.\n   * False when another drawer replaced this one, or a modal drawer already\n   * returned focus to its trigger.\n   */\n  restoreFocus: boolean;\n}\n\nconst WIDTH_MAP: Record<DrawerWidth, string> = {\n  sm: 'var(--dimension-panel-width-sm)',\n  md: 'var(--dimension-panel-width-md)',\n  lg: 'var(--dimension-panel-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\n/** Targets that own Left/Right themselves, so record paging must not steal the keys. */\n/**\n * Drawer event names. Slotted components such as ds-menu emit some of the same\n * names; those stop at the drawer boundary so owner listeners on the drawer only\n * hear the drawer itself.\n */\nconst DRAWER_EVENT_NAMES = ['dsClose', 'dsAfterClose', 'dsBack', 'dsPrevious', 'dsNext'];\n\nconst stopDescendantDrawerEvent = (event: globalThis.Event) => event.stopPropagation();\n\nconst DIRECTIONAL_CONTROL_TAGS = new Set([\n  'DS-SELECT',\n  'DS-MENU',\n  'DS-FILTER-MENU',\n  'DS-SLIDER',\n  'INPUT',\n  'SELECT',\n  'TEXTAREA',\n]);\nconst DIRECTIONAL_CONTROL_ROLES = new Set(['slider', 'combobox', 'listbox', 'menu', 'tablist']);\n\nfunction directionalControlInPath(path: readonly EventTarget[]): boolean {\n  return path.some(target => {\n    if (!(target instanceof HTMLElement)) return false;\n    if (DIRECTIONAL_CONTROL_TAGS.has(target.tagName) || target.isContentEditable) return true;\n    const role = target.getAttribute('role');\n    return role !== null && DIRECTIONAL_CONTROL_ROLES.has(role);\n  });\n}\n\n/** One non-modal drawer per document: opening another replaces it. */\nconst activeNonModalDrawers = new WeakMap<Document, Drawer>();\n\nlet drawerIdCounter = 0;\n\n@Component({\n  tag: 'ds-drawer',\n  styleUrl: 'Drawer.css',\n  scoped: true,\n})\nexport class Drawer {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  /** Generic label for what the drawer shows, such as \"Event details\". Record identity belongs in the body. */\n  @Prop() heading!: string;\n  /**\n   * Block the page behind a shade and contain focus. The default non-modal\n   * drawer leaves the page interactive beside it.\n   */\n  @Prop() modal: boolean = false;\n  /** Edge the panel attaches to. */\n  @Prop() side: DrawerSide = 'end';\n  /** Panel width token (`sm`, `md`, `lg`) or a CSS length. Narrow viewports use the full width. */\n  @Prop() drawerWidth: DrawerWidth | string = 'sm';\n  /** `none` removes the body inset for content that owns its own edges. */\n  @Prop() bodyInset: DrawerBodyInset = 'default';\n  /** When set, shows a leading Back action for multi-depth content and emits dsBack. */\n  @Prop() backLabel: string | undefined;\n  @Prop() closeAriaLabel: string = 'Close';\n  /** Shows Previous and Next record actions at the end of the footer. */\n  @Prop() navigation: boolean = false;\n  @Prop() previousAvailable: boolean = false;\n  @Prop() nextAvailable: boolean = false;\n  @Prop() previousAriaLabel: string = 'Previous item';\n  @Prop() nextAriaLabel: string = 'Next item';\n  @Prop() navigationAriaLabel: string = 'Record navigation';\n  /** Suspends Left/Right record paging, for example while a menu in the drawer is open. */\n  @Prop() navigationShortcutsBlocked: boolean = false;\n  /** Optional id reference for explanatory content in the body. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private shown: boolean = false;\n  @State() private hasFooterActions: boolean = false;\n  @State() private hasHeaderActions: boolean = false;\n\n  /** Emitted when the drawer requests to close; open is already false. */\n  @Event() dsClose!: EventEmitter<DrawerCloseDetail>;\n  /** Emitted after exit motion completes. */\n  @Event() dsAfterClose!: EventEmitter<DrawerAfterCloseDetail>;\n  /** Emitted when the leading Back action is activated. The owner swaps heading and body. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  /** Emitted by the Previous action or ArrowLeft while navigation is shown and available. */\n  @Event() dsPrevious!: EventEmitter<void>;\n  /** Emitted by the Next action or ArrowRight while navigation is shown and available. */\n  @Event() dsNext!: EventEmitter<void>;\n\n  private titleId = `ds-drawer-title-${++drawerIdCounter}`;\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 openedAsModal = false;\n  private replaced = false;\n  private documentListening: Document | null = null;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n  private slotObserver?: MutationObserver;\n  private bodyEl: HTMLElement | null = null;\n  private headerActionsEl: HTMLElement | null = null;\n  private footerActionsEl: HTMLElement | null = null;\n\n  connectedCallback() {\n    if (!this.loaded) return;\n    this.updateSlotPresence();\n    this.observeSlottedContent();\n    this.onOpenChange(this.open);\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.placeSlottedContent();\n    this.updateSlotPresence();\n    this.observeSlottedContent();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  componentDidRender() {\n    if (!this.el.isConnected) return;\n    if (!this.closing || !this.isSurfaceOpen || 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.slotObserver?.disconnect();\n    this.slotObserver = undefined;\n    this.tasks.cancel();\n    this.clearCloseTimer();\n    this.releaseActive();\n    this.stopDocumentListeners();\n    this.hideSurface();\n    this.closing = false;\n    this.shown = 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.isSurfaceOpen;\n      this.closing = false;\n      this.replaced = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = this.el.ownerDocument.activeElement as HTMLElement | null;\n      this.present();\n      this.shown = true;\n      this.startDocumentListeners();\n      this.tasks.frame(() => {\n        if (this.open && this.isSurfaceOpen) this.focusLeadingAction();\n      });\n    } else if (this.isSurfaceOpen) {\n      this.releaseActive();\n      this.stopDocumentListeners();\n      this.closing = true;\n    }\n  }\n\n  @Watch('modal')\n  onModalChange() {\n    if (!this.open || !this.isSurfaceOpen || this.openedAsModal === this.modal) return;\n    this.hideSurface();\n    this.present();\n  }\n\n  /** Drilling in or out moves focus to the action that now leads the header. */\n  @Watch('backLabel')\n  onBackLabelChange(next: string | undefined, previous: string | undefined) {\n    if (!this.open || !this.isSurfaceOpen || !next === !previous) return;\n    const active = this.el.ownerDocument.activeElement;\n    const focusInside = !!active && !!this.dialogEl?.contains(active);\n    if (!focusInside && active !== this.el.ownerDocument.body) return;\n    this.tasks.frame(() => {\n      if (this.open && this.isSurfaceOpen) this.focusLeadingAction();\n    });\n  }\n\n  private present() {\n    if (!this.dialogEl) return;\n    this.openedAsModal = this.modal;\n    if (this.modal) {\n      this.releaseActive();\n      this.dialogEl.showModal();\n      return;\n    }\n    this.dialogEl.show();\n    const doc = this.el.ownerDocument;\n    const previous = activeNonModalDrawers.get(doc);\n    activeNonModalDrawers.set(doc, this);\n    if (previous && previous !== this) previous.replace();\n  }\n\n  /** Closes because another non-modal drawer opened; that drawer owns focus. */\n  private replace() {\n    if (!this.open || this.closing) return;\n    this.replaced = true;\n    this.requestClose('replaced');\n  }\n\n  private releaseActive() {\n    const doc = this.el.ownerDocument;\n    if (activeNonModalDrawers.get(doc) === this) activeNonModalDrawers.delete(doc);\n  }\n\n  private get isSurfaceOpen(): boolean {\n    return !!this.dialogEl?.open;\n  }\n\n  private hideSurface() {\n    if (this.dialogEl?.open) this.dialogEl.close();\n  }\n\n  private focusLeadingAction() {\n    const selector = this.backLabel\n      ? 'ds-button-unfilled.drawer-back'\n      : 'ds-button-unfilled.drawer-close';\n    const action = this.el.querySelector(selector) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void action?.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: DrawerCloseReason, originalEvent?: globalThis.Event) {\n    if (!this.open || this.closing || !this.isSurfaceOpen) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private startDocumentListeners() {\n    if (this.documentListening) return;\n    const doc = this.el.ownerDocument;\n    doc.addEventListener('keydown', this.handleDocumentKeyDown);\n    doc.addEventListener('keydown', this.handleDirectionalKeyDown, true);\n    this.documentListening = doc;\n  }\n\n  private stopDocumentListeners() {\n    const doc = this.documentListening;\n    if (!doc) return;\n    doc.removeEventListener('keydown', this.handleDocumentKeyDown);\n    doc.removeEventListener('keydown', this.handleDirectionalKeyDown, true);\n    this.documentListening = null;\n  }\n\n  /** A modal surface other than this drawer owns the keyboard. */\n  private get coveredByOtherModal(): boolean {\n    const modal = this.el.ownerDocument.querySelector('dialog:modal');\n    return !!modal && modal !== this.dialogEl;\n  }\n\n  /** Non-modal Escape works from anywhere in the page, after inner surfaces had their turn. */\n  private readonly handleDocumentKeyDown = (event: KeyboardEvent) => {\n    if (this.openedAsModal || event.key !== 'Escape' || event.defaultPrevented) return;\n    if (!this.open || this.closing || this.coveredByOtherModal) return;\n    event.preventDefault();\n    this.requestClose('escape', event);\n  };\n\n  /** Captures Left/Right ahead of row and grid handlers so paging works from the page too. */\n  private readonly handleDirectionalKeyDown = (event: KeyboardEvent) => {\n    if (\n      !this.open ||\n      this.closing ||\n      !this.navigation ||\n      this.navigationShortcutsBlocked ||\n      event.defaultPrevented ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey ||\n      (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') ||\n      this.coveredByOtherModal ||\n      directionalControlInPath(event.composedPath())\n    ) {\n      return;\n    }\n    const rtl = getComputedStyle(this.el).direction === 'rtl';\n    const towardStart = (event.key === 'ArrowLeft') !== rtl;\n    event.preventDefault();\n    event.stopPropagation();\n    this.page(towardStart ? 'previous' : 'next');\n  };\n\n  private page(direction: 'previous' | 'next') {\n    if (direction === 'previous') {\n      if (this.previousAvailable) this.dsPrevious.emit();\n      return;\n    }\n    if (this.nextAvailable) this.dsNext.emit();\n  }\n\n  private hasAssignedContent(container: HTMLElement | null): boolean {\n    if (!container) return false;\n    return Array.from(container.childNodes).some(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n    );\n  }\n\n  private updateSlotPresence() {\n    this.hasFooterActions = this.hasAssignedContent(this.footerActionsEl);\n    this.hasHeaderActions = this.hasAssignedContent(this.headerActionsEl);\n  }\n\n  private namedSlotContainer(slotName: string | null): HTMLElement | null {\n    if (slotName === 'header-actions') return this.headerActionsEl;\n    if (slotName === 'footer') return this.footerActionsEl;\n    return null;\n  }\n\n  /**\n   * Scoped slots only place direct host children, and only during render.\n   * Frameworks insert conditional content after first render, for example an\n   * Angular @if around footer actions, next to an anchor that Stencil already\n   * moved into the body. Move named-slot elements that arrive on the host or\n   * directly in the body into their slot container. Deeper elements belong to\n   * nested components and are left alone.\n   */\n  private placeSlottedContent() {\n    const candidates = [\n      ...Array.from(this.el.children),\n      ...(this.bodyEl ? Array.from(this.bodyEl.children) : []),\n    ];\n    for (const child of candidates) {\n      const container = this.namedSlotContainer(child.getAttribute('slot'));\n      if (container && child.parentElement !== container) container.appendChild(child);\n    }\n  }\n\n  private observeSlottedContent() {\n    if (this.slotObserver || typeof MutationObserver === 'undefined') return;\n    this.slotObserver = new MutationObserver(records => {\n      const slottedChange = records.some(record =>\n        [...Array.from(record.addedNodes), ...Array.from(record.removedNodes)].some(\n          node => node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).hasAttribute('slot')\n        )\n      );\n      if (!slottedChange) return;\n      this.placeSlottedContent();\n      this.updateSlotPresence();\n    });\n    this.slotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private handleCancel(event: globalThis.Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (this.openedAsModal && event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleDialogKeyDown(event: KeyboardEvent) {\n    if (!this.openedAsModal || 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.drawerWidth === 'sm' || this.drawerWidth === 'md' || this.drawerWidth === 'lg') {\n      return WIDTH_MAP[this.drawerWidth];\n    }\n    return this.drawerWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1\n    );\n  }\n\n  private finishClose() {\n    if (this.open || !this.el.isConnected || !this.isSurfaceOpen) return;\n    let restoreFocus = !this.replaced;\n    if (!this.openedAsModal) {\n      // dialog.close() would jump focus back to the opener; the owner chooses instead.\n      const active = this.el.ownerDocument.activeElement as HTMLElement | null;\n      if (active && this.dialogEl?.contains(active)) active.blur();\n    }\n    this.hideSurface();\n    this.closing = false;\n    this.shown = false;\n    this.clearCloseTimer();\n    // A modal returns focus to its trigger. A non-modal drawer pages through records,\n    // so the owner knows which row or marker now matches and places focus itself.\n    if (restoreFocus && this.openedAsModal && this.previousFocus?.isConnected) {\n      this.previousFocus.focus();\n      restoreFocus = false;\n    }\n    this.previousFocus = null;\n    this.replaced = false;\n    this.dsAfterClose.emit({ restoreFocus });\n  }\n\n  private renderIconAction(\n    className: string,\n    icon: string,\n    label: string,\n    tooltipSide: 'top' | 'bottom',\n    onActivate: (event: CustomEvent<MouseEvent>) => void,\n    inactive = false\n  ) {\n    return (\n      <ds-tooltip class={`${className}-tooltip`} label={label} side={tooltipSide} size=\"sm\">\n        <ds-button-unfilled\n          class={className}\n          variant=\"icon\"\n          icon={icon}\n          size=\"md\"\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          isInactive={inactive}\n          onDsClick={onActivate}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const showFooter = this.hasFooterActions || this.navigation;\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            if (element && element !== this.dialogEl) {\n              for (const name of DRAWER_EVENT_NAMES) {\n                element.addEventListener(name, stopDescendantDrawerEvent);\n              }\n            }\n            this.dialogEl = element ?? null;\n          }}\n          class={{\n            'drawer-dialog': true,\n            [`drawer-dialog--${this.side === 'start' ? 'start' : 'end'}`]: true,\n            'drawer-dialog--shown': this.shown,\n            'drawer-dialog--closing': this.closing,\n          }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.ariaDescribedby}\n          onCancel={(event: globalThis.Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleDialogKeyDown(event)}\n          style={{ '--_drawer-width': this.resolvedWidth }}\n        >\n          <div class=\"drawer-header\">\n            {this.backLabel\n              ? this.renderIconAction(\n                  'drawer-back',\n                  'ChevronLeft',\n                  this.backLabel,\n                  'bottom',\n                  event => this.dsBack.emit(event.detail)\n                )\n              : null}\n            <ds-text\n              class=\"drawer-heading\"\n              as=\"h2\"\n              variant=\"text-body-medium\"\n              color=\"primary\"\n              emphasis\n              lineTruncation={1}\n              textId={this.titleId}\n            >\n              {this.heading}\n            </ds-text>\n            <div class=\"drawer-header__trailing\">\n              <div\n                class={{\n                  'drawer-header__actions': true,\n                  'drawer-header__actions--empty': !this.hasHeaderActions,\n                }}\n                ref={element => (this.headerActionsEl = element ?? null)}\n              >\n                <slot name=\"header-actions\" />\n              </div>\n              {this.hasHeaderActions ? (\n                <ds-divider\n                  class=\"drawer-header__divider\"\n                  orientation=\"vertical\"\n                  length=\"var(--dimension-size-300)\"\n                />\n              ) : null}\n              {this.renderIconAction(\n                'drawer-close',\n                'Cross',\n                this.closeAriaLabel,\n                'bottom',\n                event => this.requestClose('close-button', event.detail)\n              )}\n            </div>\n          </div>\n          <div\n            class={{ 'drawer-body': true, 'drawer-body--flush': this.bodyInset === 'none' }}\n            ref={element => (this.bodyEl = element ?? null)}\n          >\n            <slot />\n          </div>\n          <div class={{ 'drawer-footer': true, 'drawer-footer--empty': !showFooter }}>\n            <div\n              class={{\n                'drawer-footer__actions': true,\n                'drawer-footer__actions--empty': !this.hasFooterActions,\n              }}\n              ref={element => (this.footerActionsEl = element ?? null)}\n            >\n              <slot name=\"footer\" />\n            </div>\n            {this.navigation ? (\n              <div\n                class=\"drawer-footer__navigation\"\n                role=\"group\"\n                aria-label={this.navigationAriaLabel}\n              >\n                {this.renderIconAction(\n                  'drawer-previous',\n                  'ChevronLeft',\n                  this.previousAriaLabel,\n                  'top',\n                  () => this.page('previous'),\n                  !this.previousAvailable\n                )}\n                {this.renderIconAction(\n                  'drawer-next',\n                  'ChevronRight',\n                  this.nextAriaLabel,\n                  'top',\n                  () => this.page('next'),\n                  !this.nextAvailable\n                )}\n              </div>\n            ) : null}\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}