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

package/src/components/tabs/tab-panel.ts

@@ -0,0 +1,31 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-tab-panel')
+export class StTabPanel extends LitElement {
+  @property({ type: String, reflect: true }) name = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        padding: var(--st-spacing-md) 0;
+      }
+
+      :host(:not([active])) {
+        display: none;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/tabs/tab.ts

@@ -0,0 +1,77 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-tab')
+export class StTab extends LitElement {
+  @property({ type: String, reflect: true }) panel = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+      }
+
+      button:hover {
+        color: var(--st-color-text);
+      }
+
+      button:focus-visible {
+        outline: none;
+        background-color: var(--st-color-surface);
+        border-radius: 4px 4px 0 0;
+      }
+
+      /* Active State */
+      :host([active]) button {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      ::slotted(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+        fill: currentColor;
+      }
+    `
+  ];
+
+  private _handleClick() {
+    this.dispatchEvent(new CustomEvent('st-tab-select', {
+      detail: { panel: this.panel },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <button 
+        role="tab" 
+        aria-selected=${this.active ? 'true' : 'false'}
+        tabindex=${this.active ? '0' : '-1'}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}

package/src/components/tabs/tabs.ts

@@ -0,0 +1,88 @@
+import "./tab.js";
+import "./tab-panel.js";
+
+import {LitElement, html, css} from "lit";
+import {customElement, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StTab} from "./tab.js";
+import type {StTabPanel} from "./tab-panel.js";
+
+@customElement("st-tabs")
+export class StTabs extends LitElement {
+  @queryAssignedElements({slot: "nav", selector: "st-tab"})
+  private _tabs!: StTab[];
+
+  @queryAssignedElements({selector: "st-tab-panel"})
+  private _panels!: StTabPanel[];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .nav-container {
+        display: flex;
+        /* Creates the track line underneath the tabs */
+        border-bottom: 1px solid var(--st-color-border);
+        gap: var(--st-spacing-xs);
+        overflow-x: auto; /* Allows tabs to scroll horizontally on small screens */
+        scrollbar-width: none; /* Hides scrollbar on Firefox */
+      }
+
+      .nav-container::-webkit-scrollbar {
+        display: none; /* Hides scrollbar on Chrome/Safari */
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("st-tab-select", this._handleTabSelect as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("st-tab-select", this._handleTabSelect as EventListener);
+  }
+
+  private _handleTabSelect(e: CustomEvent<{panel: string}>) {
+    // 1. Stop the event here so parent <st-tabs> instances don't react to it
+    e.stopPropagation();
+
+    const targetPanel = e.detail.panel;
+
+    // Update active states on all tabs
+    this._tabs.forEach((tab) => {
+      tab.active = tab.panel === targetPanel;
+    });
+
+    // Update active states on all panels
+    this._panels.forEach((panel) => {
+      panel.active = panel.name === targetPanel;
+    });
+  }
+
+  // Ensures the first tab is active by default if none are explicitly set
+  private _handleSlotChange() {
+    if (!this._tabs.length || !this._panels.length) return;
+
+    const hasActiveTab = this._tabs.some((tab) => tab.active);
+    if (!hasActiveTab) {
+      this._tabs[0].active = true;
+      this._panels[0].active = true;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="nav-container" role="tablist">
+        <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+      <div class="panels-container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}

package/src/components/textarea/textarea.ts

@@ -0,0 +1,215 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+
+@customElement("st-textarea")
+export class StTextarea extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("textarea") private _textareaEl!: HTMLTextAreaElement;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+  @property({type: String}) value = "";
+  @property({type: String}) placeholder = "";
+  @property({attribute: "help-text"}) helpText = "";
+
+  // Textarea specific properties
+  @property({type: Number}) rows = 4;
+  @property({type: String, reflect: true}) resize: TextareaResize = "vertical";
+
+  // Validation
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Number}) minlength?: number;
+  @property({type: Number}) maxlength?: number;
+
+  // States
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: Boolean, reflect: true}) readonly = false;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    // 1. Trigger error state if the user clicks away and the field is invalid
+    this.addEventListener("focusout", () => {
+      this.invalid = !this._textareaEl.validity.valid;
+    });
+
+    // 2. Trigger error state if the st-form tries to submit and fails
+    this.addEventListener("invalid", () => {
+      this.invalid = true;
+    });
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .form-control {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      label {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+      }
+
+      textarea {
+        width: 100%;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        font-size: var(--st-font-size-base);
+        font-family: inherit;
+        color: var(--st-color-text);
+        background-color: var(--st-color-bg);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+
+        /* Map the resize property */
+        resize: vertical;
+      }
+
+      /* Dynamically handle resize constraints based on the host attribute */
+      :host([resize="none"]) textarea {
+        resize: none;
+      }
+      :host([resize="horizontal"]) textarea {
+        resize: horizontal;
+      }
+      :host([resize="both"]) textarea {
+        resize: both;
+      }
+
+      textarea::placeholder {
+        color: var(--st-color-text-muted);
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 1px var(--st-color-primary);
+      }
+
+      /* Validation States */
+      :host([invalid]) textarea {
+        border-color: var(--st-color-error);
+      }
+
+      :host([invalid]) textarea:focus {
+        box-shadow: 0 0 0 1px var(--st-color-error);
+      }
+
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+
+      /* Disabled & Readonly */
+      :host([disabled]) textarea {
+        opacity: 0.5;
+        cursor: not-allowed;
+        background-color: var(--st-color-surface);
+      }
+
+      :host([readonly]) textarea {
+        background-color: var(--st-color-surface);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value);
+    }
+    this._syncValidity();
+  }
+
+  private _syncValidity() {
+    if (!this._textareaEl) return;
+    this._internals.setValidity(
+      this._textareaEl.validity,
+      this._textareaEl.validationMessage,
+      this._textareaEl,
+    );
+  }
+
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue("");
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+
+  private _handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
+    this.value = target.value;
+
+    if (this.invalid && target.validity.valid) {
+      this.invalid = false;
+    }
+
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+  }
+
+  private _handleChange(e: Event) {
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <div class="form-control">
+        ${this.label ? html`<label for="textarea">${this.label}</label>` : ""}
+
+        <textarea
+          id="textarea"
+          .name=${this.name}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          rows=${this.rows}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        ></textarea>
+
+        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-textarea": StTextarea;
+  }
+}

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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +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>
+    `;
+  }
+}

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

@@ -0,0 +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>
+    `;
+  }
+}