@universal-material/web 3.0.140 → 3.0.142

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 {\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"]}

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;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"}

package/tab-bar/tab.js

@@ -0,0 +1,91 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, 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';
+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() {
+        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>
+      </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;
+        }
+        const changePrevented = !this._bar.dispatchEvent(new Event('changing', { bubbles: true, cancelable: true }));
+        if (changePrevented) {
+            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":";AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGlC,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,eAAe;aACxB,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAIjD,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;IAID;QACE,KAAK,EAAE,CAAC;QA7BV,SAAI,GAAoB,IAAI,CAAC;QAEpB,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;QAoB0B,YAAO,GAAG,KAAK,CAAC;QAI3C,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEkB,aAAa;QAC9B,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,WAAW,CAAC,CAAU;QACvC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAErB,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;;AApFD;IADC,KAAK,EAAE;mCAGP;AAe4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCAAiB;AA7BlC,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CAiGjB","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"]}

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,yBAqDlB,CAAC"}

package/tab-bar/tab.styles.js

@@ -0,0 +1,56 @@
+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: 0.5;
+    padding-inline: var(--u-tab-padding, 16px);
+  }
+
+  .tab-content {
+    display: flex;
+    flex-direction: var(--_tab-content-direction, column);
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    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)));
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

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

@@ -0,0 +1,15 @@
+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 {
+    static styles: CSSResultGroup;
+    rows: number;
+    input: HTMLTextAreaElement;
+    protected renderControl(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-text-area': UmTextArea;
+    }
+}
+//# sourceMappingURL=text-area.d.ts.map

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

@@ -0,0 +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"}

package/text-area/text-area.js

