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

package/src/components/router/router.ts

@@ -1,47 +1,47 @@
-class AppRouter {
-  constructor() {
-    window.addEventListener('popstate', () => this._notify());
-    
-    document.addEventListener('click', (e) => {
-      // 1. Ignore modified clicks (Ctrl+Click, etc)
-      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        return;
-      }
-
-      // 2. Safely traverse the path
-      const path = e.composedPath();
-      const link = path.find((el: any) => 
-        el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
-      ) as HTMLElement | undefined;
-
-      if (!link) return;
-
-      const href = link.getAttribute('href');
-      const target = link.getAttribute('target');
-
-      // 3. Ignore external links
-      if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
-        return;
-      }
-
-      // 4. Intercept internal links
-      if (href.startsWith('/')) {
-        e.preventDefault(); 
-        window.history.pushState(null, '', href);
-        this._notify();
-      }
-    });
-
-    // Broadcast initial route on load
-    // Use setTimeout to ensure all Lit components have registered first
-    setTimeout(() => this._notify(), 0);
-  }
-
-  private _notify() {
-    window.dispatchEvent(new CustomEvent('route-changed', { 
-      detail: window.location.pathname 
-    }));
-  }
-}
-
+class AppRouter {
+  constructor() {
+    window.addEventListener('popstate', () => this._notify());
+    
+    document.addEventListener('click', (e) => {
+      // 1. Ignore modified clicks (Ctrl+Click, etc)
+      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+        return;
+      }
+
+      // 2. Safely traverse the path
+      const path = e.composedPath();
+      const link = path.find((el: any) => 
+        el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
+      ) as HTMLElement | undefined;
+
+      if (!link) return;
+
+      const href = link.getAttribute('href');
+      const target = link.getAttribute('target');
+
+      // 3. Ignore external links
+      if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
+        return;
+      }
+
+      // 4. Intercept internal links
+      if (href.startsWith('/')) {
+        e.preventDefault(); 
+        window.history.pushState(null, '', href);
+        this._notify();
+      }
+    });
+
+    // Broadcast initial route on load
+    // Use setTimeout to ensure all Lit components have registered first
+    setTimeout(() => this._notify(), 0);
+  }
+
+  private _notify() {
+    window.dispatchEvent(new CustomEvent('route-changed', { 
+      detail: window.location.pathname 
+    }));
+  }
+}
+
 export const router = new AppRouter();

package/src/components/select/select.ts

