@ds-mo/ui 14.31.3 → 14.32.0

package/dist/components/p-eAX_M_QY.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["mobileSheetNavCss","CONTEXT_TABS","id","label","icon","variant","nextSheetId","MobileSheetNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","browseContext","dashboardGroups","settingsGroups","currentUrl","presentation","routeSelectionActive","navigationLabel","dashboardLabel","settingsLabel","accountLabel","helpLabel","showAccount","expandedParentId","instanceId","handleContextChange","event","next","detail","dsBrowseContextChange","emit","groups","selection","derivePanelNavSelectionFromUrl","flatMap","group","items","componentWillLoad","syncExpandedParent","parentId","handleOpenChange","requestAnimationFrame","selected","el","querySelector","first","focus","preventScroll","handleKeyDown","key","preventDefault","dsClose","renderItem","item","disclosure","children","length","expanded","h","type","class","undefined","String","childrenId","onClick","dsAreaSelect","name","size","color","as","emphasis","lineTruncation","dot","hasRing","encodeURIComponent","renderChild","parent","child","index","childId","disabled","isInactive","style","dsNavChildSelect","href","onKeyDown","CSS","escape","renderBranchDivider","position","renderBranch","count","hasChildren","inert","role","map","renderLogo","viewBox","fill","xmlns","focusable","d","renderHeaderDestination","side","activeFill","hasBorder","onDsClick","render","contextTabs","Host","tabs","value","width","onDsChange","filter"],"sources":["src/wc/components/MobileSheetNav/MobileSheetNav.css?tag=ds-mobile-sheet-nav&encapsulation=scoped","src/wc/components/MobileSheetNav/MobileSheetNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/nav-disclosure.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.mobile-sheet-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.mobile-sheet-nav__header {\n  position: relative;\n  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context {\n  grid-template-columns:\n    minmax(var(--dimension-size-500), 1fr)\n    minmax(0, 4fr)\n    minmax(var(--dimension-size-500), 1fr);\n}\n\n.mobile-sheet-nav__header--expanded-context .mobile-sheet-nav__context {\n  width: 100%;\n}\n\n.mobile-sheet-nav__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.mobile-sheet-nav__brand {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-width: 0;\n}\n\n.mobile-sheet-nav__logo {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__logo-mark {\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n  flex: 0 0 auto;\n}\n\n.mobile-sheet-nav__context {\n  justify-self: center;\n}\n\n.mobile-sheet-nav__actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.mobile-sheet-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.mobile-sheet-nav__sections {\n  display: grid;\n  gap: var(--dimension-space-400);\n}\n\n.mobile-sheet-nav__items {\n  display: grid;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__item {\n  appearance: none;\n  width: 100%;\n  height: var(--ds-control-height);\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  border: 0;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  cursor: default;\n  text-align: start;\n  box-sizing: border-box;\n}\n\n.mobile-sheet-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.mobile-sheet-nav__item-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.mobile-sheet-nav__dot {\n  margin-inline-start: auto;\n}\n\n.mobile-sheet-nav__children {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-height: 0;\n  overflow: hidden;\n}\n\n.mobile-sheet-nav__child {\n  flex: 0 0 var(--ds-control-height);\n  padding-inline-start: calc(\n    var(--ds-control-padding-inline) + var(--dimension-iconography-lg) + var(--ds-control-gap)\n  );\n}\n\n.mobile-sheet-nav__child:first-child {\n  margin-block-start: var(--dimension-space-100);\n}\n\n.mobile-sheet-nav__child:disabled {\n  color: var(--color-foreground-tertiary);\n}\n\n.mobile-sheet-nav__parent--muted {\n  color: var(--color-foreground-secondary);\n}\n\n.mobile-sheet-nav__divider-line {\n  display: block;\n  height: var(--dimension-stroke-width-012);\n  margin-inline: var(--dimension-space-100);\n  background: var(--color-border-tertiary);\n}\n\n.mobile-sheet-nav__divider--before .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-050) var(--dimension-space-150);\n}\n\n.mobile-sheet-nav__divider--after .mobile-sheet-nav__divider-line {\n  margin-block: var(--dimension-space-150) var(--dimension-space-050);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { derivePanelNavSelectionFromUrl } from '../PanelNav/panel-nav-utils';\nimport type {\n  PanelNavChildItem,\n  PanelNavChildSelectDetail,\n  PanelNavGroup,\n  PanelNavItem,\n  PanelNavPresentation,\n} from '../PanelNav/panel-nav-types';\n\ntype MobileSheetNavHeaderDestinationId = 'account' | 'help';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard', variant: 'icon' as const },\n  { id: 'settings', label: 'Settings', icon: 'Gear', variant: 'icon' as const },\n];\nlet nextSheetId = 0;\n\n@Component({\n  tag: 'ds-mobile-sheet-nav',\n  styleUrl: 'MobileSheetNav.css',\n  scoped: true,\n})\nexport class MobileSheetNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  /** Flat area navigation or inline disclosure of each area's child routes. */\n  @Prop() presentation: PanelNavPresentation = 'flat';\n  /** Whether the router-derived current area owns the active mobile stage. */\n  @Prop() routeSelectionActive: boolean = true;\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n  /** Show the optional Account shortcut in the sheet header. */\n  @Prop() showAccount: boolean = true;\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  /** Selecting a child requests routing; expanding its parent never navigates. */\n  @Event() dsNavChildSelect!: EventEmitter<PanelNavChildSelectDetail>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsClose!: EventEmitter<void>;\n  @State() private expandedParentId = '';\n  private readonly instanceId = nextSheetId++;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get selection() {\n    return derivePanelNavSelectionFromUrl(\n      this.routeSelectionActive ? this.currentUrl : '',\n      this.groups.flatMap(group => group.items)\n    );\n  }\n\n  componentWillLoad() {\n    this.syncExpandedParent();\n  }\n\n  @Watch('presentation')\n  @Watch('currentUrl')\n  @Watch('browseContext')\n  @Watch('routeSelectionActive')\n  syncExpandedParent() {\n    this.expandedParentId = this.presentation === 'nested' ? this.selection.parentId : '';\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    this.syncExpandedParent();\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.mobile-sheet-nav__item:not(:disabled)');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private renderItem(item: PanelNavItem) {\n    const selected = item.id === this.selection.parentId;\n    const disclosure = this.presentation === 'nested' && !!item.children?.length;\n    const expanded = disclosure && item.id === this.expandedParentId;\n    return (\n      <button\n        id={this.parentId(item.id)}\n        type=\"button\"\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'mobile-sheet-nav__parent--muted':\n            this.presentation === 'nested' &&\n            this.expandedParentId !== '' &&\n            this.expandedParentId !== item.id,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-current={selected && !disclosure ? 'page' : undefined}\n        aria-expanded={disclosure ? String(expanded) : undefined}\n        aria-controls={disclosure ? this.childrenId(item.id) : undefined}\n        onClick={() =>\n          disclosure\n            ? (this.expandedParentId = expanded ? '' : item.id)\n            : this.dsAreaSelect.emit(item.id)\n        }\n      >\n        <ds-icon class=\"ds-interaction-fill__content\" name={item.icon} size=\"lg\" color=\"inherit\" />\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {item.label}\n        </ds-text>\n        {item.dot && (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </button>\n    );\n  }\n\n  private parentId(id: string) {\n    return `mobile-sheet-${this.instanceId}-${encodeURIComponent(id)}`;\n  }\n  private childrenId(id: string) {\n    return `${this.parentId(id)}-children`;\n  }\n\n  private renderChild(parent: PanelNavItem, child: PanelNavChildItem, index: number) {\n    const selected = parent.id === this.selection.parentId && child.id === this.selection.childId;\n    return (\n      <button\n        type=\"button\"\n        disabled={child.isInactive}\n        class={{\n          'mobile-sheet-nav__item': true,\n          'mobile-sheet-nav__child': true,\n          'mobile-sheet-nav__item--selected': selected,\n          'ds-nav-disclosure__item': true,\n          'ds-control--lg': true,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        style={{\n          '--ds-nav-disclosure-index': String(index),\n          '--ds-nav-disclosure-reverse-index': String((parent.children?.length ?? 0) - index - 1),\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => {\n          if (!child.isInactive)\n            this.dsNavChildSelect.emit({\n              parentId: parent.id,\n              childId: child.id,\n              href: child.href,\n            });\n        }}\n        onKeyDown={(event: KeyboardEvent) => {\n          if (event.key === 'ArrowLeft') {\n            event.preventDefault();\n            this.expandedParentId = '';\n            this.el.querySelector<HTMLElement>(`#${CSS.escape(this.parentId(parent.id))}`)?.focus();\n          }\n        }}\n      >\n        <ds-text\n          class=\"mobile-sheet-nav__item-label ds-interaction-fill__content\"\n          as=\"span\"\n          variant=\"text-body-large\"\n          emphasis={selected}\n          color=\"inherit\"\n          lineTruncation={1}\n        >\n          {child.label}\n        </ds-text>\n        {child.dot ? (\n          <ds-badge\n            class=\"mobile-sheet-nav__dot ds-interaction-fill__content\"\n            variant=\"dot\"\n            hasRing={false}\n            label=\"\"\n            aria-hidden=\"true\"\n          />\n        ) : null}\n      </button>\n    );\n  }\n\n  private renderBranchDivider(position: 'before' | 'after', expanded: boolean) {\n    return (\n      <div\n        class={{\n          'ds-nav-disclosure-divider': true,\n          'ds-nav-disclosure-divider--open': expanded,\n          'mobile-sheet-nav__divider': true,\n          [`mobile-sheet-nav__divider--${position}`]: true,\n        }}\n        aria-hidden=\"true\"\n      >\n        <div class=\"ds-nav-disclosure-divider__clip\">\n          <span class=\"mobile-sheet-nav__divider-line\" />\n        </div>\n      </div>\n    );\n  }\n\n  private renderBranch(item: PanelNavItem, index: number, count: number) {\n    const hasChildren = this.presentation === 'nested' && !!item.children?.length;\n    const expanded = hasChildren && this.expandedParentId === item.id;\n    return (\n      <div key={item.id} class=\"mobile-sheet-nav__branch\">\n        {hasChildren && index > 0 ? this.renderBranchDivider('before', expanded) : null}\n        {this.renderItem(item)}\n        {this.presentation === 'nested' && item.children?.length ? (\n          <div\n            class={{ 'ds-nav-disclosure': true, 'ds-nav-disclosure--open': expanded }}\n            inert={!expanded ? true : undefined}\n            aria-hidden={!expanded ? 'true' : undefined}\n          >\n            <div\n              class=\"mobile-sheet-nav__children\"\n              id={this.childrenId(item.id)}\n              role=\"group\"\n              aria-labelledby={this.parentId(item.id)}\n            >\n              {item.children.map((child, index) => this.renderChild(item, child, index))}\n            </div>\n          </div>\n        ) : null}\n        {hasChildren && index < count - 1 ? this.renderBranchDivider('after', expanded) : null}\n      </div>\n    );\n  }\n\n  private renderLogo() {\n    return (\n      <span class=\"mobile-sheet-nav__logo\" aria-hidden=\"true\">\n        {/* eslint-disable-next-line local/prefer-ds-icon -- Motive brand mark is not part of the IcoMo runtime catalog. */}\n        <svg\n          class=\"mobile-sheet-nav__logo-mark\"\n          viewBox=\"0 0 20 20\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          focusable=\"false\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n  }\n\n  private renderHeaderDestination(\n    id: MobileSheetNavHeaderDestinationId,\n    icon: string,\n    label: string\n  ) {\n    return (\n      <ds-tooltip label={label} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          variant=\"icon\"\n          size=\"lg\"\n          icon={icon}\n          aria-label={label}\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={() => this.dsAreaSelect.emit(id)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section id=\"ds-mobile-sheet-nav\" class=\"mobile-sheet-nav\">\n          <header\n            class={{\n              'mobile-sheet-nav__header': true,\n              'mobile-sheet-nav__header--expanded-context': !this.showAccount,\n              'ds-chrome-grid': true,\n              'ds-chrome-space--md': true,\n            }}\n          >\n            <div class=\"mobile-sheet-nav__brand\">{this.renderLogo()}</div>\n            <ds-tab-group\n              class=\"mobile-sheet-nav__context\"\n              tabs={contextTabs}\n              value={this.browseContext}\n              size=\"lg\"\n              width={this.showAccount ? 'hug' : 'fill'}\n              aria-label=\"Browse context\"\n              onDsChange={this.handleContextChange}\n            />\n            <div class=\"mobile-sheet-nav__actions\">\n              {this.renderHeaderDestination('help', 'CircleQuestion', this.helpLabel)}\n              {this.showAccount\n                ? this.renderHeaderDestination('account', 'Avatar', this.accountLabel)\n                : null}\n            </div>\n          </header>\n\n          <nav\n            class=\"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md\"\n            aria-label={this.navigationLabel}\n          >\n            <div class=\"mobile-sheet-nav__sections\">\n              {this.groups\n                .filter(group => group.items.length > 0)\n                .map(group => (\n                  <div class=\"mobile-sheet-nav__items\">\n                    {group.items.map((item, index) =>\n                      this.renderBranch(item, index, group.items.length)\n                    )}\n                  </div>\n                ))}\n            </div>\n          </nav>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-eaCtnww1.js

@@ -1,2 +0,0 @@
-import{p as i,H as o,c as s,h as n,a as e,t as r}from"./index.js";import{d as c}from"./p-Cea7rROU.js";import{d as t}from"./p-B9oadFSC.js";import{C as d}from"./p-CuwopElg.js";const a=()=>`.ds-control--lg.sc-ds-chip,.ds-control--lg.sc-ds-chip-h,.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip,.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip,.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chip-h,.ds-control--lg.sc-ds-chip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-chip-h::after,.ds-interaction-fill--grouped.sc-ds-chip::after,.ds-interaction-fill--grouped.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-chip-h,.ds-interaction-fill--grouped.sc-ds-chip{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chip-h,.ds-interaction-fill--on-faint.sc-ds-chip{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chip-h,.ds-interaction-fill--on-translucent.sc-ds-chip{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chip-h,.ds-interaction-fill--on-inverted.sc-ds-chip{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chip-h,.ds-interaction-fill--on-media.sc-ds-chip{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chip-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-chip:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-chip-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-chip:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-chip-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chip-h,.ds-focus-ring.sc-ds-chip,.ds-focus-ring-inset.sc-ds-chip-h,.ds-focus-ring-inset.sc-ds-chip{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chip-h:focus-visible,.ds-focus-ring.sc-ds-chip:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible,.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chip:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chip-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chip:root,.sc-ds-chip-h,.ds-forced-colors-scope.sc-ds-chip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag__label.sc-ds-chip{position:relative;z-index:2;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.ds-control--lg.ds-control--inset.sc-ds-chip-h,.ds-control--lg.ds-control--inset.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-chip-h,.ds-control--md.ds-control--inset.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-chip-h,.ds-control--sm.ds-control--inset.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-chip-h,.ds-control--xs.ds-control--inset.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-chip-h,.ds-control--lg.ds-control--inset-double.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-chip-h,.ds-control--md.ds-control--inset-double.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-chip-h,.ds-control--sm.ds-control--inset-double.sc-ds-chip{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag__remove.sc-ds-chip{--ds-chip-remove-size:var(--ds-control-height);padding:0;margin:0;border:none;box-sizing:border-box;background:none;display:flex;align-items:center;justify-content:center;width:var(--ds-chip-remove-size);height:var(--ds-chip-remove-size);cursor:default;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.ds-control--inset.sc-ds-chip-h .tag__remove.sc-ds-chip{--ds-chip-remove-size:calc(var(--ds-control-height) - var(--dimension-space-050))}.ds-control--inset.sc-ds-chip-h{padding-inline-end:var(--dimension-space-025)}.ds-control--inset-double.sc-ds-chip-h .tag__remove.sc-ds-chip{--ds-chip-remove-size:calc(var(--ds-control-height) - var(--dimension-space-100))}.ds-control--inset-double.sc-ds-chip-h{padding-inline-end:var(--dimension-space-050)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}@media (hover: hover) and (pointer: fine){.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}`;const l={md:"md",sm:"sm",xs:"xs"};const h=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsRemove=s(this,"dsRemove",7);this.state="default";this.size="md";this.isInset=false;this.insetDepth="single";this.rounded=false;this.isInactive=false;this.removeLabel="Remove {label}";this.handleRemove=i=>{i.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const i=d[this.size];const o=l[this.size];const s=this.isInset&&this.insetDepth==="double"&&this.size!=="xs";const r=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return n(e,{key:"062a2451b3a7e391fc758dd7d45a901f985c60d5",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","ds-control--inset":this.isInset&&!s,"ds-control--inset-double":s,"tag--rounded":this.rounded,"tag--removable":true,"ds-interaction-fill":!this.isInactive,"ds-control-inactive":this.isInactive},style:r,"aria-disabled":this.isInactive?"true":undefined},n("ds-text",{key:"0c2206d8b89191d10f7e373c7e985041d36cb9aa",class:"tag__label",as:"span",variant:i,color:"inherit"},this.label),n("button",{key:"b44393fd7fe25186aa784316d53390bc7da2f9bd",type:"button",class:{tag__remove:true,"ds-focus-ring-inset":true},onClick:this.handleRemove,"aria-label":this.removeLabel.replace("{label}",this.label),disabled:this.isInactive||undefined},n("ds-icon",{key:"39506d863dc14680b935b4b0c8c8642b12776336",class:"tag__remove-x",name:"Cross",size:o,color:"inherit"})))}static get style(){return a()}},[2,"ds-chip",{label:[1],state:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],rounded:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],removeLabel:[1,"remove-label"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-chip","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-chip":if(!customElements.get(r(i))){customElements.define(r(i),h)}break;case"ds-icon":if(!customElements.get(r(i))){c()}break;case"ds-text":if(!customElements.get(r(i))){t()}break}}))}v();export{h as C,v as d};
-//# sourceMappingURL=p-eaCtnww1.js.map

