@universal-material/web 3.4.2 → 3.5.1

package/select/option.d.ts

@@ -11,7 +11,7 @@ export declare class UmOption extends UmMenuItem {
     set value(value: string);
     get selected(): boolean;
     set selected(selected: boolean);
-    protected renderDefaultTrailingIcon(): TemplateResult;
+    protected _renderDefaultTrailingIcon(): TemplateResult;
     private get _selectedAttribute();
     private set _selectedAttribute(value);
     _select: UmSelect | null;

package/select/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,+DAA+B;IAErD,aAAa,EAAE,cAAc,CAWxB;IAEL,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAmB7B;cAEkB,yBAAyB,IAAI,cAAc;IAS9D,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,kBAAkB,QAO7B;IAED,OAAO,EAAG,QAAQ,GAAG,IAAI,CAAC;IAEjB,iBAAiB;IAQjB,oBAAoB;IAsC7B,iBAAiB;CAyBlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,+DAA+B;IAErD,aAAa,EAAE,cAAc,CAWxB;IAEL,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAmB7B;cAEkB,0BAA0B,IAAI,cAAc;IAS/D,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,kBAAkB,QAO7B;IAED,OAAO,EAAG,QAAQ,GAAG,IAAI,CAAC;IAEjB,iBAAiB;IAQjB,oBAAoB;IAsC7B,iBAAiB;CAyBlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/select/option.js

@@ -45,7 +45,7 @@ let UmOption = class UmOption extends UmMenuItem {
         // this._select._button.setAttribute('aria-labelledby', this._listItem.id);
         this._select.empty = !this._nativeOption.textContent?.trim();
     }
-    renderDefaultTrailingIcon() {
+    _renderDefaultTrailingIcon() {
         return svg `
       <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
         <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>

package/select/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAGd,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,kBAAa,GAAmB,CAAC,GAAG,EAAE;YACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;YAClE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YAEtB,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;gBAClC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC;YAED,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAEtC,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,EAAE,CAAC;IAqIP,CAAC;aAlJiB,WAAM,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;IAgBrD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;IACnC,CAAC;IAGD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;IACrC,CAAC;IAED,IAAI,QAAQ,CAAC,QAAiB;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEvC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,2EAA2E;QAC3E,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC/D,CAAC;IAEkB,yBAAyB;QAC1C,OAAO,GAAG,CAAA;;;aAGD,CAAC;IACZ,CAAC;IAID,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC;IAED,aAAa;IACb,IAAY,kBAAkB,CAAC,QAAiB;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IACjD,CAAC;IAIQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAErD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAE5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;QAElF,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvF,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACpD,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACjC,CAAC;;AAjID;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAG3B;AAOD;IADC,KAAK,EAAE;wCAGP;AAgCD;IAFC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;IACnD,aAAa;kDAGZ;AA9DU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAmJpB","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { ExtendedOption } from './extended-option.js';\nimport { styles } from './option.styles.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n  static override styles = [UmMenuItem.styles, styles];\n\n  _nativeOption: ExtendedOption = (() => {\n    const option = document.createElement('option') as ExtendedOption;\n    option._parent = this;\n\n    if (this.hasAttribute('selected')) {\n      option.setAttribute('selected', '');\n    }\n\n    option.textContent = this.textContent;\n\n    return option;\n  })();\n\n  @property({ reflect: true })\n  get value(): string {\n    return this._nativeOption.value;\n  }\n\n  set value(value: string) {\n    this._nativeOption.value = value;\n  }\n\n  @state()\n  get selected(): boolean {\n    return this._nativeOption.selected;\n  }\n\n  set selected(selected: boolean) {\n    if (this.selected === selected) {\n      return;\n    }\n\n    this._nativeOption.selected = selected;\n\n    if (selected) {\n      this.classList.add('selected');\n    } else {\n      this.classList.remove('selected');\n    }\n\n    if (!this._select) {\n      return;\n    }\n\n    // this._select._button.setAttribute('aria-labelledby', this._listItem.id);\n    this._select.empty = !this._nativeOption.textContent?.trim();\n  }\n\n  protected override renderDefaultTrailingIcon(): TemplateResult {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n      </svg>`;\n  }\n\n  @property({ type: Boolean, attribute: 'selected' })\n  // @ts-ignore\n  private get _selectedAttribute(): boolean {\n    return this._nativeOption.hasAttribute('selected');\n  }\n\n  // @ts-ignore\n  private set _selectedAttribute(selected: boolean) {\n    if (selected) {\n      this._nativeOption.setAttribute('selected', '');\n      return;\n    }\n\n    this._nativeOption.removeAttribute('selected');\n  }\n\n  _select!: UmSelect | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n    this.setAttribute('tabindex', '-1');\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick);\n\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._nativeOption.remove();\n\n    if (!this._select) {\n      return;\n    }\n\n    this._select.value = this._select.value;\n    this._select = null;\n  }\n\n  async #attach(): Promise<void> {\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;\n\n    await this.#setNativeOption();\n  }\n\n  #handleClick(e: Event) {\n    if (!this._select) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    this.setSelectedByUser();\n  }\n\n  setSelectedByUser() {\n    if (!this._select) {\n      return;\n    }\n\n    this._select.selectedOptions[0]?.classList.remove('selected');\n    this.selected = true;\n\n    this._select.value = this._select.value;\n    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this._select.dispatchEvent(new Event('change', { bubbles: true }));\n\n    this._select._menu?.close();\n  }\n\n  #updateContent() {\n    this._nativeOption.textContent = this.textContent;\n  }\n\n  async #setNativeOption(): Promise<void> {\n    await this.updateComplete;\n    this.#updateContent();\n\n    this._select?._updateOptions();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-option': UmOption;\n  }\n}\n"]}
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAGd,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,kBAAa,GAAmB,CAAC,GAAG,EAAE;YACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;YAClE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YAEtB,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;gBAClC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YACtC,CAAC;YAED,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAEtC,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,EAAE,CAAC;IAqIP,CAAC;aAlJiB,WAAM,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;IAgBrD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;IACnC,CAAC;IAGD,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;IACrC,CAAC;IAED,IAAI,QAAQ,CAAC,QAAiB;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEvC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,2EAA2E;QAC3E,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC/D,CAAC;IAEkB,0BAA0B;QAC3C,OAAO,GAAG,CAAA;;;aAGD,CAAC;IACZ,CAAC;IAID,IAAY,kBAAkB;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC;IAED,aAAa;IACb,IAAY,kBAAkB,CAAC,QAAiB;QAC9C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAChD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IACjD,CAAC;IAIQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAErD,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAE5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,KAAK,CAAC,OAAO;QACX,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,YAAY,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC;QAElF,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC9D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACvF,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAEnE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACpD,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE,CAAC;IACjC,CAAC;;AAjID;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAG3B;AAOD;IADC,KAAK,EAAE;wCAGP;AAgCD;IAFC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;IACnD,aAAa;kDAGZ;AA9DU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAmJpB","sourcesContent":["import { svg, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { ExtendedOption } from './extended-option.js';\nimport { styles } from './option.styles.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n  static override styles = [UmMenuItem.styles, styles];\n\n  _nativeOption: ExtendedOption = (() => {\n    const option = document.createElement('option') as ExtendedOption;\n    option._parent = this;\n\n    if (this.hasAttribute('selected')) {\n      option.setAttribute('selected', '');\n    }\n\n    option.textContent = this.textContent;\n\n    return option;\n  })();\n\n  @property({ reflect: true })\n  get value(): string {\n    return this._nativeOption.value;\n  }\n\n  set value(value: string) {\n    this._nativeOption.value = value;\n  }\n\n  @state()\n  get selected(): boolean {\n    return this._nativeOption.selected;\n  }\n\n  set selected(selected: boolean) {\n    if (this.selected === selected) {\n      return;\n    }\n\n    this._nativeOption.selected = selected;\n\n    if (selected) {\n      this.classList.add('selected');\n    } else {\n      this.classList.remove('selected');\n    }\n\n    if (!this._select) {\n      return;\n    }\n\n    // this._select._button.setAttribute('aria-labelledby', this._listItem.id);\n    this._select.empty = !this._nativeOption.textContent?.trim();\n  }\n\n  protected override _renderDefaultTrailingIcon(): TemplateResult {\n    return svg`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n        <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\"/>\n      </svg>`;\n  }\n\n  @property({ type: Boolean, attribute: 'selected' })\n  // @ts-ignore\n  private get _selectedAttribute(): boolean {\n    return this._nativeOption.hasAttribute('selected');\n  }\n\n  // @ts-ignore\n  private set _selectedAttribute(selected: boolean) {\n    if (selected) {\n      this._nativeOption.setAttribute('selected', '');\n      return;\n    }\n\n    this._nativeOption.removeAttribute('selected');\n  }\n\n  _select!: UmSelect | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.#handleClick);\n    this.setAttribute('tabindex', '-1');\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#handleClick);\n\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._nativeOption.remove();\n\n    if (!this._select) {\n      return;\n    }\n\n    this._select.value = this._select.value;\n    this._select = null;\n  }\n\n  async #attach(): Promise<void> {\n    if (this._select === this.parentElement) {\n      return;\n    }\n\n    this._select = this.parentElement instanceof UmSelect ? this.parentElement : null;\n\n    await this.#setNativeOption();\n  }\n\n  #handleClick(e: Event) {\n    if (!this._select) {\n      return;\n    }\n\n    e.stopPropagation();\n\n    this.setSelectedByUser();\n  }\n\n  setSelectedByUser() {\n    if (!this._select) {\n      return;\n    }\n\n    this._select.selectedOptions[0]?.classList.remove('selected');\n    this.selected = true;\n\n    this._select.value = this._select.value;\n    this._select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n    this._select.dispatchEvent(new Event('change', { bubbles: true }));\n\n    this._select._menu?.close();\n  }\n\n  #updateContent() {\n    this._nativeOption.textContent = this.textContent;\n  }\n\n  async #setNativeOption(): Promise<void> {\n    await this.updateComplete;\n    this.#updateContent();\n\n    this._select?._updateOptions();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-option': UmOption;\n  }\n}\n"]}

package/shared/base.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4BlB,CAAC"}
+{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6BlB,CAAC"}

package/shared/base.styles.js

@@ -9,6 +9,7 @@ export const styles = css `
     outline: 0;
   }
 
+  .force-focus-ring .focus-ring,
   :host(.force-focus-ring) .focus-ring,
   .focus-ring:focus-visible {
     animation: u-focus-pulse 500ms ease;

package/shared/base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-color: var(--u-focus-ring-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_focus-ring-color);\n    }\n    50% {\n      outline: 6px solid var(--_focus-ring-color);\n    }\n    100% {\n      outline: 4px solid var(--_focus-ring-color);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-color: var(--u-focus-ring-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  .force-focus-ring .focus-ring,\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_focus-ring-color);\n    }\n    50% {\n      outline: 6px solid var(--_focus-ring-color);\n    }\n    100% {\n      outline: 4px solid var(--_focus-ring-color);\n    }\n  }\n`;\n"]}

package/shared/button-wrapper.d.ts

@@ -21,19 +21,17 @@ export declare abstract class UmButtonWrapper extends LitElement {
     target: string | undefined;
     name: string | undefined;
     readonly buttonElement: HTMLElement;
-    private readonly ripple;
+    private readonly _ripple;
     protected innerRole: string | null;
     get pathname(): string;
     protected render(): HTMLTemplateResult;
-    private renderButton;
-    private renderLink;
-    protected abstract renderContent(): HTMLTemplateResult;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected abstract _renderContent(): HTMLTemplateResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     focus(): void;
     blur(): void;
     protected getAriaLabel(): string | null;
-    private innerFocusHandler;
-    protected handleClick(_: UIEvent): void;
+    protected _handleClick(_: UIEvent): void;
 }
 //# sourceMappingURL=button-wrapper.d.ts.map

package/shared/button-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAQpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D;;OAEG;IACyC,QAAQ,UAAS;IAEpD,YAAY,UAAQ;IAE7B;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IACpC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAI/C,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,UAAU;IAmBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAIvC,OAAO,CAAC,iBAAiB;IA6BzB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAExC"}
+{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AASpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D;;OAEG;IACyC,QAAQ,UAAS;IAEpD,YAAY,UAAQ;IAE7B;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IACpC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAY;IAEvD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAU/C,SAAS,CAAC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAyCzD,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,kBAAkB;IAE9C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAiCvC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAEzC"}

package/shared/button-wrapper.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from './base.styles.js';
 import { styles } from './button-wrapper.styles';
 import { redispatchEvent } from './events/redispatch-event.js';
@@ -21,11 +22,18 @@ export class UmButtonWrapper extends LitElement {
         return this.buttonElement?.pathname;
     }
     render() {
-        return typeof this.href === 'string' ? this.renderLink() : this.renderButton();
+        const contents = typeof this.href === 'string'
+            ? this.#renderLink()
+            : this.#renderButton();
+        const containerClasses = classMap(this._getContainerClasses());
+        return html `<div class="container ${containerClasses}" part="container"> ${contents}</div>`;
     }
-    renderButton() {
+    _getContainerClasses() {
+        return { disabled: this.disabled };
+    }
+    #renderButton() {
         return html `
-      <div class="content">${this.renderContent()}</div>
+      <div class="content">${this._renderContent()}</div>
       <button
         id="button"
         class="button focus-ring"
@@ -40,9 +48,9 @@ export class UmButtonWrapper extends LitElement {
       </button>
     `;
     }
-    renderLink() {
+    #renderLink() {
         return html `
-      <div class="content">${this.renderContent()}</div>
+      <div class="content">${this._renderContent()}</div>
       <a
         id="link"
         class="button"
@@ -60,11 +68,11 @@ export class UmButtonWrapper extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener('focus', this.innerFocusHandler);
+        this.addEventListener('focus', this.#innerFocusHandler);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        this.removeEventListener('focus', this.innerFocusHandler);
+        this.removeEventListener('focus', this.#innerFocusHandler);
     }
     focus() {
         this.buttonElement?.focus();
@@ -75,7 +83,7 @@ export class UmButtonWrapper extends LitElement {
     getAriaLabel() {
         return this.ariaLabel;
     }
-    innerFocusHandler() {
+    #innerFocusHandler() {
         const tabIndexAttributeValue = this.getAttribute('tabindex');
         if (tabIndexAttributeValue !== '0') {
             return;
@@ -92,11 +100,11 @@ export class UmButtonWrapper extends LitElement {
             return;
         }
         if (!event.pointerType) {
-            this.ripple.createRipple();
+            this._ripple.createRipple();
         }
-        this.handleClick(event);
+        this._handleClick(event);
     }
-    handleClick(_) {
+    _handleClick(_) {
     }
 }
 __decorate([
@@ -119,5 +127,5 @@ __decorate([
 ], UmButtonWrapper.prototype, "buttonElement", void 0);
 __decorate([
     query('u-ripple')
-], UmButtonWrapper.prototype, "ripple", void 0);
+], UmButtonWrapper.prototype, "_ripple", void 0);
 //# sourceMappingURL=button-wrapper.js.map

package/shared/button-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles as baseStyles } from './base.styles.js';\nimport { styles } from './button-wrapper.styles';\nimport { redispatchEvent } from './events/redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() renderRipple = true;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  protected innerRole: string | null = null;\n\n  get pathname(): string {\n    return (this.buttonElement as HTMLAnchorElement)?.pathname;\n  }\n\n  protected override render(): HTMLTemplateResult {\n    return typeof this.href === 'string' ? this.renderLink() : this.renderButton();\n  }\n\n  private renderButton() {\n    return html`\n      <div class=\"content\">${this.renderContent()}</div>\n      <button\n        id=\"button\"\n        class=\"button focus-ring\"\n        ?disabled=${this.disabled}\n        aria-label=${this.getAriaLabel() || nothing}\n        aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        type=\"button\"\n        @click=${this.#innerClickHandler}>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n    `;\n  }\n\n  private renderLink() {\n    return html`\n      <div class=\"content\">${this.renderContent()}</div>\n      <a\n        id=\"link\"\n        class=\"button\"\n        href=${this.disabled ? nothing : this.href}\n        aria-disabled=${this.disabled || nothing}\n        aria-label=${this.ariaLabel || nothing}\n        aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        target=${this.target || nothing}\n        @click=${this.#innerClickHandler}>\n        <u-elevation></u-elevation>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n      </a>\n    `;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this.innerFocusHandler);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this.innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null {\n    return this.ariaLabel;\n  }\n\n  private innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== '0') {\n      return;\n    }\n\n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  #innerClickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n\n    if (preventDefault) {\n      return;\n    }\n\n    if (!(event as PointerEvent).pointerType) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n  }\n\n  protected handleClick(_: UIEvent): void {\n  }\n}\n"]}
+{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { styles as baseStyles } from './base.styles.js';\nimport { styles } from './button-wrapper.styles';\nimport { redispatchEvent } from './events/redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() renderRipple = true;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href: string | undefined;\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly _ripple!: UmRipple;\n\n  protected innerRole: string | null = null;\n\n  get pathname(): string {\n    return (this.buttonElement as HTMLAnchorElement)?.pathname;\n  }\n\n  protected override render(): HTMLTemplateResult {\n    const contents = typeof this.href === 'string'\n      ? this.#renderLink()\n      : this.#renderButton();\n\n    const containerClasses = classMap(this._getContainerClasses());\n\n    return html`<div class=\"container ${containerClasses}\" part=\"container\"> ${contents}</div>`;\n  }\n\n  protected _getContainerClasses(): Record<string, boolean> {\n    return { disabled: this.disabled };\n  }\n\n  #renderButton() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <button\n        id=\"button\"\n        class=\"button focus-ring\"\n        ?disabled=${this.disabled}\n        aria-label=${this.getAriaLabel() || nothing}\n        aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        type=\"button\"\n        @click=${this.#innerClickHandler}>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    return html`\n      <div class=\"content\">${this._renderContent()}</div>\n      <a\n        id=\"link\"\n        class=\"button\"\n        href=${this.disabled ? nothing : this.href}\n        aria-disabled=${this.disabled || nothing}\n        aria-label=${this.ariaLabel || nothing}\n        aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n        .role=${this.innerRole}\n        target=${this.target || nothing}\n        @click=${this.#innerClickHandler}>\n        <u-elevation></u-elevation>\n        <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n      </a>\n    `;\n  }\n\n  protected abstract _renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this.#innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null {\n    return this.ariaLabel;\n  }\n\n  #innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== '0') {\n      return;\n    }\n\n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  #innerClickHandler(event: MouseEvent): void {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n\n    if (preventDefault) {\n      return;\n    }\n\n    if (!(event as PointerEvent).pointerType) {\n      this._ripple.createRipple();\n    }\n\n    this._handleClick(event);\n  }\n\n  protected _handleClick(_: UIEvent): void {\n  }\n}\n"]}

package/shared/button-wrapper.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.styles.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4DlB,CAAC"}
+{"version":3,"file":"button-wrapper.styles.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8DlB,CAAC"}

package/shared/button-wrapper.styles.js

@@ -4,19 +4,21 @@ export const styles = css `
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     -webkit-tap-highlight-color: transparent;
     --u-elevation-level: 0;
-    position: relative;
     display: inline-block;
+  }
+
+  .container {
+    position: relative;
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     appearance: none !important;
   }
 
-  :host([disabled]) {
+  .disabled {
     --u-elevation-level: 0 !important;
-    background-color: var(--u-button-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-background-opacity, 12%), transparent)) !important;
+    background-color: var(--u-button-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-background-opacity, 10%), transparent)) !important;
     color: var(--u-button-disabled-text-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-opacity, 38%), transparent)) !important;
   }
-
-  :host([disabled]) .button {
+  .disabled .button {
     cursor: default;
   }
 

package/shared/button-wrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-background-opacity, 12%), transparent)) !important;\n    color: var(--u-button-disabled-text-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-opacity, 38%), transparent)) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n`;\n"]}
+{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    --u-elevation-level: 0;\n    display: inline-block;\n  }\n\n  .container {\n    position: relative;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\n  }\n\n  .disabled {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-bg-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-background-opacity, 10%), transparent)) !important;\n    color: var(--u-button-disabled-text-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-button-disabled-opacity, 38%), transparent)) !important;\n  }\n  .disabled .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    border-radius: inherit;\n    width: 100%;\n    height: 100%;\n  }\n`;\n"]}

package/tab-bar/tab-bar.js

@@ -141,8 +141,9 @@ let UmTabBar = class UmTabBar extends LitElement {
             this._tabIndicator.style.width = '0';
             return;
         }
-        const tabStyles = getComputedStyle(this.activeTab);
-        const padding = this.variant === 'primary' ? parseInt(tabStyles.paddingInline, 10) : 0;
+        const padding = this.variant === 'primary'
+            ? parseInt(this.activeTab._paddingInline, 10)
+            : 0;
         this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
         this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;
     }

package/tab-bar/tab-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #tabs: UmTab[] = [];\n  #activeTab: UmTab | null = null;\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n    this._setScrollIndicatorsActive();\n    this._updateTabIndicator();\n  });\n\n  @property({ reflect: true }) variant: 'primary' | 'secondary' = 'primary';\n\n  @query('.scroll-left') private readonly _scrollLeft!: HTMLElement;\n  @query('.scroll-right') private readonly _scrollRight!: HTMLElement;\n  @query('.container') private readonly _container!: HTMLElement;\n  @query('.tab-indicator') private readonly _tabIndicator?: HTMLElement;\n\n  @queryAssignedElements({ flatten: true }) assignedElements!: HTMLElement[];\n\n  get activeTabIndex(): number {\n    if (!this.activeTab) {\n      return -1;\n    }\n\n    return this.#tabs.indexOf(this.activeTab);\n  }\n\n  set activeTabIndex(index: number) {\n    this.activeTab = this.#tabs[index];\n  }\n\n  get activeTab(): UmTab | null {\n    return this.#activeTab;\n  }\n\n  set activeTab(activeTab: UmTab | null) {\n    if (!this.#tabs.length) {\n      this.#activeTab = null;\n      this._updateTabIndicator();\n      return;\n    }\n\n    if (\n      !activeTab\n      || this.#activeTab === activeTab\n      || !this.#tabs.includes(activeTab)\n    ) {\n      return;\n    }\n\n    const previouslyActiveTab = this.#activeTab;\n    this.#activeTab = activeTab;\n\n    previouslyActiveTab?.requestUpdate();\n\n    activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    activeTab.requestUpdate();\n    this._updateTabIndicator();\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    _: string | null,\n    __: string | null,\n  ) {\n    if (name === 'variant') {\n      this._updateTabIndicator();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#attach();\n  }\n\n  protected override render(): TemplateResult {\n    const classes = { secondary: this.variant === 'secondary' };\n\n    return html`\n      <div\n        class=\"scroll-indicator scroll-left active\"\n        @click=${this.#scrollToLeft}>\n        <u-elevation></u-elevation>\n        <u-ripple></u-ripple>\n        <slot name=\"scroll-left\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"1em\"\n            viewBox=\"0 -960 960 960\"\n            width=\"1em\"\n            fill=\"currentColor\">\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n          </svg>\n        </slot>\n      </div>\n      <div\n        class=\"container ${classMap(classes)}\"\n        @scrollend=${this.#handleContainerScrollEnd}>\n        <slot @slotchange=${this.#handleSlotChange}></slot>\n        <div class=\"tab-indicator\"></div>\n      </div>\n      <div\n        class=\"scroll-indicator scroll-right active\"\n        @click=${this.#scrollToRight}>\n        <u-elevation></u-elevation>\n        <u-ripple></u-ripple>\n        <slot name=\"scroll-right\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"1em\"\n            viewBox=\"0 -960 960 960\"\n            width=\"1em\"\n            fill=\"currentColor\">\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n          </svg>\n        </slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.#resizeObserver.observe(this);\n  }\n\n  readonly #handleSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.#tabs =\n      slot.assignedElements({ flatten: true }).filter(element => element instanceof UmTab);\n\n    for (const tab of this.#tabs) {\n      tab._bar = this;\n    }\n\n    if (this.activeTabIndex > -1) {\n      return;\n    }\n\n    this.activeTab = this.#tabs[0];\n  };\n\n  readonly #handleContainerScrollEnd = () => {\n    this._setScrollIndicatorsActive();\n  };\n\n  _updateTabIndicator() {\n    if (!this._tabIndicator) {\n      return;\n    }\n\n    if (!this.activeTab) {\n      this._tabIndicator.style.left = '0';\n      this._tabIndicator.style.width = '0';\n      return;\n    }\n\n    const tabStyles = getComputedStyle(this.activeTab);\n    const padding =\n      this.variant === 'primary' ? parseInt(tabStyles.paddingInline, 10) : 0;\n\n    this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n    this._tabIndicator.style.width = `${\n      this.activeTab.offsetWidth - padding * 2\n    }px`;\n  }\n\n  readonly #scrollToLeft = () => {\n    this._container.scrollBy({\n      left: this._container.offsetWidth / -2,\n      behavior: 'smooth',\n    });\n  };\n\n  readonly #scrollToRight = () => {\n    this._container.scrollBy({\n      left: this._container.offsetWidth / 2,\n      behavior: 'smooth',\n    });\n  };\n\n  _setScrollIndicatorsActive() {\n    const scrollSafeMargin = 1;\n\n    const scrollLength =\n      this._container.scrollWidth - this._container.offsetWidth;\n\n    const isRtl = getComputedStyle(this._container).direction === 'rtl';\n    const scrollStart = isRtl\n      ? this._container.scrollLeft + scrollLength\n      : this._container.scrollLeft;\n\n    if (scrollStart - scrollSafeMargin <= 0) {\n      this._container.scrollBy(-1, 0);\n      this._scrollLeft.classList.remove('active');\n    } else {\n      this._scrollLeft.classList.add('active');\n    }\n\n    if (scrollStart >= scrollLength - scrollSafeMargin) {\n      this._container.scrollBy(1, 0);\n      this._scrollRight.classList.remove('active');\n    } else {\n      this._scrollRight.classList.add('active');\n    }\n  }\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this._setScrollIndicatorsActive();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab-bar': UmTabBar;\n  }\n}\n"]}
+{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #tabs: UmTab[] = [];\n  #activeTab: UmTab | null = null;\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n    this._setScrollIndicatorsActive();\n    this._updateTabIndicator();\n  });\n\n  @property({ reflect: true }) variant: 'primary' | 'secondary' = 'primary';\n\n  @query('.scroll-left') private readonly _scrollLeft!: HTMLElement;\n  @query('.scroll-right') private readonly _scrollRight!: HTMLElement;\n  @query('.container') private readonly _container!: HTMLElement;\n  @query('.tab-indicator') private readonly _tabIndicator?: HTMLElement;\n\n  @queryAssignedElements({ flatten: true }) assignedElements!: HTMLElement[];\n\n  get activeTabIndex(): number {\n    if (!this.activeTab) {\n      return -1;\n    }\n\n    return this.#tabs.indexOf(this.activeTab);\n  }\n\n  set activeTabIndex(index: number) {\n    this.activeTab = this.#tabs[index];\n  }\n\n  get activeTab(): UmTab | null {\n    return this.#activeTab;\n  }\n\n  set activeTab(activeTab: UmTab | null) {\n    if (!this.#tabs.length) {\n      this.#activeTab = null;\n      this._updateTabIndicator();\n      return;\n    }\n\n    if (\n      !activeTab\n      || this.#activeTab === activeTab\n      || !this.#tabs.includes(activeTab)\n    ) {\n      return;\n    }\n\n    const previouslyActiveTab = this.#activeTab;\n    this.#activeTab = activeTab;\n\n    previouslyActiveTab?.requestUpdate();\n\n    activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n    activeTab.requestUpdate();\n    this._updateTabIndicator();\n  }\n\n  override attributeChangedCallback(\n    name: string,\n    _: string | null,\n    __: string | null,\n  ) {\n    if (name === 'variant') {\n      this._updateTabIndicator();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.#attach();\n  }\n\n  protected override render(): TemplateResult {\n    const classes = { secondary: this.variant === 'secondary' };\n\n    return html`\n      <div\n        class=\"scroll-indicator scroll-left active\"\n        @click=${this.#scrollToLeft}>\n        <u-elevation></u-elevation>\n        <u-ripple></u-ripple>\n        <slot name=\"scroll-left\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"1em\"\n            viewBox=\"0 -960 960 960\"\n            width=\"1em\"\n            fill=\"currentColor\">\n            <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n          </svg>\n        </slot>\n      </div>\n      <div\n        class=\"container ${classMap(classes)}\"\n        @scrollend=${this.#handleContainerScrollEnd}>\n        <slot @slotchange=${this.#handleSlotChange}></slot>\n        <div class=\"tab-indicator\"></div>\n      </div>\n      <div\n        class=\"scroll-indicator scroll-right active\"\n        @click=${this.#scrollToRight}>\n        <u-elevation></u-elevation>\n        <u-ripple></u-ripple>\n        <slot name=\"scroll-right\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"1em\"\n            viewBox=\"0 -960 960 960\"\n            width=\"1em\"\n            fill=\"currentColor\">\n            <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n          </svg>\n        </slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.#resizeObserver.observe(this);\n  }\n\n  readonly #handleSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    this.#tabs =\n      slot.assignedElements({ flatten: true }).filter(element => element instanceof UmTab);\n\n    for (const tab of this.#tabs) {\n      tab._bar = this;\n    }\n\n    if (this.activeTabIndex > -1) {\n      return;\n    }\n\n    this.activeTab = this.#tabs[0];\n  };\n\n  readonly #handleContainerScrollEnd = () => {\n    this._setScrollIndicatorsActive();\n  };\n\n  _updateTabIndicator() {\n    if (!this._tabIndicator) {\n      return;\n    }\n\n    if (!this.activeTab) {\n      this._tabIndicator.style.left = '0';\n      this._tabIndicator.style.width = '0';\n      return;\n    }\n\n    const padding = this.variant === 'primary'\n      ? parseInt(this.activeTab._paddingInline, 10)\n      : 0;\n\n    this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n    this._tabIndicator.style.width = `${\n      this.activeTab.offsetWidth - padding * 2\n    }px`;\n  }\n\n  readonly #scrollToLeft = () => {\n    this._container.scrollBy({\n      left: this._container.offsetWidth / -2,\n      behavior: 'smooth',\n    });\n  };\n\n  readonly #scrollToRight = () => {\n    this._container.scrollBy({\n      left: this._container.offsetWidth / 2,\n      behavior: 'smooth',\n    });\n  };\n\n  _setScrollIndicatorsActive() {\n    const scrollSafeMargin = 1;\n\n    const scrollLength =\n      this._container.scrollWidth - this._container.offsetWidth;\n\n    const isRtl = getComputedStyle(this._container).direction === 'rtl';\n    const scrollStart = isRtl\n      ? this._container.scrollLeft + scrollLength\n      : this._container.scrollLeft;\n\n    if (scrollStart - scrollSafeMargin <= 0) {\n      this._container.scrollBy(-1, 0);\n      this._scrollLeft.classList.remove('active');\n    } else {\n      this._scrollLeft.classList.add('active');\n    }\n\n    if (scrollStart >= scrollLength - scrollSafeMargin) {\n      this._container.scrollBy(1, 0);\n      this._scrollRight.classList.remove('active');\n    } else {\n      this._scrollRight.classList.add('active');\n    }\n  }\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this._setScrollIndicatorsActive();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab-bar': UmTabBar;\n  }\n}\n"]}

package/tab-bar/tab.d.ts

@@ -8,11 +8,13 @@ export declare class UmTab extends UmButtonWrapper {
     get active(): boolean;
     set active(active: boolean);
     hasIcon: boolean;
+    private readonly _container;
+    get _paddingInline(): string;
     constructor();
-    protected renderContent(): HTMLTemplateResult;
+    protected _renderContent(): HTMLTemplateResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected handleClick(_: UIEvent): void;
+    protected _handleClick(_: UIEvent): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/tab-bar/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAE4B,OAAO,UAAS;;cAO1B,aAAa,IAAI,kBAAkB;IAe7C,iBAAiB;IAMjB,oBAAoB;cAiBV,WAAW,CAAC,CAAC,EAAE,OAAO;CAuB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGxC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAE4B,OAAO,UAAS;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE/D,IAAI,cAAc,IAAI,MAAM,CAE3B;;cAOkB,cAAc,IAAI,kBAAkB;IAiB9C,iBAAiB;IAMjB,oBAAoB;cAiBV,YAAY,CAAC,CAAC,EAAE,OAAO;CAuB3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}

package/tab-bar/tab.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { UmButtonWrapper } from '../shared/button-wrapper.js';
 import { styles } from './tab.styles.js';
@@ -20,6 +20,9 @@ let UmTab = class UmTab extends UmButtonWrapper {
         }
         this._bar.activeTabIndex = 0;
     }