@@ -1,162 +1,162 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
-
-@customElement('st-select')
-export class StSelect extends LitElement {
-  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
-  @property({ type: String, reflect: true }) variant: 'outline' | 'filled' = 'outline';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'error' = 'default';
-  
-  // Internal state to handle the chevron animation when the slotted select is focused
-  @property({ type: Boolean, reflect: true }) focused = false;
-
-  constructor() {
-    super();
-    // Track focus states to animate the chevron
-    this.addEventListener('focusin', () => this.focused = true);
-    this.addEventListener('focusout', () => this.focused = false);
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
-
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
-
-      /* 
-        Target the native select provided by the user in the Light DOM.
-        This completely bypasses the browser rendering bug.
-      */
-      ::slotted(select) {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 100%;
-        font-family: inherit;
-        background-color: transparent;
-        border-radius: var(--st-radius-md, 0.5rem);
-        color: var(--st-color-text);
-        cursor: pointer;
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-      }
-
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      /* ==========================================================
-         Sizes
-         ========================================================== */
-      :host([size="sm"]) ::slotted(select) {
-        padding: 0.25rem 2rem 0.25rem 0.75rem;
-        font-size: 0.875rem;
-        height: 2rem;
-      }
-      :host([size="md"]) ::slotted(select) {
-        padding: 0.5rem 2.5rem 0.5rem 1rem;
-        font-size: 1rem;
-        height: 2.5rem;
-      }
-      :host([size="lg"]) ::slotted(select) {
-        padding: 0.75rem 3rem 0.75rem 1.25rem;
-        font-size: 1.125rem;
-        height: 3rem;
-      }
-
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
-
-      /* ==========================================================
-         Variants & Colors
-         ========================================================== */
-      :host([variant="outline"]) ::slotted(select) {
-        border: 1px solid var(--st-color-border);
-      }
-      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
-      }
-
-      :host([variant="filled"]) ::slotted(select) {
-        border: 1px solid transparent;
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
-      }
-      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
-        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
-      }
-      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        background-color: transparent;
-      }
-
-      /* Error Color State */
-      :host([color="error"]) ::slotted(select) {
-        border-color: var(--st-color-error, #ef4444);
-      }
-      :host([color="error"]) ::slotted(select:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-      }
-
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
-
-      /* ==========================================================
-         Chevron Icon
-         ========================================================== */
-      .chevron {
-        position: absolute;
-        right: 0.75rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        pointer-events: none;
-        color: var(--st-color-text-muted);
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
-
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
-      }
-
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <div class="select-wrapper">
-        <slot></slot>
-        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-select': StSelect;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset';
+
+@customElement('st-select')
+export class StSelect extends LitElement {
+  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';
+  @property({ type: String, reflect: true }) variant: 'outline' | 'filled' = 'outline';
+  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'error' = 'default';
+  
+  // Internal state to handle the chevron animation when the slotted select is focused
+  @property({ type: Boolean, reflect: true }) focused = false;
+
+  constructor() {
+    super();
+    // Track focus states to animate the chevron
+    this.addEventListener('focusin', () => this.focused = true);
+    this.addEventListener('focusout', () => this.focused = false);
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        width: 100%;
+        position: relative;
+      }
+
+      .select-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      /* 
+        Target the native select provided by the user in the Light DOM.
+        This completely bypasses the browser rendering bug.
+      */
+      ::slotted(select) {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 100%;
+        font-family: inherit;
+        background-color: transparent;
+        border-radius: var(--st-radius-md, 0.5rem);
+        color: var(--st-color-text);
+        cursor: pointer;
+        outline: none;
+        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
+      }
+
+      ::slotted(select:disabled) {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      /* ==========================================================
+         Sizes
+         ========================================================== */
+      :host([size="sm"]) ::slotted(select) {
+        padding: 0.25rem 2rem 0.25rem 0.75rem;
+        font-size: 0.875rem;
+        height: 2rem;
+      }
+      :host([size="md"]) ::slotted(select) {
+        padding: 0.5rem 2.5rem 0.5rem 1rem;
+        font-size: 1rem;
+        height: 2.5rem;
+      }
+      :host([size="lg"]) ::slotted(select) {
+        padding: 0.75rem 3rem 0.75rem 1.25rem;
+        font-size: 1.125rem;
+        height: 3rem;
+      }
+
+      /* Multiple select formatting (No fixed height, no right padding for chevron) */
+      ::slotted(select[multiple]) {
+        height: auto !important;
+        padding-right: 1rem !important;
+      }
+
+      /* ==========================================================
+         Variants & Colors
+         ========================================================== */
+      :host([variant="outline"]) ::slotted(select) {
+        border: 1px solid var(--st-color-border);
+      }
+      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
+      }
+
+      :host([variant="filled"]) ::slotted(select) {
+        border: 1px solid transparent;
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
+      }
+      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
+        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
+      }
+      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
+        border-color: var(--st-color-primary);
+        background-color: transparent;
+      }
+
+      /* Error Color State */
+      :host([color="error"]) ::slotted(select) {
+        border-color: var(--st-color-error, #ef4444);
+      }
+      :host([color="error"]) ::slotted(select:focus-visible) {
+        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+      }
+
+      /* Primary Color State */
+      :host([color="primary"]) ::slotted(select) {
+        border-color: var(--st-color-primary);
+      }
+
+      /* ==========================================================
+         Chevron Icon
+         ========================================================== */
+      .chevron {
+        position: absolute;
+        right: 0.75rem;
+        width: 1.25rem;
+        height: 1.25rem;
+        pointer-events: none;
+        color: var(--st-color-text-muted);
+        transition: transform 0.2s ease, color 0.2s ease;
+      }
+
+      /* Animate chevron when the wrapper detects focus */
+      :host([focused]) .chevron {
+        transform: rotate(180deg);
+        color: var(--st-color-primary);
+      }
+
+      /* Hide chevron if the user slots a native multiple select */
+      ::slotted(select[multiple]) ~ .chevron {
+        display: none;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="select-wrapper">
+        <slot></slot>
+        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-select': StSelect;
+  }
 }

