@sondor-technology/sondor-components 1.0.4 → 1.0.6

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

@@ -1,19 +1,20 @@
 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";
+import {ThemeMode} from "./theme-toggle.constants.js";
 
 @customElement("st-theme-toggle")
 export class StThemeToggle extends LitElement {
   @property({type: String, reflect: true}) theme: ThemeMode = "system";
 
+  // 🚀 FEATURE: Automatically applies the theme to the document and saves to localStorage
+  @property({type: Boolean}) auto = false;
+
   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;
@@ -39,12 +40,9 @@ export class StThemeToggle extends LitElement {
         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);
       }
 
@@ -60,10 +58,45 @@ export class StThemeToggle extends LitElement {
     `,
   ];
 
+  override connectedCallback() {
+    super.connectedCallback();
+
+    // 🚀 FIX: Semantically group the buttons for screen readers
+    this.setAttribute("role", "group");
+    this.setAttribute("aria-label", "Theme preference");
+
+    // If auto is enabled, try loading from localStorage first
+    if (this.auto) {
+      try {
+        const savedTheme = localStorage.getItem("st-theme") as ThemeMode | null;
+        if (savedTheme) {
+          this.theme = savedTheme;
+          document.documentElement.setAttribute("data-theme", savedTheme);
+          return;
+        }
+      } catch (e) {
+        // Silently fail if localStorage is blocked (e.g., incognito mode)
+      }
+    }
+
+    // Fallback to checking the document root for a pre-rendered theme
+    const rootTheme = document.documentElement.getAttribute("data-theme") as ThemeMode | null;
+    if (rootTheme) {
+      this.theme = rootTheme;
+    }
+  }
+
   private _handleThemeChange(newTheme: ThemeMode) {
     this.theme = newTheme;
 
-    // Dispatch an event so the consuming app knows to update the document root
+    // Apply automatically if the feature is enabled
+    if (this.auto) {
+      document.documentElement.setAttribute("data-theme", newTheme);
+      try {
+        localStorage.setItem("st-theme", newTheme);
+      } catch (e) {}
+    }
+
     this.dispatchEvent(
       new CustomEvent("st-theme-change", {
         detail: {theme: newTheme},
@@ -73,24 +106,16 @@ export class StThemeToggle extends LitElement {
     );
   }
 
-  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"}
+        aria-label="Light Mode"
         title="Light Mode"
         @click=${() => this._handleThemeChange("light")}
       >
-        <!-- Sun Icon -->
-        <svg viewBox="0 0 24 24">
+        <!-- 🚀 FIX: Hide decorative SVGs from the accessibility tree -->
+        <svg aria-hidden="true" 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"
@@ -100,11 +125,11 @@ export class StThemeToggle extends LitElement {
 
       <button
         aria-pressed=${this.theme === "system"}
+        aria-label="System Preference"
         title="System Preference"
         @click=${() => this._handleThemeChange("system")}
       >
-        <!-- Monitor/System Icon -->
-        <svg viewBox="0 0 24 24">
+        <svg aria-hidden="true" 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>
@@ -112,11 +137,11 @@ export class StThemeToggle extends LitElement {
 
       <button
         aria-pressed=${this.theme === "dark"}
+        aria-label="Dark Mode"
         title="Dark Mode"
         @click=${() => this._handleThemeChange("dark")}
       >
-        <!-- Moon Icon -->
-        <svg viewBox="0 0 24 24">
+        <svg aria-hidden="true" viewBox="0 0 24 24">
           <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
         </svg>
       </button>

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

@@ -1,12 +1,14 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-vertical-nav-group')
+@customElement("st-vertical-nav-group")
 export class StNavGroup extends LitElement {
-  @property({ type: String }) label = '';
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: Number }) depth = 0;
+  @property({type: String}) label = "";
+  @property({type: Boolean, reflect: true}) open = false;
+  @property({type: Number}) depth = 0;
+
+  @query(".drawer-content") private _drawerContent!: HTMLElement;
 
   static styles = [
     resetStyles,
@@ -31,14 +33,20 @@ export class StNavGroup extends LitElement {
         font-size: var(--st-font-size-sm);
         font-weight: var(--st-font-weight-semibold);
         cursor: pointer;
-        transition: background-color 0.2s ease, color 0.2s ease;
+        transition:
+          background-color 0.2s ease,
+          color 0.2s ease;
       }
 
       button:hover {
-        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
       }
 
-      /* Styles for slotted icons */
       ::slotted([slot="icon"]) {
         width: 1rem;
         height: 1rem;
@@ -85,24 +93,55 @@ export class StNavGroup extends LitElement {
         display: flex;
         flex-direction: column;
       }
-    `
+    `,
   ];
 
   private _toggle() {
     this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent("st-group-toggle", {
+        detail: {open: this.open, label: this.label},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _updateChildDepths() {
+    // Query 'this' (Light DOM) instead of the Shadow DOM
+    const childItems = this.querySelectorAll("st-vertical-nav-item, st-vertical-nav-group");
+    childItems.forEach((item: any) => {
+      item.depth = this.depth + 1;
+    });
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("depth")) {
+      this._updateChildDepths();
+    }
   }
 
   render() {
+    const groupId = `nav-group-${this.label.toLowerCase().replace(/\s+/g, "-")}`;
+
     return html`
-      <button @click=${this._toggle} aria-expanded=${this.open} style="--nav-depth: ${this.depth}">
+      <button
+        @click=${this._toggle}
+        aria-expanded=${this.open}
+        aria-controls=${groupId}
+        style="--nav-depth: ${this.depth}"
+      >
         <slot name="icon"></slot>
         <span class="label">${this.label}</span>
-        <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>
+        <svg class="chevron" aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M6 9l6 6 6-6"></path>
+        </svg>
       </button>
-      
-      <div class="drawer">
+
+      <div id=${groupId} class="drawer" role="region" aria-label=${this.label}>
         <div class="drawer-content">
-          <slot></slot>
+          <slot @slotchange=${this._updateChildDepths}></slot>
         </div>
       </div>
     `;
@@ -111,6 +150,6 @@ export class StNavGroup extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-vertical-nav-group': StNavGroup;
+    "st-vertical-nav-group": StNavGroup;
   }
-}
+}

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

@@ -1,12 +1,12 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-vertical-nav-item')
+@customElement("st-vertical-nav-item")
 export class StNavItem extends LitElement {
-  @property({ type: String }) href = '#';
-  @property({ type: Boolean, reflect: true }) active = false;
-  @property({ type: Number }) depth = 0;
+  @property({type: String}) href = "#";
+  @property({type: Boolean, reflect: true}) active = false;
+  @property({type: Number}) depth = 0;
 
   static styles = [
     resetStyles,
@@ -37,7 +37,12 @@ export class StNavItem extends LitElement {
 
       a:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+      }
+
+      a:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
       }
 
       ::slotted([slot="icon"]) {
@@ -53,12 +58,30 @@ export class StNavItem extends LitElement {
         font-weight: var(--st-font-weight-bold);
         background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
       }
-    `
+    `,
   ];
 
+  private _handleClick(e: MouseEvent) {
+    // Dispatch a custom event so single-page apps can catch internal route clicks if desired
+    const event = new CustomEvent("st-nav-click", {
+      detail: {href: this.href},
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+
+    this.dispatchEvent(event);
+  }
+
   render() {
     return html`
-      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+      <a
+        href=${this.href}
+        part="link"
+        style="--nav-depth: ${this.depth}"
+        aria-current=${this.active ? "page" : "false"}
+        @click=${this._handleClick}
+      >
         <slot name="icon"></slot>
         <slot></slot>
       </a>
@@ -68,6 +91,6 @@ export class StNavItem extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-vertical-nav-item': StNavItem;
+    "st-vertical-nav-item": StNavItem;
   }
