@ds-mo/ui 14.6.0 → 14.7.0

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-20T20:20:24",
+  "timestamp": "2026-08-20T23:50:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -2896,6 +2896,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -3538,6 +3539,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -3977,6 +3979,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -5272,7 +5275,7 @@
           "mutable": false,
           "attr": "has-menu",
           "reflectToAttr": false,
-          "docs": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n  No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n\nUse `haspopup` directly for non-menu popups.",
+          "docs": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu. No chevron is added, so the glyph must\n  convey the menu on its own. Use `Ellipses` for generic more-options;\n  use a specific icon when the menu has a named purpose, such as\n  `Preferences` for Customize table.\n\nUse `haspopup` directly for non-menu popups.",
           "docsTags": [
             {
               "name": "default",
@@ -10540,6 +10543,7 @@
         "ds-empty-state",
         "ds-filter-menu",
         "ds-input",
+        "ds-menu",
         "ds-message-composer",
         "ds-mobile-bar-nav",
         "ds-mobile-sheet-nav",
@@ -10591,6 +10595,9 @@
         "ds-input": [
           "ds-icon"
         ],
+        "ds-menu": [
+          "ds-icon"
+        ],
         "ds-message-composer": [
           "ds-icon"
         ],
@@ -12513,6 +12520,27 @@
           "docs": "",
           "docsTags": []
         },
+        {
+          "event": "dsReorder",
+          "detail": "MenuReorderDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "MenuReorderDetail",
+            "resolved": "MenuReorderDetail",
+            "references": {
+              "MenuReorderDetail": {
+                "location": "import",
+                "path": "./menu-types",
+                "id": "src/wc/components/Menu/menu-types.ts::MenuReorderDetail",
+                "referenceLocation": "MenuReorderDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted after a pointer drop or keyboard move; Menu never mutates item order.",
+          "docsTags": []
+        },
         {
           "event": "dsSelect",
           "detail": "MenuItemData",
@@ -12569,6 +12597,7 @@
       "dependencies": [
         "ds-text",
         "ds-swatch-picker",
+        "ds-icon",
         "ds-tag",
         "ds-badge",
         "ds-switch"
@@ -12577,6 +12606,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -14863,6 +14893,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -15021,6 +15052,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -21446,6 +21478,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -22528,6 +22561,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -24887,6 +24921,63 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "columnCustomizer",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "column-customizer",
+          "reflectToAttr": false,
+          "docs": "Opt in to the table-owned column customizer. The `columns` prop remains the\ncatalog; hidden and ordered columns are controlled separately. The trigger\nopens the shared Menu of live show/hide switch rows.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "columnOrder",
+          "type": "string[]",
+          "complexType": {
+            "original": "string[]",
+            "resolved": "string[]",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Controlled data-column identities in display order. Omitted ids append in catalog order.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "[]"
+            }
+          ],
+          "default": "[]",
+          "values": [
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "columns",
           "type": "TableColumn[]",
@@ -25526,6 +25617,34 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hiddenColumnIds",
+          "type": "string[]",
+          "complexType": {
+            "original": "string[]",
+            "resolved": "string[]",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Controlled hidden data-column identities. Action ids are ignored.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "[]"
+            }
+          ],
+          "default": "[]",
+          "values": [
+            {
+              "type": "string[]"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "loadIdentity",
           "type": "number | string",
@@ -26264,6 +26383,27 @@
           "docs": "",
           "docsTags": []
         },
+        {
+          "event": "dsColumnsConfigChange",
+          "detail": "TableColumnsConfigChangeDetail",
+          "bubbles": true,
+          "complexType": {
+            "original": "TableColumnsConfigChangeDetail",
+            "resolved": "TableColumnsConfigChangeDetail",
+            "references": {
+              "TableColumnsConfigChangeDetail": {
+                "location": "import",
+                "path": "./table-types",
+                "id": "src/wc/components/Table/table-types.ts::TableColumnsConfigChangeDetail",
+                "referenceLocation": "TableColumnsConfigChangeDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "dsGroupCollapseChange",
           "detail": "TableGroupCollapseChangeDetail",
@@ -26448,6 +26588,7 @@
         "ds-menu": [
           "ds-text",
           "ds-swatch-picker",
+          "ds-icon",
           "ds-tag",
           "ds-badge",
           "ds-switch"
@@ -29281,7 +29422,7 @@
       "path": "src/wc/utils/index.ts"
     },
     "src/wc/components/Menu/menu-types.ts::MenuItemData": {
-      "declaration": "export interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  /** Show a non-interactive tag at the trailing edge of the row. */\n  tag?: MenuItemTagData;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n}",
+      "declaration": "export interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Leading decorative icon. Ignored when `reorderable` is true. */\n  icon?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  /** Show a non-interactive tag at the trailing edge of the row. */\n  tag?: MenuItemTagData;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n  /** Prefix a drag handle and allow pointer and keyboard reorder within the contiguous reorderable run. */\n  reorderable?: boolean;\n}",
       "docstring": "",
       "path": "src/wc/components/Menu/menu-types.ts"
     },
@@ -29315,6 +29456,11 @@
       "docstring": "",
       "path": "src/wc/utils/index.ts"
     },
+    "src/wc/components/Menu/menu-types.ts::MenuReorderDetail": {
+      "declaration": "export interface MenuReorderDetail {\n  item: MenuItemData;\n  fromIndex: number;\n  toIndex: number;\n  sectionIndex: number;\n  items: MenuItemData[];\n}",
+      "docstring": "Next section item order after a pointer or keyboard reorder.",
+      "path": "src/wc/components/Menu/menu-types.ts"
+    },
     "src/wc/components/MessageBubble/MessageBubble.tsx::MessageBubbleVariant": {
       "declaration": "export type MessageBubbleVariant = 'user' | 'received';",
       "docstring": "",
@@ -29925,6 +30071,11 @@
       "docstring": "",
       "path": "src/wc/components/Table/table-types.ts"
     },
+    "src/wc/components/Table/table-types.ts::TableColumnsConfigChangeDetail": {
+      "declaration": "export interface TableColumnsConfigChangeDetail {\n  hiddenColumnIds: string[];\n  columnOrder: string[];\n}",
+      "docstring": "Controlled show/hide and data-column order for the table-owned customizer.",
+      "path": "src/wc/components/Table/table-types.ts"
+    },
     "src/wc/toast/index.ts::ToastManager": {
       "declaration": "any",
       "docstring": "",

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

@@ -54,7 +54,7 @@
       "accessibility": [
         "Provide an explicit accessible name for every icon-only action.",
         "Set hasMenu when the button triggers a Menu; it implies aria-haspopup of menu. Pass controls with the Menu id and expanded from the same open state given to Menu. Expanded popup triggers hold only the pressed wash while open, without changing their resting foreground; expanded disclosure controls without popup semantics retain the normal resting appearance.",
-        "Give an icon-only menu button an accessible name that states the role, such as More options, because no visible label or chevron carries it.",
+        "Give an icon-only menu button an accessible name that states the role, such as More options or Customize table, because no visible label or chevron carries it.",
         "Use haspopup directly for a non-menu popup such as a listbox or dialog; those cases get no chevron.",
         "Use pressed only for a genuine toggle button; it supplies aria-pressed and dsChange intent. Use isActive only for owner-controlled visual emphasis inside a composite whose selection semantics live on the owner.",
         "Treat notification dots as supplemental unread or status information; never use a dot as the sole state, meaning, or accessible name.",
@@ -74,8 +74,8 @@
         "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, or interaction semantics.",
         "Physical press scaling is on by default. Disable it only when an owning composite must keep child or background geometry fixed; hover and pressed interaction washes remain available.",
         "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width.",
-        "hasMenu covers two distinct menu-button shapes and the variant selects between them. With label or icon-label the action has a menu, and a trailing chevron carries the affordance. With icon the button is a menu, meaning the overflow or more-options control, and no chevron is added.",
-        "Because the icon-only shape has no chevron, its glyph must convey the menu on its own; use Ellipses. Never pair hasMenu with an icon-only glyph that does not read as a menu.",
+        "hasMenu covers two distinct menu-button shapes and the variant selects between them. With label or icon-label the action has a menu, and a trailing chevron carries the affordance. With icon the button is a menu and no chevron is added.",
+        "Because the icon-only shape has no chevron, its glyph must convey the menu on its own. Use Ellipses for a generic more-options or overflow control. Use a specific icon when the menu has a named purpose, such as Preferences for Customize table.",
         "An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover without promoting foreground or selected fill, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral."
       ],
       "responsiveBehavior": [
@@ -177,7 +177,7 @@
           "default": "false",
           "required": false,
           "mutable": false,
-          "description": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n  No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n\nUse `haspopup` directly for non-menu popups."
+          "description": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu. No chevron is added, so the glyph must\n  convey the menu on its own. Use `Ellipses` for generic more-options;\n  use a specific icon when the menu has a named purpose, such as\n  `Preferences` for Customize table.\n\nUse `haspopup` directly for non-menu popups."
         },
         "haspopup": {
           "type": "ButtonUnfilledPopup | undefined",
@@ -411,7 +411,7 @@
         "default": "false",
         "required": false,
         "mutable": false,
-        "description": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n  No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n\nUse `haspopup` directly for non-menu popups."
+        "description": "Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\nboth menu-button shapes:\n\n- `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n  the affordance.\n- `icon` — the button *is* a menu. No chevron is added, so the glyph must\n  convey the menu on its own. Use `Ellipses` for generic more-options;\n  use a specific icon when the menu has a named purpose, such as\n  `Preferences` for Customize table.\n\nUse `haspopup` directly for non-menu popups."
       },
       "haspopup": {
         "type": "ButtonUnfilledPopup | undefined",
@@ -617,7 +617,7 @@
     },
     {
       "path": "src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx",
-      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\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 = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\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  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\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  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\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  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\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  /**\n   * Controlled disclosure or popup state forwarded to `aria-expanded`.\n   * Popup triggers hold only the pressed wash while open; their resting\n   * foreground is unchanged. Ordinary disclosures remain visually neutral.\n   */\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n   *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\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    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  private get doubleInset(): boolean {\n    return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n  }\n\n  /** Only popup triggers hold a pressed visual while expanded. */\n  private get expandedPopup(): boolean {\n    return this.expanded === true && this.resolvedHaspopup !== undefined && !this.isInactive;\n  }\n\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && 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 cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !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.visuallyActive,\n      'button-unfilled--expanded': this.expandedPopup,\n      'ds-button--expanded': this.expandedPopup,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !this.doubleInset,\n      'ds-control--inset-double': this.doubleInset,\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--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-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'ds-control--inset': this.isInset && !this.doubleInset,\n          'ds-control--inset-double': this.doubleInset,\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.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\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 = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\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  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\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  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\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  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\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  /**\n   * Controlled disclosure or popup state forwarded to `aria-expanded`.\n   * Popup triggers hold only the pressed wash while open; their resting\n   * foreground is unchanged. Ordinary disclosures remain visually neutral.\n   */\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu. No chevron is added, so the glyph must\n   *   convey the menu on its own. Use `Ellipses` for generic more-options;\n   *   use a specific icon when the menu has a named purpose, such as\n   *   `Preferences` for Customize table.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\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    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  private get doubleInset(): boolean {\n    return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n  }\n\n  /** Only popup triggers hold a pressed visual while expanded. */\n  private get expandedPopup(): boolean {\n    return this.expanded === true && this.resolvedHaspopup !== undefined && !this.isInactive;\n  }\n\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && 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 cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !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.visuallyActive,\n      'button-unfilled--expanded': this.expandedPopup,\n      'ds-button--expanded': this.expandedPopup,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control--inset': this.isInset && !this.doubleInset,\n      'ds-control--inset-double': this.doubleInset,\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--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-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'ds-control--inset': this.isInset && !this.doubleInset,\n          'ds-control--inset-double': this.doubleInset,\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.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]