@sondor-technology/sondor-components 1.0.4 → 1.0.6

package/src/components/table/table.ts

@@ -1,23 +1,23 @@
-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";
 
-export type TableMode = 'horizontal' | 'vertical';
+export type TableMode = "horizontal" | "vertical";
 
 export interface TableColumn {
   header: string;
   key: string;
 }
 
-@customElement('st-table')
+@customElement("st-table")
 export class StTable extends LitElement {
-  @property({ type: Array }) columns: TableColumn[] = [];
-  @property({ type: Array }) data: Record<string, any>[] = [];
-  
-  @property({ type: String, reflect: true }) mode: TableMode = 'horizontal';
-  @property({ type: Boolean, reflect: true }) striped = false;
-  @property({ type: Boolean, reflect: true }) hoverable = false;
-  @property({ type: Boolean, reflect: true }) dense = false;
+  @property({type: Array}) columns: TableColumn[] = [];
+  @property({type: Array}) data: Record<string, any>[] = [];
+
+  @property({type: String, reflect: true}) mode: TableMode = "horizontal";
+  @property({type: Boolean, reflect: true}) striped = false;
+  @property({type: Boolean, reflect: true}) hoverable = false;
+  @property({type: Boolean, reflect: true}) dense = false;
 
   static styles = [
     resetStyles,
@@ -61,11 +61,11 @@ export class StTable extends LitElement {
       }
 
       :host([striped]) tbody tr:nth-of-type(odd) {
-        background-color: var(--st-color-surface-muted);
+        background-color: var(--st-color-surface-muted, #f8fafc);
       }
 
       :host([hoverable]) tbody tr:hover {
-        background-color: var(--st-color-surface-hover);
+        background-color: var(--st-color-surface-hover, #f1f5f9);
       }
 
       /* ==========================================================
@@ -120,26 +120,49 @@ export class StTable extends LitElement {
         padding-right: var(--st-spacing-md);
         color: var(--st-color-text-muted);
       }
-    `
+
+      .empty-state {
+        text-align: center;
+        padding: 2rem !important;
+        color: var(--st-color-text-muted);
+        font-style: italic;
+      }
+    `,
   ];
 
   render() {
     return html`
       <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              ${this.columns.map(col => html`<th scope="col">${col.header}</th>`)}
+        <!-- 🚀 FIX: Explicit ARIA roles map to preserve semantics when CSS 'display' changes -->
+        <table role="table">
+          <thead role="rowgroup">
+            <tr role="row">
+              ${this.columns.map(
+                (col) => html`<th role="columnheader" scope="col">${col.header}</th>`,
+              )}
             </tr>
           </thead>
-          <tbody>
-            ${this.data.map(row => html`
-              <tr>
-                ${this.columns.map(col => html`
-                  <td data-label=${col.header}>${row[col.key]}</td>
-                `)}
-              </tr>
-            `)}
+          <tbody role="rowgroup">
+            ${this.data.length === 0
+              ? html`
+                  <tr role="row">
+                    <td role="cell" colspan=${this.columns.length} class="empty-state">
+                      No data available.
+                    </td>
+                  </tr>
+                `
+              : this.data.map(
+                  (row) => html`
+                    <tr role="row">
+                      ${this.columns.map(
+                        // 🚀 FIX: Nullish coalescing prevents printing "undefined" for sparse data objects
+                        (col) => html`
+                          <td role="cell" data-label=${col.header}>${row[col.key] ?? ""}</td>
+                        `,
+                      )}
+                    </tr>
+                  `,
+                )}
           </tbody>
         </table>
       </div>
@@ -149,6 +172,6 @@ export class StTable extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-table': StTable;
+    "st-table": StTable;
   }
-}
+}

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

@@ -1,11 +1,11 @@
-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} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-tab-panel')
+@customElement("st-tab-panel")
 export class StTabPanel extends LitElement {
-  @property({ type: String, reflect: true }) name = '';
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({type: String, reflect: true}) name = "";
+  @property({type: Boolean, reflect: true}) active = false;
 
   static styles = [
     resetStyles,
@@ -18,14 +18,31 @@ export class StTabPanel extends LitElement {
       :host(:not([active])) {
         display: none;
       }
-    `
+    `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // 🚀 FIX: Expose role and ID on the host to link perfectly with the orchestrator
+    this.id = this.id || `panel-${this.name}`;
+    this.setAttribute("role", "tabpanel");
+    this.setAttribute("aria-hidden", this.active ? "false" : "true");
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("active")) {
+      this.setAttribute("aria-hidden", this.active ? "false" : "true");
+    }
+  }
+
   render() {
-    return html`
-      <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
-        <slot></slot>
-      </div>
-    `;
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-tab-panel": StTabPanel;
   }
-}
+}

package/src/components/tabs/tab.ts

@@ -1,25 +1,21 @@
-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} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-tab')
+@customElement("st-tab")
 export class StTab extends LitElement {
-  @property({ type: String, reflect: true }) panel = '';
-  @property({ type: Boolean, reflect: true }) active = false;
+  @property({type: String, reflect: true}) panel = "";
+  @property({type: Boolean, reflect: true}) active = false;
 
   static styles = [
     resetStyles,
     css`
+      /* 🚀 FIX: Style the host element directly to act as the interactive tab */
       :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);
@@ -28,20 +24,19 @@ export class StTab extends LitElement {
         cursor: pointer;
         transition: all 0.2s ease;
         white-space: nowrap;
+        outline: none; /* Focus outline handled below */
       }
 
-      button:hover {
+      :host(:hover) {
         color: var(--st-color-text);
       }
 
-      button:focus-visible {
-        outline: none;
+      :host(:focus-visible) {
         background-color: var(--st-color-surface);
         border-radius: 4px 4px 0 0;
       }
 
-      /* Active State */
-      :host([active]) button {
+      :host([active]) {
         color: var(--st-color-primary);
         border-bottom-color: var(--st-color-primary);
       }
@@ -51,27 +46,63 @@ export class StTab extends LitElement {
         height: 1.125rem;
         fill: currentColor;
       }
-    `
+    `,
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    // 🚀 FIX: Apply the ARIA role and attributes to the Host element
+    this.id = this.id || `tab-${this.panel}`;
+    this.setAttribute("role", "tab");
+    this.setAttribute("aria-selected", this.active ? "true" : "false");
+    this.setAttribute("tabindex", this.active ? "0" : "-1");
+
+    // Attach native event listeners since we are no longer using a button
+    this.addEventListener("click", this._handleClick);
+    this.addEventListener("keydown", this._handleKeyDown);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick);
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("active")) {
+      // Sync ARIA states when active changes
+      this.setAttribute("aria-selected", this.active ? "true" : "false");
+      this.setAttribute("tabindex", this.active ? "0" : "-1");
+    }
+  }
+
   private _handleClick() {
-    this.dispatchEvent(new CustomEvent('st-tab-select', {
-      detail: { panel: this.panel },
-      bubbles: true,
-      composed: true
-    }));
+    this.dispatchEvent(
+      new CustomEvent("st-tab-select", {
+        detail: {panel: this.panel},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    // 🚀 FIX: Ensure Enter and Space keys activate the tab natively
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._handleClick();
+    }
   }
 
   render() {
-    return html`
-      <button 
-        role="tab" 
-        aria-selected=${this.active ? 'true' : 'false'}
-        tabindex=${this.active ? '0' : '-1'}
-        @click=${this._handleClick}
-      >
-        <slot></slot>
-      </button>
-    `;
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-tab": StTab;
   }
-}
+}

package/src/components/tabs/tabs.ts

@@ -2,7 +2,7 @@ import "./tab.js";
 import "./tab-panel.js";
 
 import {LitElement, html, css} from "lit";
-import {customElement, queryAssignedElements} from "lit/decorators.js";
+import {customElement, queryAssignedElements, property} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
 import type {StTab} from "./tab.js";
 import type {StTabPanel} from "./tab-panel.js";
@@ -15,6 +15,9 @@ export class StTabs extends LitElement {
   @queryAssignedElements({selector: "st-tab-panel"})
   private _panels!: StTabPanel[];
 
+  // 🚀 FEATURE: Syncs the active tab with the URL Hash
+  @property({type: Boolean, attribute: "sync-url"}) syncUrl = false;
+
   static styles = [
     resetStyles,
     css`
@@ -24,15 +27,14 @@ export class StTabs extends LitElement {
 
       .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 */
+        overflow-x: auto;
+        scrollbar-width: none;
       }
 
       .nav-container::-webkit-scrollbar {
-        display: none; /* Hides scrollbar on Chrome/Safari */
+        display: none;
       }
     `,
   ];
@@ -40,44 +42,104 @@ export class StTabs extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("st-tab-select", this._handleTabSelect as EventListener);
+    window.addEventListener("hashchange", this._handleHashChange);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener("st-tab-select", this._handleTabSelect as EventListener);
+    window.removeEventListener("hashchange", this._handleHashChange);
   }
 
+  private _handleHashChange = () => {
+    if (!this.syncUrl) return;
+    const hash = window.location.hash.replace("#", "");
+    if (hash && this._tabs.some((t) => t.panel === hash)) {
+      this._activateTab(hash, false); // Don't push state if we are responding to a history change
+    }
+  };
+
   private _handleTabSelect(e: CustomEvent<{panel: string}>) {
-    // 1. Stop the event here so parent <st-tabs> instances don't react to it
     e.stopPropagation();
+    this._activateTab(e.detail.panel, true);
+  }
 
-    const targetPanel = e.detail.panel;
-
-    // Update active states on all tabs
+  private _activateTab(targetPanel: string, updateUrl: boolean) {
     this._tabs.forEach((tab) => {
       tab.active = tab.panel === targetPanel;
     });
 
-    // Update active states on all panels
     this._panels.forEach((panel) => {
       panel.active = panel.name === targetPanel;
     });
+
+    if (updateUrl && this.syncUrl) {
+      window.history.replaceState(null, "", `#${targetPanel}`);
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {panel: targetPanel},
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
-  // Ensures the first tab is active by default if none are explicitly set
   private _handleSlotChange() {
     if (!this._tabs.length || !this._panels.length) return;
 
+    // Link ARIA attributes securely
+    this._tabs.forEach((t) => {
+      t.setAttribute("aria-controls", `panel-${t.panel}`);
+    });
+    this._panels.forEach((p) => {
+      p.setAttribute("aria-labelledby", `tab-${p.name}`);
+    });
+
+    // 1. If sync-url is on, and hash exists, try to load it
+    if (this.syncUrl) {
+      const hash = window.location.hash.replace("#", "");
+      if (hash && this._tabs.some((t) => t.panel === hash)) {
+        this._activateTab(hash, false);
+        return;
+      }
+    }
+
+    // 2. Otherwise fallback to the first active tab, or the very first tab
     const hasActiveTab = this._tabs.some((tab) => tab.active);
     if (!hasActiveTab) {
-      this._tabs[0].active = true;
-      this._panels[0].active = true;
+      this._activateTab(this._tabs[0].panel, false);
     }
   }
 
+  // 🚀 FEATURE: W3C Keyboard Navigation (Arrows, Home, End)
+  private _handleKeyDown(e: KeyboardEvent) {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+
+    const tabs = this._tabs;
+    const currentIndex = tabs.findIndex((t) => t.active);
+    let nextIndex = currentIndex;
+
+    if (e.key === "ArrowRight") {
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      nextIndex = tabs.length - 1;
+    }
+
+    e.preventDefault();
+    const targetTab = tabs[nextIndex];
+    targetTab.focus();
+    this._activateTab(targetTab.panel, true);
+  }
+
   render() {
     return html`
-      <div class="nav-container" role="tablist">
+      <div class="nav-container" role="tablist" @keydown=${this._handleKeyDown}>
         <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
       </div>
       <div class="panels-container">
@@ -86,3 +148,9 @@ export class StTabs extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-tabs": StTabs;
+  }
+}

package/src/components/textarea/textarea.ts

@@ -10,6 +10,9 @@ export class StTextarea extends LitElement {
   static formAssociated = true;
   private _internals: ElementInternals;
 
+  // 🚀 FIX: Forwards host clicks and keyboard tabs to the hidden native input
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
+
   @query("textarea") private _textareaEl!: HTMLTextAreaElement;
 
   @property({type: String, reflect: true}) name = "";
@@ -22,6 +25,12 @@ export class StTextarea extends LitElement {
   @property({type: Number}) rows = 4;
   @property({type: String, reflect: true}) resize: TextareaResize = "vertical";
 
+  // 🚀 FEATURE: Auto-resize support
+  @property({type: Boolean, attribute: "auto-resize"}) autoResize = false;
+
+  // Security / Privacy
+  @property({type: String, attribute: "spellcheck"}) spellcheckAttr?: "true" | "false";
+
   // Validation
   @property({type: Boolean, reflect: true}) required = false;
   @property({type: Number}) minlength?: number;
@@ -32,16 +41,18 @@ export class StTextarea extends LitElement {
   @property({type: Boolean, reflect: true}) invalid = false;
   @property({type: Boolean, reflect: true}) readonly = false;
 
+  private _defaultValue = "";
+
   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;
+      if (this._textareaEl) {
+        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;
     });
@@ -68,6 +79,7 @@ export class StTextarea extends LitElement {
 
       textarea {
         width: 100%;
+        box-sizing: border-box; /* 🚀 FIX: Prevent padding from causing overflow */
         padding: var(--st-spacing-sm) var(--st-spacing-md);
         font-size: var(--st-font-size-base);
         font-family: inherit;
@@ -78,12 +90,10 @@ export class StTextarea extends LitElement {
         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 */
+      /* Dynamically handle resize constraints */
       :host([resize="none"]) textarea {
         resize: none;
       }
@@ -94,6 +104,12 @@ export class StTextarea extends LitElement {
         resize: both;
       }
 
+      /* Auto-resize overrides manual resize */
+      :host([auto-resize]) textarea {
+        resize: none;
+        overflow-y: hidden;
+      }
+
       textarea::placeholder {
         color: var(--st-color-text-muted);
       }
@@ -106,15 +122,15 @@ export class StTextarea extends LitElement {
 
       /* Validation States */
       :host([invalid]) textarea {
-        border-color: var(--st-color-error);
+        border-color: var(--st-color-error, #dc2626);
       }
 
       :host([invalid]) textarea:focus {
-        box-shadow: 0 0 0 1px var(--st-color-error);
+        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
       }
 
       :host([invalid]) .help-text {
-        color: var(--st-color-error);
+        color: var(--st-color-error, #dc2626);
       }
 
       /* Disabled & Readonly */
@@ -136,15 +152,32 @@ export class StTextarea extends LitElement {
     `,
   ];
 
+  override firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+    if (this.autoResize) this._adjustHeight();
+  }
+
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value);
+      if (this.autoResize) this._adjustHeight();
     }
+
     this._syncValidity();
   }
 
+  private async _adjustHeight() {
+    await this.updateComplete;
+    if (!this._textareaEl) return;
+
+    // Reset height to auto to force scrollHeight to shrink if text is deleted
+    this._textareaEl.style.height = "auto";
+    this._textareaEl.style.height = `${this._textareaEl.scrollHeight}px`;
+  }
+
   private _syncValidity() {
     if (!this._textareaEl) return;
     this._internals.setValidity(
@@ -155,15 +188,21 @@ export class StTextarea extends LitElement {
   }
 
   formResetCallback() {
-    this.value = "";
-    this._internals.setFormValue("");
-    this.updateComplete.then(() => this._syncValidity());
+    // 🚀 FIX: Revert to the initial value instead of hardcoding an empty string
+    this.value = this._defaultValue;
+    this.invalid = false;
+    this._internals.setFormValue(this.value);
+    this.updateComplete.then(() => {
+      this._syncValidity();
+      if (this.autoResize) this._adjustHeight();
+    });
   }
 
-  checkValidity() {
+  public checkValidity() {
     return this._internals.checkValidity();
   }
-  reportValidity() {
+
+  public reportValidity() {
     return this._internals.reportValidity();
   }
 
@@ -175,6 +214,10 @@ export class StTextarea extends LitElement {
       this.invalid = false;
     }
 
+    if (this.autoResize) {
+      this._adjustHeight();
+    }
+
     this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
   }
 
@@ -183,6 +226,8 @@ export class StTextarea extends LitElement {
   }
 
   render() {
+    const helpTextId = "help-text";
+
     return html`
       <div class="form-control">
         ${this.label ? html`<label for="textarea">${this.label}</label>` : ""}
@@ -198,11 +243,14 @@ export class StTextarea extends LitElement {
           ?required=${this.required}
           minlength=${ifDefined(this.minlength)}
           maxlength=${ifDefined(this.maxlength)}
+          spellcheck=${ifDefined(this.spellcheck)}
+          aria-invalid=${this.invalid ? "true" : "false"}
+          aria-describedby=${ifDefined(this.helpText ? helpTextId : undefined)}
           @input=${this._handleInput}
           @change=${this._handleChange}
         ></textarea>
 
-        ${this.helpText ? html`<div class="help-text">${this.helpText}</div>` : ""}
+        ${this.helpText ? html`<div id=${helpTextId} class="help-text">${this.helpText}</div>` : ""}
       </div>
     `;
   }

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

@@ -0,0 +1,2 @@
+export const themeModes = ["light", "system", "dark"] as const;
+export type ThemeMode = typeof themeModes[number];