@ds-mo/ui 14.6.0 → 14.8.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","width","label","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","hasMenu","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","undefined","dsChange","setFocus","focus","showDot","resolvedHaspopup","haspopup","doubleInset","expandedPopup","expanded","visuallyActive","dotRing","accessibleName","render","bg","background","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n\n:host {\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n.button-unfilled {\n  background: transparent;\n  color: var(--ds-button-unfilled-fg);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active foreground changes remain independent from popup-open pressed paint. */\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle without\n * promoting the resting foreground or selected fill.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","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"],"mappings":"4RAAA,MAAMA,EAAoB,IAAM,ymuB,MCgCnBC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4GAYUC,KAAAC,QAAiC,QAGjCD,KAAAE,KAA2B,KAG3BF,KAAAG,QAAmB,MAGnBH,KAAAI,WAAgC,SAGhCJ,KAAAK,MAA6B,MAG7BL,KAAAM,MAAgB,GAGhBN,KAAAO,KAAe,GAMfP,KAAAQ,SAAoB,MAOpBR,KAAAS,WAAsB,KAGtBT,KAAAU,UAAqB,KAGrBV,KAAAW,QAAmB,MAMnBX,KAAAY,WAAsB,KAGtBZ,KAAAa,IAAe,MAGfb,KAAAc,WAAsB,MAGtBd,KAAAe,UAAqB,MAGrBf,KAAAgB,KAAsC,SAMXhB,KAAAiB,UAA2B,KA0BtDjB,KAAAkB,QAAmB,MAWnBlB,KAAAmB,SAAqC,KAOrCnB,KAAAoB,YAAeC,IACrB,GAAIrB,KAAKc,YAAcd,KAAKe,UAAW,CACrCM,EAAMC,iBACND,EAAME,kBACN,M,CAEFvB,KAAKwB,QAAQC,KAAKJ,GAClB,GAAIrB,KAAK0B,UAAYC,UAAW3B,KAAK4B,SAASH,MAAMzB,KAAK0B,QAAQ,CA+IpE,CA1JC,cAAMG,GACJ7B,KAAKmB,UAAUW,O,CAajB,WAAYC,GACV,OAAO/B,KAAKC,UAAY,QAAUD,KAAKa,MAAQb,KAAKe,S,CAGtD,oBAAYiB,GACV,OAAOhC,KAAKiC,WAAajC,KAAKkB,QAAU,OAASS,U,CAGnD,eAAYO,GACV,OAAOlC,KAAKG,SAAWH,KAAKI,aAAe,UAAYJ,KAAKE,OAAS,I,CAIvE,iBAAYiC,GACV,OAAOnC,KAAKoC,WAAa,MAAQpC,KAAKgC,mBAAqBL,YAAc3B,KAAKc,U,CAGhF,kBAAYuB,GACV,OAAOrC,KAAKQ,UAAYR,KAAK0B,UAAY,I,CAI3C,WAAYY,GACV,IAAKtC,KAAKQ,UAAYR,KAAK0B,UAAY,OAAS1B,KAAKS,WAAY,CAC/D,MAAO,8B,CAET,MAAO,oC,CAGT,kBAAY8B,GACV,GAAIvC,KAAKiB,UAAW,OAAOjB,KAAKiB,UAChC,GAAIjB,KAAKe,WAAaf,KAAKC,UAAY,SAAWD,KAAKM,MAAO,OAAON,KAAKM,MAC1E,OAAOqB,S,CAGT,MAAAa,GACE,MAAMC,EAAKzC,KAAK0C,WAChB,MAAMC,EAA+B,CACnC,kBAAmB,KACnB,YAAa,KACb,sBAAuB,KACvB,yBAA0B3C,KAAKY,WAC/B,sBAAuB,KACvB,iCACGZ,KAAKQ,UAAYR,KAAK0B,UAAY,OACnC1B,KAAKS,aACJT,KAAKc,WACR,gCAAiC2B,IAAO,QACxC,iCAAkCA,IAAO,SACzC,+BAAgCA,IAAO,OACvC,iCAAkCA,IAAO,SACzC,sCAAuCA,IAAO,cAC9C,mCAAoCA,IAAO,WAC3C,gCAAiCA,IAAO,QACxC,sCAAuCA,IAAO,cAC9C,0BAA2BzC,KAAKqC,eAChC,4BAA6BrC,KAAKmC,cAClC,sBAAuBnC,KAAKmC,cAC5B,4BAA6BnC,KAAKU,UAClC,sBAAuBV,KAAKU,UAC5B,2BAA4BV,KAAKW,QACjC,qBAAsBX,KAAKW,QAC3B,sBAAuBX,KAAKc,WAC5B,iBAAkBd,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKkC,YAC3C,2BAA4BlC,KAAKkC,YACjC,mBAAoB,KACpB,wBAAyBlC,KAAKC,UAAY,OAC1C,kBAAmBD,KAAKC,UAAY,OACpC,yBAA0BD,KAAKC,UAAY,QAC3C,8BAA+BD,KAAKC,UAAY,aAChD,oCAAqCwC,IAAO,QAC5C,qCAAsCA,IAAO,SAC7C,mCAAoCA,IAAO,OAC3C,qCAAsCA,IAAO,SAC7C,0CAA2CA,IAAO,cAClD,uCAAwCA,IAAO,WAC/C,oCAAqCA,IAAO,QAC5C,kCAAmCA,IAAO,eAG5C,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,uBAAwB,KACxB,6BAA8B/C,KAAKC,UAAY,OAC/C,uBAAwBD,KAAKC,UAAY,OACzC,iBAAkBD,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,oBAAqBF,KAAKG,UAAYH,KAAKkC,YAC3C,2BAA4BlC,KAAKkC,eAC9Bc,EAAkBhD,KAAKK,QAE5B4C,UAAU,GAEVL,EAAA,UAAAE,IAAA,2CACEI,IAAKC,IACHnD,KAAKmB,SAAWgC,GAAM,IAAI,EAE5BnC,KAAMhB,KAAKgB,KACX+B,MAAOJ,EACPS,SAAUpD,KAAKc,WACfmC,SAAUjD,KAAKqD,eAAiB,EAAC,aACrBrD,KAAKuC,eAAc,YACpBvC,KAAKe,UAAY,OAASY,UAAS,gBAC/B3B,KAAKe,UAAY,OAASY,UAAS,gBACnC3B,KAAKsD,SAAQ,gBACbtD,KAAKoC,WAAaT,UAAYA,UAAY4B,OAAOvD,KAAKoC,UAAS,gBAC/DpC,KAAKgC,iBAAgB,eACtBhC,KAAK0B,UAAYC,UAAYA,UAAY4B,OAAOvD,KAAK0B,SACnE8B,cAAenC,GACboC,EACEpC,EACArB,KAAKY,aAAeZ,KAAKc,aAAed,KAAKe,WAGjD2C,QAAS1D,KAAKoB,aAEbuC,EAAoB,CACnBC,UAAW,kBACX3D,QAASD,KAAKC,QACdC,KAAMF,KAAKE,KACXI,MAAON,KAAKM,MACZC,KAAMP,KAAKO,KACXW,QAASlB,KAAKkB,QACdH,UAAWf,KAAKe,UAChBF,IAAK,CACHgD,QAAS7D,KAAK+B,QACdW,WAAY1C,KAAKsC,Y","ignoreList":[]}

package/dist/components/p-tR8INOIN.js

@@ -1,2 +0,0 @@
-import{h as e}from"./index.js";import{C as o,a as s}from"./p-CuwopElg.js";const t={lg:"md",md:"sm",sm:"xs",xs:"xs"};const a=({size:s="md",value:a,placeholder:n,ariaLabel:c,controls:i,activeDescendant:l,disabled:r=false,inputRef:d,clearLabel:u,onValueChange:m,onClear:f,onKeyDown:p})=>{let v=null;return e("div",{class:"select-search"},e("div",{class:`select-search__control ds-control--${s}`},e("ds-icon",{name:"MagnifyingGlass",size:s,color:"inherit"}),e("input",{class:`ds-text--${o[s].replace("text-","")} ds-text--regular`,ref:e=>{v=e??null;d(v)},type:"search",value:a,placeholder:n,disabled:r,"aria-label":c??n,"aria-controls":i,"aria-activedescendant":l,onInput:e=>m(e.target.value),onKeyDown:p}),a&&!r&&e("ds-tooltip",{class:"select-search__clear-tooltip",label:u,side:"top",size:"sm"},e("ds-button-unfilled",{class:"select-search__clear",variant:"icon",size:t[s],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:u,onDsChange:e=>e.stopPropagation(),onDsClick:()=>{m("");f?.();requestAnimationFrame((()=>v?.focus()))}}))))};const n=({size:s="md",clearLabel:t,summary:a,compactSummary:n,useCompactSummary:c=false,contentRef:i,summaryMeasureRef:l,clearRef:r,onClear:d})=>e("div",{class:"ds-choice-footer"},e("div",{ref:e=>i?.(e??null),class:`ds-choice-footer__content ds-control--${s}`},a&&[e("ds-text",{key:"summary",class:"ds-choice-footer__summary",as:"span",variant:o[s],color:"secondary"},c?n??a:a),e("ds-text",{key:"summary-measure",ref:e=>l?.(e??null),class:"ds-choice-footer__summary-measure",as:"span",variant:o[s],color:"secondary","aria-hidden":"true"},a)],e("button",{ref:e=>r?.(e??null),type:"button",class:"ds-choice-footer__clear ds-text-action ds-focus-ring",onClick:d},e("ds-text",{as:"span",variant:o[s],color:"inherit"},t))));const c=({size:s="md",label:t,onAction:a})=>e("div",{class:"ds-choice-footer"},e("div",{class:`ds-choice-footer__content ds-control--${s}`},e("button",{type:"button",class:"ds-choice-footer__action ds-text-action ds-focus-ring",onClick:a},e("ds-text",{as:"span",variant:o[s],color:"inherit"},t))));const i=({size:t="md",id:a,option:n,selected:c,active:i,focusRingVisible:l,usesSubtext:r,leading:d,action:u,actionOpen:m=false,popupRole:f="listbox",tabIndex:p,onFocus:v,onKeyDown:b,onHover:_,onSelect:h})=>{const y=f==="grid";return e("div",{id:y?a:undefined,role:y?"row":undefined,"aria-selected":y?String(c):undefined,"aria-disabled":y&&n.isInactive?"true":undefined,class:{"select-option-row":true,"select-option-row--has-action":!!u,"select-option-row--action-open":m,"select-option-row--keyboard-active":!!u&&i&&l}},e("div",{id:y?undefined:a,class:{"select-option":true,"ds-choice-item":true,"ds-control-frame":true,[`ds-control--${t}`]:true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":i&&l,"ds-interaction-fill":!n.isInactive,"ds-interaction-fill--selected":c&&!n.isInactive,"ds-control-inactive":!!n.isInactive,"select-option--active":i},role:y?"gridcell":"option",tabIndex:p,"aria-selected":y?undefined:String(c),"aria-disabled":!y&&n.isInactive?"true":undefined,onMouseDown:e=>e.preventDefault(),onFocus:v,onKeyDown:b,onMouseMove:()=>{if(!n.isInactive)_()},onClick:h},d,e("div",{class:"ds-choice-item__content ds-interaction-fill__content"},e("ds-text",{class:"ds-choice-item__label ds-control-label-box",as:"span",variant:o[t],color:c?"primary":"secondary"},n.label),r&&e("ds-text",{class:"ds-choice-item__subtext ds-control-label-box",as:"span",variant:s[t],color:"secondary"},n.subtext?.trim()||"—"))),u&&e("div",{class:"select-option-row__action ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale",role:y?"gridcell":undefined},u))};export{i as C,a,c as b,n as c};
-//# sourceMappingURL=p-tR8INOIN.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["INSET_ACTION_SIZE","lg","md","sm","xs","ChoiceSearch","size","value","placeholder","ariaLabel","controls","activeDescendant","disabled","inputRef","clearLabel","onValueChange","onClear","onKeyDown","inputElement","h","class","name","color","CONTROL_TEXT_VARIANT","replace","ref","element","type","onInput","event","target","label","side","variant","icon","hasBorder","rounded","onDsChange","stopPropagation","onDsClick","requestAnimationFrame","focus","ChoiceFooter","summary","compactSummary","useCompactSummary","contentRef","summaryMeasureRef","clearRef","key","as","onClick","ChoiceActionFooter","onAction","ChoiceOptionRow","id","option","selected","active","focusRingVisible","usesSubtext","leading","action","actionOpen","popupRole","tabIndex","onFocus","onHover","onSelect","grid","undefined","role","String","isInactive","onMouseDown","preventDefault","onMouseMove","CONTROL_SUPPORTING_TEXT_VARIANT","subtext","trim"],"sources":["src/wc/utils/choice-list-parts.tsx"],"sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport type { ChoiceOption } from './choice-list';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  type ControlSize,\n} from './control-text';\n\nconst INSET_ACTION_SIZE: Record<ControlSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\ninterface ChoiceSearchProps {\n  size?: ControlSize;\n  value: string;\n  placeholder: string;\n  ariaLabel?: string;\n  controls?: string;\n  activeDescendant?: string;\n  disabled?: boolean;\n  inputRef: (element: HTMLInputElement | null) => void;\n  clearLabel: string;\n  onValueChange: (value: string) => void;\n  onClear?: () => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n}\n\nexport const ChoiceSearch: FunctionalComponent<ChoiceSearchProps> = ({\n  size = 'md',\n  value,\n  placeholder,\n  ariaLabel,\n  controls,\n  activeDescendant,\n  disabled = false,\n  inputRef,\n  clearLabel,\n  onValueChange,\n  onClear,\n  onKeyDown,\n}) => {\n  let inputElement: HTMLInputElement | null = null;\n\n  return (\n    <div class=\"select-search\">\n      <div class={`select-search__control ds-control--${size}`}>\n        <ds-icon name=\"MagnifyingGlass\" size={size} color=\"inherit\" />\n        <input\n          class={`ds-text--${CONTROL_TEXT_VARIANT[size].replace('text-', '')} ds-text--regular`}\n          ref={element => {\n            inputElement = (element as HTMLInputElement) ?? null;\n            inputRef(inputElement);\n          }}\n          type=\"search\"\n          value={value}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-label={ariaLabel ?? placeholder}\n          aria-controls={controls}\n          aria-activedescendant={activeDescendant}\n          onInput={event => onValueChange((event.target as HTMLInputElement).value)}\n          onKeyDown={onKeyDown}\n        />\n        {value && !disabled && (\n          <ds-tooltip\n            class=\"select-search__clear-tooltip\"\n            label={clearLabel}\n            side=\"top\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              class=\"select-search__clear\"\n              variant=\"icon\"\n              size={INSET_ACTION_SIZE[size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={clearLabel}\n              onDsChange={event => event.stopPropagation()}\n              onDsClick={() => {\n                onValueChange('');\n                onClear?.();\n                requestAnimationFrame(() => inputElement?.focus());\n              }}\n            />\n          </ds-tooltip>\n        )}\n      </div>\n    </div>\n  );\n};\n\ninterface ChoiceFooterProps {\n  size?: ControlSize;\n  clearLabel: string;\n  summary?: string;\n  compactSummary?: string;\n  useCompactSummary?: boolean;\n  contentRef?: (element: HTMLDivElement | null) => void;\n  summaryMeasureRef?: (element: HTMLElement | null) => void;\n  clearRef?: (element: HTMLButtonElement | null) => void;\n  onClear: (event: MouseEvent) => void;\n}\n\nexport const ChoiceFooter: FunctionalComponent<ChoiceFooterProps> = ({\n  size = 'md',\n  clearLabel,\n  summary,\n  compactSummary,\n  useCompactSummary = false,\n  contentRef,\n  summaryMeasureRef,\n  clearRef,\n  onClear,\n}) => (\n  <div class=\"ds-choice-footer\">\n    <div\n      ref={element => contentRef?.((element as HTMLDivElement) ?? null)}\n      class={`ds-choice-footer__content ds-control--${size}`}\n    >\n      {summary && [\n        <ds-text\n          key=\"summary\"\n          class=\"ds-choice-footer__summary\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT[size]}\n          color=\"secondary\"\n        >\n          {useCompactSummary ? compactSummary ?? summary : summary}\n        </ds-text>,\n        <ds-text\n          key=\"summary-measure\"\n          ref={element => summaryMeasureRef?.((element as HTMLElement) ?? null)}\n          class=\"ds-choice-footer__summary-measure\"\n          as=\"span\"\n          variant={CONTROL_TEXT_VARIANT[size]}\n          color=\"secondary\"\n          aria-hidden=\"true\"\n        >\n          {summary}\n        </ds-text>,\n      ]}\n      <button\n        ref={element => clearRef?.((element as HTMLButtonElement) ?? null)}\n        type=\"button\"\n        class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n        onClick={onClear}\n      >\n        <ds-text as=\"span\" variant={CONTROL_TEXT_VARIANT[size]} color=\"inherit\">\n          {clearLabel}\n        </ds-text>\n      </button>\n    </div>\n  </div>\n);\n\ninterface ChoiceActionFooterProps {\n  size?: ControlSize;\n  label: string;\n  onAction: (event: MouseEvent) => void;\n}\n\nexport const ChoiceActionFooter: FunctionalComponent<ChoiceActionFooterProps> = ({\n  size = 'md',\n  label,\n  onAction,\n}) => (\n  <div class=\"ds-choice-footer\">\n    <div class={`ds-choice-footer__content ds-control--${size}`}>\n      <button\n        type=\"button\"\n        class=\"ds-choice-footer__action ds-text-action ds-focus-ring\"\n        onClick={onAction}\n      >\n        <ds-text as=\"span\" variant={CONTROL_TEXT_VARIANT[size]} color=\"inherit\">\n          {label}\n        </ds-text>\n      </button>\n    </div>\n  </div>\n);\n\ninterface ChoiceOptionRowProps {\n  size?: ControlSize;\n  id: string;\n  option: ChoiceOption;\n  selected: boolean;\n  active: boolean;\n  focusRingVisible: boolean;\n  usesSubtext: boolean;\n  leading?: VNode;\n  action?: VNode;\n  actionOpen?: boolean;\n  popupRole?: 'listbox' | 'grid';\n  tabIndex?: number;\n  onFocus?: () => void;\n  onKeyDown?: (event: KeyboardEvent) => void;\n  onHover: () => void;\n  onSelect: () => void;\n}\n\nexport const ChoiceOptionRow: FunctionalComponent<ChoiceOptionRowProps> = ({\n  size = 'md',\n  id,\n  option,\n  selected,\n  active,\n  focusRingVisible,\n  usesSubtext,\n  leading,\n  action,\n  actionOpen = false,\n  popupRole = 'listbox',\n  tabIndex,\n  onFocus,\n  onKeyDown,\n  onHover,\n  onSelect,\n}) => {\n  const grid = popupRole === 'grid';\n  return (\n    <div\n      id={grid ? id : undefined}\n      role={grid ? 'row' : undefined}\n      aria-selected={grid ? String(selected) : undefined}\n      aria-disabled={grid && option.isInactive ? 'true' : undefined}\n      class={{\n        'select-option-row': true,\n        'select-option-row--has-action': !!action,\n        'select-option-row--action-open': actionOpen,\n        'select-option-row--keyboard-active': !!action && active && focusRingVisible,\n      }}\n    >\n      <div\n        id={grid ? undefined : id}\n        class={{\n          'select-option': true,\n          'ds-choice-item': true,\n          'ds-control-frame': true,\n          [`ds-control--${size}`]: true,\n          'ds-focus-ring-inset': true,\n          'ds-focus-ring--visible': active && focusRingVisible,\n          'ds-interaction-fill': !option.isInactive,\n          'ds-interaction-fill--selected': selected && !option.isInactive,\n          'ds-control-inactive': !!option.isInactive,\n          'select-option--active': active,\n        }}\n        role={grid ? 'gridcell' : 'option'}\n        tabIndex={tabIndex}\n        aria-selected={grid ? undefined : String(selected)}\n        aria-disabled={!grid && option.isInactive ? 'true' : undefined}\n        onMouseDown={event => event.preventDefault()}\n        onFocus={onFocus}\n        onKeyDown={onKeyDown}\n        onMouseMove={() => {\n          if (!option.isInactive) onHover();\n        }}\n        onClick={onSelect}\n      >\n        {leading}\n        <div class=\"ds-choice-item__content ds-interaction-fill__content\">\n          <ds-text\n            class=\"ds-choice-item__label ds-control-label-box\"\n            as=\"span\"\n            variant={CONTROL_TEXT_VARIANT[size]}\n            color={selected ? 'primary' : 'secondary'}\n          >\n            {option.label}\n          </ds-text>\n          {usesSubtext && (\n            <ds-text\n              class=\"ds-choice-item__subtext ds-control-label-box\"\n              as=\"span\"\n              variant={CONTROL_SUPPORTING_TEXT_VARIANT[size]}\n              color=\"secondary\"\n            >\n              {option.subtext?.trim() || '—'}\n            </ds-text>\n          )}\n        </div>\n      </div>\n      {action && (\n        <div\n          class=\"select-option-row__action ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale\"\n          role={grid ? 'gridcell' : undefined}\n        >\n          {action}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"0EAQA,MAAMA,EAA6D,CACjEC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAkBC,MAAMC,EAAuD,EAClEC,OAAO,KACPC,QACAC,cACAC,YACAC,WACAC,mBACAC,WAAW,MACXC,WACAC,aACAC,gBACAC,UACAC,gBAEA,IAAIC,EAAwC,KAE5C,OACEC,EAAA,OAAKC,MAAM,iBACTD,EAAA,OAAKC,MAAO,sCAAsCd,KAChDa,EAAA,WAASE,KAAK,kBAAkBf,KAAMA,EAAMgB,MAAM,YAClDH,EAAA,SACEC,MAAO,YAAYG,EAAqBjB,GAAMkB,QAAQ,QAAS,uBAC/DC,IAAKC,IACHR,EAAgBQ,GAAgC,KAChDb,EAASK,EAAa,EAExBS,KAAK,SACLpB,MAAOA,EACPC,YAAaA,EACbI,SAAUA,EAAQ,aACNH,GAAaD,EAAW,gBACrBE,EAAQ,wBACAC,EACvBiB,QAASC,GAASd,EAAec,EAAMC,OAA4BvB,OACnEU,UAAWA,IAEZV,IAAUK,GACTO,EAAA,cACEC,MAAM,+BACNW,MAAOjB,EACPkB,KAAK,MACL1B,KAAK,MAELa,EAAA,sBACEC,MAAM,uBACNa,QAAQ,OACR3B,KAAMN,EAAkBM,GACxB4B,KAAK,cACLC,UAAW,MACXC,QAAO,KACP3B,UAAWK,EACXuB,WAAYR,GAASA,EAAMS,kBAC3BC,UAAW,KACTxB,EAAc,IACdC,MACAwB,uBAAsB,IAAMtB,GAAcuB,SAAQ,MAMxD,EAgBH,MAAMC,EAAuD,EAClEpC,OAAO,KACPQ,aACA6B,UACAC,iBACAC,oBAAoB,MACpBC,aACAC,oBACAC,WACAhC,aAEAG,EAAA,OAAKC,MAAM,oBACTD,EAAA,OACEM,IAAKC,GAAWoB,IAAcpB,GAA8B,MAC5DN,MAAO,yCAAyCd,KAE/CqC,GAAW,CACVxB,EAAA,WACE8B,IAAI,UACJ7B,MAAM,4BACN8B,GAAG,OACHjB,QAASV,EAAqBjB,GAC9BgB,MAAM,aAELuB,EAAoBD,GAAkBD,EAAUA,GAEnDxB,EAAA,WACE8B,IAAI,kBACJxB,IAAKC,GAAWqB,IAAqBrB,GAA2B,MAChEN,MAAM,oCACN8B,GAAG,OACHjB,QAASV,EAAqBjB,GAC9BgB,MAAM,YAAW,cACL,QAEXqB,IAGLxB,EAAA,UACEM,IAAKC,GAAWsB,IAAYtB,GAAiC,MAC7DC,KAAK,SACLP,MAAM,uDACN+B,QAASnC,GAETG,EAAA,WAAS+B,GAAG,OAAOjB,QAASV,EAAqBjB,GAAOgB,MAAM,WAC3DR,MAaJ,MAAMsC,EAAmE,EAC9E9C,OAAO,KACPyB,QACAsB,cAEAlC,EAAA,OAAKC,MAAM,oBACTD,EAAA,OAAKC,MAAO,yCAAyCd,KACnDa,EAAA,UACEQ,KAAK,SACLP,MAAM,wDACN+B,QAASE,GAETlC,EAAA,WAAS+B,GAAG,OAAOjB,QAASV,EAAqBjB,GAAOgB,MAAM,WAC3DS,M,MA0BEuB,EAA6D,EACxEhD,OAAO,KACPiD,KACAC,SACAC,WACAC,SACAC,mBACAC,cACAC,UACAC,SACAC,aAAa,MACbC,YAAY,UACZC,WACAC,UACAjD,YACAkD,UACAC,eAEA,MAAMC,EAAOL,IAAc,OAC3B,OACE7C,EAAA,OACEoC,GAAIc,EAAOd,EAAKe,UAChBC,KAAMF,EAAO,MAAQC,UAAS,gBACfD,EAAOG,OAAOf,GAAYa,UAAS,gBACnCD,GAAQb,EAAOiB,WAAa,OAASH,UACpDlD,MAAO,CACL,oBAAqB,KACrB,kCAAmC0C,EACnC,iCAAkCC,EAClC,uCAAwCD,GAAUJ,GAAUC,IAG9DxC,EAAA,OACEoC,GAAIc,EAAOC,UAAYf,EACvBnC,MAAO,CACL,gBAAiB,KACjB,iBAAkB,KAClB,mBAAoB,KACpB,CAAC,eAAed,KAAS,KACzB,sBAAuB,KACvB,yBAA0BoD,GAAUC,EACpC,uBAAwBH,EAAOiB,WAC/B,gCAAiChB,IAAaD,EAAOiB,WACrD,wBAAyBjB,EAAOiB,WAChC,wBAAyBf,GAE3Ba,KAAMF,EAAO,WAAa,SAC1BJ,SAAUA,EAAQ,gBACHI,EAAOC,UAAYE,OAAOf,GAAS,iBAClCY,GAAQb,EAAOiB,WAAa,OAASH,UACrDI,YAAa7C,GAASA,EAAM8C,iBAC5BT,QAASA,EACTjD,UAAWA,EACX2D,YAAa,KACX,IAAKpB,EAAOiB,WAAYN,GAAS,EAEnChB,QAASiB,GAERP,EACD1C,EAAA,OAAKC,MAAM,wDACTD,EAAA,WACEC,MAAM,6CACN8B,GAAG,OACHjB,QAASV,EAAqBjB,GAC9BgB,MAAOmC,EAAW,UAAY,aAE7BD,EAAOzB,OAET6B,GACCzC,EAAA,WACEC,MAAM,+CACN8B,GAAG,OACHjB,QAAS4C,EAAgCvE,GACzCgB,MAAM,aAELkC,EAAOsB,SAASC,QAAU,OAKlCjB,GACC3C,EAAA,OACEC,MAAM,4GACNmD,KAAMF,EAAO,WAAaC,WAEzBR,GAGD,S","ignoreList":[]}