@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.0

package/dist/components/radio/radio.js

@@ -1,152 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { resetStyles } from "../../styles/reset.js";
-let StRadio = class StRadio extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.value = "";
-        this.checked = false;
-        this.disabled = false;
-        this.ariaLabel = "";
-    }
-    _handleChange(e) {
-        // Prevent the native change event from leaking out
-        e.stopPropagation();
-        if (!this.disabled) {
-            // Dispatch a custom event to tell the parent group this radio was selected
-            this.dispatchEvent(new CustomEvent("st-radio-select", {
-                detail: { value: this.value },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    render() {
-        return html `
-      <label>
-        <input
-          type="radio"
-          aria-label=${this.ariaLabel || ""}
-          .value=${this.value}
-          .checked=${this.checked}
-          ?disabled=${this.disabled}
-          @change=${this._handleChange}
-        />
-        <span class="control"></span>
-        <span class="label"><slot></slot></span>
-      </label>
-    `;
-    }
-};
-StRadio.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);
-      }
-
-      /* Hide the native input visually, but keep it accessible for screen readers */
-      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;
-      }
-
-      /* Custom Radio Circle */
-      .control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.25rem;
-        height: 1.25rem;
-        border: 1px solid var(--st-color-border);
-        border-radius: 50%;
-        background-color: var(--st-color-bg);
-        transition: all 0.2s ease;
-        flex-shrink: 0;
-      }
-
-      /* Inner Dot (Hidden by default) */
-      .control::after {
-        content: "";
-        width: 0.625rem;
-        height: 0.625rem;
-        border-radius: 50%;
-        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
-        transition:
-          transform 0.2s ease,
-          background-color 0.2s ease;
-        transform: scale(0);
-      }
-
-      /* Hover State */
-      label:hover .control {
-        border-color: var(--st-color-primary-hover);
-      }
-
-      /* Focus State (Driven by the hidden input) */
-      input:focus-visible + .control {
-        box-shadow:
-          0 0 0 2px var(--st-color-bg),
-          0 0 0 4px var(--st-color-primary);
-      }
-
-      /* Checked State */
-      :host([checked]) .control {
-        border-color: var(--st-color-primary);
-        background-color: var(--st-color-primary);
-      }
-      :host([checked]) .control::after {
-        background-color: var(--st-white); /* White dot inside the primary circle */
-        transform: scale(1);
-      }
-
-      /* Disabled State */
-      :host([disabled]) {
-        pointer-events: none;
-      }
-      :host([disabled]) label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `,
-];
-__decorate([
-    property({ type: String })
-], StRadio.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StRadio.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StRadio.prototype, "disabled", void 0);
-__decorate([
-    property({ attribute: "aria-label" })
-], StRadio.prototype, "ariaLabel", void 0);
-StRadio = __decorate([
-    customElement("st-radio")
-], StRadio);
-export { StRadio };

package/dist/components/radio-group/radio-group.d.ts

@@ -1,27 +0,0 @@
-import { LitElement, PropertyValues } from "lit";
-export declare class StRadioGroup extends LitElement {
-    static formAssociated: boolean;
-    private _internals;
-    name: string;
-    value: string;
-    label: string;
-    helpText: string;
-    disabled: boolean;
-    invalid: boolean;
-    private _radios;
-    constructor();
-    static styles: import("lit").CSSResult[];
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _handleRadioSelect;
-    updated(changedProperties: PropertyValues<this>): void;
-    private _syncRadios;
-    formResetCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "st-radio-group": StRadioGroup;
-    }
-}
-//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group/radio-group.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACD,QAAQ,SAAM;IACR,QAAQ,UAAS;IACjB,OAAO,UAAS;IAI1D,OAAO,CAAC,OAAO,CAAa;IAE5B,cAaC;IAED,MAAM,CAAC,MAAM,4BAiDX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,kBAAkB;IAMjB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAYvD;IAGD,OAAO,CAAC,WAAW;IAYnB,iBAAiB,SAIhB;IAED,MAAM,yCAYL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/radio-group/radio-group.js

@@ -1,161 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from "lit";
-import { customElement, property, queryAssignedElements } from "lit/decorators.js";
-import { resetStyles } from "../../styles/reset.js";
-let StRadioGroup = class StRadioGroup extends LitElement {
-    constructor() {
-        super();
-        this.name = "";
-        this.value = "";
-        this.label = "";
-        this.helpText = "";
-        this.disabled = false;
-        this.invalid = false;
-        this._internals = this.attachInternals();
-        // 1. Trigger error state if the user clicks away and the field is invalid
-        this.addEventListener("change", () => {
-            this.invalid = !this._internals.validity.valid;
-        });
-        // 2. Trigger error state if the st-form tries to submit and fails
-        this.addEventListener("invalid", () => {
-            this.invalid = true;
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Listen for selections from child radios
-        this.addEventListener("st-radio-select", this._handleRadioSelect);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("st-radio-select", this._handleRadioSelect);
-    }
-    _handleRadioSelect(e) {
-        if (this.disabled)
-            return;
-        this.value = e.detail.value;
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        // When the group's value changes, sync the form and update all child radios
-        if (changedProperties.has("value")) {
-            this._internals.setFormValue(this.value);
-            this._syncRadios();
-        }
-        if (changedProperties.has("disabled")) {
-            this._syncRadios();
-        }
-    }
-    // Loops through children and unchecks/checks them based on the group's current value
-    _syncRadios() {
-        if (!this._radios)
-            return;
-        this._radios.forEach((radio) => {
-            radio.checked = radio.value === this.value;
-            if (this.disabled) {
-                radio.disabled = true;
-            }
-        });
-    }
-    // Fired natively by the browser if the parent <form> is reset
-    formResetCallback() {
-        this.value = "";
-        this._internals.setFormValue("");
-        this._syncRadios();
-    }
-    render() {
-        return html `
-      <fieldset ?disabled=${this.disabled}>
-        ${this.label ? html `<legend>${this.label}</legend>` : ""}
-
-        <div class="options">
-          <slot @slotchange=${this._syncRadios}></slot>
-        </div>
-
-        ${this.helpText ? html `<div class="help-text">${this.helpText}</div>` : ""}
-      </fieldset>
-    `;
-    }
-};
-StRadioGroup.formAssociated = true;
-StRadioGroup.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: block;
-      }
-
-      fieldset {
-        border: none;
-        padding: 0;
-        margin: 0;
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-xs);
-      }
-
-      legend {
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-medium);
-        color: var(--st-color-text);
-        padding: 0;
-        margin-bottom: var(--st-spacing-xs);
-      }
-
-      .options {
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-sm);
-      }
-
-      /* Horizontal layout modifier */
-      :host([layout="horizontal"]) .options {
-        flex-direction: row;
-        gap: var(--st-spacing-md);
-      }
-
-      .help-text {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        margin: 0;
-      }
-
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
-      :host([invalid]) legend {
-        color: var(--st-color-error);
-      }
-    `,
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StRadioGroup.prototype, "name", void 0);
-__decorate([
-    property({ type: String })
-], StRadioGroup.prototype, "value", void 0);
-__decorate([
-    property({ type: String })
-], StRadioGroup.prototype, "label", void 0);
-__decorate([
-    property({ attribute: "help-text" })
-], StRadioGroup.prototype, "helpText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StRadioGroup.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StRadioGroup.prototype, "invalid", void 0);
-__decorate([
-    queryAssignedElements({ selector: "st-radio" })
-], StRadioGroup.prototype, "_radios", void 0);
-StRadioGroup = __decorate([
-    customElement("st-radio-group")
-], StRadioGroup);
-export { StRadioGroup };

package/dist/components/router/router.d.ts

@@ -1,7 +0,0 @@
-declare class AppRouter {
-    constructor();
-    private _notify;
-}
-export declare const router: AppRouter;
-export {};
-//# sourceMappingURL=router.d.ts.map

package/dist/components/router/router.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,cAAM,SAAS;IACb,cAoCC;IAED,OAAO,CAAC,OAAO;CAKhB;AAED,eAAO,MAAM,MAAM,WAAkB,CAAC"}

package/dist/components/router/router.js

@@ -1,37 +0,0 @@
-class AppRouter {
-    constructor() {
-        window.addEventListener('popstate', () => this._notify());
-        document.addEventListener('click', (e) => {
-            // 1. Ignore modified clicks (Ctrl+Click, etc)
-            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-                return;
-            }
-            // 2. Safely traverse the path
-            const path = e.composedPath();
-            const link = path.find((el) => el && typeof el.hasAttribute === 'function' && el.hasAttribute('href'));
-            if (!link)
-                return;
-            const href = link.getAttribute('href');
-            const target = link.getAttribute('target');
-            // 3. Ignore external links
-            if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
-                return;
-            }
-            // 4. Intercept internal links
-            if (href.startsWith('/')) {
-                e.preventDefault();
-                window.history.pushState(null, '', href);
-                this._notify();
-            }
-        });
-        // Broadcast initial route on load
-        // Use setTimeout to ensure all Lit components have registered first
-        setTimeout(() => this._notify(), 0);
-    }
-    _notify() {
-        window.dispatchEvent(new CustomEvent('route-changed', {
-            detail: window.location.pathname
-        }));
-    }
-}
-export const router = new AppRouter();

