@ds-mo/ui 9.0.0 → 9.1.0

package/dist/mcp-data/registry/button-unfilled.json

@@ -0,0 +1,537 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-unfilled",
+  "title": "ButtonUnfilled",
+  "description": "Secondary command and compact chrome button with optional persistent toggle state, surface-aware interaction treatment, and async progress.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/button-unfilled",
+    "source": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Secondary command and compact chrome button with optional persistent toggle state, surface-aware interaction treatment, and async progress.",
+      "useWhen": [
+        "A secondary command accompanies the single filled primary action in a local decision area.",
+        "A toolbar, tool rail, overflow area, or shell region needs a compact icon action.",
+        "A command represents a persistent toggle or mode whose active state remains meaningful after activation."
+      ],
+      "avoidWhen": [
+        "The command is the single primary action in a local decision area; use ButtonFilled instead.",
+        "The control selects an application destination or local content panel; use the matching navigation component.",
+        "Active styling would only indicate the most recently invoked command or add decorative emphasis.",
+        "Surface context would be used to make the action louder or quieter rather than describe its actual parent surface."
+      ],
+      "alternatives": [
+        {
+          "when": "The command is the single primary action in the decision area.",
+          "component": "component:ds-button-filled",
+          "reason": "ButtonFilled owns highest-emphasis commands."
+        },
+        {
+          "when": "The choices are persistent application destinations.",
+          "component": "component:ds-panel-nav",
+          "reason": "PanelNav owns primary route selection and navigation semantics."
+        },
+        {
+          "when": "The choices are transient commands or contextual options.",
+          "component": "component:ds-menu",
+          "reason": "Menu owns temporary popup collections and their keyboard model."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-button-filled",
+        "component:ds-menu",
+        "component:ds-panel-tools"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "Provide an explicit accessible name for every icon-only action.",
+        "Use active state only for a persistent toggle or mode, and synchronize pressed semantics unless an owning composite exposes the selection state.",
+        "Treat notification dots as supplemental unread or status information; never use a dot as the sole state, meaning, or accessible name.",
+        "Loading keeps the action focused and named, exposes busy and disabled state, and blocks activation; announce broader operation progress from the owning workflow when needed.",
+        "Use inactive state only when an unavailable action must remain visible.",
+        "For form submission, use native submit behavior and handle the form submit event rather than submitting from the button click event."
+      ],
+      "states": [
+        "General content UI keeps the selected interaction fill and border for persistent active state.",
+        "Shell, navigation, and tool-rail chrome uses foreground-only active state with no selected fill or border.",
+        "The omitted default surface treatment is for primary and secondary parent surfaces and uses the brand-active selected fill; pass faint explicitly on faint surfaces to use the neutral active fill.",
+        "Surface context must match the actual parent surface; translucent, inverted, media, and always-dark treatments are reserved for those surfaces.",
+        "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
+        "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, or interaction semantics.",
+        "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width."
+      ],
+      "responsiveBehavior": [
+        "The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants.",
+        "Use fill width only when the parent layout requires a full-width secondary action."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "For form submission, use the native submit type and listen to the form submit event; use dsClick for non-submit commands.",
+          "Roving-focus composites own the button's tab-stop placement and selection semantics."
+        ],
+        "react": [
+          "Keep active, pressed, and async state synchronized from the owning toolbar or workflow."
+        ],
+        "angular": [
+          "Keep active, pressed, and async state synchronized from the owning toolbar or workflow."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "activeFill": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "active-fill",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "When active, render the selected interaction fill.\nDefault `true` for general UI. Shell chrome (nav / tool rails) should pass\n`false` so selection is foreground-only (primary color, no fill)."
+        },
+        "ariaLabel": {
+          "type": "string | null",
+          "resolvedType": "null | string",
+          "attribute": "aria-label",
+          "default": "null",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name override. Required for icon-only buttons."
+        },
+        "background": {
+          "type": "ButtonUnfilledBackground | undefined",
+          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+          "attribute": "background",
+          "required": false,
+          "mutable": false,
+          "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+        },
+        "controls": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "controls",
+          "required": false,
+          "mutable": false
+        },
+        "dot": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "dot",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Show a notification dot at the top-right of the icon zone (icon variant only)."
+        },
+        "expanded": {
+          "type": "boolean | undefined",
+          "resolvedType": "boolean | undefined",
+          "attribute": "expanded",
+          "required": false,
+          "mutable": false
+        },
+        "focusTabIndex": {
+          "type": "number",
+          "resolvedType": "number | undefined",
+          "attribute": "tab-index",
+          "required": false,
+          "mutable": false,
+          "description": "Native `tabindex` for roving keyboard groups in shell chrome.\nOmit for the default button tab stop (`0`)."
+        },
+        "hasBorder": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-border",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show a 1px secondary inset border. Default on; shell chrome can pass `false`."
+        },
+        "haspopup": {
+          "type": "ButtonUnfilledPopup | undefined",
+          "resolvedType": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | undefined",
+          "attribute": "haspopup",
+          "required": false,
+          "mutable": false
+        },
+        "icon": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "icon",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
+        },
+        "isActive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-active",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Active/selected visual state. Always promotes foreground to primary."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Disables interaction."
+        },
+        "isLoading": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-loading",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Shows an inline loader and prevents interaction without applying inactive opacity."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Visible text for `label` / `icon-label` variants."
+        },
+        "pressed": {
+          "type": "boolean | undefined",
+          "resolvedType": "boolean | undefined",
+          "attribute": "pressed",
+          "required": false,
+          "mutable": false
+        },
+        "rounded": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "rounded",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Use the half-radius treatment instead of the default control radius."
+        },
+        "size": {
+          "type": "ButtonUnfilledSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Control density (height, padding, icon, type)."
+        },
+        "type": {
+          "type": "'button' | 'submit' | 'reset'",
+          "resolvedType": "\"button\" | \"reset\" | \"submit\"",
+          "attribute": "type",
+          "default": "'button'",
+          "required": false,
+          "mutable": false,
+          "description": "Native button type."
+        },
+        "variant": {
+          "type": "ButtonUnfilledVariant",
+          "resolvedType": "\"icon\" | \"icon-label\" | \"label\"",
+          "attribute": "variant",
+          "default": "'label'",
+          "required": false,
+          "mutable": false,
+          "description": "Content layout. Default is label-only; pass `icon` for icon-only chrome\n(nav / tool rails) or `icon-label` for leading icon + text."
+        },
+        "width": {
+          "type": "ButtonUnfilledWidth",
+          "resolvedType": "\"fill\" | \"hug\"",
+          "attribute": "width",
+          "default": "'hug'",
+          "required": false,
+          "mutable": false,
+          "description": "Width fit — hug content (default) or fill the parent."
+        }
+      },
+      "events": [
+        {
+          "name": "dsChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "activeFill": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "active-fill",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "When active, render the selected interaction fill.\nDefault `true` for general UI. Shell chrome (nav / tool rails) should pass\n`false` so selection is foreground-only (primary color, no fill)."
+      },
+      "ariaLabel": {
+        "type": "string | null",
+        "resolvedType": "null | string",
+        "attribute": "aria-label",
+        "default": "null",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name override. Required for icon-only buttons."
+      },
+      "background": {
+        "type": "ButtonUnfilledBackground | undefined",
+        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"strong\" | \"translucent\" | undefined",
+        "attribute": "background",
+        "required": false,
+        "mutable": false,
+        "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+      },
+      "controls": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "controls",
+        "required": false,
+        "mutable": false
+      },
+      "dot": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "dot",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Show a notification dot at the top-right of the icon zone (icon variant only)."
+      },
+      "expanded": {
+        "type": "boolean | undefined",
+        "resolvedType": "boolean | undefined",
+        "attribute": "expanded",
+        "required": false,
+        "mutable": false
+      },
+      "focusTabIndex": {
+        "type": "number",
+        "resolvedType": "number | undefined",
+        "attribute": "tab-index",
+        "required": false,
+        "mutable": false,
+        "description": "Native `tabindex` for roving keyboard groups in shell chrome.\nOmit for the default button tab stop (`0`)."
+      },
+      "hasBorder": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-border",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show a 1px secondary inset border. Default on; shell chrome can pass `false`."
+      },
+      "haspopup": {
+        "type": "ButtonUnfilledPopup | undefined",
+        "resolvedType": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | undefined",
+        "attribute": "haspopup",
+        "required": false,
+        "mutable": false
+      },
+      "icon": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "icon",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
+      },
+      "isActive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-active",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Active/selected visual state. Always promotes foreground to primary."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Disables interaction."
+      },
+      "isLoading": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-loading",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Shows an inline loader and prevents interaction without applying inactive opacity."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Visible text for `label` / `icon-label` variants."
+      },
+      "pressed": {
+        "type": "boolean | undefined",
+        "resolvedType": "boolean | undefined",
+        "attribute": "pressed",
+        "required": false,
+        "mutable": false
+      },
+      "rounded": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "rounded",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Use the half-radius treatment instead of the default control radius."
+      },
+      "size": {
+        "type": "ButtonUnfilledSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Control density (height, padding, icon, type)."
+      },
+      "type": {
+        "type": "'button' | 'submit' | 'reset'",
+        "resolvedType": "\"button\" | \"reset\" | \"submit\"",
+        "attribute": "type",
+        "default": "'button'",
+        "required": false,
+        "mutable": false,
+        "description": "Native button type."
+      },
+      "variant": {
+        "type": "ButtonUnfilledVariant",
+        "resolvedType": "\"icon\" | \"icon-label\" | \"label\"",
+        "attribute": "variant",
+        "default": "'label'",
+        "required": false,
+        "mutable": false,
+        "description": "Content layout. Default is label-only; pass `icon` for icon-only chrome\n(nav / tool rails) or `icon-label` for leading icon + text."
+      },
+      "width": {
+        "type": "ButtonUnfilledWidth",
+        "resolvedType": "\"fill\" | \"hug\"",
+        "attribute": "width",
+        "default": "'hug'",
+        "required": false,
+        "mutable": false,
+        "description": "Width fit — hug content (default) or fill the parent."
+      }
+    },
+    "events": [
+      {
+        "name": "dsChange",
+        "detail": "boolean",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsClick",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-button-unfilled",
+      "react": "DsButtonUnfilled",
+      "angular": "DsButtonUnfilled"
+    },
+    "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-button-unfilled.js';",
+        "example": "<ds-button-unfilled></ds-button-unfilled>"
+      },
+      "react": {
+        "import": "import { DsButtonUnfilled } from '@ds-mo/ui/react';",
+        "example": "<DsButtonUnfilled />"
+      },
+      "angular": {
+        "import": "import { DsButtonUnfilled } from '@ds-mo/ui/angular/ds-button-unfilled';",
+        "example": "<ds-button-unfilled></ds-button-unfilled>"
+      },
+      "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",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "badge",
+    "icon",
+    "loader",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__label--loading {\n  visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\nexport type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.isActive,\n      'button-unfilled--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-unfilled__label': true,\n                'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}