-}
+}

package/src/styles/globals.css

@@ -2,12 +2,15 @@
   /* ==========================================================
      Brand Primitives: Purple
      ========================================================== */
-  --st-purple-50: #faf5ff;
   --st-purple-100: #f3e8ff;
-  --st-purple-400: #c084fc; /* dark mode shade */
+  --st-purple-200: #e9d5ff;
+  --st-purple-300: #d8b4fe;
+  --st-purple-400: #c084fc;
   --st-purple-500: #a855f7;
-  --st-purple-600: #6d28d9; /* light mode shade */
-  --st-purple-700: #5b21b6;
+  --st-purple-600: #9333ea;
+  --st-purple-700: #7e22ce;
+  --st-purple-800: #6b21a8;
+  --st-purple-900: #581c87;
 
   /* ==========================================================
      Neutral Primitives: Space Grey Scale
@@ -25,26 +28,46 @@
      ========================================================== */
   /* Error / Danger */
   --st-red-100: #fee2e2;
+  --st-red-200: #fecaca;
+  --st-red-300: #fca5a5;
+  --st-red-400: #f87171;
   --st-red-500: #ef4444;
   --st-red-600: #dc2626;
+  --st-red-700: #b91c1c;
+  --st-red-800: #991b1b;
   --st-red-900: #7f1d1d;
 
   /* Success / Validation */
   --st-green-100: #dcfce7;
