@logosphere-ui/core 0.0.0-alpha.5 → 0.0.0-alpha.51

package/dist/switch-uYVuohJ-.js

@@ -0,0 +1,68 @@
+import { unsafeCSS as d, css as l, LitElement as p, html as b } from "lit";
+import { property as n, query as w, customElement as u } from "lit/decorators.js";
+const _ = ":host{display:inline-block}.switch{display:inline-flex;align-items:center;position:relative;cursor:pointer}.switch--md{width:36px;height:20px}.switch--sm{width:28px;height:16px}.switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.switch__track{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-tertiary)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-off{background-color:var(--color-secondary-disabled)}.switch__track--disabled-on{background-color:var(--color-primary-disabled)}.switch__thumb{position:absolute;background-color:#fff;border-radius:50%;top:2px;left:2px;transform:translate(0);transition:transform var(--transition-speed-base) var(--transition-timing)}.switch--md .switch__thumb{width:16px;height:16px}.switch--sm .switch__thumb{width:12px;height:12px}";
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (i, t, c, r) => {
+  for (var e = r > 1 ? void 0 : r ? g(t, c) : t, o = i.length - 1, h; o >= 0; o--)
+    (h = i[o]) && (e = (r ? h(t, c, e) : h(e)) || e);
+  return r && e && m(t, c, e), e;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.size = "md";
+  }
+  onChange(i) {
+    const t = i.target;
+    this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
+      detail: { checked: this.checked }
+    })), this.dispatchEvent(new CustomEvent("lgsChange", {
+      bubbles: !0,
+      composed: !0,
+      detail: { checked: this.checked }
+    }));
+  }
+  render() {
+    const i = `switch switch--${this.size}`, t = [
+      "switch__track",
+      this.checked && !this.disabled ? "switch__track--on" : "",
+      this.disabled ? "switch__track--disabled" : "",
+      this.disabled && this.checked ? "switch__track--disabled-on" : "",
+      this.disabled && !this.checked ? "switch__track--disabled-off" : ""
+    ].filter(Boolean).join(" "), c = this.size === "sm" ? 12 : 16, r = this.checked ? `translateX(${c}px)` : "translateX(0)";
+    return b`
+      <label class="${i}">
+        <input
+          class="switch__input"
+          type="checkbox"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.onChange}
+        />
+        <div class="${t}">
+          <span
+            class="switch__thumb"
+            style="transform: ${r}"
+          ></span>
+        </div>
+      </label>
+    `;
+  }
+};
+s.styles = [l`${d(_)}`];
+a([
+  n({ type: Boolean })
+], s.prototype, "checked", 2);
+a([
+  n({ type: Boolean })
+], s.prototype, "disabled", 2);
+a([
+  n({ type: String })
+], s.prototype, "size", 2);
+a([
+  w("input")
+], s.prototype, "inputElement", 2);
+s = a([
+  u("logosphere-switch")
+], s);
+export {
+  s as S
+};

package/dist/switch.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./switch-Rnnn10bn.cjs");Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>e.Switch});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./switch-Do6SCkPJ.cjs");Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>e.Switch});

package/dist/switch.js

@@ -1,4 +1,4 @@
-import { S as t } from "./switch-Cpl53nRW.js";
+import { S as t } from "./switch-uYVuohJ-.js";
 export {
   t as Switch
 };

package/dist/tab-BvRVHpWs.cjs

