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

package/dist/components/radio/radio.js

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,161 @@
+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

@@ -0,0 +1,31 @@
+export interface RouteDefinition {
+    component: string;
+    [key: string]: unknown;
+}
+export type RouteConfig = Record<string, RouteDefinition>;
+export interface RouteMatch {
+    path: string;
+    component: string;
+    params: Record<string, string>;
+    definition: RouteDefinition;
+}
+export declare class AppRouter {
+    private _routes;
+    private _initialized;
+    constructor(routes?: RouteConfig);
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes: RouteConfig): void;
+    /**
+     * Programmatically navigate to an internal path.
+     */
+    navigate(path: string): void;
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath: string): RouteMatch | null;
+    private _notify;
+}
+export declare const router: AppRouter;
+//# sourceMappingURL=router.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,UAAU,EAAE,eAAe,CAAC;CAC7B;AASD,qBAAa,SAAS;IACpB,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,YAAY,CAAS;IAE7B,YAAY,MAAM,CAAC,EAAE,WAAW,EA+B/B;IAED;;OAEG;IACI,SAAS,CAAC,MAAM,EAAE,WAAW,QAUnC;IAED;;OAEG;IACI,QAAQ,CAAC,IAAI,EAAE,MAAM,QAG3B;IAED;;OAEG;IACI,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA+BxD;IAED,OAAO,CAAC,OAAO;CAahB;AAGD,eAAO,MAAM,MAAM,WAAkB,CAAC"}

package/dist/components/router/router.js

@@ -0,0 +1,97 @@
+function getRouteWeight(pattern) {
+    const segments = pattern.split('/').filter(Boolean);
+    return segments.reduce((weight, seg) => {
+        return weight + (seg.startsWith(':') ? 1 : 10);
+    }, 0);
+}
+export class AppRouter {
+    constructor(routes) {
+        this._routes = {};
+        this._initialized = false;
+        if (routes) {
+            this.setRoutes(routes);
+        }
+        window.addEventListener('popstate', () => this._notify());
+        document.addEventListener('click', (e) => {
+            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+                return;
+            }
+            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');
+            if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
+                return;
+            }
+            if (href.startsWith('/')) {
+                e.preventDefault();
+                this.navigate(href);
+            }
+        });
+    }
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes) {
+        this._routes = routes;
+        // Trigger initial route resolution once routes are registered
+        if (!this._initialized) {
+            this._initialized = true;
+            setTimeout(() => this._notify(), 0);
+        }
+        else {
+            this._notify();
+        }
+    }
+    /**
+     * Programmatically navigate to an internal path.
+     */
+    navigate(path) {
+        window.history.pushState(null, '', path);
+        this._notify();
+    }
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath) {
+        const sortedRoutes = Object.entries(this._routes).sort(([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA));
+        for (const [pattern, routeDef] of sortedRoutes) {
+            const paramNames = [];
+            const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
+                paramNames.push(paramName);
+                return '([^/]+)';
+            });
+            const regex = new RegExp(`^${regexPath}$`);
+            const match = currentPath.match(regex);
+            if (match) {
+                const params = {};
+                paramNames.forEach((name, index) => {
+                    params[name] = decodeURIComponent(match[index + 1]);
+                });
+                return {
+                    path: currentPath,
+                    component: routeDef.component,
+                    params,
+                    definition: routeDef
+                };
+            }
+        }
+        return null;
+    }
+    _notify() {
+        const currentPath = window.location.pathname;
+        const match = this.matchRoute(currentPath);
+        window.dispatchEvent(new CustomEvent('route-changed', {
+            detail: {
+                path: currentPath,
+                component: match ? match.component : 'not-found-page',
+                params: match ? match.params : {},
+                definition: match ? match.definition : null
+            }
+        }));
+    }
+}
+// Export a singleton instance for standard app-wide use
+export const router = new AppRouter();

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,172 @@
+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 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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class StSkeleton extends LitElement {
+    variant: 'text' | 'circular' | 'rectangular';
+    animation: 'shimmer' | 'pulse' | 'none';
+    width: string;
+    height: string;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    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

@@ -0,0 +1 @@
+{"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;IACG,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IACtD,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IACnE,KAAK,SAAM;IACX,MAAM,SAAM;IAGxC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,QAkBhE;IAED,MAAM,CAAC,MAAM,4BAyFX;IAEF,MAAM,yCAIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}