+    get _paddingInline() {
+        return getComputedStyle(this._container).paddingInline;
+    }
     constructor() {
         super();
         this._bar = null;
@@ -31,15 +34,17 @@ let UmTab = class UmTab extends UmButtonWrapper {
         this.hasIcon = false;
         this.#resizeObserver.observe(this);
     }
-    renderContent() {
+    _renderContent() {
         const classes = { active: this.active, ['has-icon']: this.hasIcon };
         return html `
-      <div class="tab-content ${classMap(classes)}">
-        <div class="icon" part="icon">
-          <slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
-        </div>
-        <div class="label" part="label">
-          <slot></slot>
+      <div class="container">
+        <div class="tab-content ${classMap(classes)}">
+          <div class="icon" part="icon">
+            <slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
+          </div>
+          <div class="label" part="label">
+            <slot></slot>
+          </div>
         </div>
       </div>
     `;
@@ -61,8 +66,8 @@ let UmTab = class UmTab extends UmButtonWrapper {
         this._bar._setScrollIndicatorsActive();
         this._bar = null;
     }
-    handleClick(_) {
-        super.handleClick(_);
+    _handleClick(_) {
+        super._handleClick(_);
         if (!this._bar) {
             return;
         }
@@ -84,6 +89,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UmTab.prototype, "hasIcon", void 0);
+__decorate([
+    query('.container')
+], UmTab.prototype, "_container", void 0);
 UmTab = __decorate([
     customElement('u-tab')
 ], UmTab);

package/tab-bar/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\nimport { styles } from './tab.styles.js';\n\n@customElement('u-tab')\nexport class UmTab extends UmButtonWrapper {\n  static override styles = [UmButtonWrapper.styles, styles];\n\n  _bar: UmTabBar | null = null;\n\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n    if (this.active) {\n      this._bar?._updateTabIndicator();\n    }\n  });\n\n  @state()\n  get active(): boolean {\n    return this._bar?.activeTab === this;\n  }\n\n  set active(active: boolean) {\n    if (!this._bar) {\n      return;\n    }\n\n    if (active) {\n      this._bar.activeTab = this;\n      return;\n    }\n\n    this._bar.activeTabIndex = 0;\n  }\n\n  @property({ type: Boolean }) hasIcon = false;\n\n  constructor() {\n    super();\n    this.#resizeObserver.observe(this);\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n    const classes = { active: this.active, ['has-icon']: this.hasIcon };\n\n    return html`\n      <div class=\"tab-content ${classMap(classes)}\">\n        <div class=\"icon\" part=\"icon\">\n          <slot name=\"icon\" @slotchange=${this.#iconSlotChange}></slot>\n        </div>\n        <div class=\"label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._bar?._updateTabIndicator();\n    this._bar?._setScrollIndicatorsActive();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (!this._bar) {\n      return;\n    }\n\n    if (this._bar.activeTab === this) {\n      this._bar.activeTabIndex = 0;\n    }\n\n    this._bar._updateTabIndicator();\n    this._bar._setScrollIndicatorsActive();\n\n    this._bar = null;\n  }\n\n  protected override handleClick(_: UIEvent) {\n    super.handleClick(_);\n\n    if (!this._bar) {\n      return;\n    }\n\n    const changePrevented = !this._bar.dispatchEvent(\n      new Event('changing', { bubbles: true, cancelable: true }),\n    );\n\n    if (changePrevented) {\n      return;\n    }\n\n    this._bar.activeTab = this;\n    this._bar.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #iconSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedElements({ flatten: true }).length;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab': UmTab;\n  }\n}\n"]}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\nimport { styles } from './tab.styles.js';\n\n@customElement('u-tab')\nexport class UmTab extends UmButtonWrapper {\n  static override styles = [UmButtonWrapper.styles, styles];\n\n  _bar: UmTabBar | null = null;\n\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n    if (this.active) {\n      this._bar?._updateTabIndicator();\n    }\n  });\n\n  @state()\n  get active(): boolean {\n    return this._bar?.activeTab === this;\n  }\n\n  set active(active: boolean) {\n    if (!this._bar) {\n      return;\n    }\n\n    if (active) {\n      this._bar.activeTab = this;\n      return;\n    }\n\n    this._bar.activeTabIndex = 0;\n  }\n\n  @property({ type: Boolean }) hasIcon = false;\n  @query('.container') private readonly _container!: HTMLElement;\n\n  get _paddingInline(): string {\n    return getComputedStyle(this._container).paddingInline;\n  }\n\n  constructor() {\n    super();\n    this.#resizeObserver.observe(this);\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const classes = { active: this.active, ['has-icon']: this.hasIcon };\n\n    return html`\n      <div class=\"container\">\n        <div class=\"tab-content ${classMap(classes)}\">\n          <div class=\"icon\" part=\"icon\">\n            <slot name=\"icon\" @slotchange=${this.#iconSlotChange}></slot>\n          </div>\n          <div class=\"label\" part=\"label\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._bar?._updateTabIndicator();\n    this._bar?._setScrollIndicatorsActive();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    if (!this._bar) {\n      return;\n    }\n\n    if (this._bar.activeTab === this) {\n      this._bar.activeTabIndex = 0;\n    }\n\n    this._bar._updateTabIndicator();\n    this._bar._setScrollIndicatorsActive();\n\n    this._bar = null;\n  }\n\n  protected override _handleClick(_: UIEvent) {\n    super._handleClick(_);\n\n    if (!this._bar) {\n      return;\n    }\n\n    const changePrevented = !this._bar.dispatchEvent(\n      new Event('changing', { bubbles: true, cancelable: true }),\n    );\n\n    if (changePrevented) {\n      return;\n    }\n\n    this._bar.activeTab = this;\n    this._bar.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  #iconSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this.hasIcon = !!slot.assignedElements({ flatten: true }).length;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab': UmTab;\n  }\n}\n"]}

package/tab-bar/tab.styles.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
+  .container {
     --u-focus-ring-outline-offset: -4px;
     --_tab-height: var(--u-tab-height, 48px);
     display: block;
@@ -22,7 +22,7 @@ export const styles = css `
     --_tab-height: var(--u-tab-with-icon-height, 64px);
   }
 
-  :host(.force-focus-ring) .button,
+  .force-focus-ring .button,
   .button:focus-visible {
     border-radius: var(--u-spacing-small, 8px);
   }

package/tab-bar/tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-focus-ring-outline-offset: -4px;\n    --_tab-height: var(--u-tab-height, 48px);\n    display: block;\n    flex: 0.5;\n    padding-inline: var(--u-tab-padding, 16px);\n  }\n\n  .tab-content {\n    display: flex;\n    flex-direction: var(--_tab-content-direction, column);\n    align-items: center;\n    justify-content: center;\n    max-width: 100%;\n    height: var(--_tab-height);\n    gap: var(--_tab-content-gap, 0);\n  }\n\n  .has-icon {\n    --_tab-height: var(--u-tab-with-icon-height, 64px);\n  }\n\n  :host(.force-focus-ring) .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-tab-label-line-height, var(--u-title-s-line-height, 1.25rem));\n    font-size: var(--u-tab-label-font-size, var(--u-title-s-font-size, 0.875rem));\n    letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));\n    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    max-width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .active .icon,\n  .active .label {\n    color: var(--_active-label-color);\n  }\n`;\n"]}
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../src/tab-bar/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .container {\n    --u-focus-ring-outline-offset: -4px;\n    --_tab-height: var(--u-tab-height, 48px);\n    display: block;\n    flex: 0.5;\n    padding-inline: var(--u-tab-padding, 16px);\n  }\n\n  .tab-content {\n    display: flex;\n    flex-direction: var(--_tab-content-direction, column);\n    align-items: center;\n    justify-content: center;\n    max-width: 100%;\n    height: var(--_tab-height);\n    gap: var(--_tab-content-gap, 0);\n  }\n\n  .has-icon {\n    --_tab-height: var(--u-tab-with-icon-height, 64px);\n  }\n\n  .force-focus-ring .button,\n  .button:focus-visible {\n    border-radius: var(--u-spacing-small, 8px);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-tab-label-line-height, var(--u-title-s-line-height, 1.25rem));\n    font-size: var(--u-tab-label-font-size, var(--u-title-s-font-size, 0.875rem));\n    letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));\n    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    max-width: 100%;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .active .icon,\n  .active .label {\n    color: var(--_active-label-color);\n  }\n`;\n"]}

package/typeahead/typeahead.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typeahead.styles.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAalB,CAAC"}
+{"version":3,"file":"typeahead.styles.d.ts","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAUlB,CAAC"}

package/typeahead/typeahead.styles.js

@@ -2,15 +2,12 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
+    --u-menu-item-label-font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));
   }
 
   :host([fit-target]) u-menu::part(menu) {
     width: var(--_menu-width);
     max-width: none;
   }
-
-  u-menu-item {
-    font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));
-  }
 `;
 //# sourceMappingURL=typeahead.styles.js.map

package/typeahead/typeahead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"typeahead.styles.js","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;CAazB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n  }\n\n  :host([fit-target]) u-menu::part(menu) {\n    width: var(--_menu-width);\n    max-width: none;\n  }\n\n  u-menu-item {\n    font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));\n  }\n`;\n"]}
+{"version":3,"file":"typeahead.styles.js","sourceRoot":"","sources":["../../src/typeahead/typeahead.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;CAUzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --u-menu-item-label-font-weight: var(--u-typeahead-item-font-weight, var(--u-font-weight-regular, 400));\n  }\n\n  :host([fit-target]) u-menu::part(menu) {\n    width: var(--_menu-width);\n    max-width: none;\n  }\n`;\n"]}