@@ -0,0 +1,41 @@
+"use strict";const s=require("lit"),r=require("lit/decorators.js"),h=":host{display:block}.tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-light)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(b,t,i,e)=>{for(var a=e>1?void 0:e?_(t,i):t,o=b.length-1,n;o>=0;o--)(n=b[o])&&(a=(e?n(t,i,a):n(a))||a);return e&&a&&p(t,i,a),a};exports.LogosphereTab=class extends s.LitElement{constructor(){super(...arguments),this.tabs=[],this.activeTab="",this.lazy=!0,this.variant="default",this._focusedIndex=0,this._renderedTabs=new Set,this._pillInitialized=!1}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}disconnectedCallback(){super.disconnectedCallback(),this._pillResizeObserver?.disconnect(),this._pillResizeObserver=void 0}willUpdate(t){if(super.willUpdate(t),t.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const i=this.tabs.findIndex(e=>e.id===this.activeTab);i!==-1&&(this._focusedIndex=i)}t.has("tabs")&&this.tabs.length>0&&(this.tabs.some(e=>e.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(e=>e.id===this.activeTab))}handleTabClick(t,i){if(i)return;const e=this.activeTab;this.activeTab=t,this._focusedIndex=this.tabs.findIndex(a=>a.id===t),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:e,newTab:t},bubbles:!0,composed:!0}))}handleKeyDown(t){const{tabs:i}=this;if(i.filter(o=>!o.disabled).length===0)return;let e=this._focusedIndex;const a=this._focusedIndex;switch(t.key){case"ArrowLeft":t.preventDefault();do e=e>0?e-1:i.length-1;while(i[e]?.disabled&&e!==a);break;case"ArrowRight":t.preventDefault();do e=e<i.length-1?e+1:0;while(i[e]?.disabled&&e!==a);break;case"Home":for(t.preventDefault(),e=0;i[e]?.disabled&&e<i.length-1;)e++;break;case"End":for(t.preventDefault(),e=i.length-1;i[e]?.disabled&&e>0;)e--;break;default:return}if(e!==this._focusedIndex&&!i[e]?.disabled){const o=this.activeTab;this._focusedIndex=e,this.activeTab=i[e].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${i[e].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:i[e].id},bubbles:!0,composed:!0}))}}updated(t){super.updated(t),this.variant==="segmented"&&(this._ensurePillObserver(),this._updateSegmentPill())}_ensurePillObserver(){if(this._pillResizeObserver)return;const t=this.shadowRoot?.querySelector(".tab__list");!t||typeof ResizeObserver>"u"||(this._pillResizeObserver=new ResizeObserver(()=>this._updateSegmentPill()),this._pillResizeObserver.observe(t))}_updateSegmentPill(){const t=this.shadowRoot?.querySelector(".tab__segment-pill"),i=this.shadowRoot?.querySelector(".tab__button--active"),e=this.shadowRoot?.querySelector(".tab__list");if(!t||!i||!e)return;const a=e.getBoundingClientRect(),o=i.getBoundingClientRect();if(o.width===0)return;const n=parseFloat(getComputedStyle(e).paddingLeft)||0,d=o.left-a.left-e.clientLeft-n+e.scrollLeft,c=o.width;this._pillInitialized?(t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`):(t.style.transition="none",t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`,requestAnimationFrame(()=>{t.style.transition=""}),this._pillInitialized=!0)}scrollTabIntoView(t){this.updateComplete.then(()=>{const i=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${t}"]`);if(i&&this.tablist){const e=this.tablist.getBoundingClientRect(),a=i.getBoundingClientRect();a.left<e.left?this.tablist.scrollLeft-=e.left-a.left+16:a.right>e.right&&(this.tablist.scrollLeft+=a.right-e.right+16)}})}renderTabButton(t,i){const e=this.activeTab===t.id,a=this._focusedIndex===i,o=["tab__button",e?"tab__button--active":"",t.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),n=["tab__label",e?"":"tab__label--inactive"].filter(Boolean).join(" "),d=["tab__description",e?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
+      <button
+        role="tab"
+        class=${o}
+        data-tab-id=${t.id}
+        aria-selected=${e?"true":"false"}
+        aria-controls="panel-${t.id}"
+        tabindex=${e||a?"0":"-1"}
+        ?disabled=${t.disabled}
+        @click=${()=>this.handleTabClick(t.id,t.disabled)}
+        @focus=${()=>this.scrollTabIntoView(t.id)}
+      >
+        ${t.icon?s.html`<i class="${t.icon} tab__icon"></i>`:s.nothing}
+        <div class="tab__content">
+          <span class=${n}>${t.label}</span>
+          ${t.description?s.html`<span class=${d}>${t.description}</span>`:s.nothing}
+        </div>
+      </button>
+    `}renderTabPanel(t){const i=this.activeTab===t.id;if(!(!this.lazy||this._renderedTabs.has(t.id)))return s.nothing;const a=["tab__panel",i?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
+      <div
+        role="tabpanel"
+        id="panel-${t.id}"
+        aria-labelledby="tab-${t.id}"
+        class=${a}
+        tabindex="0"
+      >
+        <slot name=${`panel-${t.id}`}>
+          ${typeof t.content=="string"?s.html`${t.content}`:s.nothing}
+        </slot>
+      </div>
+    `}render(){return s.html`
+      <div class="tab tab--${this.variant}">
+        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
+          ${this.variant==="segmented"?s.html`<span class="tab__segment-pill" aria-hidden="true"></span>`:s.nothing}
+          ${this.tabs.map((t,i)=>this.renderTabButton(t,i))}
+        </div>
+        <div class="tab__panels">${this.tabs.map(t=>this.renderTabPanel(t))}</div>
+      </div>
+    `}};exports.LogosphereTab.styles=[s.css`
+      ${s.unsafeCSS(h)}
+    `];l([r.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);l([r.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"variant",2);l([r.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);l([r.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);l([r.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=l([r.customElement("logosphere-tab")],exports.LogosphereTab);

package/dist/tab-Byh4UgFB.js

@@ -0,0 +1,204 @@
+import { unsafeCSS as _, css as u, LitElement as v, nothing as b, html as d } from "lit";
+import { property as c, state as h, query as f, customElement as g } from "lit/decorators.js";
+const m = ":host{display:block}.tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-light)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, i, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? w(i, e) : i, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (s = (a ? r(i, e, s) : r(s)) || s);
+  return a && s && y(i, e, s), s;
+};
+let n = class extends v {
+  constructor() {
+    super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set(), this._pillInitialized = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._pillResizeObserver?.disconnect(), this._pillResizeObserver = void 0;
+  }
+  willUpdate(t) {
+    if (super.willUpdate(t), t.has("activeTab") && this.activeTab) {
+      this._renderedTabs.add(this.activeTab);
+      const i = this.tabs.findIndex((e) => e.id === this.activeTab);
+      i !== -1 && (this._focusedIndex = i);
+    }
+    t.has("tabs") && this.tabs.length > 0 && (this.tabs.some((e) => e.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((e) => e.id === this.activeTab));
+  }
+  // ==================== EVENTS ====================
+  handleTabClick(t, i) {
+    if (i) return;
+    const e = this.activeTab;
+    this.activeTab = t, this._focusedIndex = this.tabs.findIndex((a) => a.id === t), this.dispatchEvent(
+      new CustomEvent("tab-change", {
+        detail: { oldTab: e, newTab: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyDown(t) {
+    const { tabs: i } = this;
+    if (i.filter((s) => !s.disabled).length === 0) return;
+    let e = this._focusedIndex;
+    const a = this._focusedIndex;
+    switch (t.key) {
+      case "ArrowLeft":
+        t.preventDefault();
+        do
+          e = e > 0 ? e - 1 : i.length - 1;
+        while (i[e]?.disabled && e !== a);
+        break;
+      case "ArrowRight":
+        t.preventDefault();
+        do
+          e = e < i.length - 1 ? e + 1 : 0;
+        while (i[e]?.disabled && e !== a);
+        break;
+      case "Home":
+        for (t.preventDefault(), e = 0; i[e]?.disabled && e < i.length - 1; ) e++;
+        break;
+      case "End":
+        for (t.preventDefault(), e = i.length - 1; i[e]?.disabled && e > 0; ) e--;
+        break;
+      default:
+        return;
+    }
+    if (e !== this._focusedIndex && !i[e]?.disabled) {
+      const s = this.activeTab;
+      this._focusedIndex = e, this.activeTab = i[e].id, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelector(
+          `[role="tab"][data-tab-id="${i[e].id}"]`
+        )?.focus();
+      }), this.dispatchEvent(
+        new CustomEvent("tab-change", {
+          detail: { oldTab: s, newTab: i[e].id },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  updated(t) {
+    super.updated(t), this.variant === "segmented" && (this._ensurePillObserver(), this._updateSegmentPill());
+  }
+  /**
+   * Observe the tablist so the pill is repositioned whenever the list gains or
+   * changes size — this covers the cases where the first render happens while
+   * the tab is hidden (nested/lazy panels) or before web fonts load, when
+   * layout measurements would otherwise be 0 / stale.
+   */
+  _ensurePillObserver() {
+    if (this._pillResizeObserver) return;
+    const t = this.shadowRoot?.querySelector(".tab__list");
+    !t || typeof ResizeObserver > "u" || (this._pillResizeObserver = new ResizeObserver(() => this._updateSegmentPill()), this._pillResizeObserver.observe(t));
+  }
+  _updateSegmentPill() {
+    const t = this.shadowRoot?.querySelector(".tab__segment-pill"), i = this.shadowRoot?.querySelector(".tab__button--active"), e = this.shadowRoot?.querySelector(".tab__list");
+    if (!t || !i || !e) return;
+    const a = e.getBoundingClientRect(), s = i.getBoundingClientRect();
+    if (s.width === 0) return;
+    const o = parseFloat(getComputedStyle(e).paddingLeft) || 0, r = s.left - a.left - e.clientLeft - o + e.scrollLeft, p = s.width;
+    this._pillInitialized ? (t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`) : (t.style.transition = "none", t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`, requestAnimationFrame(() => {
+      t.style.transition = "";
+    }), this._pillInitialized = !0);
+  }
+  scrollTabIntoView(t) {
+    this.updateComplete.then(() => {
+      const i = this.shadowRoot?.querySelector(
+        `[role="tab"][data-tab-id="${t}"]`
+      );
+      if (i && this.tablist) {
+        const e = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
+        a.left < e.left ? this.tablist.scrollLeft -= e.left - a.left + 16 : a.right > e.right && (this.tablist.scrollLeft += a.right - e.right + 16);
+      }
+    });
+  }
+  // ==================== RENDER ====================
+  renderTabButton(t, i) {
+    const e = this.activeTab === t.id, a = this._focusedIndex === i, s = [
+      "tab__button",
+      e ? "tab__button--active" : "",
+      t.disabled ? "tab__button--disabled" : ""
+    ].filter(Boolean).join(" "), o = ["tab__label", e ? "" : "tab__label--inactive"].filter(Boolean).join(" "), r = ["tab__description", e ? "tab__description--active" : ""].filter(Boolean).join(" ");
+    return d`
+      <button
+        role="tab"
+        class=${s}
+        data-tab-id=${t.id}
+        aria-selected=${e ? "true" : "false"}
+        aria-controls="panel-${t.id}"
+        tabindex=${e || a ? "0" : "-1"}
+        ?disabled=${t.disabled}
+        @click=${() => this.handleTabClick(t.id, t.disabled)}
+        @focus=${() => this.scrollTabIntoView(t.id)}
+      >
+        ${t.icon ? d`<i class="${t.icon} tab__icon"></i>` : b}
+        <div class="tab__content">
+          <span class=${o}>${t.label}</span>
+          ${t.description ? d`<span class=${r}>${t.description}</span>` : b}
+        </div>
+      </button>
+    `;
+  }
+  renderTabPanel(t) {
+    const i = this.activeTab === t.id;
+    if (!(!this.lazy || this._renderedTabs.has(t.id))) return b;
+    const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
+    return d`
+      <div
+        role="tabpanel"
+        id="panel-${t.id}"
+        aria-labelledby="tab-${t.id}"
+        class=${a}
+        tabindex="0"
+      >
+        <slot name=${`panel-${t.id}`}>
+          ${typeof t.content == "string" ? d`${t.content}` : b}
+        </slot>
+      </div>
+    `;
+  }
+  render() {
+    return d`
+      <div class="tab tab--${this.variant}">
+        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
+          ${this.variant === "segmented" ? d`<span class="tab__segment-pill" aria-hidden="true"></span>` : b}
+          ${this.tabs.map((t, i) => this.renderTabButton(t, i))}
+        </div>
+        <div class="tab__panels">${this.tabs.map((t) => this.renderTabPanel(t))}</div>
+      </div>
+    `;
+  }
+};
+n.styles = [
+  u`
+      ${_(m)}
+    `
+];
+l([
+  c({ type: Array })
+], n.prototype, "tabs", 2);
+l([
+  c({ type: String })
+], n.prototype, "activeTab", 2);
+l([
+  c({ type: Boolean })
+], n.prototype, "lazy", 2);
+l([
+  c({ type: String })
+], n.prototype, "variant", 2);
+l([
+  h()
+], n.prototype, "_focusedIndex", 2);
+l([
+  h()
+], n.prototype, "_renderedTabs", 2);
+l([
+  f('[role="tablist"]')
+], n.prototype, "tablist", 2);
+n = l([
+  g("logosphere-tab")
+], n);
+export {
+  n as L
+};

package/dist/tab.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-DcjAlXzU.cjs");Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>e.LogosphereTab});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-BvRVHpWs.cjs");Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>e.LogosphereTab});

package/dist/tab.js

@@ -1,4 +1,4 @@
-import { L as r } from "./tab-BKdN4xAz.js";
+import { L as r } from "./tab-Byh4UgFB.js";
 export {
   r as LogosphereTab
 };

package/dist/text-area-1rALZ0iy.js

@@ -0,0 +1,239 @@
+import { unsafeCSS as c, css as m, LitElement as y, nothing as n, html as u } from "lit";
+import { query as _, property as i, state as d, customElement as g } from "lit/decorators.js";
+import { live as x } from "lit/directives/live.js";
+import "./formfield-ss2mFweu.js";
+import "./ui-icon-BeR-PaPg.js";
+const v = ":host{display:block}.textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, a, s, o) => {
+  for (var l = o > 1 ? void 0 : o ? b(a, s) : a, h = e.length - 1, p; h >= 0; h--)
+    (p = e[h]) && (l = (o ? p(a, s, l) : p(l)) || l);
+  return o && l && f(a, s, l), l;
+};
+let t = class extends y {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.name = "", this.autocomplete = "", this.rows = 3, this.maxRows = 8, this.wrap = "soft", this.resize = "vertical", this.autoResize = !0, this.size = "default", this.variant = "default", this.label = "", this.helper = "", this.error = "", this.required = !1, this.disabled = !1, this.readonly = !1, this._internalError = "", this._charCount = 0, this.handleInput = (e) => {
+      const a = e.target;
+      this.value = a.value, this._charCount = this.value.length, this.autoResize && this.adjustHeight(), this._internalError && (this._internalError = "", this._textareaElement.setCustomValidity("")), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: e }
+      }));
+    }, this.handleChange = (e) => {
+      const a = e.target;
+      this.value = a.value, a.checkValidity() || (this._internalError = a.validationMessage), this.dispatchEvent(new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value, originalEvent: e }
+      })), this.dispatchEvent(new CustomEvent("lgsChange", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      }));
+    }, this.handleKeyDown = (e) => {
+      this.dispatchEvent(new CustomEvent("keydown", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: e.key, originalEvent: e }
+      }));
+    }, this.handleKeyUp = (e) => {
+      this.dispatchEvent(new CustomEvent("keyup", {
+        bubbles: !0,
+        composed: !0,
+        detail: { key: e.key, originalEvent: e }
+      }));
+    }, this.handleClear = () => {
+      this.value = "", this._charCount = 0, this._textareaElement && (this._textareaElement.value = "", this.autoResize && this.adjustHeight()), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: "", originalEvent: null }
+      }));
+    };
+  }
+  get textareaElement() {
+    return this._textareaElement;
+  }
+  focus() {
+    this._textareaElement?.focus();
+  }
+  blur() {
+    this._textareaElement?.blur();
+  }
+  select() {
+    this._textareaElement?.select();
+  }
+  setSelectionRange(e, a, s) {
+    this._textareaElement?.setSelectionRange(e, a, s);
+  }
+  checkValidity() {
+    return this._textareaElement?.checkValidity() ?? !0;
+  }
+  reportValidity() {
+    return this._textareaElement?.reportValidity() ?? !0;
+  }
+  setCustomValidity(e) {
+    this._textareaElement?.setCustomValidity(e), this._internalError = e, this.requestUpdate();
+  }
+  adjustHeight() {
+    if (!this.autoResize || !this._textareaElement) return;
+    const e = this._textareaElement;
+    e.style.height = "", e.style.overflow = "hidden";
+    const a = e.scrollHeight;
+    if (a !== 0) {
+      if (this.maxRows > 0) {
+        const s = parseFloat(getComputedStyle(e).lineHeight) || 20, o = Math.round(s * this.maxRows);
+        if (a >= o) {
+          e.style.height = `${o}px`, e.style.overflow = "auto";
+          return;
+        }
+      }
+      e.style.height = `${a}px`;
+    }
+  }
+  getResizeClass() {
+    return this.autoResize ? "textarea__field--auto-resize" : {
+      none: "textarea__field--resize-none",
+      vertical: "textarea__field--resize-vertical",
+      horizontal: "textarea__field--resize-horizontal",
+      both: "textarea__field--resize-both"
+    }[this.resize];
+  }
+  firstUpdated() {
+    this._charCount = this.value.length, this.autoResize && requestAnimationFrame(() => this.adjustHeight());
+  }
+  updated(e) {
+    super.updated(e), e.has("value") && (this._charCount = this.value.length, this.autoResize && this.adjustHeight());
+  }
+  getWrapClass() {
+    return this.autoResize || this.resize === "none" ? "textarea__wrap textarea__wrap--no-grip" : "textarea__wrap";
+  }
+  render() {
+    const e = this.error || this._internalError, a = !!this.value && !this.disabled && !this.readonly, s = this.maxlength != null, o = `textarea__field ${this.getResizeClass()}`;
+    return u`
+      <logosphere-formfield
+        .label=${this.label}
+        .helper=${this.helper}
+        .error=${e}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <textarea
+            class="${o}"
+            .value=${x(this.value)}
+            placeholder=${this.placeholder || n}
+            name=${this.name || n}
+            autocomplete=${this.autocomplete || n}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${this.minlength ?? n}
+            maxlength=${this.maxlength ?? n}
+            rows=${this.rows}
+            cols=${this.cols ?? n}
+            wrap=${this.wrap}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
+          ></textarea>
+          ${s ? u`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          ` : n}
+        </div>
+        ${a ? u`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        ` : n}
+        <slot name="suffix" slot="suffix"></slot>
+      </logosphere-formfield>
+    `;
+  }
+};
+t.styles = [m`${c(v)}`];
+r([
+  _("textarea")
+], t.prototype, "_textareaElement", 2);
+r([
+  i({ type: String })
+], t.prototype, "value", 2);
+r([
+  i({ type: String })
+], t.prototype, "placeholder", 2);
+r([
+  i({ type: String })
+], t.prototype, "name", 2);
+r([
+  i({ type: String })
+], t.prototype, "autocomplete", 2);
+r([
+  i({ type: Number })
+], t.prototype, "minlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxlength", 2);
+r([
+  i({ type: Number })
+], t.prototype, "rows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "maxRows", 2);
+r([
+  i({ type: Number })
+], t.prototype, "cols", 2);
+r([
+  i({ type: String })
+], t.prototype, "wrap", 2);
+r([
+  i({ type: String })
+], t.prototype, "resize", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "autoResize", 2);
+r([
+  i({ type: String })
+], t.prototype, "size", 2);
+r([
+  i({ type: String })
+], t.prototype, "variant", 2);
+r([
+  i({ type: String })
+], t.prototype, "label", 2);
+r([
+  i({ type: String })
+], t.prototype, "helper", 2);
+r([
+  i({ type: String })
+], t.prototype, "error", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "required", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "disabled", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "readonly", 2);
+r([
+  d()
+], t.prototype, "_internalError", 2);
+r([
+  d()
+], t.prototype, "_charCount", 2);
+t = r([
+  g("logosphere-textarea")
+], t);
+export {
+  t as T
+};

package/dist/text-area-D_TYL4_q.cjs

@@ -0,0 +1,51 @@
+"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js");require("./formfield-JXiv9mvJ.cjs");require("./ui-icon-DWl7I5BQ.cjs");const u=":host{display:block}.textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";var d=Object.defineProperty,c=Object.getOwnPropertyDescriptor,r=(n,e,a,s)=>{for(var o=s>1?void 0:s?c(e,a):e,l=n.length-1,h;l>=0;l--)(h=n[l])&&(o=(s?h(e,a,o):h(o))||o);return s&&o&&d(e,a,o),o};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.maxRows=8,this.wrap="soft",this.resize="vertical",this.autoResize=!0,this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this._charCount=0,this.handleInput=e=>{const a=e.target;this.value=a.value,this._charCount=this.value.length,this.autoResize&&this.adjustHeight(),this._internalError&&(this._internalError="",this._textareaElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const a=e.target;this.value=a.value,a.checkValidity()||(this._internalError=a.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:this.value}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._charCount=0,this._textareaElement&&(this._textareaElement.value="",this.autoResize&&this.adjustHeight()),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get textareaElement(){return this._textareaElement}focus(){this._textareaElement?.focus()}blur(){this._textareaElement?.blur()}select(){this._textareaElement?.select()}setSelectionRange(e,a,s){this._textareaElement?.setSelectionRange(e,a,s)}checkValidity(){return this._textareaElement?.checkValidity()??!0}reportValidity(){return this._textareaElement?.reportValidity()??!0}setCustomValidity(e){this._textareaElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}adjustHeight(){if(!this.autoResize||!this._textareaElement)return;const e=this._textareaElement;e.style.height="",e.style.overflow="hidden";const a=e.scrollHeight;if(a!==0){if(this.maxRows>0){const s=parseFloat(getComputedStyle(e).lineHeight)||20,o=Math.round(s*this.maxRows);if(a>=o){e.style.height=`${o}px`,e.style.overflow="auto";return}}e.style.height=`${a}px`}}getResizeClass(){return this.autoResize?"textarea__field--auto-resize":{none:"textarea__field--resize-none",vertical:"textarea__field--resize-vertical",horizontal:"textarea__field--resize-horizontal",both:"textarea__field--resize-both"}[this.resize]}firstUpdated(){this._charCount=this.value.length,this.autoResize&&requestAnimationFrame(()=>this.adjustHeight())}updated(e){super.updated(e),e.has("value")&&(this._charCount=this.value.length,this.autoResize&&this.adjustHeight())}getWrapClass(){return this.autoResize||this.resize==="none"?"textarea__wrap textarea__wrap--no-grip":"textarea__wrap"}render(){const e=this.error||this._internalError,a=!!this.value&&!this.disabled&&!this.readonly,s=this.maxlength!=null,o=`textarea__field ${this.getResizeClass()}`;return i.html`
+      <logosphere-formfield
+        .label=${this.label}
+        .helper=${this.helper}
+        .error=${e}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .readonly=${this.readonly}
+        .size=${this.size}
+        .variant=${this.variant}
+        .multiline=${!0}
+      >
+        <slot name="prefix" slot="prefix"></slot>
+        <div class="${this.getWrapClass()}">
+          <textarea
+            class="${o}"
+            .value=${p.live(this.value)}
+            placeholder=${this.placeholder||i.nothing}
+            name=${this.name||i.nothing}
+            autocomplete=${this.autocomplete||i.nothing}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            minlength=${this.minlength??i.nothing}
+            maxlength=${this.maxlength??i.nothing}
+            rows=${this.rows}
+            cols=${this.cols??i.nothing}
+            wrap=${this.wrap}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
+          ></textarea>
+          ${s?i.html`
+            <span class="textarea__counter">${this._charCount}/${this.maxlength}</span>
+          `:i.nothing}
+        </div>
+        ${a?i.html`
+          <button
+            type="button"
+            slot="clear"
+            class="textarea__clear-btn"
+            @click=${this.handleClear}
+            tabindex="-1"
+          >
+            <ui-icon name="uil-times" size="14"></ui-icon>
+          </button>
+        `:i.nothing}
+        <slot name="suffix" slot="suffix"></slot>
+      </logosphere-formfield>
+    `}};exports.TextArea.styles=[i.css`${i.unsafeCSS(u)}`];r([t.query("textarea")],exports.TextArea.prototype,"_textareaElement",2);r([t.property({type:String})],exports.TextArea.prototype,"value",2);r([t.property({type:String})],exports.TextArea.prototype,"placeholder",2);r([t.property({type:String})],exports.TextArea.prototype,"name",2);r([t.property({type:String})],exports.TextArea.prototype,"autocomplete",2);r([t.property({type:Number})],exports.TextArea.prototype,"minlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxlength",2);r([t.property({type:Number})],exports.TextArea.prototype,"rows",2);r([t.property({type:Number})],exports.TextArea.prototype,"maxRows",2);r([t.property({type:Number})],exports.TextArea.prototype,"cols",2);r([t.property({type:String})],exports.TextArea.prototype,"wrap",2);r([t.property({type:String})],exports.TextArea.prototype,"resize",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"autoResize",2);r([t.property({type:String})],exports.TextArea.prototype,"size",2);r([t.property({type:String})],exports.TextArea.prototype,"variant",2);r([t.property({type:String})],exports.TextArea.prototype,"label",2);r([t.property({type:String})],exports.TextArea.prototype,"helper",2);r([t.property({type:String})],exports.TextArea.prototype,"error",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"required",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"disabled",2);r([t.property({type:Boolean})],exports.TextArea.prototype,"readonly",2);r([t.state()],exports.TextArea.prototype,"_internalError",2);r([t.state()],exports.TextArea.prototype,"_charCount",2);exports.TextArea=r([t.customElement("logosphere-textarea")],exports.TextArea);

package/dist/textarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-BkHdLnZj.cjs");Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>e.TextArea});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-D_TYL4_q.cjs");Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>e.TextArea});