@redvars/peacock 3.8.2 → 3.8.4

package/dist/radio.js

@@ -9,6 +9,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../src/radio/radio.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './radio.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Radio\n * @tag wc-radio\n * @rawTag radio\n * @summary Allows selection of a single option from a set.\n * @overview\n * <p>Radio buttons follow the specifications with clear focus, hover, and selected states.</p>\n *\n * @cssprop --radio-size: Size of the outer radio circle.\n * @cssprop --radio-dot-size: Size of the inner dot when selected.\n * @cssprop --radio-selected-color: Color of the radio when selected.\n * @cssprop --radio-unselected-color: Color of the radio outline when unselected.\n * @cssprop --radio-state-layer-size: Size of the state layer for touch target.\n * @cssprop --radio-disabled-opacity: Opacity applied when the radio is disabled.\n *\n * @fires {CustomEvent} change - Dispatched when the radio selection changes.\n * @fires {CustomEvent} blur - Dispatched when the radio loses focus.\n * @fires {CustomEvent} focus - Dispatched when the radio receives focus.\n *\n * @example\n * ```html\n * <wc-radio name=\"fruits\" value=\"apple\" label=\"Apple\"></wc-radio>\n * ```\n * @tags input, form\n */\ntype RadioDirection = 1 | -1;\n\n@IndividualComponent\nexport class Radio extends LitElement {\n  private static readonly DIRECTION_NEXT: RadioDirection = 1;\n  private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;\n\n  static styles = [styles];\n\n  /**\n   * The input field name for grouping radios.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The submitted value when this radio is selected.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * The radio label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * Whether the radio is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the radio is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the radio. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the radio container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the radio (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content or `label` property is present. */\n  @state()\n  private slotHasContent = false;\n\n  /** True for the one radio in the group that should receive tab focus (roving tabindex). */\n  @state()\n  private isGroupFocusTarget = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: number;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes() || !!this.label;\n    this.updateGroupFocusTarget();\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    if (changedProps.has('label')) {\n      this.slotHasContent = this.hasChildNodes() || !!this.label;\n    }\n\n    if (changedProps.has('checked') && this.checked) {\n      this.uncheckSiblings();\n    }\n\n    if (changedProps.has('checked') || changedProps.has('name')) {\n      this.updateGroupFocusTarget();\n    }\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      const attrValue = this.getAttribute('tabindex');\n      if (attrValue !== null) {\n        this.tabindex = parseInt(attrValue, 10);\n      }\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.selectRadio(evt);\n    } else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_NEXT);\n    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_PREVIOUS);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    this.selectRadio(ev);\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private selectRadio(ev?: Event) {\n    if (this.disabled || this.readonly) return;\n\n    if (!this.checked) {\n      this.checked = true;\n      this.uncheckSiblings();\n      this.dispatchChange(ev);\n    }\n\n    this.containerElement?.focus();\n  }\n\n  private dispatchChange(ev?: Event) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value, checked: this.checked, originalEvent: ev },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private uncheckSiblings() {\n    if (!this.name || !this.checked) return;\n    const radios = this.getGroupRadios();\n\n    radios.forEach(radio => {\n      if (radio === this) return;\n      radio.checked = false;\n    });\n  }\n\n  private getGroupRadios(): Radio[] {\n    if (!this.name) return [this];\n    const scopeRoot = this.closest('form') ?? document;\n    return Array.from(\n      scopeRoot.querySelectorAll<Radio>(`wc-radio[name=\"${this.name}\"]`),\n    );\n  }\n\n  private isRadioEnabled(radio: Radio) {\n    return !radio.disabled && !radio.readonly;\n  }\n\n  private updateGroupFocusTarget() {\n    const group = this.getGroupRadios();\n    if (!group.length) return;\n\n    const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));\n    if (!enabledGroup.length) {\n      group.forEach(radio => {\n        radio.isGroupFocusTarget = false;\n      });\n      return;\n    }\n\n    const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];\n\n    group.forEach(radio => {\n      radio.isGroupFocusTarget = radio === target;\n    });\n  }\n\n  private navigateGroup(direction: RadioDirection) {\n    const group = this.getGroupRadios().filter(radio =>\n      this.isRadioEnabled(radio),\n    );\n    if (!group.length) return;\n\n    const currentIndex = group.indexOf(this);\n    const startIndex = currentIndex >= 0 ? currentIndex : 0;\n    const nextIndex = (startIndex + direction + group.length) % group.length;\n    const target = group[nextIndex];\n\n    target.selectRadio();\n    target.containerElement?.focus();\n  }\n\n  /**\n   * Sets focus on the radio.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      radio: true,\n      'state-checked': this.checked,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          class=\"container\"\n          tabindex=${this.isGroupFocusTarget\n            ? this.tabindex !== undefined\n              ? this.tabindex\n              : 0\n            : -1}\n          role=\"radio\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.checked}\n          @click=${this.clickHandler}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          ${spread(this.configAria)}\n        >\n          <div class=\"state-layer\"></div>\n          <div class=\"outer-circle\"></div>\n          <div class=\"inner-circle\"></div>\n        </div>\n\n        <input\n          type=\"radio\"\n          class=\"input-native\"\n          name=${this.name}\n          .value=${this.value}\n          .checked=${this.checked}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,IAAM,KAAK,GAAA,OAAA,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;AAML;;AAEG;QAEH,IAAA,CAAA,IAAI,GAAW,EAAE;AAEjB;;AAEG;QAEH,IAAA,CAAA,KAAK,GAAW,EAAE;AAElB;;AAEG;QAEH,IAAA,CAAA,KAAK,GAAW,EAAE;AAElB;;AAEG;QAEH,IAAA,CAAA,OAAO,GAAY,KAAK;AAExB;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;AAEG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAEzB;;AAEG;QAEH,IAAA,CAAA,UAAU,GAA2B,EAAE;;QAI/B,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,cAAc,GAAG,KAAK;;QAItB,IAAA,CAAA,kBAAkB,GAAG,KAAK;QA8D1B,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACvB;AACF,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,GAAkB,KAAI;YAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBACpC,GAAG,CAAC,cAAc,EAAE;AACpB,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YACvB;AACF,QAAA,CAAC;QAEO,IAAA,CAAA,gBAAgB,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,GAAkB,KAAI;AAC9C,YAAA,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBACnB,GAAG,CAAC,cAAc,EAAE;AACpB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;YACvB;AAAO,iBAAA,IAAI,GAAG,CAAC,GAAG,KAAK,YAAY,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC9D,GAAG,CAAC,cAAc,EAAE;AACpB,gBAAA,IAAI,CAAC,aAAa,CAAC,OAAK,CAAC,cAAc,CAAC;YAC1C;AAAO,iBAAA,IAAI,GAAG,CAAC,GAAG,KAAK,WAAW,IAAI,GAAG,CAAC,GAAG,KAAK,SAAS,EAAE;gBAC3D,GAAG,CAAC,cAAc,EAAE;AACpB,gBAAA,IAAI,CAAC,aAAa,CAAC,OAAK,CAAC,kBAAkB,CAAC;YAC9C;AACF,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAA8B,KAAI;AACxD,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;AACtB,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,MAAM,EAAE;AACtB,gBAAA,MAAM,EAAE,EAAE;AACV,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAAc,KAAI;AACxC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,OAAO,EAAE;AACvB,gBAAA,MAAM,EAAE,EAAE;AACV,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;IAqJH;IA7PE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;QACtD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;IACpD;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;QAC5B,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;QACzD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC;IACvD;IAEA,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;QAC1D,IAAI,CAAC,sBAAsB,EAAE;IAC/B;AAEA,IAAA,OAAO,CAAC,YAAkC,EAAA;AACxC,QAAA,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC7B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;QAC5D;QAEA,IAAI,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YAC/C,IAAI,CAAC,eAAe,EAAE;QACxB;AAEA,QAAA,IAAI,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC3D,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;IAEQ,uBAAuB,GAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YACjC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;AAC/C,YAAA,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;YACzC;AACA,YAAA,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;QAClC;AAEA,QAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;YACzC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;gBACjC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK;AACvC,gBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;YACjC;AACF,QAAA,CAAC,CAAC;IACJ;AA2DQ,IAAA,WAAW,CAAC,EAAU,EAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEpC,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,eAAe,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;QACzB;AAEA,QAAA,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE;IAChC;AAEQ,IAAA,cAAc,CAAC,EAAU,EAAA;AAC/B,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;AACxB,YAAA,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,EAAE;AACvE,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,eAAe,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACjC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE;AAEpC,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;YACrB,IAAI,KAAK,KAAK,IAAI;gBAAE;AACpB,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;AACvB,QAAA,CAAC,CAAC;IACJ;IAEQ,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,CAAC,IAAI,CAAC;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,QAAQ;AAClD,QAAA,OAAO,KAAK,CAAC,IAAI,CACf,SAAS,CAAC,gBAAgB,CAAQ,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,CAAA,EAAA,CAAI,CAAC,CACnE;IACH;AAEQ,IAAA,cAAc,CAAC,KAAY,EAAA;QACjC,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC3C;IAEQ,sBAAsB,GAAA;AAC5B,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE;AAEnB,QAAA,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACtE,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;AACxB,YAAA,KAAK,CAAC,OAAO,CAAC,KAAK,IAAG;AACpB,gBAAA,KAAK,CAAC,kBAAkB,GAAG,KAAK;AAClC,YAAA,CAAC,CAAC;YACF;QACF;AAEA,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC;AAE3E,QAAA,KAAK,CAAC,OAAO,CAAC,KAAK,IAAG;AACpB,YAAA,KAAK,CAAC,kBAAkB,GAAG,KAAK,KAAK,MAAM;AAC7C,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,aAAa,CAAC,SAAyB,EAAA;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM,CAAC,KAAK,IAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAC3B;QACD,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE;QAEnB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;AACxC,QAAA,MAAM,UAAU,GAAG,YAAY,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC;AACvD,QAAA,MAAM,SAAS,GAAG,CAAC,UAAU,GAAG,SAAS,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM;AACxE,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;QAE/B,MAAM,CAAC,WAAW,EAAE;AACpB,QAAA,MAAM,CAAC,gBAAgB,EAAE,KAAK,EAAE;IAClC;AAEA;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE;IAChC;AAEA;;AAEG;IACH,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE;IAC/B;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,KAAK,EAAE,IAAI;YACX,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,aAAa,EAAE,IAAI,CAAC,cAAc;SACnC;AAED,QAAA,OAAOC,CAAI,CAAA;qBACMC,GAAQ,CAAC,UAAU,CAAC,CAAA;;;AAGpB,mBAAA,EAAA,IAAI,CAAC;AACd,cAAE,IAAI,CAAC,QAAQ,KAAK;kBAChB,IAAI,CAAC;AACP,kBAAE;cACF,EAAE;;AAEU,wBAAA,EAAA,IAAI,CAAC,QAAQ;AACb,wBAAA,EAAA,IAAI,CAAC,QAAQ;AACd,uBAAA,EAAA,IAAI,CAAC,OAAO;AAClB,iBAAA,EAAA,IAAI,CAAC,YAAY;AACb,qBAAA,EAAA,IAAI,CAAC,gBAAgB;AACvB,mBAAA,EAAA,IAAI,CAAC,cAAc;AACtB,gBAAA,EAAA,IAAI,CAAC,WAAW;AACf,iBAAA,EAAA,IAAI,CAAC,YAAY;AACxB,UAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;;;;;;;;;AAUlB,eAAA,EAAA,IAAI,CAAC,IAAI;AACP,iBAAA,EAAA,IAAI,CAAC,KAAK;AACR,mBAAA,EAAA,IAAI,CAAC,OAAO;;AAEX,oBAAA,EAAA,IAAI,CAAC,QAAQ;AACb,oBAAA,EAAA,IAAI,CAAC,QAAQ;;;;AAIzB,QAAA,EAAA,IAAI,CAAC;AACL,cAAED,CAAI,CAAA,sBAAsB,IAAI,CAAC,KAAK,CAAA,MAAA;cACpCA,CAAI,CAAA,CAAA,qDAAA,CAAuD;;KAElE;IACH;;AA5UwB,KAAA,CAAA,cAAc,GAAmB,CAAnB;AACd,KAAA,CAAA,kBAAkB,GAAmB,EAAnB;AAEnC,KAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAMxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACR,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMlB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACP,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMnB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACP,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMnB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACjB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAMzB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAM1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAM1B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAM1B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACc,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAIhC,UAAA,CAAA;AADP,IAAAC,CAAK;AACmB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADP,IAAAA,CAAK;AACmB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADP,IAAAA,CAAK;AACyB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,MAAA,CAAA;AAIvB,UAAA,CAAA;AADP,IAAAA,CAAK;AAC6B,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,MAAA,CAAA;AAG3B,UAAA,CAAA;IADPC,CAAK,CAAC,YAAY;AACoB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,MAAA,CAAA;AAG/B,UAAA,CAAA;IADPA,CAAK,CAAC,eAAe;AACmB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AA1E9B,KAAK,GAAA,OAAA,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CA8UjB;;;;"}
+{"version":3,"file":"radio.js","sources":["../../src/radio/radio.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { spread } from '@/__internal/directive/spread.js';\n\nimport styles from './radio.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Radio\n * @tag wc-radio\n * @rawTag radio\n * @summary Allows selection of a single option from a set.\n * @overview\n * <p>Radio buttons follow the specifications with clear focus, hover, and selected states.</p>\n *\n * @cssprop --radio-size: Size of the outer radio circle.\n * @cssprop --radio-dot-size: Size of the inner dot when selected.\n * @cssprop --radio-selected-color: Color of the radio when selected.\n * @cssprop --radio-unselected-color: Color of the radio outline when unselected.\n * @cssprop --radio-state-layer-size: Size of the state layer for touch target.\n * @cssprop --radio-disabled-opacity: Opacity applied when the radio is disabled.\n *\n * @fires {CustomEvent} change - Dispatched when the radio selection changes.\n * @fires {CustomEvent} blur - Dispatched when the radio loses focus.\n * @fires {CustomEvent} focus - Dispatched when the radio receives focus.\n *\n * @example\n * ```html\n * <wc-radio name=\"fruits\" value=\"apple\" label=\"Apple\"></wc-radio>\n * ```\n * @tags input, form\n */\ntype RadioDirection = 1 | -1;\n\n@IndividualComponent\nexport class Radio extends LitElement {\n  private static readonly DIRECTION_NEXT: RadioDirection = 1;\n  private static readonly DIRECTION_PREVIOUS: RadioDirection = -1;\n\n  static styles = [styles];\n\n  /**\n   * The input field name for grouping radios.\n   */\n  @property({ type: String })\n  name: string = '';\n\n  /**\n   * The submitted value when this radio is selected.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * The radio label.\n   */\n  @property({ type: String })\n  label: string = '';\n\n  /**\n   * Whether the radio is selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * If true, required icon is shown. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * If true, the radio is readonly. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly: boolean = false;\n\n  /**\n   * If true, the user cannot interact with the radio. Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Configuration object for aria attributes.\n   */\n  @property({ type: Object })\n  configAria: Record<string, string> = {};\n\n  /** True while the radio container has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the radio (mouse/keyboard). */\n  @state()\n  private isActive = false;\n\n  /** True when slotted label content or `label` property is present. */\n  @state()\n  private slotHasContent = false;\n\n  /** True for the one radio in the group that should receive tab focus (roving tabindex). */\n  @state()\n  private isGroupFocusTarget = false;\n\n  @query('.container')\n  private containerElement?: HTMLElement;\n\n  @query('.input-native')\n  private nativeElement?: HTMLInputElement;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Captured `tabindex` attribute value forwarded to the inner container. */\n  private tabindex?: number;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleInitialAttributes();\n    window.addEventListener('mouseup', this.windowMouseUp);\n    window.addEventListener('keyup', this.windowKeyUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this.windowMouseUp);\n    window.removeEventListener('keyup', this.windowKeyUp);\n  }\n\n  firstUpdated() {\n    this.slotHasContent = this.hasChildNodes() || !!this.label;\n    this.updateGroupFocusTarget();\n  }\n\n  updated(changedProps: Map<string, unknown>) {\n    if (changedProps.has('label')) {\n      this.slotHasContent = this.hasChildNodes() || !!this.label;\n    }\n\n    if (changedProps.has('checked') && this.checked) {\n      this.uncheckSiblings();\n    }\n\n    if (changedProps.has('checked') || changedProps.has('name')) {\n      this.updateGroupFocusTarget();\n    }\n  }\n\n  private handleInitialAttributes() {\n    if (this.hasAttribute('tabindex')) {\n      const attrValue = this.getAttribute('tabindex');\n      if (attrValue !== null) {\n        this.tabindex = parseInt(attrValue, 10);\n      }\n      this.removeAttribute('tabindex');\n    }\n\n    Array.from(this.attributes).forEach(attr => {\n      if (attr.name.startsWith('aria-')) {\n        this.configAria[attr.name] = attr.value;\n        this.removeAttribute(attr.name);\n      }\n    });\n  }\n\n  private windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private windowKeyUp = (evt: KeyboardEvent) => {\n    if (this.isActive && evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = false;\n    }\n  };\n\n  private mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ') {\n      evt.preventDefault();\n      this.isActive = true;\n      this.selectRadio(evt);\n    } else if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_NEXT);\n    } else if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {\n      evt.preventDefault();\n      this.navigateGroup(Radio.DIRECTION_PREVIOUS);\n    }\n  };\n\n  private clickHandler = (ev: MouseEvent | KeyboardEvent) => {\n    this.selectRadio(ev);\n  };\n\n  private blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', {\n        detail: ev,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private selectRadio(ev?: Event) {\n    if (this.disabled || this.readonly) return;\n\n    if (!this.checked) {\n      this.checked = true;\n      this.uncheckSiblings();\n      this.dispatchChange(ev);\n    }\n\n    this.containerElement?.focus();\n  }\n\n  private dispatchChange(ev?: Event) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value, checked: this.checked, originalEvent: ev },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private uncheckSiblings() {\n    if (!this.name || !this.checked) return;\n    const radios = this.getGroupRadios();\n\n    radios.forEach(radio => {\n      if (radio === this) return;\n      radio.checked = false;\n    });\n  }\n\n  private getGroupRadios(): Radio[] {\n    if (!this.name) return [this];\n    const scopeRoot = this.closest('form') ?? document;\n    return Array.from(\n      scopeRoot.querySelectorAll<Radio>(`wc-radio[name=\"${this.name}\"]`),\n    );\n  }\n\n  private isRadioEnabled(radio: Radio) {\n    return !radio.disabled && !radio.readonly;\n  }\n\n  private updateGroupFocusTarget() {\n    const group = this.getGroupRadios();\n    if (!group.length) return;\n\n    const enabledGroup = group.filter(radio => this.isRadioEnabled(radio));\n    if (!enabledGroup.length) {\n      group.forEach(radio => {\n        radio.isGroupFocusTarget = false;\n      });\n      return;\n    }\n\n    const target = enabledGroup.find(radio => radio.checked) || enabledGroup[0];\n\n    group.forEach(radio => {\n      radio.isGroupFocusTarget = radio === target;\n    });\n  }\n\n  private navigateGroup(direction: RadioDirection) {\n    const group = this.getGroupRadios().filter(radio =>\n      this.isRadioEnabled(radio),\n    );\n    if (!group.length) return;\n\n    const currentIndex = group.indexOf(this);\n    const startIndex = currentIndex >= 0 ? currentIndex : 0;\n    const nextIndex = (startIndex + direction + group.length) % group.length;\n    const target = group[nextIndex];\n\n    target.selectRadio();\n    target.containerElement?.focus();\n  }\n\n  /**\n   * Sets focus on the radio.\n   */\n  focus() {\n    this.containerElement?.focus();\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur() {\n    this.containerElement?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      radio: true,\n      'state-checked': this.checked,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      required: this.required,\n      'has-content': this.slotHasContent,\n    };\n\n    return html`\n      <label class=${classMap(cssClasses)}>\n        <div\n          class=\"container\"\n          tabindex=${this.isGroupFocusTarget\n            ? this.tabindex !== undefined\n              ? this.tabindex\n              : 0\n            : -1}\n          role=\"radio\"\n          aria-disabled=${this.disabled}\n          aria-required=${this.required}\n          aria-checked=${this.checked}\n          @click=${this.clickHandler}\n          @mousedown=${this.mouseDownHandler}\n          @keydown=${this.keyDownHandler}\n          @blur=${this.blurHandler}\n          @focus=${this.focusHandler}\n          ${spread(this.configAria)}\n        >\n          <div class=\"state-layer\"></div>\n          <div class=\"outer-circle\"></div>\n          <div class=\"inner-circle\"></div>\n        </div>\n\n        <input\n          type=\"radio\"\n          class=\"input-native\"\n          name=${this.name}\n          .value=${this.value}\n          .checked=${this.checked}\n          aria-hidden=\"true\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          tabindex=\"-1\"\n        />\n\n        ${this.label\n          ? html`<div class=\"label\">${this.label}</div>`\n          : html`<div class=\"label slot-container\"><slot></slot></div>`}\n      </label>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/search.js

@@ -21,6 +21,7 @@ import './base-Cl6v8-BZ.js';
 
 var css_248z$1 = i$1`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../node_modules/lit-html/directive-helpers.js","../node_modules/lit-html/directives/live.js","../../src/search/search.ts"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","import{noChange as r,nothing as e}from\"../lit-html.js\";import{directive as i,Directive as t,PartType as n}from\"../directive.js\";import{isSingleExpression as o,setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=i(class extends t{constructor(r){if(super(r),r.type!==n.PROPERTY&&r.type!==n.ATTRIBUTE&&r.type!==n.BOOLEAN_ATTRIBUTE)throw Error(\"The `live` directive is not allowed on child or event bindings\");if(!o(r))throw Error(\"`live` bindings can only contain a single expression\")}render(r){return r}update(i,[t]){if(t===r||t===e)return t;const o=i.element,l=i.name;if(i.type===n.PROPERTY){if(t===o[l])return r}else if(i.type===n.BOOLEAN_ATTRIBUTE){if(!!t===o.hasAttribute(l))return r}else if(i.type===n.ATTRIBUTE&&o.getAttribute(l)===t+\"\")return r;return s(i),t}});export{l as live};\n//# sourceMappingURL=live.js.map\n","import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './search.scss';\nimport colorStyles from './search-colors.scss';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\n/**\n * @label Search\n * @tag wc-search\n * @rawTag search\n *\n * @summary A search bar for filtering and finding content.\n * @overview\n * <p>The search component provides a text input designed for search interactions.\n * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>\n *\n * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).\n * @cssprop --search-container-color - Background color of the search container.\n * @cssprop --search-input-text-color - Color of the input text.\n * @cssprop --search-placeholder-color - Color of the placeholder text.\n * @cssprop --search-icon-color - Color of the leading and trailing icons.\n * @cssprop --search-outline-color - Border color for the outlined variant.\n * @cssprop --search-outline-width - Border width for the outlined variant.\n *\n * @fires {CustomEvent} input - Dispatched when the search value changes.\n * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.\n * @fires {CustomEvent} clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).\n *\n * @example\n * ```html\n * <wc-search placeholder=\"Search...\"></wc-search>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Search extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual style variant.\n   * Possible values: `\"outlined\"`, `\"filled\"`. Defaults to `\"filled\"`.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'outlined' | 'filled' = 'filled';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  @property({ type: String })\n  placeholder: string = 'Search';\n\n  /**\n   * Current search value.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * Whether the search bar is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether a clear button is shown when the input has a value.\n   */\n  @property({ type: Boolean })\n  clearable: boolean = true;\n\n  /**\n   * Size of the search bar.\n   * Possible values: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @state()\n  private focused: boolean = false;\n\n  @state()\n  private leadingSlotHasContent: boolean = false;\n\n  @query('.search-input')\n  private inputElement?: HTMLInputElement;\n\n  override firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"leading\"]'),\n      hasContent => {\n        this.leadingSlotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  override async focus() {\n    await Promise.all([\n      customElements.whenDefined('wc-input'),\n      customElements.whenDefined('wc-field'),\n    ]);\n    await this.updateComplete;\n    this.inputElement?.focus();\n  }\n\n  private __handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native input event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native change event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('search', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n    if (event.key === 'Escape') {\n      this.__clearValue();\n    }\n  }\n\n  private __handleFocusChange = (event: FocusEvent) => {\n    this.focused = event.type === 'focus';\n  };\n\n  private __clearValue() {\n    this.value = '';\n    this.inputElement?.focus();\n    this.dispatchEvent(\n      new CustomEvent('clear', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: '' },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __renderClearButton() {\n    if (!this.clearable || !this.value) return nothing;\n\n    return html`\n      <button\n        class=\"clear-button\"\n        aria-label=\"Clear search\"\n        tabindex=\"-1\"\n        @click=${this.__clearValue}\n        ?disabled=${this.disabled}\n      >\n        <wc-icon name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  private __renderLeadingIcon() {\n    return html`\n      <div class=\"leading-icon ${this.leadingSlotHasContent ? 'has-slot' : ''}\">\n        <slot name=\"leading\">\n          <wc-icon name=\"search\"></wc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  override render() {\n    const cssClasses = {\n      search: true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      focused: this.focused,\n      disabled: this.disabled,\n      'has-value': !!this.value,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)} role=\"search\">\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        ${this.__renderLeadingIcon()}\n\n        <input\n          class=\"search-input\"\n          type=\"search\"\n          role=\"searchbox\"\n          .value=${live(this.value)}\n          placeholder=${this.placeholder}\n          ?disabled=${this.disabled}\n          aria-label=${this.placeholder}\n          @input=${this.__handleInput}\n          @change=${this.__handleChange}\n          @keydown=${this.__handleKeydown}\n          @focus=${this.__handleFocusChange}\n          @blur=${this.__handleFocusChange}\n        />\n\n        <div class=\"trailing-actions\">\n          ${this.__renderClearButton()}\n          <slot name=\"trailing\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["i","t","r","n","o","e","s","LitElement","nothing","html","classMap","live","styles","colorStyles","property","state","query"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"search.js","sources":["../node_modules/lit-html/directive-helpers.js","../node_modules/lit-html/directives/live.js","../../src/search/search.ts"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","import{noChange as r,nothing as e}from\"../lit-html.js\";import{directive as i,Directive as t,PartType as n}from\"../directive.js\";import{isSingleExpression as o,setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=i(class extends t{constructor(r){if(super(r),r.type!==n.PROPERTY&&r.type!==n.ATTRIBUTE&&r.type!==n.BOOLEAN_ATTRIBUTE)throw Error(\"The `live` directive is not allowed on child or event bindings\");if(!o(r))throw Error(\"`live` bindings can only contain a single expression\")}render(r){return r}update(i,[t]){if(t===r||t===e)return t;const o=i.element,l=i.name;if(i.type===n.PROPERTY){if(t===o[l])return r}else if(i.type===n.BOOLEAN_ATTRIBUTE){if(!!t===o.hasAttribute(l))return r}else if(i.type===n.ATTRIBUTE&&o.getAttribute(l)===t+\"\")return r;return s(i),t}});export{l as live};\n//# sourceMappingURL=live.js.map\n","import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './search.scss';\nimport colorStyles from './search-colors.scss';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\n/**\n * @label Search\n * @tag wc-search\n * @rawTag search\n *\n * @summary A search bar for filtering and finding content.\n * @overview\n * <p>The search component provides a text input designed for search interactions.\n * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>\n *\n * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).\n * @cssprop --search-container-color - Background color of the search container.\n * @cssprop --search-input-text-color - Color of the input text.\n * @cssprop --search-placeholder-color - Color of the placeholder text.\n * @cssprop --search-icon-color - Color of the leading and trailing icons.\n * @cssprop --search-outline-color - Border color for the outlined variant.\n * @cssprop --search-outline-width - Border width for the outlined variant.\n *\n * @fires {CustomEvent} input - Dispatched when the search value changes.\n * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.\n * @fires {CustomEvent} clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).\n *\n * @example\n * ```html\n * <wc-search placeholder=\"Search...\"></wc-search>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Search extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual style variant.\n   * Possible values: `\"outlined\"`, `\"filled\"`. Defaults to `\"filled\"`.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'outlined' | 'filled' = 'filled';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  @property({ type: String })\n  placeholder: string = 'Search';\n\n  /**\n   * Current search value.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * Whether the search bar is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether a clear button is shown when the input has a value.\n   */\n  @property({ type: Boolean })\n  clearable: boolean = true;\n\n  /**\n   * Size of the search bar.\n   * Possible values: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @state()\n  private focused: boolean = false;\n\n  @state()\n  private leadingSlotHasContent: boolean = false;\n\n  @query('.search-input')\n  private inputElement?: HTMLInputElement;\n\n  override firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"leading\"]'),\n      hasContent => {\n        this.leadingSlotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  override async focus() {\n    await Promise.all([\n      customElements.whenDefined('wc-input'),\n      customElements.whenDefined('wc-field'),\n    ]);\n    await this.updateComplete;\n    this.inputElement?.focus();\n  }\n\n  private __handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native input event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native change event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('search', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n    if (event.key === 'Escape') {\n      this.__clearValue();\n    }\n  }\n\n  private __handleFocusChange = (event: FocusEvent) => {\n    this.focused = event.type === 'focus';\n  };\n\n  private __clearValue() {\n    this.value = '';\n    this.inputElement?.focus();\n    this.dispatchEvent(\n      new CustomEvent('clear', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: '' },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __renderClearButton() {\n    if (!this.clearable || !this.value) return nothing;\n\n    return html`\n      <button\n        class=\"clear-button\"\n        aria-label=\"Clear search\"\n        tabindex=\"-1\"\n        @click=${this.__clearValue}\n        ?disabled=${this.disabled}\n      >\n        <wc-icon name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  private __renderLeadingIcon() {\n    return html`\n      <div class=\"leading-icon ${this.leadingSlotHasContent ? 'has-slot' : ''}\">\n        <slot name=\"leading\">\n          <wc-icon name=\"search\"></wc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  override render() {\n    const cssClasses = {\n      search: true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      focused: this.focused,\n      disabled: this.disabled,\n      'has-value': !!this.value,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)} role=\"search\">\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        ${this.__renderLeadingIcon()}\n\n        <input\n          class=\"search-input\"\n          type=\"search\"\n          role=\"searchbox\"\n          .value=${live(this.value)}\n          placeholder=${this.placeholder}\n          ?disabled=${this.disabled}\n          aria-label=${this.placeholder}\n          @input=${this.__handleInput}\n          @change=${this.__handleChange}\n          @keydown=${this.__handleKeydown}\n          @focus=${this.__handleFocusChange}\n          @blur=${this.__handleFocusChange}\n        />\n\n        <div class=\"trailing-actions\">\n          ${this.__renderClearButton()}\n          <slot name=\"trailing\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["i","t","r","n","o","e","s","LitElement","nothing","html","classMap","live","styles","colorStyles","property","state","query"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/segmented-button-group.js

@@ -7,6 +7,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/segmented-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button-group.js","sources":["../../src/segmented-button/segmented-button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './segmented-button-group.scss';\nimport { SegmentedButton } from './segmented-button.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button Group\n * @tag wc-segmented-button-group\n * @rawTag segmented-button-group\n * @summary A container for segmented buttons.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the specification.</p>\n * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>\n *\n * @cssprop --segmented-button-group-shape: Border-radius of the group container.\n *\n * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButtonGroup extends LitElement {\n  static styles = [styles];\n\n  static SegmentedButton = SegmentedButton;\n\n  /**\n   * When true, multiple segments can be selected simultaneously.\n   * Defaults to single-select mode.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n  multiSelect: boolean = false;\n\n  /**\n   * When true, in single-select mode the currently selected segment can be\n   * deselected by clicking it again (allowing an empty selection).\n   * Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  nullable: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  private _getSegments(): SegmentedButton[] {\n    return Array.from(\n      this.querySelectorAll<SegmentedButton>('wc-segmented-button'),\n    );\n  }\n\n  private _onSegmentChange = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    const target = ev.composedPath()[0] as SegmentedButton;\n    const segments = this._getSegments();\n\n    if (this.multiSelect) {\n      target.selected = !target.selected;\n    } else {\n      if (target.selected && this.nullable) {\n        target.selected = false;\n      } else {\n        segments.forEach(seg => {\n          seg.selected = seg === target;\n        });\n      }\n    }\n\n    const selectedValues = segments\n      .filter(s => s.selected)\n      .map(s => s.value || s.textContent?.trim() || '');\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: selectedValues[0] ?? null,\n          values: selectedValues,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  render() {\n    return html`\n      <div class=\"segmented-button-group\" role=\"group\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAKL;;;AAGG;QAEH,IAAA,CAAA,WAAW,GAAY,KAAK;AAE5B;;;;AAIG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAwBjB,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,EAAe,KAAI;YAC7C,EAAE,CAAC,eAAe,EAAE;YACpB,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAoB;AACtD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;AAEpC,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;YACpC;iBAAO;gBACL,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,oBAAA,MAAM,CAAC,QAAQ,GAAG,KAAK;gBACzB;qBAAO;AACL,oBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAG;AACrB,wBAAA,GAAG,CAAC,QAAQ,GAAG,GAAG,KAAK,MAAM;AAC/B,oBAAA,CAAC,CAAC;gBACJ;YACF;YAEA,MAAM,cAAc,GAAG;iBACpB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ;AACtB,iBAAA,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEnD,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;AACxB,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,IAAI;AAChC,oBAAA,MAAM,EAAE,cAAc;AACvB,iBAAA;AACD,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;IASH;IA9DE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CACnB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,CACtB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEQ,YAAY,GAAA;QAClB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAkB,qBAAqB,CAAC,CAC9D;IACH;IAmCA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AAhFO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,oBAAA,CAAA,eAAe,GAAG,eAAH;AAOtB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE;AACxC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAQ7B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAlBf,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAkFhC;;;;"}
+{"version":3,"file":"segmented-button-group.js","sources":["../../src/segmented-button/segmented-button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './segmented-button-group.scss';\nimport { SegmentedButton } from './segmented-button.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button Group\n * @tag wc-segmented-button-group\n * @rawTag segmented-button-group\n * @summary A container for segmented buttons.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the specification.</p>\n * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>\n *\n * @cssprop --segmented-button-group-shape: Border-radius of the group container.\n *\n * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButtonGroup extends LitElement {\n  static styles = [styles];\n\n  static SegmentedButton = SegmentedButton;\n\n  /**\n   * When true, multiple segments can be selected simultaneously.\n   * Defaults to single-select mode.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n  multiSelect: boolean = false;\n\n  /**\n   * When true, in single-select mode the currently selected segment can be\n   * deselected by clicking it again (allowing an empty selection).\n   * Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  nullable: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  private _getSegments(): SegmentedButton[] {\n    return Array.from(\n      this.querySelectorAll<SegmentedButton>('wc-segmented-button'),\n    );\n  }\n\n  private _onSegmentChange = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    const target = ev.composedPath()[0] as SegmentedButton;\n    const segments = this._getSegments();\n\n    if (this.multiSelect) {\n      target.selected = !target.selected;\n    } else {\n      if (target.selected && this.nullable) {\n        target.selected = false;\n      } else {\n        segments.forEach(seg => {\n          seg.selected = seg === target;\n        });\n      }\n    }\n\n    const selectedValues = segments\n      .filter(s => s.selected)\n      .map(s => s.value || s.textContent?.trim() || '');\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: selectedValues[0] ?? null,\n          values: selectedValues,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  render() {\n    return html`\n      <div class=\"segmented-button-group\" role=\"group\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAKL;;;AAGG;QAEH,IAAA,CAAA,WAAW,GAAY,KAAK;AAE5B;;;;AAIG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAwBjB,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,EAAe,KAAI;YAC7C,EAAE,CAAC,eAAe,EAAE;YACpB,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAoB;AACtD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;AAEpC,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;YACpC;iBAAO;gBACL,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,oBAAA,MAAM,CAAC,QAAQ,GAAG,KAAK;gBACzB;qBAAO;AACL,oBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAG;AACrB,wBAAA,GAAG,CAAC,QAAQ,GAAG,GAAG,KAAK,MAAM;AAC/B,oBAAA,CAAC,CAAC;gBACJ;YACF;YAEA,MAAM,cAAc,GAAG;iBACpB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ;AACtB,iBAAA,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEnD,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;AACxB,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,IAAI;AAChC,oBAAA,MAAM,EAAE,cAAc;AACvB,iBAAA;AACD,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;IASH;IA9DE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CACnB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,CACtB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEQ,YAAY,GAAA;QAClB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAkB,qBAAqB,CAAC,CAC9D;IACH;IAmCA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AAhFO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,oBAAA,CAAA,eAAe,GAAG,eAAH;AAOtB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE;AACxC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAQ7B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAlBf,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAkFhC;;;;"}

package/dist/segmented-button.js

@@ -6,6 +6,7 @@ import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {

package/dist/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/segmented-button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './segmented-button.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button\n * @tag wc-segmented-button\n * @rawTag segmented-button\n * @summary An individual segment within a segmented button group.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>\n *\n * @cssprop --segmented-button-height: Height of the segmented button.\n * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.\n * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.\n * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.\n * @cssprop --segmented-button-outline-color: Outline / border color.\n * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.\n *\n * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButton extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The value associated with this segment.\n   */\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  /**\n   * Whether this segment is currently selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  /**\n   * If true, the user cannot interact with this segment.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Optional icon name to display (uses wc-icon).\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /** True while the segment has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the segment. */\n  @state()\n  private isActive = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('mouseup', this._windowMouseUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this._windowMouseUp);\n  }\n\n  private _windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private _mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private _keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ' || evt.key === 'Enter') {\n      evt.preventDefault();\n      this.isActive = true;\n      this._toggle(evt);\n    }\n  };\n\n  private _clickHandler = (ev: MouseEvent) => {\n    this._toggle(ev);\n  };\n\n  private _toggle(ev: MouseEvent | KeyboardEvent) {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('segmented-button--change', {\n        detail: {\n          value: this.value || this.textContent?.trim(),\n          selected: !this.selected,\n          originalEvent: ev,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  private _focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  /** Sets focus on the segment. */\n  focus() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.focus();\n  }\n\n  /** Removes focus from the segment. */\n  blur() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      segment: true,\n      selected: this.selected,\n      disabled: this.disabled,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      'has-icon': !!this.icon,\n    };\n\n    return html`\n      <div\n        class=${classMap(cssClasses)}\n        role=\"button\"\n        tabindex=${this.disabled ? -1 : 0}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n        @click=${this._clickHandler}\n        @mousedown=${this._mouseDownHandler}\n        @keydown=${this._keyDownHandler}\n        @blur=${this._blurHandler}\n        @focus=${this._focusHandler}\n      >\n        <div class=\"state-layer\"></div>\n        <div class=\"content\">\n          ${this.selected\n            ? html`<wc-icon class=\"check-icon\" name=\"check\"></wc-icon>`\n            : this.icon\n              ? html`<wc-icon class=\"leading-icon\" name=${this.icon}></wc-icon>`\n              : nothing}\n          <span class=\"label\"><slot></slot></span>\n        </div>\n        <div class=\"segment-outline\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/segmented-button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './segmented-button.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button\n * @tag wc-segmented-button\n * @rawTag segmented-button\n * @summary An individual segment within a segmented button group.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>\n *\n * @cssprop --segmented-button-height: Height of the segmented button.\n * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.\n * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.\n * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.\n * @cssprop --segmented-button-outline-color: Outline / border color.\n * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.\n *\n * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButton extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The value associated with this segment.\n   */\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  /**\n   * Whether this segment is currently selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  /**\n   * If true, the user cannot interact with this segment.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Optional icon name to display (uses wc-icon).\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /** True while the segment has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the segment. */\n  @state()\n  private isActive = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('mouseup', this._windowMouseUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this._windowMouseUp);\n  }\n\n  private _windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private _mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private _keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ' || evt.key === 'Enter') {\n      evt.preventDefault();\n      this.isActive = true;\n      this._toggle(evt);\n    }\n  };\n\n  private _clickHandler = (ev: MouseEvent) => {\n    this._toggle(ev);\n  };\n\n  private _toggle(ev: MouseEvent | KeyboardEvent) {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('segmented-button--change', {\n        detail: {\n          value: this.value || this.textContent?.trim(),\n          selected: !this.selected,\n          originalEvent: ev,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  private _focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  /** Sets focus on the segment. */\n  focus() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.focus();\n  }\n\n  /** Removes focus from the segment. */\n  blur() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      segment: true,\n      selected: this.selected,\n      disabled: this.disabled,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      'has-icon': !!this.icon,\n    };\n\n    return html`\n      <div\n        class=${classMap(cssClasses)}\n        role=\"button\"\n        tabindex=${this.disabled ? -1 : 0}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n        @click=${this._clickHandler}\n        @mousedown=${this._mouseDownHandler}\n        @keydown=${this._keyDownHandler}\n        @blur=${this._blurHandler}\n        @focus=${this._focusHandler}\n      >\n        <div class=\"state-layer\"></div>\n        <div class=\"content\">\n          ${this.selected\n            ? html`<wc-icon class=\"check-icon\" name=\"check\"></wc-icon>`\n            : this.icon\n              ? html`<wc-icon class=\"leading-icon\" name=${this.icon}></wc-icon>`\n              : nothing}\n          <span class=\"label\"><slot></slot></span>\n        </div>\n        <div class=\"segment-outline\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}

package/dist/{select-Dwtk0RIU.js → select-D85kpjUt.js}

@@ -11,6 +11,7 @@ import { SelectOptionElement } from './option.js';
 
 var css_248z$g = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -331,6 +332,7 @@ __decorate([
 
 var css_248z$d = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -748,6 +750,7 @@ CircularProgress.styles = [css_248z$b];
 
 var css_248z$a = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -981,6 +984,7 @@ __decorate([
 
 var css_248z$9 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -1267,6 +1271,7 @@ __decorate([
 
 var css_248z$8 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -1532,6 +1537,7 @@ __decorate([
 
 var css_248z$7 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -1759,6 +1765,7 @@ __decorate([
 
 var css_248z$6 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -1986,6 +1993,7 @@ __decorate([
 
 var css_248z$5 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -2209,6 +2217,7 @@ __decorate([
 
 var css_248z$4 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -2598,6 +2607,7 @@ __decorate([
 
 var css_248z$3 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -2616,7 +2626,7 @@ var css_248z$3 = i`* {
   --sidebar-menu-item-label-color: var(--color-on-surface);
   --sidebar-menu-item-icon-color: var(--color-on-surface-variant);
   --sidebar-menu-item-selected-background: var(--color-secondary-container);
-  --sidebar-menu-item-selected-color: var(--color-on-secondary-container);
+  --sidebar-menu-item-selected-label-color: var(--color-on-secondary-container);
   --sidebar-menu-item-focus-ring-color: var(--color-primary);
   --sidebar-menu-item-transition-duration: 200ms;
   --sidebar-menu-item-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2644,7 +2654,8 @@ var css_248z$3 = i`* {
 }
 .sidebar-menu-item.selected {
   --_container-color: var(--sidebar-menu-item-selected-background);
-  --_label-color: var(--sidebar-menu-item-selected-color);
+  --_label-color: var(--sidebar-menu-item-selected-label-color);
+  font-weight: var(--font-weight-bold) !important;
 }
 .sidebar-menu-item.disabled {
   cursor: not-allowed;
@@ -2660,9 +2671,10 @@ var css_248z$3 = i`* {
   gap: 0.25rem;
   flex: 1;
   min-height: var(--sidebar-menu-item-height);
-  padding-inline: 0.75rem;
+  padding-inline: var(--sidebar-menu-item-content-padding, 0.75rem);
   color: inherit;
   z-index: 1;
+  overflow: hidden;
 }
 
 .background {
@@ -2677,9 +2689,15 @@ var css_248z$3 = i`* {
 .focus-ring {
   z-index: 2;
   --focus-ring-color: var(--sidebar-menu-item-focus-ring-color);
-  --focus-ring-container-shape-start-start: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-start-end: var(--sidebar-menu-item-border-radius);
-  --focus-ring-container-shape-end-start: var(--sidebar-menu-item-border-radius);
+  --focus-ring-container-shape-start-start: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-start-end: var(
+    --sidebar-menu-item-border-radius
+  );
+  --focus-ring-container-shape-end-start: var(
+    --sidebar-menu-item-border-radius
+  );
   --focus-ring-container-shape-end-end: var(--sidebar-menu-item-border-radius);
 }
 
@@ -2850,6 +2868,7 @@ __decorate([
 
 var css_248z$2 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -3137,6 +3156,7 @@ __decorate([
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -3315,6 +3335,7 @@ __decorate([
 var css_248z = i`@charset "UTF-8";
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .screen-reader-only {
@@ -3934,4 +3955,4 @@ __decorate([
 ], Select.prototype, "_searchInputEl", void 0);
 
 export { ChipSet as C, DatePicker as D, Input as I, LinearProgress as L, NumberField as N, Select as S, Tag as T, UrlField as U, CircularProgress as a, SidebarMenu as b, SidebarMenuItem as c, SidebarSubMenu as d, Switch as e, Textarea as f, TimePicker as g };
-//# sourceMappingURL=select-Dwtk0RIU.js.map
+//# sourceMappingURL=select-D85kpjUt.js.map