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

package/src/components/radio/radio.ts

@@ -0,0 +1,142 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-radio")
+export class StRadio extends LitElement {
+  @property({type: String}) value = "";
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        outline: none;
+        user-select: none;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        cursor: pointer;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-base);
+      }
+
+      /* Hide the native input visually, but keep it accessible for screen readers */
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
+      /* Custom Radio Circle */
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: 50%;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      /* Inner Dot (Hidden by default) */
+      .control::after {
+        content: "";
+        width: 0.625rem;
+        height: 0.625rem;
+        border-radius: 50%;
+        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
+        transition:
+          transform 0.2s ease,
+          background-color 0.2s ease;
+        transform: scale(0);
+      }
+
+      /* Hover State */
+      label:hover .control {
+        border-color: var(--st-color-primary-hover);
+      }
+
+      /* Focus State (Driven by the hidden input) */
+      input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      /* Checked State */
+      :host([checked]) .control {
+        border-color: var(--st-color-primary);
+        background-color: var(--st-color-primary);
+      }
+      :host([checked]) .control::after {
+        background-color: var(--st-white); /* White dot inside the primary circle */
+        transform: scale(1);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `,
+  ];
+
+  private _handleChange(e: Event) {
+    // Prevent the native change event from leaking out
+    e.stopPropagation();
+
+    if (!this.disabled) {
+      // Dispatch a custom event to tell the parent group this radio was selected
+      this.dispatchEvent(
+        new CustomEvent("st-radio-select", {
+          detail: {value: this.value},
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="radio"
+          aria-label=${this.ariaLabel || ""}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        />
+        <span class="control"></span>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-radio": StRadio;
+  }
+}

package/src/components/radio-group/radio-group.ts

@@ -0,0 +1,157 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StRadio} from "../radio/radio.js";
+
+@customElement("st-radio-group")
+export class StRadioGroup extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: String}) label = "";
+  @property({attribute: "help-text"}) helpText = "";
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  // Grabs all slotted st-radio components automatically
+  @queryAssignedElements({selector: "st-radio"})
+  private _radios!: StRadio[];
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    // 1. Trigger error state if the user clicks away and the field is invalid
+    this.addEventListener("change", () => {
+      this.invalid = !this._internals.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;
+      }
+
+      fieldset {
+        border: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+      }
+
+      legend {
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        color: var(--st-color-text);
+        padding: 0;
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-sm);
+      }
+
+      /* Horizontal layout modifier */
+      :host([layout="horizontal"]) .options {
+        flex-direction: row;
+        gap: var(--st-spacing-md);
+      }
+
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
+      :host([invalid]) .help-text {
+        color: var(--st-color-error);
+      }
+      :host([invalid]) legend {
+        color: var(--st-color-error);
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Listen for selections from child radios
+    this.addEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+  }
+
+  private _handleRadioSelect(e: CustomEvent<{value: string}>) {
+    if (this.disabled) return;
+    this.value = e.detail.value;
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    // When the group's value changes, sync the form and update all child radios
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value);
+      this._syncRadios();
+    }
+
+    if (changedProperties.has("disabled")) {
+      this._syncRadios();
+    }
+  }
+
+  // Loops through children and unchecks/checks them based on the group's current value
+  private _syncRadios() {
+    if (!this._radios) return;
+
+    this._radios.forEach((radio) => {
+      radio.checked = radio.value === this.value;
+      if (this.disabled) {
+        radio.disabled = true;
+      }
+    });
+  }
+
+  // Fired natively by the browser if the parent <form> is reset
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue("");
+    this._syncRadios();
+  }
+
+  render() {
+    return html`
+      <fieldset ?disabled=${this.disabled}>
+        ${this.label ? html`<legend>${this.label}</legend>` : ""}
+
+        <div class="options">
+          <slot @slotchange=${this._syncRadios}></slot>
+        </div>
+
+        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+      </fieldset>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-radio-group": StRadioGroup;
+  }
+}

package/src/components/router/router.ts

@@ -0,0 +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 
+    }));
+  }
+}
+
+export const router = new AppRouter();

package/src/components/select/select.ts

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

package/src/components/skeleton/skeleton.ts

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