@logosphere-ui/core 0.0.0-alpha.2

package/dist/popover.cjs

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

package/dist/popover.js

@@ -0,0 +1,4 @@
+import { P as e } from "./popover-D-FXdEdS.js";
+export {
+  e as Popover
+};

package/dist/shared/icons/icon-map.d.ts

@@ -0,0 +1 @@
+export declare const icons: Record<string, string>;

package/dist/shared/icons/ui-icon.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class UiIcon extends LitElement {
+    static properties: {
+        name: {
+            type: StringConstructor;
+        };
+        size: {
+            type: NumberConstructor;
+        };
+    };
+    name: string;
+    size: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/styles/main.css

@@ -0,0 +1,247 @@
+/**
+ * Logosphere UI - Main Stylesheet
+ * Design tokens and base styles
+ */
+
+/**
+ * Theme Configuration
+ * Logosphere UI Design System
+ *
+ * Bu dosya tüm renk paletini, tipografiyi ve design token'ları içerir
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+
+:host,
+:root {
+  /* ==================== TYPOGRAPHY ==================== */
+
+  /* Font Families */
+  --font-family-base:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+  --font-family-mono:
+    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Font Sizes */
+  --font-size-xs: 0.75rem; /* 12px */
+  --font-size-sm: 0.875rem; /* 14px */
+  --font-size-base: 1rem; /* 16px */
+  --font-size-lg: 1.125rem; /* 18px */
+  --font-size-xl: 1.25rem; /* 20px */
+  --font-size-2xl: 1.5rem; /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem; /* 36px */
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* ==================== SPACING ==================== */
+
+  --spacing-0: 0;
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+
+  /* ==================== BORDER RADIUS ==================== */
+
+  --radius-none: 0;
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-base: 0.5rem; /* 8px */
+  --radius-md: 0.75rem; /* 12px */
+  --radius-lg: 1rem; /* 16px */
+  --radius-xl: 1.5rem; /* 24px */
+  --radius-2xl: 2rem; /* 32px */
+  --radius-full: 9999px;
+
+  /* ==================== SHADOWS ==================== */
+
+  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+
+  /* ==================== Z-INDEX SCALE ==================== */
+
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1020;
+  --z-index-fixed: 1030;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+
+  /* ==================== TRANSITIONS ==================== */
+
+  --transition-speed-fast: 150ms;
+  --transition-speed-base: 200ms;
+  --transition-speed-slow: 300ms;
+  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ==================== LIGHT THEME COLORS ==================== */
+
+  /* Body & Layout */
+  --color-body-bg: #ffffff;
+  --color-body-bg-rgb: 255, 255, 255;
+  --color-body-text: #2b2b2b;
+  --color-body-text-rgb: 43, 43, 43;
+
+  /* Hovers */
+  --color-outline-hover: #7878780d;
+
+  /* Tertiary Colors */
+  --color-tertiary: #8e8e8e;
+  --color-tertiary-rgb: 142, 142, 142;
+  --color-tertiary-bg: #f8f8f8;
+  --color-tertiary-bg-rgb: 248, 248, 248;
+
+  /* Emphasis */
+  --color-emphasis: #000000;
+  --color-emphasis-rgb: 0, 0, 0;
+
+  /* Borders */
+  --color-border: #e0e0e0;
+  --color-border-success: #19875424;
+  --color-border-warning: #f7c15924;
+  --color-border-danger: #da5b5b24;
+  --color-border-info: #377dff24;
+  --color-border-rgb: 229, 231, 235;
+  --color-primary-border-subtle: #f0b8bd;
+
+  /* Primary Brand Color */
+  --color-primary: #da5b5b;
+  --color-primary-rgb: 218, 88, 91;
+  --color-primary-hover: #b94d4d;
+  --color-primary-active: #aa4547;
+  --color-primary-bg-subtle: #f0b8bd;
+  --color-primary-text-emphasis: #da5b5b;
+
+  /* Secondary Colors */
+  --color-secondary: #565656;
+  --color-secondary-rgb: 187, 187, 187;
+  --color-secondary-bg-rgb: 75, 75, 75;
+  --color-secondary-hover: #2b2b2b;
+  --color-secondary-active: #fffff;
+
+  /* Success Colors */
+  --color-success: #198754;
+  --color-success-rgb: #ebf7ed;
+  --color-success-hover: #125f3b24;
+  --color-success-active: #126038;
+  --color-success-bg-subtle: #ebf7ed;
+  --color-success-text-emphasis: #0e4a2e;
+  --color-success-outline-text-emphasis: #157347;
+
+  /* Purple Colors */
+  --color-purple: #3D246A;
+  --color-purple-rgb: #EDE8F4;
+  /* Danger Colors */
+  --color-danger: #b94d4d;
+  --color-danger-rgb: #b94d4d15;
+  --color-danger-hover: #99404024;
+  --color-danger-active: #8f343b;
+  --color-danger-bg-subtle: #f0b8bd;
+  --color-danger-text-emphasis: #662a2a;
+  --color-danger-outline-text-emphasis: #783232;
+
+  /* Info Colors */
+  --color-info: #377dff24;
+  --color-info-rgb: #ebf2ff;
+  --color-info-hover: #2f64cc24;
+  --color-info-active: #2661cc;
+  --color-info-bg-subtle: #acf8ff;
+  --color-info-text-emphasis: #1e458c;
+  --color-info-outline-text-emphasis: #1e458c;
+
+  /* Warning Colors */
+  --color-warning: #f7c15924;
+  --color-warning-rgb: #ffedcc;
+  --color-warning-hover: #ad873e24;
+  --color-warning-active: #f3b128;
+  --color-warning-bg-subtle: #ffedcc;
+  --color-warning-text-emphasis: #886a31;
+
+  /* Gray Scale */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+}
+
+/* ==================== DARK THEME ==================== */
+
+/*[data-theme="dark"] {*/
+/*    !* Body & Layout *!*/
+/*    --color-body-bg: #2b2b2b;*/
+/*    --color-body-bg-rgb: 43, 43, 43;*/
+/*    --color-body-text: #f8f8f8;*/
+/*    --color-body-text-rgb: 248, 248, 248;*/
+
+/*    !* Secondary Colors *!*/
+/*    --color-secondary: #bbbbbb;*/
+/*    --color-secondary-rgb: 187, 187, 187;*/
+/*    --color-secondary-bg: #565656;*/
+/*    --color-secondary-bg-rgb: 75, 75, 75;*/
+/*    --color-secondary-hover: #2B2B2B;*/
+/*    --color-secondary-outline-hover: #7878780D;*/
+
+/*    !* Tertiary Colors *!*/
+/*    --color-tertiary-bg: #3a3a3a;*/
+/*    --color-tertiary-bg-rgb: 58, 58, 58;*/
+
+/*    !* Emphasis *!*/
+/*    --color-emphasis: #ffffff;*/
+/*    --color-emphasis-rgb: 255, 255, 255;*/
+
+/*    !* Borders *!*/
+/*    --color-border: #E0E0E0;*/
+/*    --color-border-rgb: 75, 75, 75;*/
+
+/*    !* Primary (Dark Mode) *!*/
+/*    --color-primary-hover: #e36366;*/
+/*    --color-primary-active: #ed7478;*/
+/*    --color-primary-bg-subtle: #572424;*/
+/*    --color-primary-border-subtle: #572424;*/
+/*    --color-primary-text-emphasis: #eba5a5;*/
+
+/*    !* Success (Dark Mode) *!*/
+/*    --color-success-hover: #1fa768;*/
+/*    --color-success-active: #25c07e;*/
+/*    --color-success-bg-subtle: #0a3622;*/
+/*    --color-success-border-subtle: #0a3622;*/
+/*    --color-success-text-emphasis: #80bda1;*/
+
+/*    !* Light (Dark Mode) *!*/
+/*    --color-light: #4b4b4b;*/
+/*    --color-light-hover: #5a5a5a;*/
+/*    --color-light-active: #6a6a6a;*/
+/*}*/
+