package/dist/components/p-eaCtnww1.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","ICON_SIZE","md","sm","xs","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","isInset","insetDepth","rounded","isInactive","removeLabel","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","doubleInset","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","style","as","variant","color","label","type","tag__remove","onClick","replace","disabled","name"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../../utils/tag-chip.css';\n@import '../../utils/control-density-inset.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  --ds-chip-remove-size: var(--ds-control-height);\n\n  padding: 0;\n  margin: 0;\n  border: none;\n  box-sizing: border-box;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ds-chip-remove-size);\n  height: var(--ds-chip-remove-size);\n  cursor: default;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n/* The dismiss action nests inside the already-inset chip, so its reduction is additive. */\n:host(.ds-control--inset) .tag__remove {\n  --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-050));\n}\n\n:host(.ds-control--inset) {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n:host(.ds-control--inset-double) .tag__remove {\n  --ds-chip-remove-size: calc(var(--ds-control-height) - var(--dimension-space-100));\n}\n\n:host(.ds-control--inset-double) {\n  padding-inline-end: var(--dimension-space-050);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .tag__remove:hover::before {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT, type ControlInsetDepth } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const doubleInset = this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n\n    const maxWidthStyle =\n      this.maxWidth != null\n        ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n        : undefined;\n\n    return (\n      <Host\n        class={{\n          tag: true,\n          chip: true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\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 && !doubleInset,\n          'ds-control--inset-double': doubleInset,\n          'tag--rounded': this.rounded,\n          'tag--removable': true,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive,\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        <button\n          type=\"button\"\n          class={{\n            tag__remove: true,\n            'ds-focus-ring-inset': true,\n          }}\n          onClick={this.handleRemove}\n          aria-label={this.removeLabel.replace('{label}', this.label)}\n          disabled={this.isInactive || undefined}\n        >\n          <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAU,IAAM,k/hBCctB,MAAMC,EAAkD,CACtDC,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,+EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KAEjBF,KAAAG,QAAmB,MAEnBH,KAAAI,WAAgC,SAChCJ,KAAAK,QAAmB,MAEnBL,KAAAM,WAAsB,MAEtBN,KAAAO,YAAsB,iBAKtBP,KAAAQ,aAAgBC,IACtBA,EAAEC,kBACF,GAAIV,KAAKM,WAAY,OACrBN,KAAKW,SAASC,MAAM,CAoDvB,CAjDC,MAAAC,GACE,MAAMC,EAAcC,EAAqBf,KAAKE,MAC9C,MAAMc,EAAWzB,EAAUS,KAAKE,MAChC,MAAMe,EAAcjB,KAAKG,SAAWH,KAAKI,aAAe,UAAYJ,KAAKE,OAAS,KAElF,MAAMgB,EACJlB,KAAKmB,UAAY,KACb,CAAEA,gBAAiBnB,KAAKmB,WAAa,SAAW,GAAGnB,KAAKmB,aAAenB,KAAKmB,UAC5EC,UAEN,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAK,KACLC,KAAM,KACN,CAAC,SAAS1B,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYc,EACtC,2BAA4BA,EAC5B,eAAgBjB,KAAKK,QACrB,iBAAkB,KAElB,uBAAwBL,KAAKM,WAC7B,sBAAuBN,KAAKM,YAE9BqB,MAAOT,EAAa,gBACLlB,KAAKM,WAAa,OAASc,WAE1CC,EAAA,WAAAE,IAAA,2CAASC,MAAM,aAAaI,GAAG,OAAOC,QAASf,EAAagB,MAAM,WAC/D9B,KAAK+B,OAERV,EAAA,UAAAE,IAAA,2CACES,KAAK,SACLR,MAAO,CACLS,YAAa,KACb,sBAAuB,MAEzBC,QAASlC,KAAKQ,aAAY,aACdR,KAAKO,YAAY4B,QAAQ,UAAWnC,KAAK+B,OACrDK,SAAUpC,KAAKM,YAAcc,WAE7BC,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBa,KAAK,QAAQnC,KAAMc,EAAUc,MAAM,a","ignoreList":[]}