+  --st-green-200: #bbf7d0;
+  --st-green-300: #86efac;
+  --st-green-400: #4ade80;
   --st-green-500: #22c55e;
   --st-green-600: #16a34a;
+  --st-green-700: #15803d;
+  --st-green-800: #166534;
   --st-green-900: #14532d;
 
   /* Warning */
   --st-amber-100: #fef3c7;
+  --st-amber-200: #fde68a;
+  --st-amber-300: #fcd34d;
+  --st-amber-400: #fbbf24;
   --st-amber-500: #f59e0b;
   --st-amber-600: #d97706;
+  --st-amber-700: #b45309;
+  --st-amber-800: #92400e;
   --st-amber-900: #78350f;
 
   /* Information */
   --st-blue-100: #dbeafe;
+  --st-blue-200: #bfdbfe;
+  --st-blue-300: #93c5fd;
+  --st-blue-400: #60a5fa;
   --st-blue-500: #3b82f6;
   --st-blue-600: #2563eb;
+  --st-blue-700: #1d4ed8;
+  --st-blue-800: #1e40af;
   --st-blue-900: #1e3a8a;
 
   /* ==========================================================

package/src/styles/theme.css

@@ -5,26 +5,31 @@
 :root[data-theme="light"] {
   --st-color-bg: var(--st-white);
   --st-color-surface: var(--st-gray-50);
+  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%);
+  --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
   --st-color-border: var(--st-gray-200);
-  
+
   --st-color-text: var(--st-gray-900);
   --st-color-text-muted: var(--st-gray-700);
-  
-  /* Now referencing the global tokens */
-  --st-color-primary: var(--st-purple-600);
-  --st-color-primary-hover: var(--st-purple-700);
 
-  --st-color-error: var(--st-red-600);
+  /* BASE TOKENS: Used for Text, Outline Borders, and Icons. (DARK in light mode) */
+  --st-color-primary: var(--st-purple-700);
+  --st-color-primary-text: var(--st-purple-700);
+  --st-color-error: var(--st-red-700);
+  --st-color-error-text: var(--st-red-800);
+  --st-color-success: var(--st-green-800);
+  --st-color-warning: var(--st-amber-800);
+  --st-color-info: var(--st-blue-700);
+  --st-color-info-text: var(--st-blue-800);
+
+  /* BG TOKENS: Used for soft secondary backgrounds. (PASTEL in light mode) */
+  --st-color-primary-bg: var(--st-purple-100); /* NEW */
   --st-color-error-bg: var(--st-red-100);
-  
-  --st-color-success: var(--st-green-600);
   --st-color-success-bg: var(--st-green-100);
-  
-  --st-color-warning: var(--st-amber-600);
   --st-color-warning-bg: var(--st-amber-100);
-  
-  --st-color-info: var(--st-blue-600);
   --st-color-info-bg: var(--st-blue-100);
