@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

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/time-picker/time-picker.ts

@@ -0,0 +1,272 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query, state} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-time-picker")
+export class StTimePicker extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) label = "";
+
+  // Visually hide the label for screen-reader only accessibility
+  @property({type: Boolean, attribute: "hide-label"}) hideLabel = false;
+
+  // Time string in HH:mm format (e.g., "14:30")
+  @property({type: String}) value = "";
+
+  @property({type: String}) min = "";
+  @property({type: String}) max = "";
+  @property({type: Number}) step?: number;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+
+  @state() private _touched = false;
+
+  @query(".native-input") private _inputEl!: HTMLInputElement;
+
+  private _labelId = `time-label-${Math.random().toString(36).substring(2, 9)}`;
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: inherit;
+      }
+
+      label {
+        display: block;
+        font-size: var(--st-font-size-sm);
+        font-weight: 500;
+        color: var(--st-color-text-muted);
+        margin-bottom: var(--st-spacing-xs);
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .input-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-sizing: border-box;
+        transition:
+          border-color 0.2s,
+          box-shadow 0.2s,
+          background-color 0.2s;
+      }
+
+      /* Focus within ring */
+      .input-wrapper:focus-within {
+        border-color: var(--st-color-primary);
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+      }
+
+      .input-wrapper.is-invalid {
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      .input-wrapper.is-disabled {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+
+      .native-input {
+        width: 100%;
+        min-height: 42px;
+        padding: var(--st-spacing-xs) var(--st-spacing-md);
+        background: transparent;
+        border: none;
+        color: var(--st-color-text);
+        font-family: inherit;
+        font-size: var(--st-font-size-base);
+        outline: none;
+        cursor: inherit;
+        appearance: none;
+        -webkit-appearance: none;
+      }
+
+      /* Style the native clock icon generated by WebKit/Blink */
+      .native-input::-webkit-calendar-picker-indicator {
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.2s;
+        filter: var(--st-icon-filter, none); /* Allows inverting for dark mode */
+      }
+
+      .native-input::-webkit-calendar-picker-indicator:hover {
+        opacity: 1;
+      }
+
+      .native-input:disabled {
+        color: var(--st-color-text-muted);
+      }
+    `,
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+
+    // Sync initial validity state based on native input
+    this._syncValidity();
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("value") ||
+      changedProperties.has("required") ||
+      changedProperties.has("min") ||
+      changedProperties.has("max")
+    ) {
+      this._internals.setFormValue(this.value || null);
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+
+    this.invalid = false;
+
+    // 🚀 FIX: Safari/WebKit poorly supports min/max on time inputs.
+    // We enforce these constraints manually using strict lexicographical comparison.
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select a time.");
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    if (this.value && this.min && this.value < this.min) {
+      this._internals.setValidity({rangeUnderflow: true}, `Time must be ${this.min} or later.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    if (this.value && this.max && this.value > this.max) {
+      this._internals.setValidity({rangeOverflow: true}, `Time must be ${this.max} or earlier.`);
+      if (this._touched) this.invalid = true;
+      return;
+    }
+
+    // Fallback to native validation for things like 'step' bounds
+    const isValid = this._inputEl.checkValidity();
+
+    if (isValid) {
+      this._internals.setValidity({});
+      this.invalid = false;
+    } else {
+      this._internals.setValidity(
+        this._inputEl.validity,
+        this._inputEl.validationMessage,
+        this._inputEl,
+      );
+      if (this._touched) {
+        this.invalid = true;
+      }
+    }
+  }
+
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    this._touched = true;
+    this._syncValidity();
+    return this._internals.reportValidity();
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+    this._touched = false;
+    this.invalid = false;
+    this._syncValidity();
+  }
+
+  public override focus(options?: FocusOptions) {
+    this._inputEl?.focus(options);
+  }
+
+  private _handleInput(e: Event) {
+    this.value = (e.target as HTMLInputElement).value;
+    this.dispatchEvent(new Event("input", {bubbles: true, composed: true}));
+  }
+
+  private _handleChange(e: Event) {
+    this._touched = true;
+    this.value = (e.target as HTMLInputElement).value;
+    this._syncValidity();
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  private _handleBlur() {
+    this._touched = true;
+    this._syncValidity();
+  }
+
+  render() {
+    return html`
+      ${this.label
+        ? html`<label id=${this._labelId} class=${classMap({"sr-only": this.hideLabel})}
+            >${this.label}</label
+          >`
+        : ""}
+
+      <div
+        class=${classMap({
+          "input-wrapper": true,
+          "is-disabled": this.disabled,
+          "is-invalid": this.invalid,
+        })}
+      >
+        <input
+          class="native-input"
+          type="time"
+          name=${ifDefined(this.name || undefined)}
+          .value=${this.value}
+          min=${ifDefined(this.min || undefined)}
+          max=${ifDefined(this.max || undefined)}
+          step=${ifDefined(this.step)}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @blur=${this._handleBlur}
+        />
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-time-picker": StTimePicker;
+  }
+}

package/src/components/toggle-group/toggle-button.ts

@@ -0,0 +1,104 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+
+@customElement("st-toggle-button")
+export class StToggleButton extends LitElement {
+  // 🚀 FIX: Forwards programmatic focus natively to the inner button
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+  @property({ type: String }) value = "";
+  @property({ type: Boolean, reflect: true }) selected = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        flex: 1; /* Ensures all buttons in a group stretch evenly */
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--st-spacing-xs);
+        width: 100%;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        border: none;
+        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:not(:disabled) {
+        background-color: var(--st-color-surface-hover, #f8fafc);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+        z-index: 1; /* Brings the focus ring above siblings */
+      }
+
+      /* Active/Selected State */
+      :host([selected]) button {
+        background-color: var(--st-color-primary-light, #eff6ff);
+        color: var(--st-color-primary-dark, #1d4ed8);
+        font-weight: var(--st-font-weight-semibold);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) button {
+        opacity: 0.5;
+        background-color: var(--st-color-surface-muted, #f1f5f9);
+        color: var(--st-color-text-muted);
+      }
+
+      ::slotted(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+        fill: currentColor;
+      }
+    `
+  ];
+
+  private _handleClick() {
+    if (this.disabled) return;
+    
+    // Dispatch an internal event for the group orchestrator to catch
+    this.dispatchEvent(new CustomEvent("st-toggle-action", {
+      detail: { value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        aria-pressed=${this.selected ? "true" : "false"}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-toggle-button": StToggleButton;
+  }
+}

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

@@ -0,0 +1,148 @@
+import { LitElement, html, css, PropertyValues } from "lit";
+import { customElement, property, queryAssignedElements } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
+import type { StToggleButton } from "./toggle-button.js";
+import "./toggle-button.js"; 
+
+@customElement("st-toggle-group")
+export class StToggleGroup extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @queryAssignedElements({ selector: "st-toggle-button" })
+  private _buttons!: StToggleButton[];
+
+  @property({ type: String, reflect: true }) name = "";
+  
+  // A comma-separated list of values if multiple=true, or a single value if false
+  @property({ type: String }) value = "";
+  
+  @property({ type: Boolean }) multiple = false;
+  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: Boolean, reflect: true }) required = false;
+  
+  // ARIA Support
+  @property({ attribute: "aria-label" }) ariaLabel = "";
+
+  private _defaultValue = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.addEventListener("st-toggle-action", this._handleToggle as EventListener);
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+      }
+
+      .group-container {
+        display: inline-flex;
+        background-color: var(--st-color-border);
+        /* 🚀 FIX: This 1px gap perfectly acts as the inner border between children */
+        gap: 1px;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        overflow: hidden; /* Clips the child buttons exactly to the border radius */
+      }
+
+      :host([disabled]) .group-container {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    `
+  ];
+
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultValue = this.value;
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has("value")) {
+      this._internals.setFormValue(this.value || null);
+      this._syncButtons();
+      this._syncValidity();
+    }
+    
+    if (changedProperties.has("disabled")) {
+      this._buttons.forEach(btn => btn.disabled = this.disabled);
+    }
+  }
+
+  private _syncButtons() {
+    const values = this.multiple && this.value ? this.value.split(",") : [this.value];
+    this._buttons.forEach(btn => {
+      btn.selected = values.includes(btn.value);
+    });
+  }
+
+  private _handleSlotChange() {
+    this._syncButtons();
+    if (this.disabled) {
+      this._buttons.forEach(btn => btn.disabled = true);
+    }
+  }
+
+  private _handleToggle(e: CustomEvent<{ value: string }>) {
+    e.stopPropagation();
+    const toggledValue = e.detail.value;
+
+    if (this.multiple) {
+      let values = this.value ? this.value.split(",") : [];
+      if (values.includes(toggledValue)) {
+        values = values.filter(v => v !== toggledValue); // Deselect
+      } else {
+        values.push(toggledValue); // Select
+      }
+      this.value = values.join(",");
+    } else {
+      // Single select behavior (radio button style: clicking active doesn't deselect)
+      if (this.value !== toggledValue) {
+        this.value = toggledValue;
+      }
+    }
+
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+
+  formResetCallback() {
+    this.value = this._defaultValue;
+  }
+
+  private _syncValidity() {
+    if (this.required && !this.value) {
+      this._internals.setValidity({ valueMissing: true }, "Please select an option.");
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+
+  public checkValidity() { return this._internals.checkValidity(); }
+  public reportValidity() { return this._internals.reportValidity(); }
+
+  render() {
+    return html`
+      <div 
+        class="group-container" 
+        role="group" 
+        aria-label=${ifDefined(this.ariaLabel || undefined)}
+        aria-required=${this.required ? "true" : "false"}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-toggle-group": StToggleGroup;
+  }
+}