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

package/src/components/select/select.ts

@@ -1,81 +1,14 @@
 import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, state, query} from "lit/decorators.js";
 import {classMap} from "lit/directives/class-map.js";
+import {ifDefined} from "lit/directives/if-defined.js";
 
 export interface SelectOption {
   label: string;
   value: string;
 }
 
-/**
- * Standard WHATWG Autocomplete tokens.
- */
-export type SelectAutocomplete =
-  | "on"
-  | "off"
-  // Names
-  | "name"
-  | "honorific-prefix"
-  | "given-name"
-  | "additional-name"
-  | "family-name"
-  | "honorific-suffix"
-  | "nickname"
-  // Authentication & Identity
-  | "email"
-  | "username"
-  | "new-password"
-  | "current-password"
-  | "one-time-code"
-  | "organization"
-  | "organization-title"
-  | "url"
-  | "photo"
-  | "webauthn"
-  // Addresses
-  | "street-address"
-  | "address-line1"
-  | "address-line2"
-  | "address-line3"
-  | "address-level1" // State / Province
-  | "address-level2" // City
-  | "address-level3"
-  | "address-level4"
-  | "country"
-  | "country-name"
-  | "postal-code"
-  // Payment
-  | "cc-name"
-  | "cc-given-name"
-  | "cc-additional-name"
-  | "cc-family-name"
-  | "cc-number"
-  | "cc-exp"
-  | "cc-exp-month"
-  | "cc-exp-year"
-  | "cc-csc"
-  | "cc-type"
-  | "transaction-currency"
-  | "transaction-amount"
-  // Personal
-  | "language"
-  | "bday"
-  | "bday-day"
-  | "bday-month"
-  | "bday-year"
-  | "sex"
-  // Telephone & Messaging
-  | "tel"
-  | "tel-country-code"
-  | "tel-national"
-  | "tel-area-code"
-  | "tel-local"
-  | "tel-local-prefix"
-  | "tel-local-suffix"
-  | "tel-extension"
-  | "impp"
-  // Preserves IDE autocomplete while allowing space-separated modifiers (e.g., "shipping postal-code")
-  | (string & {});
+export type SelectAutocomplete = "on" | "off" | "name" | "email" | (string & {});
 
 @customElement("st-select")
 export class StSelect extends LitElement {
@@ -84,6 +17,7 @@ export class StSelect extends LitElement {
 
   @property({type: String}) name = "";
   @property({type: String}) label = "";
+  @property({type: Boolean, attribute: "hide-label"}) hideLabel = false;
   @property({type: String}) value = "";
   @property({type: Boolean}) required = false;
   @property({type: Boolean}) multiple = false;
@@ -103,6 +37,9 @@ export class StSelect extends LitElement {
   @query(".combobox") private buttonElement!: HTMLElement;
   @query(".search-input") private searchInputEl?: HTMLInputElement;
 
+  private _labelId = `select-label-${Math.random().toString(36).substring(2, 9)}`;
+  private _listboxId = `select-listbox-${Math.random().toString(36).substring(2, 9)}`;
+
   static styles = css`
     :host {
       display: block;
@@ -118,6 +55,17 @@ export class StSelect extends LitElement {
       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;
+    }
+
     .combobox {
       display: flex;
       justify-content: space-between;
@@ -184,7 +132,7 @@ export class StSelect extends LitElement {
       top: calc(100% + 4px);
       left: 0;
       right: 0;
-      z-index: 1;
+      z-index: 10;
       background: var(--st-color-surface);
       border: 1px solid var(--st-color-border);
       border-radius: var(--st-radius-md);
@@ -264,19 +212,17 @@ export class StSelect extends LitElement {
     this.handleClickOutside = this.handleClickOutside.bind(this);
   }
 
-  // 2. Public API methods expected by st-form
   public checkValidity(): boolean {
     return this.internals.checkValidity();
   }
 
   public reportValidity(): boolean {
     const isValid = this.checkValidity();
-    this.touched = true; // Force UI to reveal the error
+    this.touched = true;
     this.invalid = !isValid;
     return isValid;
   }
 
-  // 3. Override native focus to target the internal combobox button
   public override focus(options?: FocusOptions) {
     this.buttonElement?.focus(options);
   }
@@ -297,6 +243,7 @@ export class StSelect extends LitElement {
   }
 
   override willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
     if (
       changedProperties.has("value") ||
       changedProperties.has("required") ||
@@ -333,6 +280,13 @@ export class StSelect extends LitElement {
     }
   }
 
+  formResetCallback() {
+    const initialValue = this.getAttribute("value") || "";
+    this.value = initialValue;
+    this.touched = false;
+    this.validate();
+  }
+
   private handleClickOutside(e: Event) {
     const path = e.composedPath();
     if (!path.includes(this)) {
@@ -406,7 +360,6 @@ export class StSelect extends LitElement {
     const currentValues = this.selectedValues;
     const selectedOptions = this.options.filter((opt) => currentValues.includes(opt.value));
 
-    // 4. Update isInvalid to also respect the new property fallback
     const isInvalid =
       this.invalid || (this.touched && !this.internals.validity.valid) || !!this.error;
     const displayError = isInvalid ? this.error || this.nativeError : "";
@@ -418,7 +371,11 @@ export class StSelect extends LitElement {
       : this.options;
 
     return html`
-      ${this.label ? html`<label id="select-label">${this.label}</label>` : ""}
+      ${this.label
+        ? html`<label id=${this._labelId} class=${classMap({"sr-only": this.hideLabel})}
+            >${this.label}</label
+          >`
+        : ""}
 
       <button
         type="button"
@@ -431,8 +388,8 @@ export class StSelect extends LitElement {
         role="combobox"
         aria-haspopup="listbox"
         aria-expanded="${this.open}"
-        aria-labelledby="select-label"
-        aria-controls="select-listbox"
+        aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}
+        aria-controls=${this._listboxId}
         @click=${this.toggleOpen}
         @keydown=${this.handleButtonKeydown}
       >
@@ -465,6 +422,8 @@ export class StSelect extends LitElement {
                         class="search-input"
                         placeholder="Search options..."
                         autocomplete="off"
+                        spellcheck="false"
+                        autocapitalize="none"
                         .value=${this.filterText}
                         @input=${this.handleSearchInput}
                       />
@@ -473,7 +432,7 @@ export class StSelect extends LitElement {
                 : ""}
 
               <ul
-                id="select-listbox"
+                id=${this._listboxId}
                 class="listbox"
                 role="listbox"
                 aria-multiselectable="${this.multiple}"
@@ -495,6 +454,8 @@ export class StSelect extends LitElement {
                     })
                   : html`<li
                       class="option"
+                      role="option"
+                      aria-disabled="true"
                       style="color:var(--st-color-text-muted); cursor:default;"
                     >
                       No options found
@@ -508,7 +469,7 @@ export class StSelect extends LitElement {
       <select
         class="hidden-native"
         name="${this.name}"
-        .autocomplete="${this.autocomplete}"
+        .autocomplete="${this.autocomplete as any}"
         ?multiple=${this.multiple}
         tabindex="-1"
         aria-hidden="true"
@@ -531,4 +492,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-select": StSelect;
   }
-}
+}

package/src/components/skeleton/skeleton.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -9,8 +9,14 @@ export class StSkeleton extends LitElement {
   @property({ type: String }) width = '';
   @property({ type: String }) height = '';
 
-  // Apply properties directly to the :host as CSS variables when they change
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
+  constructor() {
+    super();
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-label', 'Loading');
+    this.setAttribute('aria-busy', 'true');
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
     
     if (changedProperties.has('width')) {
@@ -36,22 +42,20 @@ export class StSkeleton extends LitElement {
       :host {
         display: block;
         
-        /* Define base sizing variables that can be overridden by props */
         --_width: var(--st-skeleton-width, 100%);
         --_height: var(--st-skeleton-height, 1em);
         
-        /* 
-          CRITICAL FIX: Apply sizing directly to the host. 
-          This allows external classes and styles (like margin: auto) to work perfectly.
-        */
         width: var(--_width);
         height: var(--_height);
         
-        /* Expose radius as a token for external theme overrides */
         --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
       }
 
-      /* Shape Variants adjust the host's sizing variables */
+      :host([variant="text"]) {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
       :host([variant="circular"]) {
         --_width: var(--st-skeleton-width, 2.5rem);
         --_height: var(--st-skeleton-height, 2.5rem);
@@ -62,7 +66,6 @@ export class StSkeleton extends LitElement {
       }
 
       .skeleton {
-        /* The inner element simply fills the host */
         display: block;
         width: 100%;
         height: 100%;
@@ -76,7 +79,6 @@ export class StSkeleton extends LitElement {
         background-size: 400% 100%;
         border-radius: var(--st-skeleton-radius);
         
-        /* Prevent accidental selection */
         user-select: none;
         pointer-events: none;
       }
@@ -85,7 +87,6 @@ export class StSkeleton extends LitElement {
         border-radius: 50%;
       }
 
-      /* Animations */
       :host([animation="shimmer"]) .skeleton {
         animation: st-shimmer 1.4s ease infinite;
       }
@@ -100,7 +101,6 @@ export class StSkeleton extends LitElement {
         animation: none;
       }
 
-      /* Accessibility: Respect OS reduced motion settings */
       @media (prefers-reduced-motion: reduce) {
         .skeleton {
           animation: none !important;

package/src/components/switch/switch.ts

@@ -1,23 +1,25 @@
 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";
 
 @customElement("st-switch")
 export class StSwitch extends LitElement {
   static formAssociated = true;
   private _internals: ElementInternals;
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
 
   @query("input") private _inputEl!: HTMLInputElement;
 
   @property({type: String, reflect: true}) name = "";
   @property({type: String}) value = "on";
-
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
-
   @property({attribute: "aria-label"}) ariaLabel = "";
 
+  private _defaultChecked = false;
+
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -41,7 +43,6 @@ export class StSwitch extends LitElement {
         font-size: var(--st-font-size-base);
       }
 
-      /* Visually hide the native input */
       input {
         position: absolute;
         width: 1px;
@@ -54,12 +55,11 @@ export class StSwitch extends LitElement {
         border-width: 0;
       }
 
-      /* The Switch Track (Pill) */
       .track {
         display: flex;
         align-items: center;
-        width: 2.25rem; /* 36px */
-        height: 1.25rem; /* 20px */
+        width: 2.25rem;
+        height: 1.25rem;
         background-color: var(--st-color-border);
         border-radius: 999px;
         padding: 2px;
@@ -69,40 +69,34 @@ export class StSwitch extends LitElement {
         flex-shrink: 0;
       }
 
-      /* The Switch Thumb (Circle) */
       .thumb {
-        width: 1rem; /* 16px */
-        height: 1rem; /* 16px */
-        background-color: var(--st-white);
+        width: 1rem;
+        height: 1rem;
+        background-color: #ffffff; /* Explicitly white for contrast */
         border-radius: 50%;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         transform: translateX(0);
         transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
 
-      /* Focus State */
+      label:hover input:not(:checked):not(:disabled) + .track {
+        background-color: var(--st-color-text-muted);
+      }
+
       input:focus-visible + .track {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked State */
       :host([checked]) .track {
         background-color: var(--st-color-primary);
       }
 
       :host([checked]) .thumb {
-        /* Move thumb to the right: Track width (36px) - Padding (4px) - Thumb width (16px) = 16px */
         transform: translateX(16px);
       }
 
-      /* Hover State (Subtle darkening of the track if unchecked) */
-      label:hover input:not(:checked) + .track {
-        background-color: var(--st-color-text-muted);
-      }
-
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
@@ -114,16 +108,21 @@ export class StSwitch extends LitElement {
     `,
   ];
 
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultChecked = this.checked;
+  }
+
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
     if (changedProperties.has("checked") || changedProperties.has("value")) {
       this._internals.setFormValue(this.checked ? this.value : null);
-      this._syncValidity();
+      this.updateComplete.then(() => this._syncValidity());
     }
 
     if (changedProperties.has("required")) {
-      this._syncValidity();
+      this.updateComplete.then(() => this._syncValidity());
     }
   }
 
@@ -136,15 +135,22 @@ export class StSwitch extends LitElement {
     );
   }
 
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue(null);
+    this.checked = this._defaultChecked;
+    this._internals.setFormValue(this.checked ? this.value : null);
     this.updateComplete.then(() => this._syncValidity());
   }
 
   private _handleChange(e: Event) {
     e.stopPropagation();
-
     if (this.disabled) return;
 
     this.checked = this._inputEl.checked;
@@ -157,7 +163,7 @@ export class StSwitch extends LitElement {
         <input
           type="checkbox"
           role="switch"
-          aria-label=${this.ariaLabel || ""}
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
           .name=${this.name}
           .value=${this.value}
           .checked=${this.checked}