@universal-material/web 3.7.2 → 3.9.0

package/switch/switch.js

@@ -2,9 +2,9 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
+import { SelectionControl } from '../shared/selection-control/selection-control.js';
 import { styles } from './switch.styles.js';
-let UmSwitch = class UmSwitch extends UmSelectionControl {
+let Switch = class Switch extends SelectionControl {
     static { this.styles = [
         baseStyles,
         styles,
@@ -23,8 +23,8 @@ let UmSwitch = class UmSwitch extends UmSelectionControl {
     `;
     }
 };
-UmSwitch = __decorate([
+Switch = __decorate([
     customElement('u-switch')
-], UmSwitch);
-export { UmSwitch };
+], Switch);
+export { Switch };
 //# sourceMappingURL=switch.js.map

package/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,kBAAkB;aAC9B,WAAM,GAAG;QACvB,UAAU;QACV,MAAM;KACP,AAHqB,CAGpB;IAEF;QACE,KAAK,EAAE,CAAC;QAGS,iBAAY,GAAG,KAAK,CAAC;IAFxC,CAAC;IAIkB,eAAe;QAChC,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;;AApBU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAqBpB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './switch.styles.js';\n\n@customElement('u-switch')\nexport class UmSwitch extends UmSelectionControl {\n  static override styles = [\n    baseStyles,\n    styles,\n  ];\n\n  constructor() {\n    super();\n  }\n\n  protected override renderRipple = false;\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"indicator\">\n        <div class=\"state-layer\">\n          <div class=\"handle\"></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch': UmSwitch;\n  }\n}\n"]}
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAGrC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,gBAAgB;aAC1B,WAAM,GAAG;QACvB,UAAU;QACV,MAAM;KACP,AAHqB,CAGpB;IAEF;QACE,KAAK,EAAE,CAAC;QAGS,iBAAY,GAAG,KAAK,CAAC;IAFxC,CAAC;IAIkB,eAAe;QAChC,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;;AApBU,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CAqBlB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { SelectionControl } from '../shared/selection-control/selection-control.js';\nimport { styles } from './switch.styles.js';\n\n@customElement('u-switch')\nexport class Switch extends SelectionControl {\n  static override styles = [\n    baseStyles,\n    styles,\n  ];\n\n  constructor() {\n    super();\n  }\n\n  protected override renderRipple = false;\n\n  protected override renderIndicator(): HTMLTemplateResult {\n    return html`\n      <div class=\"indicator\">\n        <div class=\"state-layer\">\n          <div class=\"handle\"></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch': Switch;\n  }\n}\n"]}

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

@@ -1,8 +1,11 @@
 import { LitElement, TemplateResult } from 'lit';
-import { UmTab } from './tab.js';
-export declare class UmTabBar extends LitElement {
+import { Tab } from './tab.js';
+export declare class TabBar extends LitElement {
     #private;
     static styles: import("lit").CSSResult[];
+    /**
+     * The Tab Bar variant to render
+     */
     variant: 'primary' | 'secondary';
     private readonly _scrollLeft;
     private readonly _scrollRight;
@@ -11,9 +14,9 @@ export declare class UmTabBar extends LitElement {
     assignedElements: HTMLElement[];
     get activeTabIndex(): number;
     set activeTabIndex(index: number);
-    get activeTab(): UmTab | null;
-    set activeTab(activeTab: UmTab | null);
-    attributeChangedCallback(name: string, _: string | null, __: string | null): void;
+    get activeTab(): Tab | null;
+    set activeTab(activeTab: Tab | null);
+    attributeChangedCallback(name: string, _old: string | null, _new: string | null): void;
     connectedCallback(): void;
     protected render(): TemplateResult;
     constructor();
@@ -22,7 +25,7 @@ export declare class UmTabBar extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-tab-bar': UmTabBar;
+        'u-tab-bar': TabBar;
     }
 }
 //# sourceMappingURL=tab-bar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAWvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAC1C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAC/C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACtC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAc;IAE5B,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAE3E,IAAI,cAAc,IAAI,MAAM,CAM3B;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IAED,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAuBpC;IAEQ,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,GAAG,IAAI,EAChB,EAAE,EAAE,MAAM,GAAG,IAAI;IAOV,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IAsE3C,mBAAmB;IAmCnB,0BAA0B;CA8B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAWvD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,qBACa,MAAO,SAAQ,UAAU;;IACpC,OAAgB,MAAM,4BAAwB;IAS9C;;OAEG;IAC0B,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEnD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAC1C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IAC/C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IACtC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAc;IAE5B,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAE3E,IAAI,cAAc,IAAI,MAAM,CAM3B;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,GAAG,GAAG,IAAI,CAE1B;IAED,IAAI,SAAS,CAAC,SAAS,EAAE,GAAG,GAAG,IAAI,EAuBlC;IAEQ,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,IAAI,EAAE,MAAM,GAAG,IAAI;IASZ,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IAwF3C,mBAAmB;IAmCnB,0BAA0B;CA+B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/tab-bar/tab-bar.js

@@ -4,8 +4,8 @@ import { customElement, property, query, queryAssignedElements, } from 'lit/deco
 import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './tab-bar.styles.js';
-import { UmTab } from './tab.js';
-let UmTabBar = class UmTabBar extends LitElement {
+import { Tab } from './tab.js';
+let TabBar = class TabBar extends LitElement {
     static { this.styles = [baseStyles, styles]; }
     #tabs;
     #activeTab;
@@ -40,7 +40,8 @@ let UmTabBar = class UmTabBar extends LitElement {
         activeTab.requestUpdate();
         this._updateTabIndicator();
     }
-    attributeChangedCallback(name, _, __) {
+    attributeChangedCallback(name, _old, _new) {
+        super.attributeChangedCallback(name, _old, _new);
         if (name === 'variant') {
             this._updateTabIndicator();
         }
@@ -100,18 +101,12 @@ let UmTabBar = class UmTabBar extends LitElement {
             this._setScrollIndicatorsActive();
             this._updateTabIndicator();
         });
+        /**
+         * The Tab Bar variant to render
+         */
         this.variant = 'primary';
-        this.#handleSlotChange = (e) => {
-            const slot = e.target;
-            this.#tabs =
-                slot.assignedElements({ flatten: true }).filter(element => element instanceof UmTab);
-            for (const tab of this.#tabs) {
-                tab._bar = this;
-            }
-            if (this.activeTabIndex > -1) {
-                return;
-            }
-            this.activeTab = this.#tabs[0];
+        this.#handleSlotChange = () => {
+            this.#registerTabs();
         };
         this.#handleContainerScrollEnd = () => {
             this._setScrollIndicatorsActive();
@@ -131,6 +126,30 @@ let UmTabBar = class UmTabBar extends LitElement {
         this.#resizeObserver.observe(this);
     }
     #handleSlotChange;
+    // Re-acquire the slotted tabs and (re)bind their `_bar`. Tabs null their `_bar`
+    // on disconnect, and the default slot's `slotchange` does NOT re-fire when the
+    // bar is moved in the DOM as a unit — so without re-registering on connect, a
+    // moved tab-bar's tabs go inert (clicks no-op, active indicator lost).
+    #registerTabs() {
+        const tabs = this.assignedElements.filter((element) => element instanceof Tab);
+        if (!tabs.length) {
+            return;
+        }
+        this.#tabs = tabs;
+        for (const tab of tabs) {
+            tab._bar = this;
+        }
+        if (this.activeTabIndex < 0) {
+            // Honor a `<u-tab active>` in markup for the initial selection; fall back
+            // to the first tab. `tab.active` is derived from `bar.activeTab`, so the
+            // attribute is the only initial-state signal a tab can carry on its own.
+            this.activeTab = this.#tabs.find(tab => tab.hasAttribute('active')) ?? this.#tabs[0];
+        }
+        else {
+            this.activeTab?.requestUpdate();
+            this._updateTabIndicator();
+        }
+    }
     #handleContainerScrollEnd;
     _updateTabIndicator() {
         if (!this._tabIndicator) {
@@ -173,29 +192,30 @@ let UmTabBar = class UmTabBar extends LitElement {
     }
     async #attach() {
         await this.updateComplete;
+        this.#registerTabs();
         this._setScrollIndicatorsActive();
     }
 };
 __decorate([
     property({ reflect: true })
-], UmTabBar.prototype, "variant", void 0);
+], TabBar.prototype, "variant", void 0);
 __decorate([
     query('.scroll-left')
-], UmTabBar.prototype, "_scrollLeft", void 0);
+], TabBar.prototype, "_scrollLeft", void 0);
 __decorate([
     query('.scroll-right')
-], UmTabBar.prototype, "_scrollRight", void 0);
+], TabBar.prototype, "_scrollRight", void 0);
 __decorate([
     query('.container')
-], UmTabBar.prototype, "_container", void 0);
+], TabBar.prototype, "_container", void 0);
 __decorate([
     query('.tab-indicator')
-], UmTabBar.prototype, "_tabIndicator", void 0);
+], TabBar.prototype, "_tabIndicator", void 0);
 __decorate([
     queryAssignedElements({ flatten: true })
-], UmTabBar.prototype, "assignedElements", void 0);
-UmTabBar = __decorate([
+], TabBar.prototype, "assignedElements", void 0);
+TabBar = __decorate([
     customElement('u-tab-bar')
-], UmTabBar);
-export { UmTabBar };
+], TabBar);
+export { TabBar };
 //# sourceMappingURL=tab-bar.js.map

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 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"]}
+{"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 { Tab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class TabBar extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  #tabs: Tab[] = [];\n  #activeTab: Tab | null = null;\n  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n    this._setScrollIndicatorsActive();\n    this._updateTabIndicator();\n  });\n\n  /**\n   * The Tab Bar variant to render\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(): Tab | null {\n    return this.#activeTab;\n  }\n\n  set activeTab(activeTab: Tab | 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    _old: string | null,\n    _new: string | null,\n  ) {\n    super.attributeChangedCallback(name, _old, _new);\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 = () => {\n    this.#registerTabs();\n  };\n\n  // Re-acquire the slotted tabs and (re)bind their `_bar`. Tabs null their `_bar`\n  // on disconnect, and the default slot's `slotchange` does NOT re-fire when the\n  // bar is moved in the DOM as a unit — so without re-registering on connect, a\n  // moved tab-bar's tabs go inert (clicks no-op, active indicator lost).\n  #registerTabs(): void {\n    const tabs = this.assignedElements.filter(\n      (element): element is Tab => element instanceof Tab,\n    );\n\n    if (!tabs.length) {\n      return;\n    }\n\n    this.#tabs = tabs;\n\n    for (const tab of tabs) {\n      tab._bar = this;\n    }\n\n    if (this.activeTabIndex < 0) {\n      // Honor a `<u-tab active>` in markup for the initial selection; fall back\n      // to the first tab. `tab.active` is derived from `bar.activeTab`, so the\n      // attribute is the only initial-state signal a tab can carry on its own.\n      this.activeTab = this.#tabs.find(tab => tab.hasAttribute('active')) ?? this.#tabs[0];\n    } else {\n      this.activeTab?.requestUpdate();\n      this._updateTabIndicator();\n    }\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.#registerTabs();\n    this._setScrollIndicatorsActive();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab-bar': TabBar;\n  }\n}\n"]}

