@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.0

package/src/components/theme-toggle/theme-toggle.ts

@@ -1,131 +1,131 @@
-import {LitElement, html, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-export type ThemeMode = "light" | "system" | "dark";
-
-@customElement("st-theme-toggle")
-export class StThemeToggle extends LitElement {
-  @property({type: String, reflect: true}) theme: ThemeMode = "system";
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-flex;
-        /* Use semantic tokens for the container */
-        background-color: var(--st-color-surface);
-        border: 1px solid var(--st-color-border);
-        border-radius: 999px;
-        padding: 4px;
-        gap: 2px;
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        border-radius: 50%;
-        border: none;
-        background: transparent;
-        color: var(--st-color-text-muted);
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      button:hover {
-        color: var(--st-color-text);
-      }
-
-      /* Active State Styling */
-      button[aria-pressed="true"] {
-        /* Use the main background color so the active pill "pops" out of the surface */
-        background-color: var(--st-color-bg);
-        color: var(--st-color-primary);
-        /* Subtle shadow to lift the active pill */
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      }
-
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-    `,
-  ];
-
-  private _handleThemeChange(newTheme: ThemeMode) {
-    this.theme = newTheme;
-
-    // Dispatch an event so the consuming app knows to update the document root
-    this.dispatchEvent(
-      new CustomEvent("st-theme-change", {
-        detail: {theme: newTheme},
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    // Check the html tag for the theme injected by your blocking <head> script
-    const rootTheme = document.documentElement.getAttribute("data-theme") as ThemeMode;
-    if (rootTheme) {
-      this.theme = rootTheme;
-    }
-  }
-
-  render() {
-    return html`
-      <button
-        aria-pressed=${this.theme === "light"}
-        title="Light Mode"
-        @click=${() => this._handleThemeChange("light")}
-      >
-        <!-- Sun Icon -->
-        <svg viewBox="0 0 24 24">
-          <circle cx="12" cy="12" r="5"></circle>
-          <path
-            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
-          ></path>
-        </svg>
-      </button>
-
-      <button
-        aria-pressed=${this.theme === "system"}
-        title="System Preference"
-        @click=${() => this._handleThemeChange("system")}
-      >
-        <!-- Monitor/System Icon -->
-        <svg viewBox="0 0 24 24">
-          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-          <path d="M8 21h8M12 17v4"></path>
-        </svg>
-      </button>
-
-      <button
-        aria-pressed=${this.theme === "dark"}
-        title="Dark Mode"
-        @click=${() => this._handleThemeChange("dark")}
-      >
-        <!-- Moon Icon -->
-        <svg viewBox="0 0 24 24">
-          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
-        </svg>
-      </button>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-theme-toggle": StThemeToggle;
-  }
-}
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type ThemeMode = "light" | "system" | "dark";
+
+@customElement("st-theme-toggle")
+export class StThemeToggle extends LitElement {
+  @property({type: String, reflect: true}) theme: ThemeMode = "system";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        /* Use semantic tokens for the container */
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: 999px;
+        padding: 4px;
+        gap: 2px;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        border: none;
+        background: transparent;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      button:hover {
+        color: var(--st-color-text);
+      }
+
+      /* Active State Styling */
+      button[aria-pressed="true"] {
+        /* Use the main background color so the active pill "pops" out of the surface */
+        background-color: var(--st-color-bg);
+        color: var(--st-color-primary);
+        /* Subtle shadow to lift the active pill */
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `,
+  ];
+
+  private _handleThemeChange(newTheme: ThemeMode) {
+    this.theme = newTheme;
+
+    // Dispatch an event so the consuming app knows to update the document root
+    this.dispatchEvent(
+      new CustomEvent("st-theme-change", {
+        detail: {theme: newTheme},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    // Check the html tag for the theme injected by your blocking <head> script
+    const rootTheme = document.documentElement.getAttribute("data-theme") as ThemeMode;
+    if (rootTheme) {
+      this.theme = rootTheme;
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        aria-pressed=${this.theme === "light"}
+        title="Light Mode"
+        @click=${() => this._handleThemeChange("light")}
+      >
+        <!-- Sun Icon -->
+        <svg viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="5"></circle>
+          <path
+            d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+          ></path>
+        </svg>
+      </button>
+
+      <button
+        aria-pressed=${this.theme === "system"}
+        title="System Preference"
+        @click=${() => this._handleThemeChange("system")}
+      >
+        <!-- Monitor/System Icon -->
+        <svg viewBox="0 0 24 24">
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+          <path d="M8 21h8M12 17v4"></path>
+        </svg>
+      </button>
+
+      <button
+        aria-pressed=${this.theme === "dark"}
+        title="Dark Mode"
+        @click=${() => this._handleThemeChange("dark")}
+      >
+        <!-- Moon Icon -->
+        <svg viewBox="0 0 24 24">
+          <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
+        </svg>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-theme-toggle": StThemeToggle;
+  }
+}

package/src/components/vertical-nav/vertical-nav-group.ts

@@ -1,97 +1,97 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-vertical-nav-group')
-export class StNavGroup extends LitElement {
-  @property({ type: String }) label = '';
-  @property({ type: Boolean, reflect: true }) open = false;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        margin-bottom: var(--st-spacing-sm);
-      }
-
-      button {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        background: transparent;
-        border: none;
-        padding: var(--st-spacing-xs) var(--st-spacing-lg);
-        color: var(--st-color-text);
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-bold);
-        cursor: pointer;
-        text-align: left;
-        transition: color 0.2s ease;
-      }
-
-      button:hover {
-        color: var(--st-color-primary);
-      }
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        transition: transform 0.2s ease;
-      }
-
-      /* Rotate Chevron when open */
-      :host([open]) svg {
-        transform: rotate(180deg);
-      }
-
-      /* Modern CSS Grid Animation trick for accordion height */
-      .drawer {
-        display: grid;
-        grid-template-rows: 0fr;
-        transition: grid-template-rows 0.2s ease-in-out;
-      }
-
-      :host([open]) .drawer {
-        grid-template-rows: 1fr;
-      }
-
-      .drawer-content {
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-    `
-  ];
-
-  private _toggle() {
-    this.open = !this.open;
-  }
-
-  render() {
-    return html`
-      <button @click=${this._toggle} aria-expanded=${this.open}>
-        ${this.label}
-        <svg viewBox="0 0 24 24">
-          <path d="M6 9l6 6 6-6"></path>
-        </svg>
-      </button>
-      
-      <div class="drawer">
-        <div class="drawer-content">
-          <!-- We add slight padding top/bottom so the inner links breathe -->
-          <div style="padding: 4px 0;">
-            <slot></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-vertical-nav-group')
+export class StNavGroup extends LitElement {
+  @property({ type: String }) label = '';
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        margin-bottom: var(--st-spacing-sm);
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        background: transparent;
+        border: none;
+        padding: var(--st-spacing-xs) var(--st-spacing-lg);
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        cursor: pointer;
+        text-align: left;
+        transition: color 0.2s ease;
+      }
+
+      button:hover {
+        color: var(--st-color-primary);
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: transform 0.2s ease;
+      }
+
+      /* Rotate Chevron when open */
+      :host([open]) svg {
+        transform: rotate(180deg);
+      }
+
+      /* Modern CSS Grid Animation trick for accordion height */
+      .drawer {
+        display: grid;
+        grid-template-rows: 0fr;
+        transition: grid-template-rows 0.2s ease-in-out;
+      }
+
+      :host([open]) .drawer {
+        grid-template-rows: 1fr;
+      }
+
+      .drawer-content {
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+    `
+  ];
+
+  private _toggle() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <button @click=${this._toggle} aria-expanded=${this.open}>
+        ${this.label}
+        <svg viewBox="0 0 24 24">
+          <path d="M6 9l6 6 6-6"></path>
+        </svg>
+      </button>
+      
+      <div class="drawer">
+        <div class="drawer-content">
+          <!-- We add slight padding top/bottom so the inner links breathe -->
+          <div style="padding: 4px 0;">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
 }

