@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/list/list.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, nothing, isServer } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
+import "./list-item.js";
+import "../skeleton/skeleton.js";
+const SKELETON_ITEMS = 3;
+/**
+ * Vertical listing of rows with a heading, description, meta and optional leading visual.
+ * Give it `items` for data-driven lists, or slot your own `st-list-item` elements.
+ *
+ * Events: `st-item-click` (detail: `{ item, index, value, href }`; `item` and `index` are
+ * only present for rows created from `items`).
+ */
+let StList = class StList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        /** Accessible name for the list. */
+        this.label = "";
+        this.dense = false;
+        /** Draws an outer border with rounded corners. */
+        this.bordered = false;
+        this.noDividers = false;
+        /** Rows from `items` without an `href` become buttons that emit `st-item-click`. */
+        this.clickableItems = false;
+        this.loading = false;
+        this.emptyText = "Nothing to show.";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "list");
+    }
+    updated() {
+        if (this.label)
+            this.setAttribute("aria-label", this.label);
+        else
+            this.removeAttribute("aria-label");
+        this.setAttribute("aria-busy", this.loading ? "true" : "false");
+    }
+    _onItemClick(e, item, index) {
+        // Re-emit with the source data so consumers don't have to map values back to rows.
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent("st-item-click", {
+            detail: { item, index, value: e.detail.value, href: e.detail.href },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _renderItems() {
+        if (this.loading) {
+            return Array.from({ length: SKELETON_ITEMS }, () => html `
+          <div role="listitem" class="skeleton-row">
+            <st-skeleton variant="text" width="50%"></st-skeleton>
+            <st-skeleton variant="text" width="80%"></st-skeleton>
+          </div>
+        `);
+        }
+        return this.items.map((item, index) => html `
+        <st-list-item
+          heading=${item.heading}
+          description=${ifDefined(item.description)}
+          meta=${ifDefined(item.meta)}
+          icon=${ifDefined(item.icon)}
+          avatar=${ifDefined(item.avatar)}
+          href=${ifDefined(item.href)}
+          value=${item.value ?? String(index)}
+          ?selected=${item.selected}
+          ?disabled=${item.disabled}
+          ?interactive=${item.interactive ?? (this.clickableItems && !item.href)}
+          @st-item-click=${(e) => this._onItemClick(e, item, index)}
+        ></st-list-item>
+      `);
+    }
+    render() {
+        const showEmpty = !this.loading && this.items.length === 0;
+        return html `
+      ${this._renderItems()}
+      <slot @slotchange=${() => this.requestUpdate()}></slot>
+      ${showEmpty && !this._hasSlotted()
+            ? html `<div class="empty" role="listitem">${this.emptyText}</div>`
+            : nothing}
+    `;
+    }
+    _hasSlotted() {
+        if (isServer)
+            return true; // slotted items cannot be inspected while server rendering
+        return this.querySelector("st-list-item") !== null;
+    }
+};
+StList.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        --st-list-divider: var(--st-color-border);
+      }
+
+      :host([dense]) {
+        --st-list-item-padding-y: var(--st-spacing-xs);
+      }
+
+      :host([no-dividers]) {
+        --st-list-divider: transparent;
+      }
+
+      :host([bordered]) {
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        overflow: hidden;
+      }
+
+      .empty {
+        padding: var(--st-spacing-xl);
+        text-align: center;
+        font-style: italic;
+        color: var(--st-color-text-muted);
+      }
+
+      .skeleton-row {
+        padding: var(--st-spacing-md);
+      }
+    `,
+];
+__decorate([
+    property({ type: Array })
+], StList.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], StList.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StList.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StList.prototype, "bordered", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "no-dividers" })
+], StList.prototype, "noDividers", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "clickable-items" })
+], StList.prototype, "clickableItems", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StList.prototype, "loading", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], StList.prototype, "emptyText", void 0);
+StList = __decorate([
+    customElement("st-list")
+], StList);
+export { StList };
+//# sourceMappingURL=list.js.map

package/dist/components/list/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AAiBjC,MAAM,cAAc,GAAG,CAAC,CAAC;AAEzB;;;;;;GAMG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QACoB,UAAK,GAAmB,EAAE,CAAC;QACpD,oCAAoC;QACV,UAAK,GAAG,EAAE,CAAC;QACK,UAAK,GAAG,KAAK,CAAC;QACxD,kDAAkD;QACR,aAAQ,GAAG,KAAK,CAAC;QACS,eAAU,GAAG,KAAK,CAAC;QACvF,oFAAoF;QAC3B,mBAAc,GAAG,KAAK,CAAC;QACtC,YAAO,GAAG,KAAK,CAAC;QACP,cAAS,GAAG,kBAAkB,CAAC;IA2GpF,CAAC;IArEC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpE,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;YACvD,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;IAEO,YAAY,CAAC,CAA8C,EAAE,IAAkB,EAAE,KAAa;QACpG,mFAAmF;QACnF,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,EAAC;YACjE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,KAAK,CAAC,IAAI,CACf,EAAC,MAAM,EAAE,cAAc,EAAC,EACxB,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;SAKT,CACF,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CACnB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;oBAEP,IAAI,CAAC,OAAO;wBACR,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;iBAClC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACpB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;mBAClB,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;iBACxB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACnB,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC;sBACvB,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;2BACrD,CAAC,CAAc,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC;;OAEzE,CACF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;QAC3D,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;0BACD,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;QAC5C,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAChC,CAAC,CAAC,IAAI,CAAA,sCAAsC,IAAI,CAAC,SAAS,QAAQ;YAClE,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,QAAQ;YAAE,OAAO,IAAI,CAAC,CAAC,2DAA2D;QACtF,OAAO,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACrD,CAAC;CACF,CAAA;AAzGQ,aAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;CACF,AAlCY,CAkCX;AA9CuB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;qCAA4B;AAE1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;qCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAe;AAEd;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAkB;AACS;IAAnE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;0CAAoB;AAE9B;IAAxD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAC,CAAC;8CAAwB;AACtC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAiB;AACP;IAAlD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;yCAAgC;AAXvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAsHlB"}

package/dist/components/logo-cloud/logo-cloud.d.ts

@@ -0,0 +1,19 @@
+import { StSection } from "../section/section.js";
+/**
+ * A row of logos (customers, partners, technologies). Slot images, inline svgs or links wrapping
+ * them; each is sized to the same height and softened until hovered.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the logos. Give every logo
+ * meaningful `alt` text.
+ */
+export declare class StLogoCloud extends StSection {
+    constructor();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-logo-cloud": StLogoCloud;
+    }
+}
+//# sourceMappingURL=logo-cloud.d.ts.map

package/dist/components/logo-cloud/logo-cloud.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-cloud.d.ts","sourceRoot":"","sources":["../../../src/components/logo-cloud/logo-cloud.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;GAMG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,cAGC;IAED,MAAM,CAAC,MAAM,4BAmCX;IAEF,MAAM,sCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/logo-cloud/logo-cloud.js

@@ -0,0 +1,66 @@
+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 { html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+/**
+ * A row of logos (customers, partners, technologies). Slot images, inline svgs or links wrapping
+ * them; each is sized to the same height and softened until hovered.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the logos. Give every logo
+ * meaningful `alt` text.
+ */
+let StLogoCloud = class StLogoCloud extends StSection {
+    constructor() {
+        super();
+        this.space = "sm";
+    }
+    render() {
+        return this.frame(html `<div class="logos"><slot></slot></div>`);
+    }
+};
+StLogoCloud.styles = [
+    ...StSection.styles,
+    css `
+      .logos {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--st-spacing-xl) var(--st-spacing-2xl);
+      }
+
+      .logos ::slotted(*) {
+        width: auto;
+        max-width: 9rem;
+        height: var(--st-logo-cloud-height, 2.25rem);
+        object-fit: contain;
+        opacity: 0.7;
+        filter: grayscale(1);
+        transition:
+          opacity 0.2s ease,
+          filter 0.2s ease;
+      }
+
+      .logos ::slotted(*:hover),
+      .logos ::slotted(*:focus-visible) {
+        opacity: 1;
+        filter: none;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .logos ::slotted(*) {
+          transition: none;
+        }
+      }
+    `,
+];
+StLogoCloud = __decorate([
+    customElement("st-logo-cloud")
+], StLogoCloud);
+export { StLogoCloud };
+//# sourceMappingURL=logo-cloud.js.map

package/dist/components/logo-cloud/logo-cloud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo-cloud.js","sourceRoot":"","sources":["../../../src/components/logo-cloud/logo-cloud.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;GAMG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IACxC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAuCD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA,wCAAwC,CAAC,CAAC;IAClE,CAAC;CACF,CAAA;AAxCQ,kBAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;CACF,AAnCY,CAmCX;AAzCS,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA8CvB"}

package/dist/components/modal/modal.d.ts

@@ -4,11 +4,23 @@ export declare class StModal extends LitElement {
     heading: string;
     size: "sm" | "md" | "lg" | "xl" | "xxl";
     static: boolean;
+    /**
+     * By default closing the modal resets what is inside it: forms and fields go back to their
+     * starting values, errors clear and multi-step forms return to step one, so it opens fresh next
+     * time. Set this to keep what was entered between openings.
+     */
+    preserveState: boolean;
     private dialogEl;
     private isClosing;
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues<this>): void;
     private closeWithAnimation;
+    /**
+     * Returns the content to its starting state: forms and fields are reset, errors cleared and the
+     * body scrolled back to the top. Happens automatically on close unless `preserve-state` is set.
+     * Fires `st-reset` afterwards so your own state (in a framework, say) can be cleared too.
+     */
+    reset(): void;
     private handleClose;
     private handleCancel;
     private onDialogClose;

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAInE,qBACa,OAAQ,SAAQ,UAAU;IACK,IAAI,UAAS;IAC7B,OAAO,SAAM;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAC9C,MAAM,UAAS;IAEzB,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAiJX;IAGO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAcvD;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA2CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAQnE,qBACa,OAAQ,SAAQ,UAAU;IACK,IAAI,UAAS;IAC7B,OAAO,SAAM;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAC9C,MAAM,UAAS;IAC1C;;;;OAIG;IACqD,aAAa,UAAS;IAE7D,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BA+IX;IAGO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAcvD;IAED,OAAO,CAAC,kBAAkB;IAwB1B;;;;OAIG;IACH,KAAK,SAIJ;IAED,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA2CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/modal/modal.js

@@ -7,6 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { resetStyles } from "../../styles/reset.js";
+import { resetFormState } from "../form/form-reset.js";
+/** Longest we wait for the close animation before closing anyway. */
+const CLOSE_FALLBACK_MS = 400;
 let StModal = class StModal extends LitElement {
     constructor() {
         super(...arguments);
@@ -14,6 +17,12 @@ let StModal = class StModal extends LitElement {
         this.heading = "";
         this.size = "md";
         this.static = false;
+        /**
+         * By default closing the modal resets what is inside it: forms and fields go back to their
+         * starting values, errors clear and multi-step forms return to step one, so it opens fresh next
+         * time. Set this to keep what was entered between openings.
+         */
+        this.preserveState = false;
         this.isClosing = false;
     }
     // 🚀 FIX: Typed strictly and calls super
@@ -37,15 +46,34 @@ let StModal = class StModal extends LitElement {
             return;
         this.isClosing = true;
         this.dialogEl.classList.add("closing");
-        const onAnimationEnd = () => {
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            window.clearTimeout(fallback);
             this.dialogEl.classList.remove("closing");
             this.isClosing = false;
             if (!this.open) {
                 this.dialogEl.close();
+                // Reset once it has faded out, so nothing visibly changes as it closes.
+                if (!this.preserveState)
+                    this.reset();
             }
         };
-        // 🚀 FIX: Prevent listener stacking on rapid toggles
-        this.dialogEl.addEventListener("animationend", onAnimationEnd, { once: true });
+        // The animation ending finishes the close; the timer covers it never firing (reduced motion).
+        const fallback = window.setTimeout(finish, CLOSE_FALLBACK_MS);
+        this.dialogEl.addEventListener("animationend", finish, { once: true });
+    }
+    /**
+     * Returns the content to its starting state: forms and fields are reset, errors cleared and the
+     * body scrolled back to the top. Happens automatically on close unless `preserve-state` is set.
+     * Fires `st-reset` afterwards so your own state (in a framework, say) can be cleared too.
+     */
+    reset() {
+        resetFormState(this);
+        this.renderRoot.querySelector(".modal-body")?.scrollTo({ top: 0 });
+        this.dispatchEvent(new CustomEvent("st-reset", { bubbles: true, composed: true }));
     }
     handleClose() {
         this.open = false;
@@ -130,16 +158,14 @@ StModal.styles = [
       dialog {
         padding: 0;
         border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-lg, 0.5rem);
+        border-radius: var(--st-radius-lg);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
 
         width: calc(100% - 2rem);
         margin: auto;
 
-        box-shadow:
-          0 20px 25px -5px rgb(0 0 0 / 0.1),
-          0 8px 10px -6px rgb(0 0 0 / 0.1);
+        box-shadow: var(--st-shadow-xl);
         font-family: var(--st-font-family, inherit);
       }
 
@@ -160,7 +186,7 @@ StModal.styles = [
       }
 
       dialog::backdrop {
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--st-color-overlay);
         backdrop-filter: blur(2px);
       }
 
@@ -246,12 +272,12 @@ StModal.styles = [
 
       .close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .modal-body {
         padding: var(--st-spacing-lg);
-        font-size: var(--st-font-size-sm, 0.875rem);
+        font-size: var(--st-font-size-sm);
         line-height: 1.5;
       }
 
@@ -262,7 +288,7 @@ StModal.styles = [
         gap: var(--st-spacing-sm);
         padding: var(--st-spacing-md) var(--st-spacing-lg);
         border-top: 1px solid var(--st-color-border);
-        background-color: var(--st-color-surface-muted, #f8fafc);
+        background-color: var(--st-color-surface-muted);
       }
     `,
 ];