package/tab-bar/tab.d.ts

@@ -1,12 +1,17 @@
 import { HTMLTemplateResult } from 'lit';
-import { UmButtonWrapper } from '../shared/button-wrapper.js';
-import { UmTabBar } from './tab-bar.js';
-export declare class UmTab extends UmButtonWrapper {
+import { ButtonWrapper } from '../shared/button-wrapper.js';
+import { TabBar } from './tab-bar.js';
+export declare class Tab extends ButtonWrapper {
     #private;
     static styles: import("lit").CSSResultGroup[];
-    _bar: UmTabBar | null;
+    _bar: TabBar | null;
     get active(): boolean;
     set active(active: boolean);
+    /**
+     * Whether the tab has an icon slotted in the `icon` slot
+     *
+     * _Note:_ Readonly
+     */
     hasIcon: boolean;
     private readonly _container;
     get _paddingInline(): string;
@@ -18,7 +23,7 @@ export declare class UmTab extends UmButtonWrapper {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-tab': UmTab;
+        'u-tab': Tab;
     }
 }
 //# sourceMappingURL=tab.d.ts.map

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;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE/D,IAAI,cAAc,IAAI,MAAM,CAE3B;;cAOkB,cAAc,IAAI,kBAAkB;IAe9C,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"}
+{"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,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,qBACa,GAAI,SAAQ,aAAa;;IACpC,OAAgB,MAAM,iCAAkC;IAExD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQ3B,IACI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAED;;;;OAIG;IAC0B,OAAO,UAAS;IACxB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE/D,IAAI,cAAc,IAAI,MAAM,CAE3B;;cAOkB,cAAc,IAAI,kBAAkB;IAe9C,iBAAiB;IAMjB,oBAAoB;cAiBV,YAAY,CAAC,CAAC,EAAE,OAAO;CAuB3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,GAAG,CAAC;KACd;CACF"}

package/tab-bar/tab.js

@@ -2,10 +2,10 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 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 { ButtonWrapper } from '../shared/button-wrapper.js';
 import { styles } from './tab.styles.js';
-let UmTab = class UmTab extends UmButtonWrapper {
-    static { this.styles = [UmButtonWrapper.styles, styles]; }
+let Tab = class Tab extends ButtonWrapper {
+    static { this.styles = [ButtonWrapper.styles, styles]; }
     #resizeObserver;
     get active() {
         return this._bar?.activeTab === this;
@@ -31,6 +31,11 @@ let UmTab = class UmTab extends UmButtonWrapper {
                 this._bar?._updateTabIndicator();
             }
         });
+        /**
+         * Whether the tab has an icon slotted in the `icon` slot
+         *
+         * _Note:_ Readonly
+         */
         this.hasIcon = false;
         this.#resizeObserver.observe(this);
     }
@@ -83,15 +88,15 @@ let UmTab = class UmTab extends UmButtonWrapper {
 };
 __decorate([
     state()
-], UmTab.prototype, "active", null);
+], Tab.prototype, "active", null);
 __decorate([
     property({ type: Boolean })
-], UmTab.prototype, "hasIcon", void 0);
+], Tab.prototype, "hasIcon", void 0);
 __decorate([
     query('.container')
-], UmTab.prototype, "_container", void 0);
-UmTab = __decorate([
+], Tab.prototype, "_container", void 0);
+Tab = __decorate([
     customElement('u-tab')
-], UmTab);
-export { UmTab };
+], Tab);
+export { Tab };
 //# sourceMappingURL=tab.js.map

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, 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=\"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":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGlC,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,aAAa;aACpB,WAAM,GAAG,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;IAI/C,eAAe,CAIrB;IAGH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,CAAC;IAED,IAAI,MAAM,CAAC,MAAe;QACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;IAC/B,CAAC;IAUD,IAAI,cAAc;QAChB,OAAO,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC;IACzD,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvCV,SAAI,GAAkB,IAAI,CAAC;QAElB,oBAAe,GAAmB,IAAI,cAAc,CAAC,GAAG,EAAE;YACjE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,IAAI,EAAE,mBAAmB,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC,CAAC;QAoBH;;;;WAIG;QAC0B,YAAO,GAAG,KAAK,CAAC;QAS3C,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEkB,cAAc;QAC/B,MAAM,OAAO,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;QAEpE,OAAO,IAAI,CAAA;gCACiB,QAAQ,CAAC,OAAO,CAAC;;0CAEP,IAAI,CAAC,eAAe;;;;;;KAMzD,CAAC;IACJ,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,EAAE,mBAAmB,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,EAAE,0BAA0B,EAAE,CAAC;IAC1C,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC;QAEvC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEkB,YAAY,CAAC,CAAU;QACxC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAEtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAC9C,IAAI,KAAK,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAC3D,CAAC;QAEF,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,eAAe,CAAC,CAAQ;QACtB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IACnE,CAAC;;AA9FD;IADC,KAAK,EAAE;iCAGP;AAoB4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAiB;AACP;IAArC,KAAK,CAAC,YAAY,CAAC;uCAA2C;AAnCpD,GAAG;IADf,aAAa,CAAC,OAAO,CAAC;GACV,GAAG,CA2Gf","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 { ButtonWrapper } from '../shared/button-wrapper.js';\nimport { TabBar } from './tab-bar.js';\nimport { styles } from './tab.styles.js';\n\n@customElement('u-tab')\nexport class Tab extends ButtonWrapper {\n  static override styles = [ButtonWrapper.styles, styles];\n\n  _bar: TabBar | 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  /**\n   * Whether the tab has an icon slotted in the `icon` slot\n   *\n   * _Note:_ Readonly\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=\"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': Tab;\n  }\n}\n"]}

package/text-area/text-area.d.ts

@@ -1,15 +1,18 @@
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
 import { HTMLTemplateResult } from 'lit';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
-export declare class UmTextArea extends UmNativeTextFieldWrapper {
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+export declare class TextArea extends NativeTextFieldWrapper {
     static styles: CSSResultGroup;
+    /**
+     * The minimum number of visible text rows
+     */
     rows: number;
     input: HTMLTextAreaElement;
     protected renderControl(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-text-area': UmTextArea;
+        'u-text-area': TextArea;
     }
 }
 //# sourceMappingURL=text-area.d.ts.map

package/text-area/text-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/text-area/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAIxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAIxG,qBACa,UAAW,SAAQ,wBAAwB;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9C,IAAI,SAAK;IAET,KAAK,EAAG,mBAAmB,CAAC;cAErC,aAAa,IAAI,kBAAkB;CAqBvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/text-area/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAIxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AAItG,qBACa,QAAS,SAAQ,sBAAsB;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAkC;IAExE;;OAEG;IACyB,IAAI,SAAK;IAET,KAAK,EAAG,mBAAmB,CAAC;cAErC,aAAa,IAAI,kBAAkB;CAqBvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

package/text-area/text-area.js

@@ -2,15 +2,18 @@ import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
-import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { TextFieldBase } from '../shared/text-field-base/text-field-base.js';
 import { styles } from './text-area.styles.js';
-let UmTextArea = class UmTextArea extends UmNativeTextFieldWrapper {
+let TextArea = class TextArea extends NativeTextFieldWrapper {
     constructor() {
         super(...arguments);
+        /**
+         * The minimum number of visible text rows
+         */
         this.rows = 2;
     }
-    static { this.styles = [UmTextFieldBase.styles, styles]; }
+    static { this.styles = [TextFieldBase.styles, styles]; }
     renderControl() {
         return html `
       <div class="input">
@@ -35,12 +38,12 @@ let UmTextArea = class UmTextArea extends UmNativeTextFieldWrapper {
 };
 __decorate([
     property({ type: Number })
-], UmTextArea.prototype, "rows", void 0);
+], TextArea.prototype, "rows", void 0);
 __decorate([
     query('textarea')
-], UmTextArea.prototype, "input", void 0);
-UmTextArea = __decorate([
+], TextArea.prototype, "input", void 0);
+TextArea = __decorate([
     customElement('u-text-area')
-], UmTextArea);
-export { UmTextArea };
+], TextArea);
+export { TextArea };
 //# sourceMappingURL=text-area.js.map

package/text-area/text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../src/text-area/text-area.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AACxG,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,wBAAwB;IAAjD;;QAGuB,SAAI,GAAG,CAAC,CAAC;IAyBvC,CAAC;aA3BiB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAMvD,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;eAIA,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;uBACZ,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI,IAAI,OAAO;sBACf,IAAI,CAAC,SAAS,IAAI,OAAO;kBAC7B,IAAI,CAAC,IAAI;yBACF,IAAI,CAAC,WAAW;mBACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;KAE/B,CAAC;IACJ,CAAC;;AAxB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAU;AAET;IAA3B,KAAK,CAAC,UAAU,CAAC;yCAAsC;AAL7C,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA4BtB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './text-area.styles.js';\n\n@customElement('u-text-area')\nexport class UmTextArea extends UmNativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];\n\n  @property({ type: Number }) rows = 2;\n\n  @query('textarea') override input!: HTMLTextAreaElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html`\n      <div class=\"input\">\n        <textarea\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role ?? nothing}\n          maxlength=${this.maxlength ?? nothing}\n          .rows=${this.rows}\n          .placeholder=${this.placeholder}\n          .value=${live(this._value)}\n          @input=${this._handleInput}></textarea>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-area': UmTextArea;\n  }\n}\n"]}
+{"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../src/text-area/text-area.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AACtG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,sBAAsB;IAA7C;;QAGL;;WAEG;QACyB,SAAI,GAAG,CAAC,CAAC;IAyBvC,CAAC;aA9BiB,WAAM,GAAmB,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjD,CAAkD;IASrD,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;eAIA,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;uBACZ,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI,IAAI,OAAO;sBACf,IAAI,CAAC,SAAS,IAAI,OAAO;kBAC7B,IAAI,CAAC,IAAI;yBACF,IAAI,CAAC,WAAW;mBACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;KAE/B,CAAC;IACJ,CAAC;;AAxB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAU;AAET;IAA3B,KAAK,CAAC,UAAU,CAAC;uCAAsC;AAR7C,QAAQ;IADpB,aAAa,CAAC,aAAa,CAAC;GAChB,QAAQ,CA+BpB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';\nimport { TextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './text-area.styles.js';\n\n@customElement('u-text-area')\nexport class TextArea extends NativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [TextFieldBase.styles, styles];\n\n  /**\n   * The minimum number of visible text rows\n   */\n  @property({ type: Number }) rows = 2;\n\n  @query('textarea') override input!: HTMLTextAreaElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html`\n      <div class=\"input\">\n        <textarea\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role ?? nothing}\n          maxlength=${this.maxlength ?? nothing}\n          .rows=${this.rows}\n          .placeholder=${this.placeholder}\n          .value=${live(this._value)}\n          @input=${this._handleInput}></textarea>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-area': TextArea;\n  }\n}\n"]}

