@francofantomius/material-components 0.1.0

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.css.ts","../../../src/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    cursor: pointer;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    gap: 12px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-body-large-size, 16px);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    color: rgba(29, 27, 32, 0.38);\n    pointer-events: none;\n  }\n\n  .switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    width: 52px;\n    height: 32px;\n    box-sizing: border-box;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    border: 2px solid var(--md-sys-color-outline, #79747E);\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),\n                border-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .switch {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  :host([disabled]) .switch {\n    background-color: rgba(29, 27, 32, 0.12);\n    border-color: rgba(29, 27, 32, 0.12);\n  }\n\n  .thumb-container {\n    position: absolute;\n    left: 4px;\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .thumb-container {\n    transform: translateX(20px);\n  }\n\n  .thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-outline, #79747E);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: width 200ms cubic-bezier(0.2, 0, 0, 1),\n                height 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([selected]) .thumb {\n    width: 24px;\n    height: 24px;\n    background-color: var(--md-sys-color-on-primary, #FFFFFF);\n  }\n\n  :host([disabled]) .thumb {\n    background-color: rgba(29, 27, 32, 0.38);\n  }\n\n  .icon {\n    font-size: 16px;\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    opacity: 0;\n    transition: opacity 150ms ease;\n  }\n\n  :host([selected]) .icon.check {\n    opacity: 1;\n  }\n\n  :host([icons]:not([selected])) .icon.cross {\n    opacity: 1;\n    color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n  }\n`;\n\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { switchStyles } from './switch.css.js';\n\n@customElement('md-switch')\nexport class MdSwitch extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, switchStyles];\n\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @property({ type: Boolean, reflect: true })\n  icons = false;\n\n  @property({ type: String })\n  value = 'on';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.tabIndex = this.disabled ? -1 : 0;\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.updateFormValue();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('selected') || changedProperties.has('value')) {\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.selected = false;\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    this.setFormValue(this.selected ? this.value : null);\n    if (this.required && !this.selected) {\n      this.setValidity({ valueMissing: true }, 'Please toggle this switch');\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.toggle();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private toggle() {\n    this.selected = !this.selected;\n    this.updateFormValue();\n    this.emitEvent('change', { selected: this.selected });\n    this.emitEvent('input', { selected: this.selected });\n  }\n\n  override render() {\n    return html`\n      <div class=\"switch\">\n        <div class=\"thumb-container\">\n          <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>\n          <md-focus-ring></md-focus-ring>\n          <div class=\"thumb\">\n            ${this.icons\n              ? html`\n                  <md-icon class=\"icon check\" size=\"14\">check</md-icon>\n                  <md-icon class=\"icon cross\" size=\"14\">close</md-icon>\n                `\n              : html`<slot name=\"icon\"></slot>`}\n          </div>\n        </div>\n      </div>\n      <slot></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-switch': MdSwitch;\n  }\n}\n"],"names":["switchStyles","css","MdSwitch","MdFormAssociatedElement","event","changedProperties","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/tabs/tabs.css.d.ts

@@ -0,0 +1,3 @@
+export declare const tabsStyles: import('lit').CSSResult;
+export declare const tabStyles: import('lit').CSSResult;
+//# sourceMappingURL=tabs.css.d.ts.map

package/dist/components/tabs/tabs.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.css.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA8BtB,CAAC;AAEF,eAAO,MAAM,SAAS,yBA+CrB,CAAC"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,33 @@
+import { MdBaseElement } from '../../internal/base-component.js';
+export declare class MdTab extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    active: boolean;
+    disabled: boolean;
+    icon: string;
+    label: string;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+export declare class MdTabs extends MdBaseElement {
+    static styles: import('lit').CSSResultGroup[];
+    activeIndex: number;
+    private tabs;
+    private indicatorElement?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private handleSlotChange;
+    private syncActiveTab;
+    private updateIndicator;
+    private handleClick;
+    private handleKeyDown;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-tab': MdTab;
+        'md-tabs': MdTabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGzB,qBACa,KAAM,SAAQ,aAAa;IACtC,OAAgB,MAAM,iCAAqC;IAG3D,MAAM,UAAS;IAGf,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAEF,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,MAAM;CAchB;AAED,qBACa,MAAO,SAAQ,aAAa;IACvC,OAAgB,MAAM,iCAAsC;IAG5D,WAAW,SAAK;IAGhB,OAAO,CAAC,IAAI,CAAW;IAGvB,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAE9B,iBAAiB;IAOjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAOxD,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,WAAW,CAUjB;IAEF,OAAO,CAAC,aAAa,CA6BnB;IAEO,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,200 @@
+import { css as b, nothing as u, html as p } from "lit";
+import { property as c, customElement as f, queryAssignedElements as v, query as m } from "lit/decorators.js";
+import { M as d } from "../../chunks/base-component-DQTjlEVL.js";
+import "../../internal/ripple/ripple.js";
+import "../../chunks/focus-ring-Dl-XoEKK.js";
+import "../icon/icon.js";
+const y = b`
+  :host {
+    display: flex;
+    position: relative;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);
+    overflow-x: auto;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  :host::-webkit-scrollbar {
+    display: none; /* Safari and Chrome */
+  }
+
+  .tabs-container {
+    display: flex;
+    position: relative;
+    width: 100%;
+  }
+
+  .indicator {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-radius: 3px 3px 0 0;
+    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),
+                width 250ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+  }
+`, x = b`
+  :host {
+    display: inline-flex;
+    flex: 1;
+    min-width: 90px;
+    height: 48px;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .tab {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    gap: 8px;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    font-size: var(--md-sys-typescale-title-small-size, 14px);
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.1px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  :host([active]) .tab {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  .content {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+    z-index: 1;
+  }
+`;
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? w(e, s) : e, r = t.length - 1, h; r >= 0; r--)
+    (h = t[r]) && (i = (n ? h(e, s, i) : h(i)) || i);
+  return n && i && g(e, s, i), i;
+};
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.active = !1, this.disabled = !1, this.icon = "", this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tab"), this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1;
+  }
+  updated(t) {
+    super.updated(t), t.has("active") && (this.setAttribute("aria-selected", this.active ? "true" : "false"), this.tabIndex = this.active ? 0 : -1);
+  }
+  render() {
+    return p`
+      <div class="tab">
+        <md-ripple ?disabled=${this.disabled}></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <span class="content">
+          <slot name="icon">
+            ${this.icon ? p`<md-icon name=${this.icon}></md-icon>` : u}
+          </slot>
+          <slot>${this.label}</slot>
+        </span>
+      </div>
+    `;
+  }
+};
+o.styles = [d.styles, x];
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "active", 2);
+a([
+  c({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+a([
+  c({ type: String })
+], o.prototype, "icon", 2);
+a([
+  c({ type: String })
+], o.prototype, "label", 2);
+o = a([
+  f("md-tab")
+], o);
+let l = class extends d {
+  constructor() {
+    super(...arguments), this.activeIndex = 0, this.handleSlotChange = () => {
+      this.syncActiveTab();
+    }, this.handleClick = (t) => {
+      const e = t.target.closest("md-tab");
+      if (e && !e.disabled) {
+        const s = this.tabs.indexOf(e);
+        s !== -1 && s !== this.activeIndex && (this.activeIndex = s, this.syncActiveTab(), this.emitEvent("change", { activeIndex: this.activeIndex }));
+      }
+    }, this.handleKeyDown = (t) => {
+      const e = this.tabs.filter((r) => !r.disabled);
+      if (e.length === 0) return;
+      const s = this.tabs[this.activeIndex], n = e.indexOf(s);
+      let i = -1;
+      if (t.key === "ArrowRight" ? (t.preventDefault(), i = n < e.length - 1 ? n + 1 : 0) : t.key === "ArrowLeft" ? (t.preventDefault(), i = n > 0 ? n - 1 : e.length - 1) : t.key === "Home" ? (t.preventDefault(), i = 0) : t.key === "End" && (t.preventDefault(), i = e.length - 1), i !== -1 && e[i]) {
+        const r = e[i];
+        this.activeIndex = this.tabs.indexOf(r), this.syncActiveTab(), r.focus(), this.emitEvent("change", { activeIndex: this.activeIndex });
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tablist"), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  updated(t) {
+    super.updated(t), t.has("activeIndex") && this.syncActiveTab();
+  }
+  syncActiveTab() {
+    !this.tabs || this.tabs.length === 0 || (this.tabs.forEach((t, e) => {
+      t.active = e === this.activeIndex;
+    }), this.updateIndicator());
+  }
+  updateIndicator() {
+    if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;
+    const t = this.tabs[this.activeIndex];
+    if (t) {
+      const e = this.getBoundingClientRect(), s = t.getBoundingClientRect(), n = s.left - e.left, i = s.width;
+      this.indicatorElement.style.transform = `translateX(${n}px)`, this.indicatorElement.style.width = `${i}px`;
+    }
+  }
+  render() {
+    return p`
+      <div class="tabs-container">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        <div class="indicator"></div>
+      </div>
+    `;
+  }
+};
+l.styles = [d.styles, y];
+a([
+  c({ type: Number, reflect: !0, attribute: "active-index" })
+], l.prototype, "activeIndex", 2);
+a([
+  v({ selector: "md-tab" })
+], l.prototype, "tabs", 2);
+a([
+  m(".indicator")
+], l.prototype, "indicatorElement", 2);
+l = a([
+  f("md-tabs")
+], l);
+export {
+  o as MdTab,
+  l as MdTabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.css.ts","../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tabsStyles = css`\n  :host {\n    display: flex;\n    position: relative;\n    box-sizing: border-box;\n    border-bottom: 1px solid var(--md-sys-color-surface-variant, #E7E0EC);\n    overflow-x: auto;\n    scrollbar-width: none; /* Firefox */\n  }\n\n  :host::-webkit-scrollbar {\n    display: none; /* Safari and Chrome */\n  }\n\n  .tabs-container {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0;\n    height: 3px;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: 3px 3px 0 0;\n    transition: transform 250ms cubic-bezier(0.2, 0, 0, 1),\n                width 250ms cubic-bezier(0.2, 0, 0, 1);\n    pointer-events: none;\n  }\n`;\n\nexport const tabStyles = css`\n  :host {\n    display: inline-flex;\n    flex: 1;\n    min-width: 90px;\n    height: 48px;\n    outline: none;\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.38;\n  }\n\n  .tab {\n    position: relative;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 0 16px;\n    gap: 8px;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n    font-size: var(--md-sys-typescale-title-small-size, 14px);\n    font-weight: 500;\n    line-height: 20px;\n    letter-spacing: 0.1px;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    transition: color 150ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([active]) .tab {\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    position: relative;\n    z-index: 1;\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { tabsStyles, tabStyles } from './tabs.css.js';\n\n@customElement('md-tab')\nexport class MdTab extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tabStyles];\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tab');\n    this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n    this.tabIndex = this.active ? 0 : -1;\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('active')) {\n      this.setAttribute('aria-selected', this.active ? 'true' : 'false');\n      this.tabIndex = this.active ? 0 : -1;\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"tab\">\n        <md-ripple ?disabled=${this.disabled}></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        <span class=\"content\">\n          <slot name=\"icon\">\n            ${this.icon ? html`<md-icon name=${this.icon}></md-icon>` : nothing}\n          </slot>\n          <slot>${this.label}</slot>\n        </span>\n      </div>\n    `;\n  }\n}\n\n@customElement('md-tabs')\nexport class MdTabs extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tabsStyles];\n\n  @property({ type: Number, reflect: true, attribute: 'active-index' })\n  activeIndex = 0;\n\n  @queryAssignedElements({ selector: 'md-tab' })\n  private tabs!: MdTab[];\n\n  @query('.indicator')\n  private indicatorElement?: HTMLElement;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'tablist');\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleClick);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('activeIndex')) {\n      this.syncActiveTab();\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.syncActiveTab();\n  };\n\n  private syncActiveTab() {\n    if (!this.tabs || this.tabs.length === 0) return;\n\n    this.tabs.forEach((tab, index) => {\n      tab.active = index === this.activeIndex;\n    });\n\n    this.updateIndicator();\n  }\n\n  private updateIndicator() {\n    if (!this.indicatorElement || !this.tabs || this.tabs.length === 0) return;\n\n    const activeTab = this.tabs[this.activeIndex];\n    if (activeTab) {\n      const parentRect = this.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n      const left = tabRect.left - parentRect.left;\n      const width = tabRect.width;\n\n      this.indicatorElement.style.transform = `translateX(${left}px)`;\n      this.indicatorElement.style.width = `${width}px`;\n    }\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = (event.target as HTMLElement).closest('md-tab') as MdTab | null;\n    if (target && !target.disabled) {\n      const index = this.tabs.indexOf(target);\n      if (index !== -1 && index !== this.activeIndex) {\n        this.activeIndex = index;\n        this.syncActiveTab();\n        this.emitEvent('change', { activeIndex: this.activeIndex });\n      }\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const enabledTabs = this.tabs.filter((t) => !t.disabled);\n    if (enabledTabs.length === 0) return;\n\n    const currentTab = this.tabs[this.activeIndex];\n    const currentIndex = enabledTabs.indexOf(currentTab!);\n\n    let nextIndex = -1;\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      nextIndex = currentIndex < enabledTabs.length - 1 ? currentIndex + 1 : 0;\n    } else if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledTabs.length - 1;\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      nextIndex = 0;\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      nextIndex = enabledTabs.length - 1;\n    }\n\n    if (nextIndex !== -1 && enabledTabs[nextIndex]) {\n      const targetTab = enabledTabs[nextIndex]!;\n      this.activeIndex = this.tabs.indexOf(targetTab);\n      this.syncActiveTab();\n      targetTab.focus();\n      this.emitEvent('change', { activeIndex: this.activeIndex });\n    }\n  };\n\n  override render() {\n    return html`\n      <div class=\"tabs-container\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n        <div class=\"indicator\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tab': MdTab;\n    'md-tabs': MdTabs;\n  }\n}\n\n"],"names":["tabsStyles","css","tabStyles","MdTab","MdBaseElement","changedProperties","html","nothing","__decorateClass","property","customElement","MdTabs","event","target","index","enabledTabs","t","currentTab","currentIndex","nextIndex","targetTab","tab","activeTab","parentRect","tabRect","left","width","queryAssignedElements","query"],"mappings":"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"}

package/dist/components/text-field/text-field.css.d.ts

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

package/dist/components/text-field/text-field.css.d.ts.map

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

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

@@ -0,0 +1,40 @@
+import { MdFormAssociatedElement } from '../../internal/form-associated.js';
+export type TextFieldVariant = 'filled' | 'outlined';
+export declare class MdTextField extends MdFormAssociatedElement {
+    static styles: import('lit').CSSResultGroup[];
+    variant: TextFieldVariant;
+    label: string;
+    value: string;
+    placeholder: string;
+    type: string;
+    readonly: boolean;
+    error: boolean;
+    errorText: string;
+    supportingText: string;
+    prefixText: string;
+    suffixText: string;
+    maxLength: number;
+    pattern: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    private focused;
+    private inputElement?;
+    private assignedLeadingIcons;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    private handleFocus;
+    private handleBlur;
+    private handleInput;
+    private handleChange;
+    private validateInput;
+    private handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-text-field': MdTextField;
+    }
+}
+//# sourceMappingURL=text-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-field.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,iCAAiC,CAAC;AACzC,OAAO,iBAAiB,CAAC;AAGzB,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,qBACa,WAAY,SAAQ,uBAAuB;IACtD,OAAgB,MAAM,iCAAqD;IAG3E,OAAO,EAAE,gBAAgB,CAAY;IAGrC,KAAK,SAAM;IAGX,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAU;IAGd,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAGd,SAAS,SAAM;IAGf,cAAc,SAAM;IAGpB,UAAU,SAAM;IAGhB,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,OAAO,SAAM;IAGb,WAAW,SAAM;IAGjB,YAAY,SAAM;IAGlB,OAAO,CAAC,OAAO,CAAS;IAGxB,OAAO,CAAC,YAAY,CAAC,CAAmB;IAGxC,OAAO,CAAC,oBAAoB,CAAiB;IAEpC,iBAAiB;IAKjB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASlD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,iBAAiB;IAM1B,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,gBAAgB;IAKf,MAAM;CAiDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/text-field/text-field.js

@@ -0,0 +1,327 @@
+import { css as u, nothing as a, html as o } from "lit";
+import { property as i, state as f, query as g, queryAssignedElements as m, customElement as x } from "lit/decorators.js";
+import { M as c } from "../../chunks/form-associated-fKbeX_2P.js";
+import "../../internal/ripple/ripple.js";
+import "../icon/icon.js";
+const v = u`
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 240px;
+    vertical-align: top;
+    font-family: var(--md-sys-typescale-font-family, inherit);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.38;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 56px;
+    padding: 0 16px;
+    box-sizing: border-box;
+    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1),
+                border-color 150ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* --- Filled Variant (Default) --- */
+  :host(:not([variant])) .container,
+  :host([variant="filled"]) .container {
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px) var(--md-sys-shape-corner-extra-small, 4px) 0 0;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host(:not([variant])[focused]) .container,
+  :host([variant="filled"][focused]) .container {
+    border-bottom: 2px solid var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host(:not([variant])[error]) .container,
+  :host([variant="filled"][error]) .container {
+    border-bottom-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* --- Outlined Variant --- */
+  :host([variant="outlined"]) .container {
+    background-color: transparent;
+    border: 1px solid var(--md-sys-color-outline, #79747E);
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+  }
+
+  :host([variant="outlined"][focused]) .container {
+    border: 2px solid var(--md-sys-color-primary, #6750A4);
+    padding: 0 15px; /* Offset for 2px border */
+  }
+
+  :host([variant="outlined"][error]) .container {
+    border-color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* Floating Label */
+  .label {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    pointer-events: none;
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
+                font-size 150ms cubic-bezier(0.2, 0, 0, 1),
+                color 150ms cubic-bezier(0.2, 0, 0, 1);
+    transform-origin: top left;
+  }
+
+  :host([has-leading-icon]) .label {
+    left: 48px;
+  }
+
+  :host([focused]) .label,
+  :host([has-value]) .label,
+  :host([has-placeholder]) .label {
+    transform: translateY(-110%) scale(0.75);
+  }
+
+  :host([variant="filled"][focused]) .label,
+  :host([variant="filled"][has-value]) .label,
+  :host([variant="filled"][has-placeholder]) .label {
+    top: 35%;
+  }
+
+  :host([variant="outlined"][focused]) .label,
+  :host([variant="outlined"][has-value]) .label,
+  :host([variant="outlined"][has-placeholder]) .label {
+    top: 0;
+    left: 12px;
+    background-color: var(--md-sys-color-surface, #FEF7FF);
+    padding: 0 4px;
+  }
+
+  :host([focused]) .label {
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  :host([error]) .label {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+
+  .input-wrapper {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    min-width: 0;
+  }
+
+  :host(:not([variant])) .input-wrapper,
+  :host([variant="filled"]) .input-wrapper {
+    padding-top: 18px;
+  }
+
+  input {
+    flex: 1;
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    padding: 0;
+  }
+
+  input::placeholder {
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    opacity: 0.6;
+  }
+
+  .affix {
+    font-size: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    user-select: none;
+  }
+
+  .prefix { margin-right: 4px; }
+  .suffix { margin-left: 4px; }
+
+  .icon-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  .leading-icon { margin-right: 12px; }
+  .trailing-icon { margin-left: 12px; }
+
+  :host([error]) .trailing-icon {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+
+  /* Supporting / Error text */
+  .supporting-text {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 16px 0;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+  }
+
+  :host([error]) .supporting-text {
+    color: var(--md-sys-color-error, #B3261E);
+  }
+`;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (r, n, p, l) => {
+  for (var s = l > 1 ? void 0 : l ? b(n, p) : n, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (s = (l ? d(n, p, s) : d(s)) || s);
+  return l && s && y(n, p, s), s;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "filled", this.label = "", this.value = "", this.placeholder = "", this.type = "text", this.readonly = !1, this.error = !1, this.errorText = "", this.supportingText = "", this.prefixText = "", this.suffixText = "", this.maxLength = -1, this.pattern = "", this.leadingIcon = "", this.trailingIcon = "", this.focused = !1, this.handleFocus = () => {
+      this.focused = !0, this.toggleAttribute("focused", !0);
+    }, this.handleBlur = () => {
+      this.focused = !1, this.toggleAttribute("focused", !1), this.validateInput();
+    }, this.handleInput = (r) => {
+      const n = r.target;
+      this.value = n.value, this.setFormValue(this.value), this.emitEvent("input", { value: this.value });
+    }, this.handleChange = () => {
+      this.emitEvent("change", { value: this.value });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setFormValue(this.value);
+  }
+  willUpdate(r) {
+    super.willUpdate(r), r.has("value") && (this.setFormValue(this.value), this.toggleAttribute("has-value", !!this.value), this.validateInput());
+  }
+  updated(r) {
+    super.updated(r), r.has("placeholder") && this.toggleAttribute("has-placeholder", !!this.placeholder);
+  }
+  formResetCallback() {
+    this.value = "", this.error = !1, this.setFormValue(null);
+  }
+  validateInput() {
+    this.inputElement && (this.required && !this.value ? (this.setValidity({ valueMissing: !0 }, this.errorText || "This field is required"), this.error = !0) : this.pattern && !new RegExp(this.pattern).test(this.value) ? (this.setValidity({ patternMismatch: !0 }, this.errorText || "Invalid format"), this.error = !0) : (this.setValidity({}), this.errorText || (this.error = !1)));
+  }
+  handleSlotChange() {
+    const r = !!(this.leadingIcon || this.assignedLeadingIcons && this.assignedLeadingIcons.length > 0);
+    this.toggleAttribute("has-leading-icon", r);
+  }
+  render() {
+    const r = this.error ? this.errorText || this.supportingText : this.supportingText;
+    return o`
+      <div class="container" @click=${() => this.inputElement?.focus()}>
+        ${this.variant === "filled" ? o`<md-ripple ?disabled=${this.disabled}></md-ripple>` : a}
+
+        <span class="icon-slot leading-icon">
+          <slot name="leading-icon" @slotchange=${this.handleSlotChange}>
+            ${this.leadingIcon ? o`<md-icon name=${this.leadingIcon}></md-icon>` : a}
+          </slot>
+        </span>
+
+        <div class="input-wrapper">
+          ${this.label ? o`<label class="label">${this.label}</label>` : a}
+          ${this.prefixText ? o`<span class="affix prefix">${this.prefixText}</span>` : a}
+          <input
+            type=${this.type}
+            .value=${this.value}
+            placeholder=${this.focused || !this.label ? this.placeholder : ""}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            maxlength=${this.maxLength > 0 ? this.maxLength : a}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+          />
+          ${this.suffixText ? o`<span class="affix suffix">${this.suffixText}</span>` : a}
+        </div>
+
+        <span class="icon-slot trailing-icon">
+          <slot name="trailing-icon">
+            ${this.error ? o`<md-icon name="error" filled></md-icon>` : this.trailingIcon ? o`<md-icon name=${this.trailingIcon}></md-icon>` : a}
+          </slot>
+        </span>
+      </div>
+
+      ${r || this.maxLength > 0 ? o`
+            <div class="supporting-text">
+              <span>${r}</span>
+              ${this.maxLength > 0 ? o`<span>${this.value.length} / ${this.maxLength}</span>` : a}
+            </div>
+          ` : a}
+    `;
+  }
+};
+t.styles = [c.styles, v];
+e([
+  i({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  i({ type: String })
+], t.prototype, "label", 2);
+e([
+  i({ type: String })
+], t.prototype, "value", 2);
+e([
+  i({ type: String })
+], t.prototype, "placeholder", 2);
+e([
+  i({ type: String })
+], t.prototype, "type", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "readonly", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "error", 2);
+e([
+  i({ type: String, attribute: "error-text" })
+], t.prototype, "errorText", 2);
+e([
+  i({ type: String, attribute: "supporting-text" })
+], t.prototype, "supportingText", 2);
+e([
+  i({ type: String, attribute: "prefix-text" })
+], t.prototype, "prefixText", 2);
+e([
+  i({ type: String, attribute: "suffix-text" })
+], t.prototype, "suffixText", 2);
+e([
+  i({ type: Number, attribute: "maxlength" })
+], t.prototype, "maxLength", 2);
+e([
+  i({ type: String })
+], t.prototype, "pattern", 2);
+e([
+  i({ type: String, attribute: "leading-icon" })
+], t.prototype, "leadingIcon", 2);
+e([
+  i({ type: String, attribute: "trailing-icon" })
+], t.prototype, "trailingIcon", 2);
+e([
+  f()
+], t.prototype, "focused", 2);
+e([
+  g("input")
+], t.prototype, "inputElement", 2);
+e([
+  m({ slot: "leading-icon" })
+], t.prototype, "assignedLeadingIcons", 2);
+t = e([
+  x("md-text-field")
+], t);
+export {
+  t as MdTextField
+};
+//# sourceMappingURL=text-field.js.map