+
+  --st-hover-brightness: 0.9;
 }
 
 /* ==========================================================
@@ -34,26 +39,29 @@
 :root[data-theme="dark"] {
   --st-color-bg: var(--st-gray-900);
   --st-color-surface: var(--st-gray-800);
-  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%); 
+  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%);
   --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
   --st-color-border: var(--st-gray-700);
-  
+
   --st-color-text: var(--st-gray-50);
-  --st-color-text-muted: var(--st-gray-200);
-  
-  /* Swapped to the lighter global token for contrast */
-  --st-color-primary: var(--st-purple-400);
-  --st-color-primary-hover: var(--st-purple-600);
-
-  --st-color-error: var(--st-red-500);
-  --st-color-error-bg: #451a1a; 
-  
-  --st-color-success: var(--st-green-500);
-  --st-color-success-bg: #143620; 
-  
-  --st-color-warning: var(--st-amber-500);
-  --st-color-warning-bg: #422a14; 
-  
-  --st-color-info: var(--st-blue-500);
-  --st-color-info-bg: #172a54; 
+  --st-color-text-muted: var(--st-gray-300);
+
+  /* BASE TOKENS: Brightened to pass WCAG contrast against dark backgrounds */
+  --st-color-primary: var(--st-purple-300);
+  --st-color-primary-text: var(--st-color-primary);
+  --st-color-error: var(--st-red-300);
+  --st-color-error-text: var(--st-color-error);
+  --st-color-success: var(--st-green-400); 
+  --st-color-warning: var(--st-amber-400);
+  --st-color-info: var(--st-blue-300);
+  --st-color-info-text: var(--st-color-info);
+
+  /* BG TOKENS: Deep, dark backgrounds for secondary variants */
+  --st-color-primary-bg: rgba(147, 51, 234, 0.15); /* NEW */
+  --st-color-error-bg: #451a1a;
+  --st-color-success-bg: #143620;
+  --st-color-warning-bg: #422a14;
+  --st-color-info-bg: #1e3a8a;
+
+  --st-hover-brightness: 1.3;
 }

package/tsconfig.json

@@ -10,7 +10,8 @@
     "rootDir": "./src",
     "strict": true,
     "experimentalDecorators": true,
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "sourceMap": true
   },
   "include": ["src/**/*.ts"]
 }

package/dist/components/card/card.d.ts

@@ -1,11 +0,0 @@
-import { LitElement } from 'lit';
-export declare class StCard extends LitElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'st-card': StCard;
-    }
-}
-//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/card/card.js

@@ -1,54 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-let StCard = class StCard extends LitElement {
-    render() {
-        return html `
-      <slot name="header"></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
-    `;
-    }
-};
-StCard.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--st-color-bg);
-        border: 1px solid var(--st-color-border);
-        border-radius: 8px;
-        overflow: hidden; /* Ensures contents don't break the border radius */
-      }
-
-      /* Apply standard padding to all direct slotted children */
-      ::slotted(*) {
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-      }
-
-      /* Optional structured slots for headers and footers */
-      ::slotted([slot="header"]) {
-        border-bottom: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        font-weight: var(--st-font-weight-medium);
-        margin: 0;
-      }
-
-      ::slotted([slot="footer"]) {
-        border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
-      }
-    `
-];
-StCard = __decorate([
-    customElement('st-card')
-], StCard);
-export { StCard };

package/src/components/card/card.ts

@@ -1,53 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-card')
-export class StCard extends LitElement {
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--st-color-bg);
-        border: 1px solid var(--st-color-border);
-        border-radius: 8px;
-        overflow: hidden; /* Ensures contents don't break the border radius */
-      }
-
-      /* Apply standard padding to all direct slotted children */
-      ::slotted(*) {
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-      }
-
-      /* Optional structured slots for headers and footers */
-      ::slotted([slot="header"]) {
-        border-bottom: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        font-weight: var(--st-font-weight-medium);
-        margin: 0;
-      }
-
-      ::slotted([slot="footer"]) {
-        border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface);
-        margin-top: auto; /* Pushes the footer to the bottom if the card has a fixed height */
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <slot name="header"></slot>
-      <slot></slot>
-      <slot name="footer"></slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-card': StCard;
-  }
-}