@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.11

package/src/components/skeleton/skeleton.ts

@@ -1,68 +1,135 @@
-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;
-  }
+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 {
+  @property({ type: String, reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'text';
+  @property({ type: String, reflect: true }) animation: 'shimmer' | 'pulse' | 'none' = 'shimmer';
+  @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>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('width')) {
+      if (this.width) {
+        this.style.setProperty('--st-skeleton-width', this.width);
+      } else {
+        this.style.removeProperty('--st-skeleton-width');
+      }
+    }
+    
+    if (changedProperties.has('height')) {
+      if (this.height) {
+        this.style.setProperty('--st-skeleton-height', this.height);
+      } else {
+        this.style.removeProperty('--st-skeleton-height');
+      }
+    }
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :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="circular"]) {
+        --_width: var(--st-skeleton-width, 2.5rem);
+        --_height: var(--st-skeleton-height, 2.5rem);
+      }
+
+      :host([variant="rectangular"]) {
+        --_height: var(--st-skeleton-height, 8rem);
+      }
+
+      .skeleton {
+        /* The inner element simply fills the host */
+        display: block;
+        width: 100%;
+        height: 100%;
+        
+        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%;
+        border-radius: var(--st-skeleton-radius);
+        
+        /* Prevent accidental selection */
+        user-select: none;
+        pointer-events: none;
+      }
+
+      :host([variant="circular"]) .skeleton {
+        border-radius: 50%;
+      }
+
+      /* Animations */
+      :host([animation="shimmer"]) .skeleton {
+        animation: st-shimmer 1.4s ease infinite;
+      }
+
+      :host([animation="pulse"]) .skeleton {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        animation: st-pulse 1.5s ease-in-out infinite;
+      }
+
+      :host([animation="none"]) .skeleton {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        animation: none;
+      }
+
+      /* Accessibility: Respect OS reduced motion settings */
+      @media (prefers-reduced-motion: reduce) {
+        .skeleton {
+          animation: none !important;
+          background: var(--st-color-surface-muted, #f1f5f9) !important;
+        }
+      }
+
+      @keyframes st-shimmer {
+        0% { background-position: 100% 0; }
+        100% { background-position: -100% 0; }
+      }
+
+      @keyframes st-pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.4; }
+        100% { opacity: 1; }
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="skeleton" aria-hidden="true" part="base"></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-skeleton': StSkeleton;
+  }
 }

package/src/components/switch/switch.ts

@@ -1,181 +1,181 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-@customElement("st-switch")
-export class StSwitch extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @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 = "";
-
-  constructor() {
-    super();
-    this._internals = this.attachInternals();
-  }
-
-  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);
-      }
-
-      /* Visually hide the native input */
-      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;
-      }
-
-      /* The Switch Track (Pill) */
-      .track {
-        display: flex;
-        align-items: center;
-        width: 2.25rem; /* 36px */
-        height: 1.25rem; /* 20px */
-        background-color: var(--st-color-border);
-        border-radius: 999px;
-        padding: 2px;
-        transition:
-          background-color 0.2s ease,
-          box-shadow 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      /* The Switch Thumb (Circle) */
-      .thumb {
-        width: 1rem; /* 16px */
-        height: 1rem; /* 16px */
-        background-color: var(--st-white);
-        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 */
-      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;
-      }
-
-      :host([disabled]) label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-  ];
-
-  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();
-    }
-
-    if (changedProperties.has("required")) {
-      this._syncValidity();
-    }
-  }
-
-  private _syncValidity() {
-    if (!this._inputEl) return;
-    this._internals.setValidity(
-      this._inputEl.validity,
-      this._inputEl.validationMessage,
-      this._inputEl,
-    );
-  }
-
-  formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue(null);
-    this.updateComplete.then(() => this._syncValidity());
-  }
-
-  private _handleChange(e: Event) {
-    e.stopPropagation();
-
-    if (this.disabled) return;
-
-    this.checked = this._inputEl.checked;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
-  }
-
-  render() {
-    return html`
-      <label>
-        <input
-          type="checkbox"
-          role="switch"
-          aria-label=${this.ariaLabel || ""}
-          .name=${this.name}
-          .value=${this.value}
-          .checked=${this.checked}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          @change=${this._handleChange}
-        />
-        <div class="track">
-          <div class="thumb"></div>
-        </div>
-        <span class="label"><slot></slot></span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-switch": StSwitch;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-switch")
+export class StSwitch extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @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 = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+
+  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);
+      }
+
+      /* Visually hide the native input */
+      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;
+      }
+
+      /* The Switch Track (Pill) */
+      .track {
+        display: flex;
+        align-items: center;
+        width: 2.25rem; /* 36px */
+        height: 1.25rem; /* 20px */
+        background-color: var(--st-color-border);
+        border-radius: 999px;
+        padding: 2px;
+        transition:
+          background-color 0.2s ease,
+          box-shadow 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      /* The Switch Thumb (Circle) */
+      .thumb {
+        width: 1rem; /* 16px */
+        height: 1rem; /* 16px */
+        background-color: var(--st-white);
+        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 */
+      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;
+      }
+
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    `,
+  ];
+
+  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();
+    }
+
+    if (changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+    this._internals.setValidity(
+      this._inputEl.validity,
+      this._inputEl.validationMessage,
+      this._inputEl,
+    );
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue(null);
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  private _handleChange(e: Event) {
+    e.stopPropagation();
+
+    if (this.disabled) return;
+
+    this.checked = this._inputEl.checked;
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel || ""}
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this._handleChange}
+        />
+        <div class="track">
+          <div class="thumb"></div>
+        </div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-switch": StSwitch;
+  }
+}