@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

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,110 @@
-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;
+  @property({ type: Number }) depth = 0;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        margin-bottom: 2px;
+        overflow: hidden;
+      }
+
+      button {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        background: transparent;
+        border: none;
+        padding: var(--st-spacing-sm) var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        color: var(--st-color-text);
+        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;
+      }
+
+      button:hover {
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      /* Styles for slotted icons */
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .label {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: left;
+      }
+
+      svg.chevron {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: transform 0.2s ease;
+      }
+
+      :host([open]) svg.chevron {
+        transform: rotate(180deg);
+      }
+
+      .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;
+      }
+    `
+  ];
+
+  private _toggle() {
+    this.open = !this.open;
+  }
+
+  render() {
+    return html`
+      <button @click=${this._toggle} aria-expanded=${this.open} 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>
+      </button>
+      
+      <div class="drawer">
+        <div class="drawer-content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
 }

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

@@ -1,50 +1,67 @@
-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;
+  @property({ type: Number }) depth = 0;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        text-decoration: none;
+        border-left: 3px solid transparent;
+        transition: all 0.15s ease;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      a:hover {
+        color: var(--st-color-text);
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: inherit;
+      }
+
+      :host([active]) a {
+        color: var(--st-color-primary);
+        border-left-color: var(--st-color-primary);
+        font-weight: var(--st-font-weight-bold);
+        background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </a>
+    `;
+  }
 }