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

package/dist/stepper-CZhwgLNp.js

@@ -0,0 +1,122 @@
+import { unsafeCSS as _, css as h, LitElement as v, html as i, nothing as s } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import "./ui-icon-BeR-PaPg.js";
+const b = ":host{display:block}.stepper{display:flex;font-family:var(--font-family-base)}.stepper--horizontal{flex-direction:row;align-items:flex-start}.stepper--horizontal .stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;min-width:0}.stepper--horizontal .stepper__step-header{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.stepper--horizontal .stepper__connector{position:absolute;top:10px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;z-index:0}.stepper--horizontal .stepper__labels{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--spacing-2);padding:0 var(--spacing-1)}.stepper--vertical{flex-direction:column;align-items:stretch}.stepper--vertical .stepper__step{display:flex;flex-direction:column;position:relative}.stepper--vertical .stepper__step-header{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.stepper--vertical .stepper__labels{display:flex;flex-direction:column;padding-top:var(--spacing-1);padding-bottom:var(--spacing-4)}.stepper--vertical .stepper__connector{position:absolute;top:28px;left:9px;width:2px;bottom:0}.stepper__indicator{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.stepper__indicator-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.stepper__indicator-dot{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary);flex-shrink:0}.stepper__indicator--completed{background-color:var(--color-primary);border:2px solid var(--color-primary);color:#fff}.stepper__indicator--current{background-color:var(--color-body-bg);border:2px solid var(--color-primary)}.stepper__indicator--upcoming{background-color:var(--color-body-bg);border:2px solid var(--color-border);color:var(--color-tertiary)}.stepper__indicator--disabled{background-color:var(--color-light-bg);border:2px solid var(--color-secondary-disabled);color:var(--color-secondary-disabled)}.stepper__connector--completed{background-color:var(--color-primary)}.stepper__connector--upcoming{background-color:var(--color-border)}.stepper__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-body-color);white-space:nowrap}.stepper__description{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-tertiary);margin-top:var(--spacing-0-5);white-space:normal}.stepper__step--current .stepper__title{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.stepper__step--upcoming .stepper__title{color:var(--color-tertiary)}.stepper__step--disabled .stepper__title,.stepper__step--disabled .stepper__description{color:var(--color-secondary-disabled)}.stepper__step--clickable{cursor:pointer}.stepper__step--clickable:hover .stepper__indicator--upcoming,.stepper__step--clickable:hover .stepper__indicator--completed{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.stepper__step--clickable:focus-visible{outline:none}.stepper__step--clickable:focus-visible .stepper__indicator{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? m(t, r) : t, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (o = (a ? d(t, r, o) : d(o)) || o);
+  return a && o && f(t, r, o), o;
+};
+let p = class extends v {
+  constructor() {
+    super(...arguments), this.steps = [], this.activeStep = 0, this.orientation = "horizontal", this.clickable = !1;
+  }
+  // ── Computed state ──────────────────────────────────────────────────────────
+  _resolveState(e, t) {
+    return e.state ? e.state : e.disabled ? "disabled" : t < this.activeStep ? "completed" : t === this.activeStep ? "current" : "upcoming";
+  }
+  // ── Event handlers ──────────────────────────────────────────────────────────
+  _onStepClick(e, t) {
+    !this.clickable || t === "disabled" || t === "upcoming" || (this.activeStep = e, this.dispatchEvent(
+      new CustomEvent("step-change", {
+        detail: { index: e, step: this.steps[e] },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _onStepKeydown(e, t, r) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onStepClick(t, r)), (e.key === "ArrowRight" || e.key === "ArrowDown") && (e.preventDefault(), this._focusStep(t + 1)), (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), this._focusStep(t - 1));
+  }
+  _focusStep(e) {
+    const t = Math.max(0, Math.min(this.steps.length - 1, e));
+    this.shadowRoot?.querySelector(
+      `[data-step-index="${t}"]`
+    )?.focus();
+  }
+  // ── Render helpers ──────────────────────────────────────────────────────────
+  _renderIndicator(e, t) {
+    let r;
+    return e === "completed" ? r = i`<ui-icon name="uil-check" size="12"></ui-icon>` : e === "current" ? r = i`<span class="stepper__indicator-dot"></span>` : r = i`<span class="stepper__indicator-number">${t + 1}</span>`, i`
+      <div
+        class="stepper__indicator stepper__indicator--${e}"
+        aria-hidden="true"
+      >
+        ${r}
+      </div>
+    `;
+  }
+  _renderConnector(e, t) {
+    return t ? s : i`
+      <div
+        class="stepper__connector stepper__connector--${e === "completed" ? "completed" : "upcoming"}"
+        aria-hidden="true"
+      ></div>
+    `;
+  }
+  _renderStep(e, t) {
+    const r = this._resolveState(e, t), a = t === this.steps.length - 1, o = this.clickable && (r === "completed" || r === "current");
+    return i`
+      <div
+        class="stepper__step stepper__step--${r} ${o ? "stepper__step--clickable" : ""}"
+        data-step-index=${t}
+        role=${this.clickable ? "button" : "listitem"}
+        tabindex=${o ? "0" : "-1"}
+        aria-current=${r === "current" ? "step" : s}
+        aria-disabled=${r === "disabled" ? "true" : s}
+        aria-label="${e.title}${e.description ? `, ${e.description}` : ""}, ${r}"
+        @click=${() => this._onStepClick(t, r)}
+        @keydown=${(l) => this._onStepKeydown(l, t, r)}
+      >
+        <div class="stepper__step-header">
+          ${this._renderIndicator(r, t)}
+          ${this.orientation === "vertical" ? i`
+                <div class="stepper__labels">
+                  <span class="stepper__title">${e.title}</span>
+                  ${e.description ? i`<span class="stepper__description">${e.description}</span>` : s}
+                </div>
+              ` : s}
+        </div>
+
+        ${this.orientation === "horizontal" ? i`
+              <div class="stepper__labels">
+                <span class="stepper__title">${e.title}</span>
+                ${e.description ? i`<span class="stepper__description">${e.description}</span>` : s}
+              </div>
+            ` : s}
+
+        ${this._renderConnector(r, a)}
+      </div>
+    `;
+  }
+  render() {
+    return i`
+      <div
+        class="stepper stepper--${this.orientation}"
+        role="list"
+        aria-label="Progress steps"
+      >
+        ${this.steps.map((e, t) => this._renderStep(e, t))}
+      </div>
+    `;
+  }
+};
+p.styles = [h`${_(b)}`];
+n([
+  c({ attribute: !1 })
+], p.prototype, "steps", 2);
+n([
+  c({ type: Number })
+], p.prototype, "activeStep", 2);
+n([
+  c({ type: String })
+], p.prototype, "orientation", 2);
+n([
+  c({ type: Boolean })
+], p.prototype, "clickable", 2);
+p = n([
+  u("logosphere-stepper")
+], p);
+export {
+  p as S
+};

package/dist/stepper-ZOMaU6aZ.cjs

@@ -0,0 +1,52 @@
+"use strict";const i=require("lit"),a=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.cjs");const c=":host{display:block}.stepper{display:flex;font-family:var(--font-family-base)}.stepper--horizontal{flex-direction:row;align-items:flex-start}.stepper--horizontal .stepper__step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;min-width:0}.stepper--horizontal .stepper__step-header{display:flex;flex-direction:column;align-items:center;width:100%;position:relative}.stepper--horizontal .stepper__connector{position:absolute;top:10px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;z-index:0}.stepper--horizontal .stepper__labels{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:var(--spacing-2);padding:0 var(--spacing-1)}.stepper--vertical{flex-direction:column;align-items:stretch}.stepper--vertical .stepper__step{display:flex;flex-direction:column;position:relative}.stepper--vertical .stepper__step-header{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.stepper--vertical .stepper__labels{display:flex;flex-direction:column;padding-top:var(--spacing-1);padding-bottom:var(--spacing-4)}.stepper--vertical .stepper__connector{position:absolute;top:28px;left:9px;width:2px;bottom:0}.stepper__indicator{width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.stepper__indicator-number{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:1}.stepper__indicator-dot{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary);flex-shrink:0}.stepper__indicator--completed{background-color:var(--color-primary);border:2px solid var(--color-primary);color:#fff}.stepper__indicator--current{background-color:var(--color-body-bg);border:2px solid var(--color-primary)}.stepper__indicator--upcoming{background-color:var(--color-body-bg);border:2px solid var(--color-border);color:var(--color-tertiary)}.stepper__indicator--disabled{background-color:var(--color-light-bg);border:2px solid var(--color-secondary-disabled);color:var(--color-secondary-disabled)}.stepper__connector--completed{background-color:var(--color-primary)}.stepper__connector--upcoming{background-color:var(--color-border)}.stepper__title{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);color:var(--color-body-color);white-space:nowrap}.stepper__description{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-tertiary);margin-top:var(--spacing-0-5);white-space:normal}.stepper__step--current .stepper__title{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.stepper__step--upcoming .stepper__title{color:var(--color-tertiary)}.stepper__step--disabled .stepper__title,.stepper__step--disabled .stepper__description{color:var(--color-secondary-disabled)}.stepper__step--clickable{cursor:pointer}.stepper__step--clickable:hover .stepper__indicator--upcoming,.stepper__step--clickable:hover .stepper__indicator--completed{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}.stepper__step--clickable:focus-visible{outline:none}.stepper__step--clickable:focus-visible .stepper__indicator{box-shadow:0 0 0 4px var(--color-primary-bg-subtle)}";var d=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(l,e,t,r)=>{for(var o=r>1?void 0:r?_(e,t):e,p=l.length-1,s;p>=0;p--)(s=l[p])&&(o=(r?s(e,t,o):s(o))||o);return r&&o&&d(e,t,o),o};exports.Stepper=class extends i.LitElement{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1}_resolveState(e,t){return e.state?e.state:e.disabled?"disabled":t<this.activeStep?"completed":t===this.activeStep?"current":"upcoming"}_onStepClick(e,t){!this.clickable||t==="disabled"||t==="upcoming"||(this.activeStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{index:e,step:this.steps[e]},bubbles:!0,composed:!0})))}_onStepKeydown(e,t,r){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._onStepClick(t,r)),(e.key==="ArrowRight"||e.key==="ArrowDown")&&(e.preventDefault(),this._focusStep(t+1)),(e.key==="ArrowLeft"||e.key==="ArrowUp")&&(e.preventDefault(),this._focusStep(t-1))}_focusStep(e){const t=Math.max(0,Math.min(this.steps.length-1,e));this.shadowRoot?.querySelector(`[data-step-index="${t}"]`)?.focus()}_renderIndicator(e,t){let r;return e==="completed"?r=i.html`<ui-icon name="uil-check" size="12"></ui-icon>`:e==="current"?r=i.html`<span class="stepper__indicator-dot"></span>`:r=i.html`<span class="stepper__indicator-number">${t+1}</span>`,i.html`
+      <div
+        class="stepper__indicator stepper__indicator--${e}"
+        aria-hidden="true"
+      >
+        ${r}
+      </div>
+    `}_renderConnector(e,t){return t?i.nothing:i.html`
+      <div
+        class="stepper__connector stepper__connector--${e==="completed"?"completed":"upcoming"}"
+        aria-hidden="true"
+      ></div>
+    `}_renderStep(e,t){const r=this._resolveState(e,t),o=t===this.steps.length-1,p=this.clickable&&(r==="completed"||r==="current");return i.html`
+      <div
+        class="stepper__step stepper__step--${r} ${p?"stepper__step--clickable":""}"
+        data-step-index=${t}
+        role=${this.clickable?"button":"listitem"}
+        tabindex=${p?"0":"-1"}
+        aria-current=${r==="current"?"step":i.nothing}
+        aria-disabled=${r==="disabled"?"true":i.nothing}
+        aria-label="${e.title}${e.description?`, ${e.description}`:""}, ${r}"
+        @click=${()=>this._onStepClick(t,r)}
+        @keydown=${s=>this._onStepKeydown(s,t,r)}
+      >
+        <div class="stepper__step-header">
+          ${this._renderIndicator(r,t)}
+          ${this.orientation==="vertical"?i.html`
+                <div class="stepper__labels">
+                  <span class="stepper__title">${e.title}</span>
+                  ${e.description?i.html`<span class="stepper__description">${e.description}</span>`:i.nothing}
+                </div>
+              `:i.nothing}
+        </div>
+
+        ${this.orientation==="horizontal"?i.html`
+              <div class="stepper__labels">
+                <span class="stepper__title">${e.title}</span>
+                ${e.description?i.html`<span class="stepper__description">${e.description}</span>`:i.nothing}
+              </div>
+            `:i.nothing}
+
+        ${this._renderConnector(r,o)}
+      </div>
+    `}render(){return i.html`
+      <div
+        class="stepper stepper--${this.orientation}"
+        role="list"
+        aria-label="Progress steps"
+      >
+        ${this.steps.map((e,t)=>this._renderStep(e,t))}
+      </div>
+    `}};exports.Stepper.styles=[i.css`${i.unsafeCSS(c)}`];n([a.property({attribute:!1})],exports.Stepper.prototype,"steps",2);n([a.property({type:Number})],exports.Stepper.prototype,"activeStep",2);n([a.property({type:String})],exports.Stepper.prototype,"orientation",2);n([a.property({type:Boolean})],exports.Stepper.prototype,"clickable",2);exports.Stepper=n([a.customElement("logosphere-stepper")],exports.Stepper);

package/dist/stepper.cjs

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

package/dist/stepper.js

@@ -0,0 +1,4 @@
+import { S as r } from "./stepper-CZhwgLNp.js";
+export {
+  r as Stepper
+};

package/dist/styles/main.css

@@ -14,186 +14,190 @@
 
 :host,
 :root {
-  /* ==================== TYPOGRAPHY ==================== */
+    /* ==================== TYPOGRAPHY ==================== */
 
-  /* Font Families */
-  --font-family-base:
-    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    /* 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;
+    --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-0-5: 0.125rem; /* 2px */
+    --spacing-1: 0.25rem; /* 4px */
+    --spacing-1-5: 0.375rem; /* 6px */
+    --spacing-2: 0.5rem; /* 8px */
+    --spacing-2-5: 0.625rem; /* 10px */
+    --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), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.1), 0px 8px 8px -4px rgba(0, 0, 0, 0.04);
+    --shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.25);
+    --shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.2);
+    --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-color: #2b2b2b;
+    --color-body-bg-hover: #f8f8f8;
+    --color-body-bg-active: #e0e0e0;
+
+
+    /* Emphasis */
+    --color-emphasis: #000000;
+    --color-emphasis-color: #ffffff;
+
+    /* Borders */
+    --color-border: #e0e0e0;
+    --color-border-subtle: #f8f9fa;
+    --color-border-emphasis: #2b2b2b;
+
+    /* Tertiary Colors */
+    --color-tertiary: #8e8e8e;
+    --color-tertiary-border: #8e8e8e;
+    --color-tertiary-border-subtle: #e0e0e0;
+
+    /* Primary Brand Color — Logo Kırmızısı */
+    --color-primary: #c8102e;
+    --color-primary-hover: #aa0e27;
+    --color-primary-active: #8c0b20;
+    --color-primary-disabled: #efb7c0;
+    --color-primary-emphasis: #8c0b20;
+    --color-primary-border: #c8102e;
+    --color-primary-border-subtle: #efb7c0;
+    --color-primary-bg: #c8102e;
+    --color-primary-bg-subtle: #f7dbe0;
+
+    /* Secondary Colors */
+    --color-secondary: #565656;
+    --color-secondary-color: #ffffff;
+    --color-secondary-hover: #333333;
+    --color-secondary-active: #2b2b2b;
+    --color-secondary-disabled: #c6c6c6;
+    --color-secondary-emphasis: #2b2b2b;
+    --color-secondary-border: #565656;
+    --color-secondary-border-subtle: #b0b0b0;
+
+    /* Success Colors */
+    --color-success: #198754;
+    --color-success-subtle: #d1e7dd;
+    --color-success-hover: #1d754c;
+    --color-success-active: #206244;
+    --color-success-emphasis: #24503b;
+    --color-success-disabled: #a3cfbb;
+    --color-success-border: #198754;
+    --color-success-border-subtle: #a3cfbb;
+
+    /* Danger Colors */
+    --color-danger: #dd4236;
+    --color-danger-subtle: #fae3e1;
+    --color-danger-hover: #c23f34;
+    --color-danger-active: #a83b33;
+    --color-danger-emphasis: #a83b33;
+    --color-danger-disabled: #f1b3af;
+    --color-danger-border: #dd4236;
+
+    /* Warning Colors */
+    --color-warning: #f7c159;
+    --color-warning-subtle: #fdefd5;
+    --color-warning-hover: #e3b254;
+    --color-warning-active: #e3b254;
+    --color-warning-emphasis: #9b7e44;
+    --color-warning-disabled: #fbe0ac;
+    --color-warning-border: #f7c159;
+    --color-warning-border-subtle: #fdefd5;
+
+    /* Info Colors */
+    --color-info: #377dff;
+    --color-info-subtle: #d7e5ff;
+    --color-info-hover: #3571df;
+    --color-info-active: #3364bf;
+    --color-info-emphasis: #3364bf;
+    --color-info-disabled: #afcbff;
+    --color-info-border: #377dff;
+    --color-info-border-subtle: #afcbff;
+
+    /* Commercial / Purple */
+    --color-commercial-subtle: #e2d9f3;
+    --color-commercial-emphasis: #543985;
+
+    /* Light */
+    --color-light: #f8f8f8;
+    --color-light-bg: #f8f8f8;
+    --color-light-bg-2: #f8f9fa;
+    --color-light-border-subtle: #f8f8f8;
+    --color-light-text-emphasis: #333333;
+
+    /* Dark */
+    --color-dark: #000000;
+    --color-dark-bg-subtle: #e0e0e0;
 }
 
 /* ==================== DARK THEME ==================== */
@@ -202,8 +206,8 @@
 /*    !* Body & Layout *!*/
 /*    --color-body-bg: #2b2b2b;*/
 /*    --color-body-bg-rgb: 43, 43, 43;*/
-/*    --color-body-text: #f8f8f8;*/
-/*    --color-body-text-rgb: 248, 248, 248;*/
+/*    --color-body-color: #f8f8f8;*/
+/*    --color-body-color-rgb: 248, 248, 248;*/
 
 /*    !* Secondary Colors *!*/
 /*    --color-secondary: #bbbbbb;*/
@@ -214,8 +218,8 @@
 /*    --color-secondary-outline-hover: #7878780D;*/
 
 /*    !* Tertiary Colors *!*/
-/*    --color-tertiary-bg: #3a3a3a;*/
-/*    --color-tertiary-bg-rgb: 58, 58, 58;*/
+/*    --color-tertiary: #3a3a3a;*/
+/*    --color-tertiary-rgb: 58, 58, 58;*/
 
 /*    !* Emphasis *!*/
 /*    --color-emphasis: #ffffff;*/

package/dist/switch-Do6SCkPJ.cjs

@@ -0,0 +1,17 @@
+"use strict";const a=require("lit"),c=require("lit/decorators.js"),d=":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 l=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(o,e,s,i)=>{for(var t=i>1?void 0:i?p(e,s):e,h=o.length-1,n;h>=0;h--)(n=o[h])&&(t=(i?n(e,s,t):n(t))||t);return i&&t&&l(e,s,t),t};exports.Switch=class extends a.LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.size="md"}onChange(e){const s=e.target;this.checked=s.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 e=`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(" "),i=this.size==="sm"?12:16,t=this.checked?`translateX(${i}px)`:"translateX(0)";return a.html`
+      <label class="${e}">
+        <input
+          class="switch__input"
+          type="checkbox"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.onChange}
+        />
+        <div class="${s}">
+          <span
+            class="switch__thumb"
+            style="transform: ${t}"
+          ></span>
+        </div>
+      </label>
+    `}};exports.Switch.styles=[a.css`${a.unsafeCSS(d)}`];r([c.property({type:Boolean})],exports.Switch.prototype,"checked",2);r([c.property({type:Boolean})],exports.Switch.prototype,"disabled",2);r([c.property({type:String})],exports.Switch.prototype,"size",2);r([c.query("input")],exports.Switch.prototype,"inputElement",2);exports.Switch=r([c.customElement("logosphere-switch")],exports.Switch);