@logosphere-ui/core 0.0.0-alpha.33 → 0.0.0-alpha.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logosphere-ui/core",
-  "version": "0.0.0-alpha.33",
+  "version": "0.0.0-alpha.38",
   "description": "A modern, framework-agnostic UI component library built with Lit and Web Components",
   "type": "module",
   "main": "./dist/index.js",
@@ -91,6 +91,36 @@
       "import": "./dist/combobox.js",
       "require": "./dist/combobox.cjs"
     },
+    "./slider": {
+      "types": "./dist/atoms/Slider/index.d.ts",
+      "import": "./dist/slider.js",
+      "require": "./dist/slider.cjs"
+    },
+    "./stepper": {
+      "types": "./dist/molecules/Stepper/index.d.ts",
+      "import": "./dist/stepper.js",
+      "require": "./dist/stepper.cjs"
+    },
+    "./split-button": {
+      "types": "./dist/molecules/SplitButton/index.d.ts",
+      "import": "./dist/split-button.js",
+      "require": "./dist/split-button.cjs"
+    },
+    "./collapse": {
+      "types": "./dist/molecules/Collapse/index.d.ts",
+      "import": "./dist/collapse.js",
+      "require": "./dist/collapse.cjs"
+    },
+    "./input-group": {
+      "types": "./dist/molecules/InputGroup/index.d.ts",
+      "import": "./dist/input-group.js",
+      "require": "./dist/input-group.cjs"
+    },
+    "./accordion": {
+      "types": "./dist/molecules/Accordion/index.d.ts",
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.cjs"
+    },
     "./textarea": {
       "types": "./dist/molecules/Textarea/index.d.ts",
       "import": "./dist/textarea.js",

package/dist/checkbox-CdDTRdKV.cjs

@@ -1,37 +0,0 @@
-"use strict";const t=require("lit"),r=require("lit/decorators.js"),h=require("lit/directives/ref.js"),d='.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';var p=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(a,e,s,n)=>{for(var o=n>1?void 0:n?b(e,s):e,c=a.length-1,l;c>=0;c--)(l=a[c])&&(o=(n?l(e,s,o):l(o))||o);return n&&o&&p(e,s,o),o};exports.Checkbox=class extends t.LitElement{constructor(){super(...arguments),this.label="",this.value="",this.checked=!1,this.type="checkbox",this.disabled=!1,this.indeterminate=!1,this.internalChecked=!1}connectedCallback(){super.connectedCallback(),this.internalChecked=this.checked}firstUpdated(){this.setIndeterminate()}updated(e){e.has("indeterminate")&&this.setIndeterminate(),e.has("checked")&&(this.internalChecked=this.checked)}setIndeterminate(){this.inputElement&&(this.inputElement.indeterminate=this.indeterminate)}toggleChecked(){this.disabled||(this.indeterminate?(this.indeterminate=!1,this.internalChecked=!0):this.internalChecked=!this.internalChecked,this.dispatchEvent(new CustomEvent("lgsChange",{detail:{checked:this.internalChecked,indeterminate:this.indeterminate,value:this.value},bubbles:!0,composed:!0})))}renderCheckbox(){const e=["checkbox-control",this.internalChecked?"checkbox-control--checked":"",this.indeterminate?"checkbox-control--indeterminate":""].filter(Boolean).join(" ");return t.html`
-      <div
-        class="checkbox-wrapper ${this.disabled?"checkbox-wrapper--disabled":""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${h.ref(s=>this.inputElement=s)}
-        />
-        <span class="${e}"></span>
-        ${this.label?t.html`<span class="checkbox-label">${this.label}</span>`:t.nothing}
-      </div>
-    `}renderSwitch(){return t.html`
-      <div
-        class="switch-wrapper ${this.disabled?"switch-wrapper--disabled":""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${h.ref(e=>this.inputElement=e)}
-        />
-        <div class="switch-track ${this.internalChecked?"switch-track--checked":""}">
-          <div class="switch-thumb"></div>
-        </div>
-        ${this.label?t.html`<span class="checkbox-label">${this.label}</span>`:t.nothing}
-      </div>
-    `}render(){return this.type==="switch"?this.renderSwitch():this.renderCheckbox()}};exports.Checkbox.styles=[t.css`
-      ${t.unsafeCSS(d)}
-    `];i([r.property({type:String})],exports.Checkbox.prototype,"label",2);i([r.property({type:String})],exports.Checkbox.prototype,"value",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"checked",2);i([r.property({type:String})],exports.Checkbox.prototype,"type",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"disabled",2);i([r.property({type:Boolean})],exports.Checkbox.prototype,"indeterminate",2);i([r.state()],exports.Checkbox.prototype,"internalChecked",2);exports.Checkbox=i([r.customElement("logosphere-checkbox")],exports.Checkbox);

package/dist/checkbox-g6kl2jGR.js

@@ -1,119 +0,0 @@
-import { unsafeCSS as b, css as k, LitElement as f, nothing as d, html as a } from "lit";
-import { property as n, state as u, customElement as m } from "lit/decorators.js";
-import { ref as p } from "lit/directives/ref.js";
-const v = '.checkbox-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.checkbox-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.checkbox-control{width:16px;height:16px;flex-shrink:0;position:relative;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing),border-color var(--transition-speed-fast) var(--transition-timing)}.checkbox-control--checked{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--checked:after{content:"";position:absolute;top:50%;left:50%;width:9px;height:5px;border-left:2px solid #ffffff;border-bottom:2px solid #ffffff;transform:translate(-50%,-65%) rotate(-45deg)}.checkbox-control--indeterminate{background-color:var(--color-primary);border-color:var(--color-primary)}.checkbox-control--indeterminate:after{content:"";position:absolute;top:50%;left:50%;width:8px;height:2px;background-color:#fff;border-radius:1px;transform:translate(-50%,-50%)}.checkbox-label{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-body-text)}.switch-wrapper{display:inline-flex;align-items:center;gap:var(--spacing-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-base)}.switch-wrapper--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.switch-track{width:36px;height:20px;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-border);position:relative;transition:background-color var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked{background-color:var(--color-primary)}.switch-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:var(--radius-full);background-color:#fff;box-shadow:var(--shadow-xs);transition:transform var(--transition-speed-fast) var(--transition-timing)}.switch-track--checked .switch-thumb{transform:translate(16px)}';
-var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (t, o, c, s) => {
-  for (var i = s > 1 ? void 0 : s ? g(o, c) : o, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (i = (s ? h(o, c, i) : h(i)) || i);
-  return s && i && x(o, c, i), i;
-};
-let e = class extends f {
-  constructor() {
-    super(...arguments), this.label = "", this.value = "", this.checked = !1, this.type = "checkbox", this.disabled = !1, this.indeterminate = !1, this.internalChecked = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.internalChecked = this.checked;
-  }
-  firstUpdated() {
-    this.setIndeterminate();
-  }
-  updated(t) {
-    t.has("indeterminate") && this.setIndeterminate(), t.has("checked") && (this.internalChecked = this.checked);
-  }
-  setIndeterminate() {
-    this.inputElement && (this.inputElement.indeterminate = this.indeterminate);
-  }
-  toggleChecked() {
-    this.disabled || (this.indeterminate ? (this.indeterminate = !1, this.internalChecked = !0) : this.internalChecked = !this.internalChecked, this.dispatchEvent(
-      new CustomEvent("lgsChange", {
-        detail: {
-          checked: this.internalChecked,
-          indeterminate: this.indeterminate,
-          value: this.value
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  renderCheckbox() {
-    const t = [
-      "checkbox-control",
-      this.internalChecked ? "checkbox-control--checked" : "",
-      this.indeterminate ? "checkbox-control--indeterminate" : ""
-    ].filter(Boolean).join(" ");
-    return a`
-      <div
-        class="checkbox-wrapper ${this.disabled ? "checkbox-wrapper--disabled" : ""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${p((o) => this.inputElement = o)}
-        />
-        <span class="${t}"></span>
-        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : d}
-      </div>
-    `;
-  }
-  renderSwitch() {
-    return a`
-      <div
-        class="switch-wrapper ${this.disabled ? "switch-wrapper--disabled" : ""}"
-        @click=${this.toggleChecked}
-      >
-        <input
-          type="checkbox"
-          class="checkbox-input"
-          .checked=${this.internalChecked}
-          ?disabled=${this.disabled}
-          .value=${this.value}
-          ${p((t) => this.inputElement = t)}
-        />
-        <div class="switch-track ${this.internalChecked ? "switch-track--checked" : ""}">
-          <div class="switch-thumb"></div>
-        </div>
-        ${this.label ? a`<span class="checkbox-label">${this.label}</span>` : d}
-      </div>
-    `;
-  }
-  render() {
-    return this.type === "switch" ? this.renderSwitch() : this.renderCheckbox();
-  }
-};
-e.styles = [
-  k`
-      ${b(v)}
-    `
-];
-r([
-  n({ type: String })
-], e.prototype, "label", 2);
-r([
-  n({ type: String })
-], e.prototype, "value", 2);
-r([
-  n({ type: Boolean })
-], e.prototype, "checked", 2);
-r([
-  n({ type: String })
-], e.prototype, "type", 2);
-r([
-  n({ type: Boolean })
-], e.prototype, "disabled", 2);
-r([
-  n({ type: Boolean })
-], e.prototype, "indeterminate", 2);
-r([
-  u()
-], e.prototype, "internalChecked", 2);
-e = r([
-  m("logosphere-checkbox")
-], e);
-export {
-  e as C
-};

package/dist/tab-BmrITzOL.cjs

@@ -1,40 +0,0 @@
-"use strict";const s=require("lit"),n=require("lit/decorators.js"),c=".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}";var h=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(d,e,a,t)=>{for(var i=t>1?void 0:t?p(e,a):e,o=d.length-1,l;o>=0;o--)(l=d[o])&&(i=(t?l(e,a,i):l(i))||i);return t&&i&&h(e,a,i),i};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}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}willUpdate(e){if(super.willUpdate(e),e.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const a=this.tabs.findIndex(t=>t.id===this.activeTab);a!==-1&&(this._focusedIndex=a)}e.has("tabs")&&this.tabs.length>0&&(this.tabs.some(t=>t.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(t=>t.id===this.activeTab))}handleTabClick(e,a){if(a)return;const t=this.activeTab;this.activeTab=e,this._focusedIndex=this.tabs.findIndex(i=>i.id===e),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:t,newTab:e},bubbles:!0,composed:!0}))}handleKeyDown(e){const{tabs:a}=this;if(a.filter(o=>!o.disabled).length===0)return;let t=this._focusedIndex;const i=this._focusedIndex;switch(e.key){case"ArrowLeft":e.preventDefault();do t=t>0?t-1:a.length-1;while(a[t]?.disabled&&t!==i);break;case"ArrowRight":e.preventDefault();do t=t<a.length-1?t+1:0;while(a[t]?.disabled&&t!==i);break;case"Home":for(e.preventDefault(),t=0;a[t]?.disabled&&t<a.length-1;)t++;break;case"End":for(e.preventDefault(),t=a.length-1;a[t]?.disabled&&t>0;)t--;break;default:return}if(t!==this._focusedIndex&&!a[t]?.disabled){const o=this.activeTab;this._focusedIndex=t,this.activeTab=a[t].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${a[t].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:a[t].id},bubbles:!0,composed:!0}))}}scrollTabIntoView(e){this.updateComplete.then(()=>{const a=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${e}"]`);if(a&&this.tablist){const t=this.tablist.getBoundingClientRect(),i=a.getBoundingClientRect();i.left<t.left?this.tablist.scrollLeft-=t.left-i.left+16:i.right>t.right&&(this.tablist.scrollLeft+=i.right-t.right+16)}})}renderTabButton(e,a){const t=this.activeTab===e.id,i=this._focusedIndex===a,o=["tab__button",t?"tab__button--active":"",e.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),l=["tab__label",t?"":"tab__label--inactive"].filter(Boolean).join(" "),b=["tab__description",t?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
-      <button
-        role="tab"
-        class=${o}
-        data-tab-id=${e.id}
-        aria-selected=${t?"true":"false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t||i?"0":"-1"}
-        ?disabled=${e.disabled}
-        @click=${()=>this.handleTabClick(e.id,e.disabled)}
-        @focus=${()=>this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon?s.html`<i class="${e.icon} tab__icon"></i>`:s.nothing}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description?s.html`<span class=${b}>${e.description}</span>`:s.nothing}
-        </div>
-      </button>
-    `}renderTabPanel(e){const a=this.activeTab===e.id;if(!(!this.lazy||this._renderedTabs.has(e.id)))return s.nothing;const i=["tab__panel",a?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${i}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content=="string"?s.html`${e.content}`:s.nothing}
-        </slot>
-      </div>
-    `}render(){return s.html`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e,a)=>this.renderTabButton(e,a))}
-        </div>
-        <div class="tab__panels">${this.tabs.map(e=>this.renderTabPanel(e))}</div>
-      </div>
-    `}};exports.LogosphereTab.styles=[s.css`
-      ${s.unsafeCSS(c)}
-    `];r([n.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);r([n.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);r([n.property({type:String})],exports.LogosphereTab.prototype,"variant",2);r([n.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);r([n.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);r([n.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=r([n.customElement("logosphere-tab")],exports.LogosphereTab);

package/dist/tab-Ca_OyNqQ.js

@@ -1,176 +0,0 @@
-import { unsafeCSS as p, css as f, LitElement as v, nothing as c, html as r } from "lit";
-import { property as b, state as h, query as _, customElement as u } from "lit/decorators.js";
-const y = ".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}";
-var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, i, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(i, t) : i, l = e.length - 1, d; l >= 0; l--)
-    (d = e[l]) && (s = (a ? d(i, t, s) : d(s)) || s);
-  return a && s && g(i, t, s), s;
-};
-let o = class extends v {
-  constructor() {
-    super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set();
-  }
-  connectedCallback() {
-    super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
-  }
-  willUpdate(e) {
-    if (super.willUpdate(e), e.has("activeTab") && this.activeTab) {
-      this._renderedTabs.add(this.activeTab);
-      const i = this.tabs.findIndex((t) => t.id === this.activeTab);
-      i !== -1 && (this._focusedIndex = i);
-    }
-    e.has("tabs") && this.tabs.length > 0 && (this.tabs.some((t) => t.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((t) => t.id === this.activeTab));
-  }
-  // ==================== EVENTS ====================
-  handleTabClick(e, i) {
-    if (i) return;
-    const t = this.activeTab;
-    this.activeTab = e, this._focusedIndex = this.tabs.findIndex((a) => a.id === e), this.dispatchEvent(
-      new CustomEvent("tab-change", {
-        detail: { oldTab: t, newTab: e },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleKeyDown(e) {
-    const { tabs: i } = this;
-    if (i.filter((s) => !s.disabled).length === 0) return;
-    let t = this._focusedIndex;
-    const a = this._focusedIndex;
-    switch (e.key) {
-      case "ArrowLeft":
-        e.preventDefault();
-        do
-          t = t > 0 ? t - 1 : i.length - 1;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "ArrowRight":
-        e.preventDefault();
-        do
-          t = t < i.length - 1 ? t + 1 : 0;
-        while (i[t]?.disabled && t !== a);
-        break;
-      case "Home":
-        for (e.preventDefault(), t = 0; i[t]?.disabled && t < i.length - 1; ) t++;
-        break;
-      case "End":
-        for (e.preventDefault(), t = i.length - 1; i[t]?.disabled && t > 0; ) t--;
-        break;
-      default:
-        return;
-    }
-    if (t !== this._focusedIndex && !i[t]?.disabled) {
-      const s = this.activeTab;
-      this._focusedIndex = t, this.activeTab = i[t].id, this.updateComplete.then(() => {
-        this.shadowRoot?.querySelector(
-          `[role="tab"][data-tab-id="${i[t].id}"]`
-        )?.focus();
-      }), this.dispatchEvent(
-        new CustomEvent("tab-change", {
-          detail: { oldTab: s, newTab: i[t].id },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }
-  }
-  scrollTabIntoView(e) {
-    this.updateComplete.then(() => {
-      const i = this.shadowRoot?.querySelector(
-        `[role="tab"][data-tab-id="${e}"]`
-      );
-      if (i && this.tablist) {
-        const t = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
-        a.left < t.left ? this.tablist.scrollLeft -= t.left - a.left + 16 : a.right > t.right && (this.tablist.scrollLeft += a.right - t.right + 16);
-      }
-    });
-  }
-  // ==================== RENDER ====================
-  renderTabButton(e, i) {
-    const t = this.activeTab === e.id, a = this._focusedIndex === i, s = [
-      "tab__button",
-      t ? "tab__button--active" : "",
-      e.disabled ? "tab__button--disabled" : ""
-    ].filter(Boolean).join(" "), l = ["tab__label", t ? "" : "tab__label--inactive"].filter(Boolean).join(" "), d = ["tab__description", t ? "tab__description--active" : ""].filter(Boolean).join(" ");
-    return r`
-      <button
-        role="tab"
-        class=${s}
-        data-tab-id=${e.id}
-        aria-selected=${t ? "true" : "false"}
-        aria-controls="panel-${e.id}"
-        tabindex=${t || a ? "0" : "-1"}
-        ?disabled=${e.disabled}
-        @click=${() => this.handleTabClick(e.id, e.disabled)}
-        @focus=${() => this.scrollTabIntoView(e.id)}
-      >
-        ${e.icon ? r`<i class="${e.icon} tab__icon"></i>` : c}
-        <div class="tab__content">
-          <span class=${l}>${e.label}</span>
-          ${e.description ? r`<span class=${d}>${e.description}</span>` : c}
-        </div>
-      </button>
-    `;
-  }
-  renderTabPanel(e) {
-    const i = this.activeTab === e.id;
-    if (!(!this.lazy || this._renderedTabs.has(e.id))) return c;
-    const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
-    return r`
-      <div
-        role="tabpanel"
-        id="panel-${e.id}"
-        aria-labelledby="tab-${e.id}"
-        class=${a}
-        tabindex="0"
-      >
-        <slot name=${`panel-${e.id}`}>
-          ${typeof e.content == "string" ? r`${e.content}` : c}
-        </slot>
-      </div>
-    `;
-  }
-  render() {
-    return r`
-      <div class="tab">
-        <div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
-          ${this.tabs.map((e, i) => this.renderTabButton(e, i))}
-        </div>
-        <div class="tab__panels">${this.tabs.map((e) => this.renderTabPanel(e))}</div>
-      </div>
-    `;
-  }
-};
-o.styles = [
-  f`
-      ${p(y)}
-    `
-];
-n([
-  b({ type: Array })
-], o.prototype, "tabs", 2);
-n([
-  b({ type: String })
-], o.prototype, "activeTab", 2);
-n([
-  b({ type: Boolean })
-], o.prototype, "lazy", 2);
-n([
-  b({ type: String })
-], o.prototype, "variant", 2);
-n([
-  h()
-], o.prototype, "_focusedIndex", 2);
-n([
-  h()
-], o.prototype, "_renderedTabs", 2);
-n([
-  _('[role="tablist"]')
-], o.prototype, "tablist", 2);
-o = n([
-  u("logosphere-tab")
-], o);
-export {
-  o as L
-};