@ds-mo/ui 16.1.2 → 16.2.0

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

@@ -0,0 +1,385 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "popover",
+  "title": "Popover",
+  "description": "Anchored non-modal dialog for short interactive content tied to a trigger. It uses the same choice-popup surface and placement as Menu, Select, and the date picker, with fully composable content and no built-in header or footer.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/popover",
+    "source": "src/wc/components/Popover/Popover.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Anchored non-modal dialog for short interactive content tied to a trigger. It uses the same choice-popup surface and placement as Menu, Select, and the date picker, with fully composable content and no built-in header or footer.",
+      "useWhen": [
+        "A trigger reveals a few related controls, such as share options or display settings, that apply without leaving the page.",
+        "Supplementary explanation is too long or needs a link, so a Tooltip is not enough.",
+        "The content should dismiss on outside activation or Escape and return focus to its trigger."
+      ],
+      "avoidWhen": [
+        "The content is a list of commands or one-of-many choices.",
+        "The content picks a date.",
+        "The content is a short non-interactive label for an icon control.",
+        "The user must complete or confirm a blocking task.",
+        "The content needs more than a few controls or scrolling sections."
+      ],
+      "alternatives": [
+        {
+          "when": "A trigger reveals commands or a choice list.",
+          "component": "component:ds-menu",
+          "reason": "Menu provides menu semantics, roving focus, and selection."
+        },
+        {
+          "when": "The user picks a calendar date.",
+          "component": "component:ds-input-date",
+          "reason": "InputDate owns its calendar popup, anchored to the whole field and aligned to its end edge, with calendar keyboard behavior."
+        },
+        {
+          "when": "An icon control needs a short non-interactive name.",
+          "component": "component:ds-tooltip",
+          "reason": "Tooltip shows supplementary labels on hover and keyboard focus without taking focus."
+        },
+        {
+          "when": "The task is blocking or needs explicit completion.",
+          "component": "component:ds-modal",
+          "reason": "Modal contains focus and makes the page inert until the user decides."
+        },
+        {
+          "when": "The content is a larger panel of detail or a multi-field task.",
+          "component": "component:ds-drawer",
+          "reason": "Drawer provides room for longer content beside the page."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-button-unfilled",
+        "component:ds-button-filled",
+        "component:ds-field",
+        "component:ds-switch",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "The surface is a non-modal dialog named by popoverLabel. Always set it.",
+        "The owner marks the trigger with haspopup=\"dialog\" and mirrors open into expanded and surfaceOpen on ButtonUnfilled.",
+        "Opening moves focus to an element marked autofocus in the content, otherwise to the surface itself.",
+        "Escape returns focus to the anchor. Outside activation closes without moving focus. Tab past the last control closes the popover and continues to the control after the trigger.",
+        "dsClose reports escape, outside, or tab so the owner can sync trigger state. Actions inside the content close the popover by setting open to false."
+      ],
+      "states": [
+        "The owner sets open and an anchor or anchorId; the component mutates open to false for user dismissal and emits dsAfterClose after exit motion.",
+        "Slotted content stays in the host while closed so authored nodes and their state persist between openings.",
+        "Placement flips to the opposite side when the preferred side does not fit, and clamps within the viewport or the nearest overlay boundary."
+      ],
+      "responsiveBehavior": [
+        "Unset, width follows content between menu-width-xs and panel-width-lg, clamped to the viewport. popoverWidth fixes it to a menu-width token or a CSS length.",
+        "Height is limited to the space available on the resolved side; content scrolls when it exceeds it.",
+        "The surface lives in the native top layer, escaping clipping containers and transformed ancestors."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set anchor as a JavaScript property or anchorId as an attribute, then set open.",
+          "Listen for dsClose to update the trigger's expanded and surfaceOpen state."
+        ],
+        "react": [
+          "Pass a trigger ref's element as anchor, or anchorId, and control open; update trigger state in onDsClose."
+        ],
+        "angular": [
+          "Bind [anchor] to the trigger element or set anchorId, bind [open], and update trigger state in (dsClose)."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook share, help, trigger, and placement examples",
+          "path": "src/wc/components/Popover/Popover.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns the anchored choice-popup surface shared with Menu, Select, and the date and time pickers so every anchored overlay reads as the same material. Content insets to the Menu label edge by default.",
+        "protected": [
+          {
+            "properties": [
+              "background",
+              "border",
+              "border-radius",
+              "box-shadow"
+            ],
+            "reason": "The anchored surface recipe is shared across overlay families; compose application surfaces inside the content slot.",
+            "props": []
+          },
+          {
+            "properties": [
+              "width"
+            ],
+            "reason": "Width follows content within the choice-popup bounds, or a menu-width token or length through popoverWidth.",
+            "props": [
+              "popoverWidth"
+            ]
+          },
+          {
+            "properties": [
+              "padding"
+            ],
+            "reason": "The 4px frame and the content inset align content with Menu labels; compose lists and pickers with Menu, Select, or InputDate instead.",
+            "props": []
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "align": {
+          "type": "PopoverAlign",
+          "resolvedType": "\"center\" | \"end\" | \"start\"",
+          "attribute": "align",
+          "default": "'start'",
+          "required": false,
+          "mutable": false
+        },
+        "anchor": {
+          "type": "HTMLElement | undefined",
+          "resolvedType": "HTMLElement | undefined",
+          "required": false,
+          "mutable": false,
+          "description": "External trigger element to position against. Set via JS: popoverEl.anchor = buttonEl"
+        },
+        "anchorId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "anchor-id",
+          "required": false,
+          "mutable": false,
+          "description": "ID of the external trigger element for positioning."
+        },
+        "boundary": {
+          "type": "HTMLElement | undefined",
+          "resolvedType": "HTMLElement | undefined",
+          "required": false,
+          "mutable": false,
+          "description": "Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used."
+        },
+        "open": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "open",
+          "default": "false",
+          "required": false,
+          "mutable": true
+        },
+        "popoverLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "popover-label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the dialog surface."
+        },
+        "popoverWidth": {
+          "type": "PopoverWidth | string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "popover-width",
+          "required": false,
+          "mutable": false,
+          "description": "Menu width token (`xs`, `sm`, `md`, `lg`) or a CSS length. Unset, the surface\nfollows its content between the menu-width-xs and panel-width-lg bounds."
+        },
+        "side": {
+          "type": "PopoverSide",
+          "resolvedType": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+          "attribute": "side",
+          "default": "'bottom'",
+          "required": false,
+          "mutable": false,
+          "description": "Preferred side; placement flips to the opposite side when that offers a better fit."
+        },
+        "sideOffset": {
+          "type": "number | string",
+          "resolvedType": "number | string",
+          "attribute": "side-offset",
+          "default": "TOKEN_CSS_LENGTHS.space050",
+          "required": false,
+          "mutable": false,
+          "description": "Gap between anchor and popover — number (px) or TokoMo length."
+        }
+      },
+      "events": [
+        {
+          "name": "dsAfterClose",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted after exit motion completes."
+        },
+        {
+          "name": "dsClose",
+          "detail": "PopoverCloseDetail",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Emitted when the user dismisses the popover. The component sets open to false."
+        }
+      ],
+      "methods": [],
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot"
+        }
+      ]
+    },
+    "props": {
+      "align": {
+        "type": "PopoverAlign",
+        "resolvedType": "\"center\" | \"end\" | \"start\"",
+        "attribute": "align",
+        "default": "'start'",
+        "required": false,
+        "mutable": false
+      },
+      "anchor": {
+        "type": "HTMLElement | undefined",
+        "resolvedType": "HTMLElement | undefined",
+        "required": false,
+        "mutable": false,
+        "description": "External trigger element to position against. Set via JS: popoverEl.anchor = buttonEl"
+      },
+      "anchorId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "anchor-id",
+        "required": false,
+        "mutable": false,
+        "description": "ID of the external trigger element for positioning."
+      },
+      "boundary": {
+        "type": "HTMLElement | undefined",
+        "resolvedType": "HTMLElement | undefined",
+        "required": false,
+        "mutable": false,
+        "description": "Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used."
+      },
+      "open": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "open",
+        "default": "false",
+        "required": false,
+        "mutable": true
+      },
+      "popoverLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "popover-label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the dialog surface."
+      },
+      "popoverWidth": {
+        "type": "PopoverWidth | string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "popover-width",
+        "required": false,
+        "mutable": false,
+        "description": "Menu width token (`xs`, `sm`, `md`, `lg`) or a CSS length. Unset, the surface\nfollows its content between the menu-width-xs and panel-width-lg bounds."
+      },
+      "side": {
+        "type": "PopoverSide",
+        "resolvedType": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "attribute": "side",
+        "default": "'bottom'",
+        "required": false,
+        "mutable": false,
+        "description": "Preferred side; placement flips to the opposite side when that offers a better fit."
+      },
+      "sideOffset": {
+        "type": "number | string",
+        "resolvedType": "number | string",
+        "attribute": "side-offset",
+        "default": "TOKEN_CSS_LENGTHS.space050",
+        "required": false,
+        "mutable": false,
+        "description": "Gap between anchor and popover — number (px) or TokoMo length."
+      }
+    },
+    "events": [
+      {
+        "name": "dsAfterClose",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted after exit motion completes."
+      },
+      {
+        "name": "dsClose",
+        "detail": "PopoverCloseDetail",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Emitted when the user dismisses the popover. The component sets open to false."
+      }
+    ],
+    "methods": [],
+    "slots": [
+      {
+        "name": "",
+        "description": "The default slot"
+      }
+    ],
+    "exports": {
+      "customElement": "ds-popover",
+      "react": "DsPopover",
+      "vue": "DsPopover",
+      "angular": "DsPopover"
+    },
+    "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-popover.js';",
+        "example": "<ds-popover></ds-popover>"
+      },
+      "react": {
+        "import": "import { DsPopover } from '@ds-mo/ui/react';",
+        "example": "<DsPopover />"
+      },
+      "vue": {
+        "import": "import { DsPopover } from '@ds-mo/ui/vue';",
+        "example": "<DsPopover />"
+      },
+      "angular": {
+        "import": "import { DsPopover } from '@ds-mo/ui/angular/ds-popover';",
+        "example": "<ds-popover></ds-popover>"
+      },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary.",
+      "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": [],
+  "files": [
+    {
+      "path": "src/wc/components/Popover/Popover.css",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-popup.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n/*\n * The anchored choice-popup surface shared with Menu, Select, and InputDate:\n * menu radius, floating shadow and highlight, and the same 4px frame. Width\n * follows content between the choice-popup bounds unless popoverWidth fixes it.\n */\n.popover-surface.ds-choice-popup {\n  width: var(--_popover-width, max-content);\n  padding: var(--dimension-space-050);\n  color: var(--color-foreground-primary);\n  outline: none;\n}\n\n.popover-surface--hidden {\n  display: none;\n}\n\n/* Default inset puts content on the same 12px edge as Menu item labels. */\n.popover-content {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  min-height: 0;\n  padding: var(--dimension-space-100);\n  overflow-y: auto;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Popover/Popover.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 {\n  resolveCssLengthPx,\n  resolveMotionTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport type { AnchoredAlign, AnchoredSide } from '../../utils/anchored-position';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\n\nexport type PopoverSide = AnchoredSide;\nexport type PopoverAlign = AnchoredAlign;\nexport type PopoverWidth = 'xs' | 'sm' | 'md' | 'lg';\nexport type PopoverCloseReason = 'escape' | 'outside' | 'tab';\n\nexport interface PopoverCloseDetail {\n  reason: PopoverCloseReason;\n  /** The triggering event; absent for outside activation, which the shared controller observes. */\n  originalEvent?: Event;\n}\n\nconst TABBABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst WIDTH_MAP: Record<PopoverWidth, string> = {\n  xs: 'var(--dimension-menu-width-xs)',\n  sm: 'var(--dimension-menu-width-sm)',\n  md: 'var(--dimension-menu-width-md)',\n  lg: 'var(--dimension-menu-width-lg)',\n};\n\nlet popoverIdCounter = 0;\n\n@Component({\n  tag: 'ds-popover',\n  styleUrl: 'Popover.css',\n  scoped: true,\n})\nexport class Popover {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  /** External trigger element to position against. Set via JS: popoverEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning. */\n  @Prop() anchorId: string | undefined;\n  /** Preferred side; placement flips to the opposite side when that offers a better fit. */\n  @Prop() side: PopoverSide = 'bottom';\n  @Prop() align: PopoverAlign = 'start';\n  /** Gap between anchor and popover — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Explicit collision owner; otherwise the nearest data-ds-overlay-boundary ancestor is used. */\n  @Prop() boundary: HTMLElement | undefined;\n  /**\n   * Menu width token (`xs`, `sm`, `md`, `lg`) or a CSS length. Unset, the surface\n   * follows its content between the menu-width-xs and panel-width-lg bounds.\n   */\n  @Prop() popoverWidth: PopoverWidth | string | undefined;\n  /** Accessible name for the dialog surface. */\n  @Prop() popoverLabel: string = '';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private positionReady: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private availableHeight: number | null = null;\n\n  /** Emitted when the user dismisses the popover. The component sets open to false. */\n  @Event() dsClose!: EventEmitter<PopoverCloseDetail>;\n  /** Emitted after exit motion completes. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private readonly popupId = `ds-popover-${++popoverIdCounter}`;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private loaded = false;\n  private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n  private readonly position = new AnchoredPositionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.popupEl,\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.open) return null;\n      const viewportPadPx = this.viewportPadPx;\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth,\n        popupHeight: Math.min(popup.scrollHeight, window.innerHeight - viewportPadPx * 2),\n        side: this.side,\n        align: this.align,\n        sideOffsetPx: resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050),\n        alignOffsetPx: 0,\n        viewportPadPx,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor, this.boundary),\n      };\n    },\n    apply: ({ x, y, availableHeight }) => {\n      this.pos = { x, y };\n      this.availableHeight = availableHeight;\n    },\n    onReady: () => {\n      this.positionReady = true;\n    },\n    liveUpdate: 'double-frame',\n    topLayer: true,\n    observeResize: true,\n    observeAnchorMotion: true,\n  });\n\n  private readonly interaction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.resolvedAnchor,\n    getPopup: () => this.popupEl,\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.close('outside', undefined, false),\n  });\n\n  componentDidLoad() {\n    this.loaded = true;\n    if (this.open) this.onOpenChange(true);\n  }\n\n  connectedCallback() {\n    if (this.loaded && this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.tasks.cancel();\n    this.teardown();\n    this.shouldRender = false;\n    this.closing = false;\n    this.positionReady = false;\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded || !this.el.isConnected) return;\n    if (isOpen) {\n      this.teardown();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.availableHeight = null;\n      this.interaction.connect();\n      this.position.observe();\n      this.position.schedule(() => this.focusInitial());\n    } else if (this.shouldRender && !this.closing) {\n      this.closing = true;\n      this.teardown();\n      const closeAnimationMs = resolveMotionTimeMs(\n        TOKEN_DEFAULTS.motionShort2,\n        TOKEN_DEFAULTS.animationDurationShort3\n      );\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  @Watch('anchor')\n  @Watch('anchorId')\n  @Watch('boundary')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  onPlacementChange() {\n    if (this.open && this.shouldRender) this.position.schedule();\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return this.el.ownerDocument.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get popupEl(): HTMLElement | null {\n    return this.el.querySelector<HTMLElement>('.popover-surface');\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get resolvedWidth(): string | undefined {\n    const width = this.popoverWidth?.trim();\n    if (!width) return undefined;\n    return WIDTH_MAP[width as PopoverWidth] ?? width;\n  }\n\n  private teardown() {\n    this.position.unobserve();\n    this.interaction.disconnect();\n    if (this.closeTimer) clearTimeout(this.closeTimer);\n    this.closeTimer = null;\n  }\n\n  private focusInitial() {\n    this.tasks.frame(() => {\n      if (!this.open) return;\n      const popup = this.popupEl;\n      if (!popup) return;\n      const content = popup.querySelector<HTMLElement>('.popover-content');\n      const autofocus = content?.querySelector<HTMLElement>('[autofocus]');\n      if (autofocus) {\n        autofocus.focus();\n        return;\n      }\n      popup.focus();\n    });\n  }\n\n  private close(\n    reason: PopoverCloseReason,\n    originalEvent: Event | undefined,\n    restoreFocus: boolean\n  ) {\n    if (!this.open || this.closing) return;\n    if (restoreFocus) this.interaction.focusAnchor();\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private finishClose() {\n    if (this.open || !this.closing || !this.el.isConnected) return;\n    const popup = this.popupEl;\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.shouldRender = false;\n    this.closing = false;\n    this.positionReady = false;\n    this.dsAfterClose.emit();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.closing) return;\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close('escape', event, true);\n      return;\n    }\n    // From the focused surface itself, a forward Tab enters the first control. WebKit\n    // sends native Tab from a top-layer surface to the document body, so move it here.\n    if (event.key === 'Tab' && !event.shiftKey && event.target === this.popupEl) {\n      const first = this.popupEl?.querySelector<HTMLElement>(TABBABLE_SELECTOR);\n      if (first) {\n        event.preventDefault();\n        first.focus();\n        return;\n      }\n    }\n    if (event.key === 'Tab' && this.interaction.tabLeavesPopup(event)) {\n      event.preventDefault();\n      this.close('tab', event, false);\n      this.interaction.moveFocusAfterTab(event.shiftKey);\n    }\n  };\n\n  render() {\n    // Slotted content stays in the host while closed so authored nodes are never discarded.\n    const visible = this.shouldRender;\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n    const width = this.resolvedWidth;\n    if (width) popupStyle['--_popover-width'] = width;\n    if (this.availableHeight !== null) {\n      popupStyle['max-height'] = `${Math.floor(this.availableHeight)}px`;\n    }\n\n    return (\n      <Host>\n        <div\n          id={this.popupId}\n          popover=\"manual\"\n          tabindex={-1}\n          class={{\n            'popover-surface': true,\n            'ds-choice-popup': true,\n            'ds-choice-popup--closing': this.closing,\n            'popover-surface--hidden': !visible,\n          }}\n          style={visible ? popupStyle : undefined}\n          role=\"dialog\"\n          aria-label={this.popoverLabel || undefined}\n          inert={this.closing}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"popover-content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/radio-tile.json

@@ -371,7 +371,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -462,7 +462,7 @@
       "peerDependencies": {
         "required": [
           "@ds-mo/tokens ^9.0.0",
-          "@ds-mo/icons ^8.2.1"
+          "@ds-mo/icons ^8.2.2"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }