@universal-material/web 3.0.71 → 3.0.73

package/tab-bar/tab-bar.js

@@ -0,0 +1,187 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.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 {
+    static { this.styles = [baseStyles, styles]; }
+    #tabs;
+    #activeTab;
+    #resizeObserver;
+    get activeTabIndex() {
+        if (!this.activeTab) {
+            return -1;
+        }
+        return this.#tabs.indexOf(this.activeTab);
+    }
+    set activeTabIndex(index) {
+        this.activeTab = this.#tabs[index];
+    }
+    get activeTab() {
+        return this.#activeTab;
+    }
+    set activeTab(activeTab) {
+        if (!this.#tabs.length) {
+            this.#activeTab = null;
+            this._updateTabIndicator();
+            return;
+        }
+        if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {
+            return;
+        }
+        const previouslyActiveTab = this.#activeTab;
+        this.#activeTab = activeTab;
+        previouslyActiveTab?.requestUpdate();
+        activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        activeTab.requestUpdate();
+        this._updateTabIndicator();
+    }
+    attributeChangedCallback(name, _, __) {
+        if (name === 'variant') {
+            this._updateTabIndicator();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete
+            .then(() => {
+            this._setScrollIndicatorsActive();
+        });
+    }
+    render() {
+        return html `
+
+      <div
+        class="scroll-indicator scroll-left active"
+        @click=${this.#scrollToLeft}>
+        <u-elevation></u-elevation>
+        <u-ripple></u-ripple>
+        <slot name="scroll-left">
+          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+            <path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>
+          </svg>
+        </slot>
+      </div>
+      <div
+        class="container ${this.variant === 'secondary' ? 'secondary' : ''}"
+        @scrollend=${this.#handleContainerScrollEnd}>
+        <slot @slotchange=${this.#handleSlotChange}></slot>
+        <div class="tab-indicator"></div>
+      </div>
+      <div
+        class="scroll-indicator scroll-right active"
+        @click=${this.#scrollToRight}>
+        <u-elevation></u-elevation>
+        <u-ripple></u-ripple>
+        <slot name="scroll-right">
+          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+            <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
+          </svg>
+        </slot>
+      </div>`;
+    }
+    constructor() {
+        super();
+        this.#tabs = [];
+        this.#activeTab = null;
+        this.#resizeObserver = new ResizeObserver(() => {
+            this._setScrollIndicatorsActive();
+            this._updateTabIndicator();
+        });
+        this.variant = 'primary';
+        this.#handleSlotChange = (e) => {
+            const slot = e.target;
+            this.#tabs = slot
+                .assignedElements({ flatten: true })
+                .filter(e => e instanceof UmTab);
+            for (const tab of this.#tabs) {
+                tab._bar = this;
+            }
+            if (this.activeTabIndex > -1) {
+                return;
+            }
+            this.activeTab = this.#tabs[0];
+        };
+        this.#handleContainerScrollEnd = () => {
+            this._setScrollIndicatorsActive();
+        };
+        this.#scrollToLeft = () => {
+            this._container.scrollBy({ left: this._container.offsetWidth / -2, behavior: 'smooth' });
+        };
+        this.#scrollToRight = () => {
+            this._container.scrollBy({ left: this._container.offsetWidth / 2, behavior: 'smooth' });
+        };
+        this.#resizeObserver.observe(this);
+    }
+    #handleSlotChange;
+    #handleContainerScrollEnd;
+    _updateTabIndicator() {
+        if (!this._tabIndicator) {
+            return;
+        }
+        if (!this.activeTab) {
+            this._tabIndicator.style.left = '0';
+            this._tabIndicator.style.width = '0';
+            return;
+        }
+        const styles = getComputedStyle(this.activeTab);
+        const padding = this.variant === 'primary'
+            ? parseInt(styles.paddingInline, 10)
+            : 0;
+        this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
+        this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;
+    }
+    #scrollToLeft;
+    #scrollToRight;
+    _setScrollIndicatorsActive() {
+        const scrollSafeMargin = 1;
+        const scrollLength = this._container.scrollWidth - this._container.offsetWidth;
+        const isRtl = getComputedStyle(this._container).direction === 'rtl';
+        const scrollStart = isRtl
+            ? this._container.scrollLeft + scrollLength
+            : this._container.scrollLeft;
+        if (scrollStart - scrollSafeMargin <= 0) {
+            this._container.scrollBy(-1, 0);
+            this._scrollLeft.classList.remove('active');
+        }
+        else {
+            this._scrollLeft.classList.add('active');
+        }
+        if (scrollStart >= scrollLength - scrollSafeMargin) {
+            this._container.scrollBy(1, 0);
+            this._scrollRight.classList.remove('active');
+        }
+        else {
+            this._scrollRight.classList.add('active');
+        }
+    }
+};
+__decorate([
+    property({ reflect: true })
+], UmTabBar.prototype, "variant", void 0);
+__decorate([
+    query('.scroll-left')
+], UmTabBar.prototype, "_scrollLeft", void 0);
+__decorate([
+    query('.scroll-right')
+], UmTabBar.prototype, "_scrollRight", void 0);
+__decorate([
+    query('.container')
+], UmTabBar.prototype, "_container", void 0);
+__decorate([
+    query('.tab-indicator')
+], UmTabBar.prototype, "_tabIndicator", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], UmTabBar.prototype, "assignedElements", void 0);
+UmTabBar = __decorate([
+    customElement('u-tab-bar')
+], UmTabBar);
+export { UmTabBar };
+//# sourceMappingURL=tab-bar.js.map

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

@@ -0,0 +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 { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\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  #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 _scrollLeft!: HTMLElement;\n  @query('.scroll-right') private _scrollRight!: HTMLElement;\n  @query('.container') private _container!: HTMLElement;\n  @query('.tab-indicator') private _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  set activeTabIndex(index: number) {\n    this.activeTab = this.#tabs[index];\n  }\n\n  get activeTab(): UmTab | null {\n    return this.#activeTab;\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 (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\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(name: string, _: string | null, __: string | null) {\n    if (name === 'variant') {\n      this._updateTabIndicator();\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.updateComplete\n      .then(() => {\n        this._setScrollIndicatorsActive();\n      });\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n\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 xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" 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 ${this.variant === 'secondary' ? 'secondary' : ''}\"\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 xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" 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  constructor() {\n    super();\n    this.#resizeObserver.observe(this);\n  }\n\n  #handleSlotChange = (e: Event) => {\n\n    const slot = <HTMLSlotElement>e.target;\n    this.#tabs = <UmTab[]>slot\n      .assignedElements({flatten: true})\n      .filter(e => e 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  #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 styles = getComputedStyle(this.activeTab);\n    const padding = this.variant === 'primary'\n      ? parseInt(styles.paddingInline, 10)\n      : 0;\n\n    this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n    this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n  }\n\n  #scrollToLeft = () => {\n    this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n  };\n\n  #scrollToRight = () => {\n    this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n  };\n\n  _setScrollIndicatorsActive() {\n    const scrollSafeMargin = 1;\n\n    const scrollLength = 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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-tab-bar': UmTabBar;\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tab-bar.styles.d.ts.map

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

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

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

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: relative;
+    display: block;
+    --_active-color: var(--u-tab-active-color, var(--u-color-primary, rgb(103, 80, 164)));
+    --_active-label-color: var(--u-tab-active-label-color, var(--u-color-primary, rgb(103, 80, 164)));
+    overflow: hidden;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    min-height: var(--u-tab-bar-min-height, 48px);
+    overflow: auto;
+    scroll-padding-inline: 128px;
+    scrollbar-width: none;
+  }
+  .container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scroll-indicator {
+    --u-elevation-level: 2;
+    cursor: pointer;
+    position: absolute;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    width: var(--u-tab-bar-scroll-indicator-size, 32px);
+    background-color: var(--u-scroll-indicator-bg-color, var(--u-current-bg-color, var(--u-color-surface, rgb(254, 247, 255))));
+    font-size: 1.5rem;
+    height: 100%;
+    z-index: 1;
+  }
+  @media (hover: hover) {
+    :host(:hover) .scroll-indicator.active {
+      display: flex;
+    }
+  }
+
+  .scroll-left {
+    left: 0;
+  }
+
+  .scroll-right {
+    right: 0;
+  }
+
+  .tab-indicator {
+    position: absolute;
+    background-color: var(--_active-color);
+    height: 3px;
+    bottom: 0;
+    transition: inset 200ms ease-out, width 200ms ease-out;
+  }
+
+  .container:not(.secondary) .tab-indicator {
+    border-radius: var(--u-tab-bar-primary-border-radius, 9999px 9999px 0 0);
+  }
+
+  .secondary {
+    --_active-label-color: var(--u-tab-secondary-active-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    --_tab-content-direction: row;
+    --_tab-content-gap: 8px;
+    --u-tab-with-icon-height: var(--u-tab-secondary-with-icon-height, 48px);
+  }
+`;
+//# sourceMappingURL=tab-bar.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    position: relative;\n    display: block;\n    --_active-color: var(--u-tab-active-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_active-label-color: var(--u-tab-active-label-color, var(--u-color-primary, rgb(103, 80, 164)));\n    overflow: hidden;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n    min-height: var(--u-tab-bar-min-height, 48px);\n    overflow: auto;\n    scroll-padding-inline: 128px;\n    scrollbar-width: none;\n  }\n  .container::-webkit-scrollbar {\n    display: none;\n  }\n\n  .scroll-indicator {\n    --u-elevation-level: 2;\n    cursor: pointer;\n    position: absolute;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    top: 0;\n    width: var(--u-tab-bar-scroll-indicator-size, 32px);\n    background-color: var(--u-scroll-indicator-bg-color, var(--u-current-bg-color, var(--u-color-surface, rgb(254, 247, 255))));\n    font-size: 1.5rem;\n    height: 100%;\n    z-index: 1;\n  }\n  @media (hover: hover) {\n    :host(:hover) .scroll-indicator.active {\n      display: flex;\n    }\n  }\n\n  .scroll-left {\n    left: 0;\n  }\n\n  .scroll-right {\n    right: 0;\n  }\n\n  .tab-indicator {\n    position: absolute;\n    background-color: var(--_active-color);\n    height: 3px;\n    bottom: 0;\n    transition: inset 200ms ease-out, width 200ms ease-out;\n  }\n\n  .container:not(.secondary) .tab-indicator {\n    border-radius: var(--u-tab-bar-primary-border-radius, 9999px 9999px 0 0);\n  }\n\n  .secondary {\n    --_active-label-color: var(--u-tab-secondary-active-label-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    --_tab-content-direction: row;\n    --_tab-content-gap: 8px;\n    --u-tab-with-icon-height: var(--u-tab-secondary-with-icon-height, 48px);\n  }\n`;\n"]}

package/tab-bar/tab.d.ts

@@ -0,0 +1,22 @@
+import { HTMLTemplateResult } from 'lit';
+import { UmButtonWrapper } from '../shared/button-wrapper.js';
+import { UmTabBar } from './tab-bar.js';
+export declare class UmTab extends UmButtonWrapper {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    _bar: UmTabBar | null;
+    get active(): boolean;
+    set active(active: boolean);
+    hasIcon: boolean;
+    constructor();
+    protected renderContent(): HTMLTemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected handleClick(_: UIEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-tab': UmTab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAYzB;IAE0B,OAAO,UAAS;;cAOxB,aAAa,IAAI,kBAAkB;IAc7C,iBAAiB;IAMjB,oBAAoB;cAiBV,WAAW,CAAC,CAAC,EAAE,OAAO;CAe1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}

package/tab-bar/tab.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './tab.styles.js';
+import { UmButtonWrapper } from '../shared/button-wrapper.js';
+let UmTab = class UmTab extends UmButtonWrapper {
+    static { this.styles = [UmButtonWrapper.styles, styles]; }
+    #resizeObserver;
+    get active() {
+        return this._bar?.activeTab === this;
+    }
+    set active(active) {
+        if (!this._bar) {
+            return;
+        }
+        if (active) {
+            this._bar.activeTab = this;
+            return;
+        }
+        this._bar.activeTabIndex = 0;
+    }
+    constructor() {
+        super();
+        this._bar = null;
+        this.#resizeObserver = new ResizeObserver(() => {
+            if (this.active) {
+                this._bar?._updateTabIndicator();
+            }
+        });
+        this.hasIcon = false;
+        this.#resizeObserver.observe(this);
+    }
+    renderContent() {
+        return html `
+      <div class="tab-content ${this.active ? 'active' : ''} ${this.hasIcon ? 'has-icon' : ''}">
+        <div class="icon">
+          <slot
+            name="icon"
+            @slotchange=${this.#iconSlotChange}></slot>
+        </div>
+        <div class="label">
+          <slot></slot>
+        </div>
+      </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._bar?._updateTabIndicator();
+        this._bar?._setScrollIndicatorsActive();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this._bar) {
+            return;
+        }
+        if (this._bar.activeTab === this) {
+            this._bar.activeTabIndex = 0;
+        }
+        this._bar._updateTabIndicator();
+        this._bar._setScrollIndicatorsActive();
+        this._bar = null;
+    }
+    handleClick(_) {
+        super.handleClick(_);
+        if (!this._bar) {
+            return;
+        }
+        this._bar.activeTab = this;
+        this._bar.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    #iconSlotChange(e) {
+        const slot = e.target;
+        this.hasIcon = !!slot.assignedElements({ flatten: true }).length;
+    }
+};
+__decorate([
+    state()
+], UmTab.prototype, "active", null);
+__decorate([
+    property({ type: Boolean })
+], UmTab.prototype, "hasIcon", void 0);
+UmTab = __decorate([
+    customElement('u-tab')
+], UmTab);
+export { UmTab };
+//# sourceMappingURL=tab.js.map

package/tab-bar/tab.js.map

@@ -0,0 +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';\n\nimport { styles } from './tab.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.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  #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  set active(active: boolean) {\n\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    return html`\n      <div class=\"tab-content ${this.active ? 'active' : ''} ${this.hasIcon ? 'has-icon' : ''}\">\n        <div class=\"icon\">\n          <slot\n            name=\"icon\"\n            @slotchange=${this.#iconSlotChange}></slot>\n        </div>\n        <div class=\"label\">\n          <slot></slot>\n        </div>\n      </div>`;\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    this._bar.activeTab = this;\n    this._bar.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  #iconSlotChange(e: Event) {\n    const slot = <HTMLSlotElement>e.target;\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.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=tab.styles.d.ts.map

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

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

package/tab-bar/tab.styles.js

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --u-focus-ring-outline-offset: -4px;
+    --_tab-height: var(--u-tab-height, 48px);
+    display: block;
+    flex: 1;
+    padding-inline: var(--u-tab-padding, 16px);
+    max-width: var(--u-tab-max-width, 360px);
+  }
+
+  .tab-content {
+    display: flex;
+    flex-direction: var(--_tab-content-direction, column);
+    align-items: center;
+    justify-content: center;
+    height: var(--_tab-height);
+    gap: var(--_tab-content-gap, 0);
+  }
+
+  .has-icon {
+    --_tab-height: var(--u-tab-with-icon-height, 64px);
+  }
+
+  :host(.force-focus-ring) .button,
+  .button:focus-visible {
+    border-radius: var(--u-spacing-small, 8px);
+  }
+
+  .label {
+    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"));
+    line-height: var(--u-tab-label-line-height, var(--u-title-s-line-height, 1.25rem));
+    font-size: var(--u-tab-label-font-size, var(--u-title-s-font-size, 0.875rem));
+    letter-spacing: var(--u-tab-label-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));
+    font-weight: var(--u-tab-label-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));
+    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--u-tab-label-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .active .icon,
+  .active .label {
+    color: var(--_active-label-color);
+  }
+`;
+//# sourceMappingURL=tab.styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDzB,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: 1;\n    padding-inline: var(--u-tab-padding, 16px);\n    max-width: var(--u-tab-max-width, 360px);\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    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  }\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"]}