@ds-mo/ui 14.35.0 → 14.36.0

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

@@ -0,0 +1,580 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button-inverted",
+  "title": "ButtonInverted",
+  "description": "Single-recipe filled command button with an inverted background and primary foreground for actions that must remain legible across ordinary surfaces.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/button-inverted",
+    "source": "src/wc/components/ButtonInverted/ButtonInverted.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Single-recipe filled command button with an inverted background and primary foreground for actions that must remain legible across ordinary surfaces.",
+      "useWhen": [
+        "A command needs the filled button structure with the fixed inverted background treatment.",
+        "The action should use primary foreground content on the inverted surface without exposing intent or contrast choices.",
+        "A compact, icon-only inverted action needs an explicit accessible name.",
+        "The command has closely related alternatives and needs split mode while keeping the same inverted recipe."
+      ],
+      "avoidWhen": [
+        "The action needs semantic intent or contrast-specific filled treatments; use ButtonFilled.",
+        "The action is unfilled icon-only shell, navigation, overflow, or tool-rail chrome; use ButtonUnfilled.",
+        "The element represents navigation rather than a command.",
+        "The content is a persistent selected state rather than an action."
+      ],
+      "alternatives": [
+        {
+          "when": "The action's consequence needs a semantic intent or the fill must adapt through contrast.",
+          "component": "component:ds-button-filled",
+          "reason": "ButtonFilled owns intent and contrast-aware filled command treatments."
+        },
+        {
+          "when": "The action is shell, navigation, overflow, or tool-rail chrome.",
+          "component": "component:ds-button-unfilled",
+          "reason": "ButtonUnfilled owns unfilled chrome, active state, borders, and surface-aware interaction states."
+        },
+        {
+          "when": "The user is choosing a destination in application navigation.",
+          "component": "component:ds-panel-nav",
+          "reason": "PanelNav owns destination selection and navigation semantics."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-modal",
+        "component:ds-field",
+        "component:ds-menu"
+      ],
+      "patterns": [
+        "pattern:menu-trigger"
+      ],
+      "accessibility": [
+        "Provide an explicit accessible name for icon-only buttons.",
+        "In split mode, provide menuAriaLabel for the appended ChevronDown segment, pass controls with the Menu id, and synchronize expanded with the Menu open state.",
+        "Set hasMenu when the action opens a Menu; it implies aria-haspopup of menu and renders the trailing chevron. Pass controls with the Menu id and expanded from the same open state given to Menu.",
+        "Use haspopup directly for a non-menu popup such as a dialog; that case gets no chevron.",
+        "Loading keeps the action focused and named, exposes busy and disabled state, and blocks activation.",
+        "Use native submit behavior for form submission and handle the form submit event rather than submitting from the button click event."
+      ],
+      "states": [
+        "Every size applies one complete control-density recipe across frame height, inline padding, icon zone, text-container inset, gap, and radius.",
+        "The inverted background and primary foreground are fixed; ButtonInverted has no intent, contrast, parent-surface, or optional-border props.",
+        "Every button has a minimum inline size equal to its resolved height. Short labels therefore form a square control while longer labels continue to hug their content.",
+        "Set isInset only when the button is nested inside a same-size control. The default single inset removes 4px overall; insetDepth double removes 8px overall and falls back to single at xs.",
+        "Rounded changes only the control radius to the half-radius treatment; it does not change the inverted recipe, size, variant, or interaction semantics.",
+        "Loading prevents duplicate activation without applying inactive opacity or removing the current keyboard focus.",
+        "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width.",
+        "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.",
+        "ButtonInverted has no active, pressed, or selected state; a filled action is a command, not a toggle or persistent selection.",
+        "An open popup is a transient pressed state. While surfaceOpen is true the pressed wash is held for the popup's complete rendered lifecycle without introducing selected styling.",
+        "Split mode supports label, icon, and icon-label primary segments. The primary segment emits dsClick and the appended menu segment emits dsMenuClick."
+      ],
+      "responsiveBehavior": [
+        "Use fill width only when the parent layout calls for a full-width action, commonly on narrow form layouts.",
+        "Choose density from the containing layout so the inverted action matches neighboring controls."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "For form submission, use the native submit type and listen to the form submit event; use dsClick for non-submit commands."
+        ],
+        "react": [
+          "Keep async state in the owner and pass it to the loading state until the command settles."
+        ],
+        "angular": [
+          "Keep async state in the owner and pass it to the loading state until the command settles."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/ButtonInverted/ButtonInverted.stories.ts"
+        },
+        {
+          "label": "Surface ownership and trigger state",
+          "path": "src/docs/SurfaceOwnership.mdx"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "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."
+        },
+        "controls": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "controls",
+          "required": false,
+          "mutable": false,
+          "description": "ID of the popup this button controls."
+        },
+        "expanded": {
+          "type": "boolean | undefined",
+          "resolvedType": "boolean | undefined",
+          "attribute": "expanded",
+          "required": false,
+          "mutable": false,
+          "description": "Controlled disclosure state forwarded to aria-expanded."
+        },
+        "hasMenu": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-menu",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "This action has a menu: implies `aria-haspopup=\"menu\"` and adds the\ntrailing chevron that carries the affordance.\n\nOnly `label` and `icon-label` are supported. Icon-only menu triggers belong\nto ButtonUnfilled so the glyph can communicate the overflow affordance."
+        },
+        "haspopup": {
+          "type": "ButtonInvertedPopup | undefined",
+          "resolvedType": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | undefined",
+          "attribute": "haspopup",
+          "required": false,
+          "mutable": false,
+          "description": "Popup type exposed to assistive technology."
+        },
+        "icon": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "icon",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
+        },
+        "insetDepth": {
+          "type": "ControlInsetDepth",
+          "resolvedType": "\"double\" | \"single\"",
+          "attribute": "inset-depth",
+          "default": "'single'",
+          "required": false,
+          "mutable": false,
+          "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+        },
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Disables interaction."
+        },
+        "isInset": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inset",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Use reduced outer geometry when nested inside a control of the same size."
+        },
+        "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."
+        },
+        "labelEmphasis": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "label-emphasis",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Whether the visible label uses the emphasized weight."
+        },
+        "menuAriaLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "menu-aria-label",
+          "default": "'More options'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible name for the appended menu segment in split mode."
+        },
+        "pressScale": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "press-scale",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Scale down during a physical pointer press.\nDisable when an owning composite requires fixed child or background geometry."
+        },
+        "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": "ButtonInvertedSize",
+          "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false,
+          "description": "Control density (height, padding, icon, type)."
+        },
+        "split": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "split",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Append a separate ChevronDown menu segment while preserving the inverted\nrecipe, variant, size, loading, inactive, and width treatment."
+        },
+        "surfaceOpen": {
+          "type": "boolean | undefined",
+          "resolvedType": "boolean | undefined",
+          "attribute": "surface-open",
+          "required": false,
+          "mutable": false,
+          "description": "The associated menu, picker, or panel is visible, including its exit motion.\nHolds only the pressed wash and does not set ARIA or selection state."
+        },
+        "type": {
+          "type": "'button' | 'submit' | 'reset'",
+          "resolvedType": "\"button\" | \"reset\" | \"submit\"",
+          "attribute": "type",
+          "default": "'button'",
+          "required": false,
+          "mutable": false,
+          "description": "Native button type."
+        },
+        "variant": {
+          "type": "ButtonInvertedVariant",
+          "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\nor `icon-label` for leading icon + text."
+        },
+        "width": {
+          "type": "ButtonInvertedWidth",
+          "resolvedType": "\"fill\" | \"hug\"",
+          "attribute": "width",
+          "default": "'hug'",
+          "required": false,
+          "mutable": false,
+          "description": "Width fit — hug content (default) or fill the parent."
+        }
+      },
+      "events": [
+        {
+          "name": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsMenuClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus(segment?: \"primary\" | \"menu\") => Promise<void>"
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "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."
+      },
+      "controls": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "controls",
+        "required": false,
+        "mutable": false,
+        "description": "ID of the popup this button controls."
+      },
+      "expanded": {
+        "type": "boolean | undefined",
+        "resolvedType": "boolean | undefined",
+        "attribute": "expanded",
+        "required": false,
+        "mutable": false,
+        "description": "Controlled disclosure state forwarded to aria-expanded."
+      },
+      "hasMenu": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-menu",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "This action has a menu: implies `aria-haspopup=\"menu\"` and adds the\ntrailing chevron that carries the affordance.\n\nOnly `label` and `icon-label` are supported. Icon-only menu triggers belong\nto ButtonUnfilled so the glyph can communicate the overflow affordance."
+      },
+      "haspopup": {
+        "type": "ButtonInvertedPopup | undefined",
+        "resolvedType": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | undefined",
+        "attribute": "haspopup",
+        "required": false,
+        "mutable": false,
+        "description": "Popup type exposed to assistive technology."
+      },
+      "icon": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "icon",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Icon name passed to <ds-icon> for `icon` / `icon-label` variants."
+      },
+      "insetDepth": {
+        "type": "ControlInsetDepth",
+        "resolvedType": "\"double\" | \"single\"",
+        "attribute": "inset-depth",
+        "default": "'single'",
+        "required": false,
+        "mutable": false,
+        "description": "Single removes 4px overall; double removes 8px overall (xs stays single)."
+      },
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Disables interaction."
+      },
+      "isInset": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inset",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Use reduced outer geometry when nested inside a control of the same size."
+      },
+      "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."
+      },
+      "labelEmphasis": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "label-emphasis",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Whether the visible label uses the emphasized weight."
+      },
+      "menuAriaLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "menu-aria-label",
+        "default": "'More options'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible name for the appended menu segment in split mode."
+      },
+      "pressScale": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "press-scale",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Scale down during a physical pointer press.\nDisable when an owning composite requires fixed child or background geometry."
+      },
+      "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": "ButtonInvertedSize",
+        "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false,
+        "description": "Control density (height, padding, icon, type)."
+      },
+      "split": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "split",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Append a separate ChevronDown menu segment while preserving the inverted\nrecipe, variant, size, loading, inactive, and width treatment."
+      },
+      "surfaceOpen": {
+        "type": "boolean | undefined",
+        "resolvedType": "boolean | undefined",
+        "attribute": "surface-open",
+        "required": false,
+        "mutable": false,
+        "description": "The associated menu, picker, or panel is visible, including its exit motion.\nHolds only the pressed wash and does not set ARIA or selection state."
+      },
+      "type": {
+        "type": "'button' | 'submit' | 'reset'",
+        "resolvedType": "\"button\" | \"reset\" | \"submit\"",
+        "attribute": "type",
+        "default": "'button'",
+        "required": false,
+        "mutable": false,
+        "description": "Native button type."
+      },
+      "variant": {
+        "type": "ButtonInvertedVariant",
+        "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\nor `icon-label` for leading icon + text."
+      },
+      "width": {
+        "type": "ButtonInvertedWidth",
+        "resolvedType": "\"fill\" | \"hug\"",
+        "attribute": "width",
+        "default": "'hug'",
+        "required": false,
+        "mutable": false,
+        "description": "Width fit — hug content (default) or fill the parent."
+      }
+    },
+    "events": [
+      {
+        "name": "dsClick",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsMenuClick",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus(segment?: \"primary\" | \"menu\") => Promise<void>"
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-button-inverted",
+      "react": "DsButtonInverted",
+      "vue": "DsButtonInverted",
+      "angular": "DsButtonInverted"
+    },
+    "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-inverted.js';",
+        "example": "<ds-button-inverted></ds-button-inverted>"
+      },
+      "react": {
+        "import": "import { DsButtonInverted } from '@ds-mo/ui/react';",
+        "example": "<DsButtonInverted />"
+      },
+      "vue": {
+        "import": "import { DsButtonInverted } from '@ds-mo/ui/vue';",
+        "example": "<DsButtonInverted />"
+      },
+      "angular": {
+        "import": "import { DsButtonInverted } from '@ds-mo/ui/angular/ds-button-inverted';",
+        "example": "<ds-button-inverted></ds-button-inverted>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^7.0.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 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/ButtonInverted/ButtonInverted.css",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/button-base.css';\n@import '../../utils/button-split.css';\n\n:host {\n  --ds-button-split-divider: var(--color-inverted-border-tertiary);\n}\n\n.button-inverted {\n  background-color: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/ButtonInverted/ButtonInverted.tsx",
+      "content": "import { Component, 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 { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonInvertedVariant = ButtonVariant;\nexport type ButtonInvertedSize = ButtonSize;\nexport type ButtonInvertedWidth = ButtonWidth;\nexport type ButtonInvertedPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-inverted',\n  styleUrl: 'ButtonInverted.css',\n  scoped: true,\n})\nexport class ButtonInverted {\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonInvertedVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonInvertedSize = '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: ButtonInvertedWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Whether the visible label uses the emphasized weight. */\n  @Prop() labelEmphasis: boolean = true;\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\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  /** 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  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  /** ID of the popup this button controls. */\n  @Prop() controls: string | undefined;\n\n  /** Controlled disclosure state forwarded to aria-expanded. */\n  @Prop() expanded: boolean | undefined;\n\n  /**\n   * The associated menu, picker, or panel is visible, including its exit motion.\n   * Holds only the pressed wash and does not set ARIA or selection state.\n   */\n  @Prop() surfaceOpen: boolean | undefined;\n\n  /** Popup type exposed to assistive technology. */\n  @Prop() haspopup: ButtonInvertedPopup | undefined;\n\n  /**\n   * Append a separate ChevronDown menu segment while preserving the inverted\n   * recipe, variant, size, loading, inactive, and width treatment.\n   */\n  @Prop() split: boolean = false;\n\n  /** Accessible name for the appended menu segment in split mode. */\n  @Prop() menuAriaLabel: string = 'More options';\n\n  /**\n   * This action has a menu: implies `aria-haspopup=\"menu\"` and adds the\n   * trailing chevron that carries the affordance.\n   *\n   * Only `label` and `icon-label` are supported. Icon-only menu triggers belong\n   * to ButtonUnfilled so the glyph can communicate the overflow affordance.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsMenuClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n  private menuButtonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus(segment: 'primary' | 'menu' = 'primary') {\n    (segment === 'menu' ? this.menuButtonEl : 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  };\n\n  private handleMenuClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsMenuClick.emit(event);\n  };\n\n  private get resolvedHaspopup(): ButtonInvertedPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  private get resolvedSurfaceOpen(): boolean {\n    return (this.surfaceOpen ?? this.expanded === true) && !this.isInactive;\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  private get doubleInset(): boolean {\n    return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n  }\n\n  private buttonClass(variant: ButtonInvertedVariant, expanded: boolean): Record<string, boolean> {\n    return {\n      'button-inverted': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale && !this.split,\n      'ds-interaction-fill': !this.isInactive,\n      'ds-interaction-fill--on-inverted': true,\n      'button-inverted--expanded': expanded,\n      'ds-interaction-fill--surface-open': expanded,\n      'ds-button--expanded': expanded,\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-inverted--icon': variant === 'icon',\n      'ds-button--icon': variant === 'icon',\n      'button-inverted--label': variant === 'label',\n      'button-inverted--icon-label': variant === 'icon-label',\n      'button-inverted--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n    };\n  }\n\n  render() {\n    const primaryButton = (\n      <button\n        ref={el => {\n          this.buttonEl = el ?? null;\n        }}\n        type={this.type}\n        class={{\n          ...this.buttonClass(this.variant, !this.split && this.resolvedSurfaceOpen),\n          'ds-button-split__primary': this.split,\n        }}\n        disabled={this.isInactive}\n        aria-label={this.accessibleName}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        aria-disabled={this.isLoading ? 'true' : undefined}\n        aria-controls={this.split ? undefined : this.controls}\n        aria-expanded={\n          this.split || this.expanded === undefined ? undefined : String(this.expanded)\n        }\n        aria-haspopup={this.split ? undefined : this.resolvedHaspopup}\n        onPointerDown={event =>\n          beginElevatedControlPress(\n            event,\n            this.pressScale && !this.split && !this.isInactive && !this.isLoading\n          )\n        }\n        onClick={this.handleClick}\n      >\n        {renderButtonContent({\n          namespace: 'button-inverted',\n          variant: this.variant,\n          size: this.size,\n          label: this.label,\n          labelEmphasis: this.labelEmphasis,\n          icon: this.icon,\n          hasMenu: !this.split && this.hasMenu,\n          isLoading: this.isLoading,\n        })}\n      </button>\n    );\n\n    const control = this.split ? (\n      <div\n        class={{\n          'ds-button-split': true,\n          'ds-button-split--rounded': this.rounded,\n        }}\n      >\n        {primaryButton}\n        <span class=\"ds-button-split__divider\" aria-hidden=\"true\" />\n        <button\n          ref={el => {\n            this.menuButtonEl = el ?? null;\n          }}\n          class={{\n            ...this.buttonClass('icon', this.resolvedSurfaceOpen),\n            'ds-button-split__menu': true,\n          }}\n          type=\"button\"\n          disabled={this.isInactive || this.isLoading}\n          aria-label={this.menuAriaLabel}\n          aria-controls={this.controls}\n          aria-expanded={String(this.expanded === true)}\n          aria-haspopup=\"menu\"\n          onClick={this.handleMenuClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-inverted',\n            variant: 'icon',\n            size: this.size,\n            label: '',\n            labelEmphasis: true,\n            icon: 'ChevronDown',\n            hasMenu: false,\n            isLoading: false,\n          })}\n        </button>\n      </div>\n    ) : (\n      primaryButton\n    );\n\n    return (\n      <Host\n        class={{\n          'button-inverted-host': true,\n          'button-inverted-host--icon': this.variant === 'icon' && !this.split,\n          'ds-button-host--icon': this.variant === 'icon' && !this.split,\n          'ds-button-split-host': this.split,\n          'ds-button-split-host--primary-icon': this.split && 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        {control}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}