package/src/components/skeleton/skeleton.ts

@@ -1,68 +1,68 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-skeleton')
-export class StSkeleton extends LitElement {
-  /** Variant shape: 'text' | 'circular' | 'rectangular' */
-  @property({ type: String }) variant: 'text' | 'circular' | 'rectangular' = 'text';
-
-  /** Custom width override (e.g., '200px', '50%') */
-  @property({ type: String }) width = '';
-
-  /** Custom height override (e.g., '40px', '1rem') */
-  @property({ type: String }) height = '';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      .skeleton {
-        width: var(--st-skeleton-width, 100%);
-        height: var(--st-skeleton-height, 1em);
-        background: linear-gradient(
-          90deg,
-          var(--st-color-surface-muted, #f1f5f9) 25%,
-          var(--st-color-border, #e2e8f0) 37%,
-          var(--st-color-surface-muted, #f1f5f9) 63%
-        );
-        background-size: 400% 100%;
-        animation: st-shimmer 1.4s ease infinite;
-        border-radius: var(--st-radius-sm, 0.25rem);
-      }
-
-      :host([variant="circular"]) .skeleton {
-        border-radius: 50%;
-        height: var(--st-skeleton-height, 2.5rem);
-        width: var(--st-skeleton-width, 2.5rem);
-      }
-
-      :host([variant="rectangular"]) .skeleton {
-        height: var(--st-skeleton-height, 8rem);
-      }
-
-      @keyframes st-shimmer {
-        0% { background-position: 100% 0; }
-        100% { background-position: 0 0; }
-      }
-    `
-  ];
-
-  render() {
-    const style = `
-      ${this.width ? `--st-skeleton-width: ${this.width};` : ''}
-      ${this.height ? `--st-skeleton-height: ${this.height};` : ''}
-    `;
-    return html`<div class="skeleton" style=${style}></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-skeleton': StSkeleton;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-skeleton')
+export class StSkeleton extends LitElement {
+  /** Variant shape: 'text' | 'circular' | 'rectangular' */
+  @property({ type: String }) variant: 'text' | 'circular' | 'rectangular' = 'text';
+
+  /** Custom width override (e.g., '200px', '50%') */
+  @property({ type: String }) width = '';
+
+  /** Custom height override (e.g., '40px', '1rem') */
+  @property({ type: String }) height = '';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .skeleton {
+        width: var(--st-skeleton-width, 100%);
+        height: var(--st-skeleton-height, 1em);
+        background: linear-gradient(
+          90deg,
+          var(--st-color-surface-muted, #f1f5f9) 25%,
+          var(--st-color-border, #e2e8f0) 37%,
+          var(--st-color-surface-muted, #f1f5f9) 63%
+        );
+        background-size: 400% 100%;
+        animation: st-shimmer 1.4s ease infinite;
+        border-radius: var(--st-radius-sm, 0.25rem);
+      }
+
+      :host([variant="circular"]) .skeleton {
+        border-radius: 50%;
+        height: var(--st-skeleton-height, 2.5rem);
+        width: var(--st-skeleton-width, 2.5rem);
+      }
+
+      :host([variant="rectangular"]) .skeleton {
+        height: var(--st-skeleton-height, 8rem);
+      }
+
+      @keyframes st-shimmer {
+        0% { background-position: 100% 0; }
+        100% { background-position: 0 0; }
+      }
+    `
+  ];
+
+  render() {
+    const style = `
+      ${this.width ? `--st-skeleton-width: ${this.width};` : ''}
+      ${this.height ? `--st-skeleton-height: ${this.height};` : ''}
+    `;
+    return html`<div class="skeleton" style=${style}></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-skeleton': StSkeleton;
+  }
 }