@sondor-technology/sondor-components 1.0.4 → 1.0.6

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}