@@ -278,6 +304,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], StModal.prototype, "static", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "preserve-state" })
+], StModal.prototype, "preserveState", void 0);
 __decorate([
     query("dialog")
 ], StModal.prototype, "dialogEl", void 0);

package/dist/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"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"}

package/dist/components/page-layout/page-layout.js

@@ -289,9 +289,9 @@ StPageLayout.styles = [
       :host {
         display: block;
         box-sizing: border-box;
-        --layout-bg-color: var(--st-color-bg, #ffffff);
-        --layout-surface-color: var(--st-color-surface, #f8fafc);
-        --layout-border-color: var(--st-color-border, #e2e8f0);
+        --layout-bg-color: var(--st-color-bg);
+        --layout-surface-color: var(--st-color-surface);
+        --layout-border-color: var(--st-color-border);
         --layout-sidebar-width: 16rem;
         --layout-right-sidebar-width: 16rem;
         --layout-main-max-width: none;
@@ -313,7 +313,7 @@ StPageLayout.styles = [
         justify-content: center;
         background: transparent;
         border: 1px solid var(--layout-border-color);
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
         width: 2.25rem;
         height: 2.25rem;
         cursor: pointer;
@@ -347,7 +347,7 @@ StPageLayout.styles = [
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--st-color-overlay);
         backdrop-filter: blur(2px);
         z-index: 1000;
         display: none;
@@ -392,12 +392,12 @@ StPageLayout.styles = [
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
       }
 
       .mobile-close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .mobile-close-btn svg {
@@ -674,7 +674,7 @@ StPageLayout.styles = [
           height: 100vh;
           background: var(--layout-bg-color);
           z-index: 1001;
-          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+          box-shadow: var(--st-shadow-drawer);
           transform: translateX(-100%);
           transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
           display: flex !important;

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+export declare class StPagination extends LitElement {
+    page: number;
+    totalPages: number;
+    static styles: import("lit").CSSResult[];
+    private _go;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-pagination": StPagination;
+    }
+}
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,OAAO,iBAAiB,CAAC;AAEzB,qBACa,YAAa,SAAQ,UAAU;IACD,IAAI,SAAK;IACE,UAAU,SAAK;IAEnE,MAAM,CAAC,MAAM,4BAgDX;IAEF,OAAO,CAAC,GAAG;IASX,MAAM,yCA0CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,126 @@
+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";
+import { buildPages } from "./pagination.utils.js";
+import "../icon/icon.js";
+let StPagination = class StPagination extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.page = 1;
+        this.totalPages = 1;
+    }
+    _go(page) {
+        const next = Math.min(Math.max(page, 1), this.totalPages);
+        if (next === this.page)
+            return;
+        this.page = next;
+        this.dispatchEvent(new CustomEvent("st-page-change", { detail: { page: next }, bubbles: true, composed: true }));
+    }
+    render() {
+        const pages = buildPages(this.page, this.totalPages);
+        return html `
+      <nav aria-label="Pagination">
+        <ul>
+          <li>
+            <button
+              type="button"
+              aria-label="Previous page"
+              ?disabled=${this.page <= 1}
+              @click=${() => this._go(this.page - 1)}
+            >
+              <st-icon name="angle-left" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </li>
+          ${pages.map((p) => p === "…"
+            ? html `<li class="gap" aria-hidden="true">…</li>`
+            : html `<li>
+                  <button
+                    type="button"
+                    aria-label="Page ${p}"
+                    aria-current=${p === this.page ? "page" : "false"}
+                    @click=${() => this._go(p)}
+                  >
+                    ${p}
+                  </button>
+                </li>`)}
+          <li>
+            <button
+              type="button"
+              aria-label="Next page"
+              ?disabled=${this.page >= this.totalPages}
+              @click=${() => this._go(this.page + 1)}
+            >
+              <st-icon name="angle-right" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    `;
+    }
+};
+StPagination.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        list-style: none;
+        align-items: center;
+      }
+      button {
+        min-width: 2.25rem;
+        height: 2.25rem;
+        padding: 0 0.5rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--st-color-border);
+        border-radius: 0.5rem;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        cursor: pointer;
+      }
+      button:hover:not(:disabled):not([aria-current="page"]) {
+        background: var(--st-color-surface-hover);
+      }
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+      button[aria-current="page"] {
+        background: var(--st-color-primary);
+        border-color: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        cursor: default;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .gap {
+        padding: 0 0.25rem;
+        color: var(--st-color-text-muted);
+      }
+    `,
+];
+__decorate([
+    property({ type: Number, reflect: true })
+], StPagination.prototype, "page", void 0);
+__decorate([
+    property({ type: Number, attribute: "total-pages" })
+], StPagination.prototype, "totalPages", void 0);
+StPagination = __decorate([
+    customElement("st-pagination")
+], StPagination);
+export { StPagination };
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAGlB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACoC,SAAI,GAAG,CAAC,CAAC;QACE,eAAU,GAAG,CAAC,CAAC;IAwGrE,CAAC;IApDS,GAAG,CAAC,IAAY;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO;QAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CACzF,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACrD,OAAO,IAAI,CAAA;;;;;;;0BAOW,IAAI,CAAC,IAAI,IAAI,CAAC;uBACjB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;;;;;YAKxC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAChB,CAAC,KAAK,GAAG;YACP,CAAC,CAAC,IAAI,CAAA,2CAA2C;YACjD,CAAC,CAAC,IAAI,CAAA;;;uCAGmB,CAAC;mCACL,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;6BACxC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;;sBAExB,CAAC;;sBAED,CACX;;;;;0BAKe,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU;uBAC/B,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;;;;;;;KAO/C,CAAC;IACJ,CAAC;CACF,CAAA;AAtGQ,mBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6CF;CACF,AAhDY,CAgDX;AAnDuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAU;AACE;IAAnD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;gDAAgB;AAFxD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CA0GxB"}

package/dist/components/pagination/pagination.utils.d.ts

@@ -0,0 +1,3 @@
+/** Builds the visible page list, e.g. [1, "…", 4, 5, 6, "…", 12]. */
+export declare function buildPages(current: number, total: number, siblings?: number): (number | "…")[];
+//# sourceMappingURL=pagination.utils.d.ts.map

package/dist/components/pagination/pagination.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.utils.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,EAAE,CAYzF"}