package/src/components/vertical-nav/vertical-nav-item.ts

@@ -1,50 +1,50 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-vertical-nav-item')
-export class StNavItem extends LitElement {
-  @property({ type: String }) href = '#';
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-      }
-
-      a {
-        display: flex;
-        align-items: center;
-        padding: 6px var(--st-spacing-lg);
-        color: var(--st-color-text-muted);
-        font-size: var(--st-font-size-sm);
-        text-decoration: none;
-        border-left: 2px solid transparent;
-        transition: all 0.15s ease;
-      }
-
-      a:hover {
-        color: var(--st-color-text);
-        background-color: var(--st-color-surface);
-      }
-
-      /* Active state: Purple text with a left border indicator */
-      :host([active]) a {
-        color: var(--st-color-primary);
-        border-left-color: var(--st-color-primary);
-        font-weight: var(--st-font-weight-medium);
-        background-color: transparent;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <a href=${this.href} part="link">
-        <slot></slot>
-      </a>
-    `;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-vertical-nav-item')
+export class StNavItem extends LitElement {
+  @property({ type: String }) href = '#';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        padding: 6px var(--st-spacing-lg);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        text-decoration: none;
+        border-left: 2px solid transparent;
+        transition: all 0.15s ease;
+      }
+
+      a:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface);
+      }
+
+      /* Active state: Purple text with a left border indicator */
+      :host([active]) a {
+        color: var(--st-color-primary);
+        border-left-color: var(--st-color-primary);
+        font-weight: var(--st-font-weight-medium);
+        background-color: transparent;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <a href=${this.href} part="link">
+        <slot></slot>
+      </a>
+    `;
+  }
 }