package/text-field/text-field.d.ts

@@ -1,19 +1,47 @@
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
 import { HTMLTemplateResult } from 'lit';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
-export declare class UmTextField extends UmNativeTextFieldWrapper {
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { FieldValidity } from '../shared/text-field-base/text-field-base.js';
+export declare class TextField extends NativeTextFieldWrapper {
     static styles: CSSResultGroup;
+    /**
+     * The input type. Mirrors the native `input` element's `type` attribute
+     * (e.g. `text`, `email`, `password`, `number`).
+     */
     type: string;
+    /**
+     * Text rendered in the default `prefix` slot, shown before the input
+     */
     prefixText: string | undefined;
+    /**
+     * Text rendered in the default `suffix` slot, shown after the input
+     */
     suffixText: string | undefined;
+    /**
+     * Whether the field's value is read-only
+     */
     readOnly: boolean;
+    /**
+     * A regular expression the value must match for constraint validation
+     * (mirrors the native `input` `pattern` attribute)
+     */
+    pattern: string | undefined;
+    /**
+     * Minimum number of characters required for constraint validation
+     * (mirrors the native `input` `minlength` attribute)
+     */
+    minlength: number | undefined;
+    /**
+     * Mirrors the native `autocapitalize` attribute on the underlying input
+     */
     autocapitalize: string;
     input: HTMLInputElement;
     protected renderControl(): HTMLTemplateResult;
+    protected _getValidity(): FieldValidity;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-text-field': UmTextField;
+        'u-text-field': TextField;
     }
 }
 //# sourceMappingURL=text-field.d.ts.map