package/dist/switch-Cpl53nRW.js

@@ -0,0 +1,64 @@
+import { LitElement as l, html as d, unsafeCSS as p, css as _ } from "lit";
+import { property as n, query as w, customElement as b } from "lit/decorators.js";
+const u = ":host{display:block}.switch{display:inline-block;position:relative}.switch--md{width:36px;height:20px}.switch--sm{width:32px;height:18px}.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:var(--radius-full);cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-gray-300)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-on{background-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.switch__track--disabled-off{background-color:var(--color-gray-200)}.switch__thumb{position:absolute;background-color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);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:14px;height:14px}.switch__thumb--on.switch--md .switch__thumb,.switch__track--on~.switch__thumb{transform:translate(16px)}.switch__track--on+.switch__thumb{transform:translate(16px)}";
+var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, r, c) => {
+  for (var s = c > 1 ? void 0 : c ? k(t, r) : t, o = e.length - 1, h; o >= 0; o--)
+    (h = e[o]) && (s = (c ? h(t, r, s) : h(s)) || s);
+  return c && s && m(t, r, s), s;
+};
+let i = class extends l {
+  constructor() {
+    super(...arguments), this.checked = !1, this.disabled = !1, this.size = "md";
+  }
+  onChange(e) {
+    const t = e.target;
+    this.checked = t.checked, this.dispatchEvent(new CustomEvent("change", {
+      detail: { checked: this.checked }
+    }));
+  }
+  render() {
+    const e = `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(" "), r = this.checked ? "translateX(16px)" : "translateX(0)";
+    return d`
+      <label class="${e}">
+        <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>
+    `;
+  }
+};
+i.styles = [_`${p(u)}`];
+a([
+  n({ type: Boolean })
+], i.prototype, "checked", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "disabled", 2);
+a([
+  n({ type: String })
+], i.prototype, "size", 2);
+a([
+  w("input")
+], i.prototype, "inputElement", 2);
+i = a([
+  b("logosphere-switch")
+], i);
+export {
+  i as S
+};

package/dist/switch-Rnnn10bn.cjs

@@ -0,0 +1,17 @@
+"use strict";const a=require("lit"),r=require("lit/decorators.js"),d=":host{display:block}.switch{display:inline-block;position:relative}.switch--md{width:36px;height:20px}.switch--sm{width:32px;height:18px}.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:var(--radius-full);cursor:pointer;transition:background-color var(--transition-speed-base) var(--transition-timing);background-color:var(--color-gray-300)}.switch__track--on{background-color:var(--color-primary)}.switch__track--disabled{cursor:not-allowed}.switch__track--disabled-on{background-color:color-mix(in srgb,var(--color-primary) 30%,transparent)}.switch__track--disabled-off{background-color:var(--color-gray-200)}.switch__thumb{position:absolute;background-color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-xs);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:14px;height:14px}.switch__thumb--on.switch--md .switch__thumb,.switch__track--on~.switch__thumb{transform:translate(16px)}.switch__track--on+.switch__thumb{transform:translate(16px)}";var l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,c=(o,t,s,e)=>{for(var i=e>1?void 0:e?p(t,s):t,h=o.length-1,n;h>=0;h--)(n=o[h])&&(i=(e?n(t,s,i):n(i))||i);return e&&i&&l(t,s,i),i};exports.Switch=class extends a.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.size="md"}onChange(t){const s=t.target;this.checked=s.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked}}))}render(){const t=`switch switch--${this.size}`,s=["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(" "),e=this.checked?"translateX(16px)":"translateX(0)";return a.html`
+      <label class="${t}">
+        <input
+          class="switch__input"
+          type="checkbox"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.onChange}
+        />
+        <div class="${s}">
+          <span
+            class="switch__thumb"
+            style="transform: ${e}"
+          ></span>
+        </div>
+      </label>
+    `}};exports.Switch.styles=[a.css`${a.unsafeCSS(d)}`];c([r.property({type:Boolean})],exports.Switch.prototype,"checked",2);c([r.property({type:Boolean})],exports.Switch.prototype,"disabled",2);c([r.property({type:String})],exports.Switch.prototype,"size",2);c([r.query("input")],exports.Switch.prototype,"inputElement",2);exports.Switch=c([r.customElement("logosphere-switch")],exports.Switch);

package/dist/switch.cjs

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

package/dist/switch.js

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

package/dist/tab-BKdN4xAz.js

@@ -0,0 +1,176 @@
+import { LitElement as p, nothing as c, html as r, unsafeCSS as f, css as v } 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-tertiary-bg)}.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 p {
+  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 = [
+  v`
+      ${f(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
+};

package/dist/tab-DcjAlXzU.cjs

@@ -0,0 +1,40 @@
+"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-tertiary-bg)}.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.cjs

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

package/dist/tab.js

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