package/src/styles/globals.css

@@ -1,58 +1,58 @@
-:root {
-  /* ==========================================================
-     Brand Primitives: Purple
-     ========================================================== */
-  --st-purple-50: #faf5ff;
-  --st-purple-100: #f3e8ff;
-  --st-purple-400: #c084fc; /* dark mode shade */
-  --st-purple-500: #a855f7;
-  --st-purple-600: #6d28d9; /* light mode shade */
-  --st-purple-700: #5b21b6;
-
-  /* ==========================================================
-     Neutral Primitives: Space Grey Scale
-     ========================================================== */
-  --st-white: #ffffff;
-  --st-gray-50: #f9fafb;
-  --st-gray-100: #f3f4f6;
-  --st-gray-200: #e5e7eb;
-  --st-gray-700: #374151;
-  --st-gray-800: #27272a;
-  --st-gray-900: #18181b;
-
-  /* ==========================================================
-     State Primitives: Red, Green, Amber, Blue
-     ========================================================== */
-  /* Error / Danger */
-  --st-red-100: #fee2e2;
-  --st-red-500: #ef4444;
-  --st-red-600: #dc2626;
-  --st-red-900: #7f1d1d;
-
-  /* Success / Validation */
-  --st-green-100: #dcfce7;
-  --st-green-500: #22c55e;
-  --st-green-600: #16a34a;
-  --st-green-900: #14532d;
-
-  /* Warning */
-  --st-amber-100: #fef3c7;
-  --st-amber-500: #f59e0b;
-  --st-amber-600: #d97706;
-  --st-amber-900: #78350f;
-
-  /* Information */
-  --st-blue-100: #dbeafe;
-  --st-blue-500: #3b82f6;
-  --st-blue-600: #2563eb;
-  --st-blue-900: #1e3a8a;
-
-  /* ==========================================================
-     Global Spacing Scale
-     ========================================================== */
-  --st-spacing-xs: 0.25rem;
-  --st-spacing-sm: 0.5rem;
-  --st-spacing-md: 1rem;
-  --st-spacing-lg: 1.5rem;
-  --st-spacing-xl: 2rem;
-}
+:root {
+  /* ==========================================================
+     Brand Primitives: Purple
+     ========================================================== */
+  --st-purple-50: #faf5ff;
+  --st-purple-100: #f3e8ff;
+  --st-purple-400: #c084fc; /* dark mode shade */
+  --st-purple-500: #a855f7;
+  --st-purple-600: #6d28d9; /* light mode shade */
+  --st-purple-700: #5b21b6;
+
+  /* ==========================================================
+     Neutral Primitives: Space Grey Scale
+     ========================================================== */
+  --st-white: #ffffff;
+  --st-gray-50: #f9fafb;
+  --st-gray-100: #f3f4f6;
+  --st-gray-200: #e5e7eb;
+  --st-gray-700: #374151;
+  --st-gray-800: #27272a;
+  --st-gray-900: #18181b;
+
+  /* ==========================================================
+     State Primitives: Red, Green, Amber, Blue
+     ========================================================== */
+  /* Error / Danger */
+  --st-red-100: #fee2e2;
+  --st-red-500: #ef4444;
+  --st-red-600: #dc2626;
+  --st-red-900: #7f1d1d;
+
+  /* Success / Validation */
+  --st-green-100: #dcfce7;
+  --st-green-500: #22c55e;
+  --st-green-600: #16a34a;
+  --st-green-900: #14532d;
+
+  /* Warning */
+  --st-amber-100: #fef3c7;
+  --st-amber-500: #f59e0b;
+  --st-amber-600: #d97706;
+  --st-amber-900: #78350f;
+
+  /* Information */
+  --st-blue-100: #dbeafe;
+  --st-blue-500: #3b82f6;
+  --st-blue-600: #2563eb;
+  --st-blue-900: #1e3a8a;
+
+  /* ==========================================================
+     Global Spacing Scale
+     ========================================================== */
+  --st-spacing-xs: 0.25rem;
+  --st-spacing-sm: 0.5rem;
+  --st-spacing-md: 1rem;
+  --st-spacing-lg: 1.5rem;
+  --st-spacing-xl: 2rem;
+}