package/dist/components/select/select.d.ts

@@ -1,16 +0,0 @@
-import { LitElement } from 'lit';
-export declare class StSelect extends LitElement {
-    size: 'sm' | 'md' | 'lg';
-    variant: 'outline' | 'filled';
-    color: 'default' | 'primary' | 'error';
-    focused: boolean;
-    constructor();
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'st-select': StSelect;
-    }
-}
-//# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,QAAS,SAAQ,UAAU;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,SAAS,GAAG,QAAQ,CAAa;IAC1C,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAGlD,OAAO,UAAS;IAE5D,cAKC;IAED,MAAM,CAAC,MAAM,4BA2HX;IAEF,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/select/select.js

@@ -1,172 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
-let StSelect = class StSelect extends LitElement {
-    constructor() {
-        super();
-        this.size = 'md';
-        this.variant = 'outline';
-        this.color = 'default';
-        // Internal state to handle the chevron animation when the slotted select is focused
-        this.focused = false;
-        // Track focus states to animate the chevron
-        this.addEventListener('focusin', () => this.focused = true);
-        this.addEventListener('focusout', () => this.focused = false);
-    }
-    render() {
-        return html `
-      <div class="select-wrapper">
-        <slot></slot>
-        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </div>
-    `;
-    }
-};
-StSelect.styles = [
-    resetStyles,
-    css `
-      :host {
-        display: inline-block;
-        width: 100%;
-        position: relative;
-      }
-
-      .select-wrapper {
-        position: relative;
-        display: flex;
-        align-items: center;
-        width: 100%;
-      }
-
-      /* 
-        Target the native select provided by the user in the Light DOM.
-        This completely bypasses the browser rendering bug.
-      */
-      ::slotted(select) {
-        appearance: none;
-        -webkit-appearance: none;
-        width: 100%;
-        font-family: inherit;
-        background-color: transparent;
-        border-radius: var(--st-radius-md, 0.5rem);
-        color: var(--st-color-text);
-        cursor: pointer;
-        outline: none;
-        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
-      }
-
-      ::slotted(select:disabled) {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      /* ==========================================================
-         Sizes
-         ========================================================== */
-      :host([size="sm"]) ::slotted(select) {
-        padding: 0.25rem 2rem 0.25rem 0.75rem;
-        font-size: 0.875rem;
-        height: 2rem;
-      }
-      :host([size="md"]) ::slotted(select) {
-        padding: 0.5rem 2.5rem 0.5rem 1rem;
-        font-size: 1rem;
-        height: 2.5rem;
-      }
-      :host([size="lg"]) ::slotted(select) {
-        padding: 0.75rem 3rem 0.75rem 1.25rem;
-        font-size: 1.125rem;
-        height: 3rem;
-      }
-
-      /* Multiple select formatting (No fixed height, no right padding for chevron) */
-      ::slotted(select[multiple]) {
-        height: auto !important;
-        padding-right: 1rem !important;
-      }
-
-      /* ==========================================================
-         Variants & Colors
-         ========================================================== */
-      :host([variant="outline"]) ::slotted(select) {
-        border: 1px solid var(--st-color-border);
-      }
-      :host([variant="outline"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--st-color-primary-rgb, 99, 102, 241), 0.2);
-      }
-
-      :host([variant="filled"]) ::slotted(select) {
-        border: 1px solid transparent;
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.05));
-      }
-      :host([variant="filled"]) ::slotted(select:not(:disabled):hover) {
-        background-color: var(--st-color-surface-active, rgba(0, 0, 0, 0.1));
-      }
-      :host([variant="filled"][color="default"]) ::slotted(select:focus-visible) {
-        border-color: var(--st-color-primary);
-        background-color: transparent;
-      }
-
-      /* Error Color State */
-      :host([color="error"]) ::slotted(select) {
-        border-color: var(--st-color-error, #ef4444);
-      }
-      :host([color="error"]) ::slotted(select:focus-visible) {
-        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
-      }
-
-      /* Primary Color State */
-      :host([color="primary"]) ::slotted(select) {
-        border-color: var(--st-color-primary);
-      }
-
-      /* ==========================================================
-         Chevron Icon
-         ========================================================== */
-      .chevron {
-        position: absolute;
-        right: 0.75rem;
-        width: 1.25rem;
-        height: 1.25rem;
-        pointer-events: none;
-        color: var(--st-color-text-muted);
-        transition: transform 0.2s ease, color 0.2s ease;
-      }
-
-      /* Animate chevron when the wrapper detects focus */
-      :host([focused]) .chevron {
-        transform: rotate(180deg);
-        color: var(--st-color-primary);
-      }
-
-      /* Hide chevron if the user slots a native multiple select */
-      ::slotted(select[multiple]) ~ .chevron {
-        display: none;
-      }
-    `
-];
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "variant", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], StSelect.prototype, "color", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], StSelect.prototype, "focused", void 0);
-StSelect = __decorate([
-    customElement('st-select')
-], StSelect);
-export { StSelect };