@@ -0,0 +1,46 @@
+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 { styles } from './text-area.styles.js';
+let UmTextArea = class UmTextArea extends UmNativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.rows = 2;
+    }
+    static { this.styles = [UmTextFieldBase.styles, styles]; }
+    renderControl() {
+        return html `
+      <div class="input">
+        <textarea
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedBy="supporting-text"
+          ?disabled=${this.disabled}
+          spellcheck=${this.spellcheck}
+          autocomplete=${this.autocomplete}
+          autocapitalize=${this.autocapitalize}
+          role=${this.role ?? nothing}
+          maxlength=${this.maxlength ?? nothing}
+          .rows=${this.rows}
+          .placeholder=${this.placeholder}
+          .value=${live(this._value)}
+          @input=${this._handleInput}></textarea>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], UmTextArea.prototype, "rows", void 0);
+__decorate([
+    query('textarea')
+], UmTextArea.prototype, "input", void 0);
+UmTextArea = __decorate([
+    customElement('u-text-area')
+], UmTextArea);
+export { UmTextArea };
+//# sourceMappingURL=text-area.js.map

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

@@ -0,0 +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"]}

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

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

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

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

package/text-area/text-area.styles.js

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    resize: both;
+  }
+
+  .container,
+  .input-wrapper {
+    resize: inherit;
+  }
+
+  .input-wrapper,
+  .input,
+  textarea,
+  .container {
+    height: 100%;
+  }
+
+  .input-wrapper {
+    padding: 0 !important;
+    overflow: hidden;
+  }
+
+  textarea {
+    margin: 0;
+    resize: none;
+  }
+
+  .input textarea {
+    border-block: var(--_vertical-padding) solid transparent;
+    padding-inline: var(--_field-control-inline-padding);
+  }
+
+  .container.filled:not(.no-label) textarea {
+    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;
+    border-bottom: var(--_vertical-padding) solid transparent;
+  }
+`;
+//# sourceMappingURL=text-area.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-area.styles.js","sourceRoot":"","sources":["../../src/text-area/text-area.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    resize: both;\n  }\n\n  .container,\n  .input-wrapper {\n    resize: inherit;\n  }\n\n  .input-wrapper,\n  .input,\n  textarea,\n  .container {\n    height: 100%;\n  }\n\n  .input-wrapper {\n    padding: 0 !important;\n    overflow: hidden;\n  }\n\n  textarea {\n    margin: 0;\n    resize: none;\n  }\n\n  .input textarea {\n    border-block: var(--_vertical-padding) solid transparent;\n    padding-inline: var(--_field-control-inline-padding);\n  }\n\n  .container.filled:not(.no-label) textarea {\n    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n    border-bottom: var(--_vertical-padding) solid transparent;\n  }\n`;\n"]}

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

@@ -0,0 +1,19 @@
+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 {
+    static styles: CSSResultGroup;
+    type: string;
+    prefixText: string | undefined;
+    suffixText: string | undefined;
+    readOnly: boolean;
+    autocapitalize: string;
+    input: HTMLInputElement;
+    protected renderControl(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-text-field': UmTextField;
+    }
+}
+//# sourceMappingURL=text-field.d.ts.map

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

@@ -0,0 +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;CA4BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/text-field/text-field.js

@@ -0,0 +1,66 @@
+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 { styles } from './text-field.styles.js';
+let UmTextField = class UmTextField extends UmNativeTextFieldWrapper {
+    constructor() {
+        super(...arguments);
+        this.type = 'text';
+        this.readOnly = false;
+    }
+    static { this.styles = [UmTextFieldBase.styles, styles]; }
+    renderControl() {
+        return html `
+      <slot class="prefix" name="prefix">
+        <span>${this.prefixText}</span>
+      </slot>
+      <div class="input">
+        <input
+          type=${this.type}
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedBy="supporting-text"
+          ?readonly=${this.readOnly}
+          ?disabled=${this.disabled}
+          spellcheck=${this.spellcheck}
+          autocomplete=${this.autocomplete}
+          autocapitalize=${this.autocapitalize}
+          role=${this.role}
+          maxlength=${this.maxlength ?? nothing}
+          .placeholder=${this.placeholder}
+          .value=${live(this._value)}
+          @input=${this._handleInput} />
+      </div>
+      <slot class="suffix" name="suffix">
+        <span>${this.suffixText}</span>
+      </slot>
+    `;
+    }
+};
+__decorate([
+    property()
+], UmTextField.prototype, "type", void 0);
+__decorate([
+    property({ attribute: 'prefix-text' })
+], UmTextField.prototype, "prefixText", void 0);
+__decorate([
+    property({ attribute: 'suffix-text' })
+], UmTextField.prototype, "suffixText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmTextField.prototype, "readOnly", void 0);
+__decorate([
+    property({ reflect: true })
+], UmTextField.prototype, "autocapitalize", void 0);
+__decorate([
+    query('input')
+], UmTextField.prototype, "input", void 0);
+UmTextField = __decorate([
+    customElement('u-text-field')
+], UmTextField);
+export { UmTextField };
+//# sourceMappingURL=text-field.js.map

package/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.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,wBAAwB,CAAC;AAGzC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,wBAAwB;IAAlD;;QAGO,SAAI,GAAG,MAAM,CAAC;QAGkB,aAAQ,GAAG,KAAK,CAAC;IAiC/D,CAAC;aAtCiB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAUvD,aAAa;QAC9B,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;iBAId,IAAI,CAAC,IAAI;;eAEX,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;uBACZ,IAAI,CAAC,UAAU;yBACb,IAAI,CAAC,YAAY;2BACf,IAAI,CAAC,cAAc;iBAC7B,IAAI,CAAC,IAAI;sBACJ,IAAI,CAAC,SAAS,IAAI,OAAO;yBACtB,IAAI,CAAC,WAAW;mBACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;mBACjB,IAAI,CAAC,YAAY;;;gBAGpB,IAAI,CAAC,UAAU;;KAE1B,CAAC;IACJ,CAAC;;AAnCW;IAAX,QAAQ,EAAE;yCAAe;AACc;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAgC;AAC/B;IAAvC,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAgC;AAC3B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AACvB;IAArC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAkC;AAE9C;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAT9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAuCvB","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-field.styles.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmNativeTextFieldWrapper {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];\n\n  @property() type = 'text';\n  @property({ attribute: 'prefix-text' }) prefixText: string | undefined;\n  @property({ attribute: 'suffix-text' }) suffixText: string | undefined;\n  @property({ type: Boolean, reflect: true }) readOnly = false;\n  @property({ reflect: true }) override autocapitalize!: string;\n\n  @query('input') input!: HTMLInputElement;\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          type=${this.type}\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?readonly=${this.readOnly}\n          ?disabled=${this.disabled}\n          spellcheck=${this.spellcheck}\n          autocomplete=${this.autocomplete}\n          autocapitalize=${this.autocapitalize}\n          role=${this.role}\n          maxlength=${this.maxlength ?? nothing}\n          .placeholder=${this.placeholder}\n          .value=${live(this._value)}\n          @input=${this._handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}

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

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

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

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

package/text-field/text-field.styles.js

@@ -0,0 +1,41 @@
+import { css } from 'lit';
+export const styles = css `
+  .prefix::slotted(*),
+  .prefix span,
+  .suffix::slotted(*),
+  .suffix span {
+    transition: opacity 150ms 100ms;
+  }
+  .prefix span:empty,
+  .suffix span:empty {
+    display: none;
+  }
+
+  .prefix::slotted(*),
+  .prefix span {
+    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
+    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));
+  }
+
+  .suffix::slotted(*),
+  .suffix span {
+    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
+    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
+  }
+
+  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {
+    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));
+  }
+  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {
+    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));
+  }
+
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix::slotted(*),
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix span,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix::slotted(*),
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix span {
+    opacity: 0;
+    transition: opacity 150ms;
+  }
+`;
+//# sourceMappingURL=text-field.styles.js.map

package/text-field/text-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .prefix::slotted(*),\n  .prefix span,\n  .suffix::slotted(*),\n  .suffix span {\n    transition: opacity 150ms 100ms;\n  }\n  .prefix span:empty,\n  .suffix span:empty {\n    display: none;\n  }\n\n  .prefix::slotted(*),\n  .prefix span {\n    color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n  }\n\n  .suffix::slotted(*),\n  .suffix span {\n    color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n    margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n  }\n\n  :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n    color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));\n  }\n  :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n    color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-field-disabled-opacity, 38%), transparent)));\n  }\n\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix::slotted(*),\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .suffix span,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix::slotted(*),\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .prefix span {\n    opacity: 0;\n    transition: opacity 150ms;\n  }\n`;\n"]}

package/theme/color.d.ts

@@ -0,0 +1,7 @@
+export interface Color {
+    name: string;
+    fixedTone?: number;
+    lightTone?: number;
+    darkTone?: number;
+}
+//# sourceMappingURL=color.d.ts.map

package/theme/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/theme/color.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/theme/color.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color.js.map

package/theme/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/theme/color.ts"],"names":[],"mappings":"","sourcesContent":["export interface Color {\n  name: string;\n  fixedTone?: number;\n  lightTone?: number;\n  darkTone?: number;\n}\n"]}

package/theme/css-var-builder.d.ts

@@ -0,0 +1,10 @@
+export declare class CssVarBuilder {
+    private content;
+    private constructor();
+    static create(): CssVarBuilder;
+    add(name: string, value: string): CssVarBuilder;
+    addFromArgb(name: string, argb: number): CssVarBuilder;
+    addLightAndDarkFromArgb(name: string, lightArgb: number, darkArgb: number): CssVarBuilder;
+    build(): string;
+}
+//# sourceMappingURL=css-var-builder.d.ts.map

package/theme/css-var-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-var-builder.d.ts","sourceRoot":"","sources":["../../src/theme/css-var-builder.ts"],"names":[],"mappings":"AAEA,qBAAa,aAAa;IAExB,OAAO,CAAC,OAAO,CAAM;IAErB,OAAO;IAGP,MAAM,CAAC,MAAM,IAAI,aAAa;IAI9B,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,aAAa;IAU/C,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,aAAa;IAMtD,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,aAAa;IAMzF,KAAK,IAAI,MAAM;CAGhB"}