package/text-field/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAIxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAIxG,qBACa,WAAY,SAAQ,wBAAwB;IACvD,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9D,IAAI,SAAU;IACc,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,UAAS;IACvB,cAAc,EAAG,MAAM,CAAC;IAE9C,KAAK,EAAG,gBAAgB,CAAC;cAEtB,aAAa,IAAI,kBAAkB;CA8BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAIxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,8DAA8D,CAAC;AACtG,OAAO,EAAE,aAAa,EAAiB,MAAM,8CAA8C,CAAC;AAG5F,qBACa,SAAU,SAAQ,sBAAsB;IACnD,OAAgB,MAAM,EAAE,cAAc,CAAkC;IAExE;;;OAGG;IACS,IAAI,SAAU;IAE1B;;OAEG;IACqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvE;;OAEG;IACqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAEvE;;OAEG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACS,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC;;;OAGG;IACyB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACmC,cAAc,EAAG,MAAM,CAAC;IAE9C,KAAK,EAAG,gBAAgB,CAAC;cAEtB,aAAa,IAAI,kBAAkB;cAkCnC,YAAY,IAAI,aAAa;CA0BjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/text-field/text-field.js

@@ -2,16 +2,23 @@ import { __decorate } from "tslib";
 import { html, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
-import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
-import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { NativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { TextFieldBase } from '../shared/text-field-base/text-field-base.js';
 import { styles } from './text-field.styles.js';
-let UmTextField = class UmTextField extends UmNativeTextFieldWrapper {
+let TextField = class TextField extends NativeTextFieldWrapper {
     constructor() {
         super(...arguments);
+        /**
+         * The input type. Mirrors the native `input` element's `type` attribute
+         * (e.g. `text`, `email`, `password`, `number`).
+         */
         this.type = 'text';
+        /**
+         * Whether the field's value is read-only
+         */
         this.readOnly = false;
     }
-    static { this.styles = [UmTextFieldBase.styles, styles]; }
+    static { this.styles = [TextFieldBase.styles, styles]; }
     renderControl() {
         return html `
       <slot class="prefix" name="prefix">
@@ -26,12 +33,15 @@ let UmTextField = class UmTextField extends UmNativeTextFieldWrapper {
           aria-describedBy="supporting-text"
           ?readonly=${this.readOnly}
           ?disabled=${this.disabled}
+          ?required=${this.required}
           spellcheck=${this.spellcheck}
           autocomplete=${this.autocomplete ?? nothing}
           autocapitalize=${this.autocapitalize || nothing}
           ?autofocus=${this.autofocus}
           role=${this.role ?? nothing}
           maxlength=${this.maxlength ?? nothing}
+          minlength=${this.minlength ?? nothing}
+          pattern=${this.pattern ?? nothing}
           .placeholder=${this.placeholder ?? nothing}
           .value=${live(this._value)}
           @input=${this._handleInput}
@@ -42,27 +52,57 @@ let UmTextField = class UmTextField extends UmNativeTextFieldWrapper {
       </slot>
     `;
     }
+    _getValidity() {
+        // Delegate to the native input: `required`/`pattern`/`minlength`/`maxlength`
+        // are mirrored onto it, so its ValidityState is the single source of truth.
+        if (!this.input) {
+            return super._getValidity();
+        }
+        const v = this.input.validity;
+        return {
+            flags: {
+                valueMissing: v.valueMissing,
+                typeMismatch: v.typeMismatch,
+                patternMismatch: v.patternMismatch,
+                tooLong: v.tooLong,
+                tooShort: v.tooShort,
+                rangeUnderflow: v.rangeUnderflow,
+                rangeOverflow: v.rangeOverflow,
+                stepMismatch: v.stepMismatch,
+                badInput: v.badInput,
+                customError: v.customError,
+            },
+            message: this.input.validationMessage,
+            anchor: this.input,
+        };
+    }
 };
 __decorate([
     property()
-], UmTextField.prototype, "type", void 0);
+], TextField.prototype, "type", void 0);
 __decorate([
     property({ attribute: 'prefix-text' })
-], UmTextField.prototype, "prefixText", void 0);
+], TextField.prototype, "prefixText", void 0);
 __decorate([
     property({ attribute: 'suffix-text' })
-], UmTextField.prototype, "suffixText", void 0);
+], TextField.prototype, "suffixText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], UmTextField.prototype, "readOnly", void 0);
+], TextField.prototype, "readOnly", void 0);
+__decorate([
+    property()
+], TextField.prototype, "pattern", void 0);
+__decorate([
+    property({ type: Number })
+], TextField.prototype, "minlength", void 0);
 __decorate([
     property({ reflect: true })
-], UmTextField.prototype, "autocapitalize", void 0);
+], TextField.prototype, "autocapitalize", void 0);
 __decorate([
     query('input')
-], UmTextField.prototype, "input", void 0);
-UmTextField = __decorate([
+], TextField.prototype, "input", void 0);
+TextField = __decorate([
     customElement('u-text-field')
-], UmTextField);
-export { UmTextField };
+], TextField);
+export { TextField };
 //# sourceMappingURL=text-field.js.map