package/dist/components/skeleton/skeleton.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-export declare class StSkeleton extends LitElement {
-    /** Variant shape: 'text' | 'circular' | 'rectangular' */
-    variant: 'text' | 'circular' | 'rectangular';
-    /** Custom width override (e.g., '200px', '50%') */
-    width: string;
-    /** Custom height override (e.g., '40px', '1rem') */
-    height: string;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'st-skeleton': StSkeleton;
-    }
-}
-//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACxC,yDAAyD;IAC7B,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IAElF,mDAAmD;IACvB,KAAK,SAAM;IAEvC,oDAAoD;IACxB,MAAM,SAAM;IAExC,MAAM,CAAC,MAAM,4BAqCX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/skeleton/skeleton.js

@@ -1,78 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-let StSkeleton = class StSkeleton extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Variant shape: 'text' | 'circular' | 'rectangular' */
-        this.variant = 'text';
-        /** Custom width override (e.g., '200px', '50%') */
-        this.width = '';
-        /** Custom height override (e.g., '40px', '1rem') */
-        this.height = '';
-    }
-    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>`;
-    }
-};
-StSkeleton.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; }
-      }
-    `
-];
-__decorate([
-    property({ type: String })
-], StSkeleton.prototype, "variant", void 0);
-__decorate([
-    property({ type: String })
-], StSkeleton.prototype, "width", void 0);
-__decorate([
-    property({ type: String })
-], StSkeleton.prototype, "height", void 0);
-StSkeleton = __decorate([
-    customElement('st-skeleton')
-], StSkeleton);
-export { StSkeleton };