@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/cta/cta.js

@@ -0,0 +1,64 @@
+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, state } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+/**
+ * A closing call to action: one clear message and the buttons that act on it. Highlighted in the
+ * accent colour by default; set `tone` to change that.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, `actions` (buttons) and the default slot for a short note
+ * under the buttons.
+ */
+let StCta = class StCta extends StSection {
+    constructor() {
+        super();
+        this._hasActions = false;
+        this.tone = "accent";
+        this.width = "md";
+    }
+    render() {
+        return this.frame(html `
+        <div class="actions" ?hidden=${!this._hasActions}>
+          <slot
+            name="actions"
+            @slotchange=${(e) => (this._hasActions = e.target.assignedNodes().length > 0)}
+          ></slot>
+        </div>
+        <div class="note"><slot></slot></div>
+      `);
+    }
+};
+StCta.styles = [
+    ...StSection.styles,
+    css `
+      .header {
+        margin-bottom: var(--st-spacing-lg);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+        justify-content: center;
+      }
+
+      .note {
+        margin-top: var(--st-spacing-md);
+        text-align: center;
+        font-size: var(--st-font-size-sm);
+      }
+    `,
+];
+__decorate([
+    state()
+], StCta.prototype, "_hasActions", void 0);
+StCta = __decorate([
+    customElement("st-cta")
+], StCta);
+export { StCta };
+//# sourceMappingURL=cta.js.map

package/dist/components/cta/cta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cta.js","sourceRoot":"","sources":["../../../src/components/cta/cta.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;GAMG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,SAAS;IAGlC;QACE,KAAK,EAAE,CAAC;QAHO,gBAAW,GAAG,KAAK,CAAC;QAInC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAwBD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA;uCAC6B,CAAC,IAAI,CAAC,WAAW;;;0BAG9B,CAAC,CAAQ,EAAE,EAAE,CACzB,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;;OAIpF,CACF,CAAC;IACJ,CAAC;CACF,CAAA;AApCQ,YAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;CACF,AApBY,CAoBX;AA5Be;IAAhB,KAAK,EAAE;0CAA6B;AAD1B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CA6CjB"}

package/dist/components/drawer/drawer.js

@@ -141,7 +141,7 @@ StDrawer.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: flex;
@@ -166,7 +166,7 @@ StDrawer.styles = [
         bottom: 0;
         width: var(--st-drawer-width, 320px);
         max-width: 90vw;
-        background-color: var(--st-color-surface, #ffffff);
+        background-color: var(--st-color-surface);
         display: flex;
         flex-direction: column;
         z-index: 1001;
@@ -183,7 +183,7 @@ StDrawer.styles = [
 
       :host([open]) .panel {
         visibility: visible;
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+        box-shadow: var(--st-shadow-drawer);
       }
 
       /* Slide from Left */
@@ -209,7 +209,7 @@ StDrawer.styles = [
         align-items: center;
         justify-content: space-between;
         padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 1px solid var(--st-color-border, #e2e8f0);
+        border-bottom: 1px solid var(--st-color-border);
       }
 
       .title {
@@ -229,12 +229,12 @@ StDrawer.styles = [
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
       }
 
       .close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .close-btn svg {

package/dist/components/faq/faq-item.d.ts

@@ -0,0 +1,22 @@
+import { StRowItem } from "../section/row-item.js";
+import "../icon/icon.js";
+/**
+ * One question and answer inside `st-faq`. It is a native disclosure (`details`), so it works
+ * without JavaScript, is announced correctly by screen readers, and the answer stays in the page
+ * for search engines even while closed.
+ *
+ * Slots: `question` (a real heading such as `<h3>` is best) and the default slot for the answer.
+ */
+export declare class StFaqItem extends StRowItem {
+    /** Whether the answer is showing. */
+    open: boolean;
+    static styles: import("lit").CSSResult[];
+    private _onToggle;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-faq-item": StFaqItem;
+    }
+}
+//# sourceMappingURL=faq-item.d.ts.map

package/dist/components/faq/faq-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq-item.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAEzB;;;;;;GAMG;AACH,qBACa,SAAU,SAAQ,SAAS;IACtC,qCAAqC;IACK,IAAI,UAAS;IAEvD,MAAM,CAAC,MAAM,4BAmEX;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,MAAM,sCAUL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/faq/faq-item.js

@@ -0,0 +1,117 @@
+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, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { StRowItem } from "../section/row-item.js";
+import "../icon/icon.js";
+/**
+ * One question and answer inside `st-faq`. It is a native disclosure (`details`), so it works
+ * without JavaScript, is announced correctly by screen readers, and the answer stays in the page
+ * for search engines even while closed.
+ *
+ * Slots: `question` (a real heading such as `<h3>` is best) and the default slot for the answer.
+ */
+let StFaqItem = class StFaqItem extends StRowItem {
+    constructor() {
+        super(...arguments);
+        /** Whether the answer is showing. */
+        this.open = false;
+        this._onToggle = (e) => {
+            const open = e.target.open;
+            if (open !== this.open)
+                this.open = open;
+        };
+    }
+    render() {
+        return this.frame(html `
+      <details ?open=${this.open} @toggle=${this._onToggle}>
+        <summary>
+          <slot name="question"></slot>
+          <st-icon name="chevron-down" aria-hidden="true"></st-icon>
+        </summary>
+        <div class="answer"><slot></slot></div>
+      </details>
+    `);
+    }
+};
+StFaqItem.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      details {
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-radius: var(--st-radius-md);
+        cursor: pointer;
+        list-style: none;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      summary:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      summary st-icon {
+        flex-shrink: 0;
+        transition: transform 0.2s ease;
+      }
+
+      details[open] summary st-icon {
+        transform: rotate(180deg);
+      }
+
+      ::slotted([slot="question"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-lg) !important;
+      }
+
+      /* Closed details already hide this natively; saying so keeps every browser consistent. */
+      details:not([open]) .answer {
+        display: none;
+      }
+
+      .answer {
+        padding: 0 var(--st-spacing-lg) var(--st-spacing-lg);
+        color: var(--st-color-text-muted);
+      }
+
+      .answer ::slotted(*) {
+        margin: 0 0 var(--st-spacing-sm);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        summary st-icon {
+          transition: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StFaqItem.prototype, "open", void 0);
+StFaqItem = __decorate([
+    customElement("st-faq-item")
+], StFaqItem);
+export { StFaqItem };
+//# sourceMappingURL=faq-item.js.map

package/dist/components/faq/faq-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq-item.js","sourceRoot":"","sources":["../../../src/components/faq/faq-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AACjD,OAAO,iBAAiB,CAAC;AAEzB;;;;;;GAMG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QACL,qCAAqC;QACK,SAAI,GAAG,KAAK,CAAC;QAuE/C,cAAS,GAAG,CAAC,CAAQ,EAAE,EAAE;YAC/B,MAAM,IAAI,GAAI,CAAC,CAAC,MAA6B,CAAC,IAAI,CAAC;YACnD,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,CAAC,CAAC;IAaJ,CAAC;IAXC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;uBACH,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,SAAS;;;;;;;KAOrD,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AArFQ,gBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEF;CACF,AAnEY,CAmEX;AArEwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAc;AAF5C,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAyFrB"}

package/dist/components/faq/faq.d.ts

@@ -0,0 +1,18 @@
+import { StSection } from "../section/section.js";
+import "./faq-item.js";
+/**
+ * Frequently asked questions: a header and a stack of `st-faq-item` disclosures.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-faq-item` items.
+ */
+export declare class StFaq extends StSection {
+    constructor();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-faq": StFaq;
+    }
+}
+//# sourceMappingURL=faq.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"faq.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AACH,qBACa,KAAM,SAAQ,SAAS;IAClC,cAGC;IAED,MAAM,CAAC,MAAM,4BAQX;IAEF,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/faq/faq.js

@@ -0,0 +1,38 @@
+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";
+import "./faq-item.js";
+/**
+ * Frequently asked questions: a header and a stack of `st-faq-item` disclosures.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-faq-item` items.
+ */
+let StFaq = class StFaq extends StSection {
+    constructor() {
+        super();
+        this.width = "md";
+    }
+    render() {
+        return this.frame(html `<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StFaq.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        display: grid;
+        gap: var(--st-spacing-md);
+      }
+    `,
+];
+StFaq = __decorate([
+    customElement("st-faq")
+], StFaq);
+export { StFaq };
+//# sourceMappingURL=faq.js.map

package/dist/components/faq/faq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"faq.js","sourceRoot":"","sources":["../../../src/components/faq/faq.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;AAChD,OAAO,eAAe,CAAC;AAEvB;;;;GAIG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,SAAS;IAClC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAYD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA,wCAAwC,IAAI,CAAC,cAAc,gBAAgB,EAC/E,EAAC,QAAQ,EAAE,KAAK,EAAC,CAClB,CAAC;IACJ,CAAC;CACF,CAAA;AAhBQ,YAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;KAKF;CACF,AARY,CAQX;AAdS,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAsBjB"}

package/dist/components/feature-grid/feature-grid.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from "lit";
+import { StSection } from "../section/section.js";
+import "./feature.js";
+/**
+ * A row of features: a header and a grid of `st-feature` cards. The grid fits as many columns as
+ * the screen allows, up to `columns`, and each card animates in after the one before it.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-feature` items.
+ */
+export declare class StFeatureGrid extends StSection {
+    /** The most columns to use on wide screens (fewer fit on narrow ones). */
+    columns: number;
+    static styles: import("lit").CSSResult[];
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-feature-grid": StFeatureGrid;
+    }
+}
+//# sourceMappingURL=feature-grid.d.ts.map

package/dist/components/feature-grid/feature-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-grid.d.ts","sourceRoot":"","sources":["../../../src/components/feature-grid/feature-grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,KAAK,CAAC;AAE9C,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,cAAc,CAAC;AAEtB;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,SAAS;IAC1C,0EAA0E;IAChD,OAAO,SAAK;IAEtC,MAAM,CAAC,MAAM,4BAcX;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAK9C;IAED,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/feature-grid/feature-grid.js

@@ -0,0 +1,55 @@
+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, property } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+import "./feature.js";
+/**
+ * A row of features: a header and a grid of `st-feature` cards. The grid fits as many columns as
+ * the screen allows, up to `columns`, and each card animates in after the one before it.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-feature` items.
+ */
+let StFeatureGrid = class StFeatureGrid extends StSection {
+    constructor() {
+        super(...arguments);
+        /** The most columns to use on wide screens (fewer fit on narrow ones). */
+        this.columns = 3;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.renderRoot
+            .querySelector(".items")
+            ?.style.setProperty("--_columns", String(Math.max(1, this.columns)));
+    }
+    render() {
+        return this.frame(html `<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StFeatureGrid.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        --_columns: 3;
+        --_gap: var(--st-spacing-lg);
+        display: grid;
+        gap: var(--_gap);
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(max(14rem, calc((100% - (var(--_columns) - 1) * var(--_gap)) / var(--_columns))), 1fr)
+        );
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], StFeatureGrid.prototype, "columns", void 0);
+StFeatureGrid = __decorate([
+    customElement("st-feature-grid")
+], StFeatureGrid);
+export { StFeatureGrid };
+//# sourceMappingURL=feature-grid.js.map

package/dist/components/feature-grid/feature-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-grid.js","sourceRoot":"","sources":["../../../src/components/feature-grid/feature-grid.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,cAAc,CAAC;AAEtB;;;;;GAKG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,SAAS;IAArC;;QACL,0EAA0E;QAChD,YAAO,GAAG,CAAC,CAAC;IA+BxC,CAAC;IAbW,OAAO,CAAC,OAA6B;QAC7C,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,CAAC,UAAU;aACZ,aAAa,CAAc,QAAQ,CAAC;YACrC,EAAE,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IACzE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA,wCAAwC,IAAI,CAAC,cAAc,gBAAgB,EAC/E,EAAC,QAAQ,EAAE,KAAK,EAAC,CAClB,CAAC;IACJ,CAAC;CACF,CAAA;AA7BQ,oBAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcX;AAhBwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAa;AAF3B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAiCzB"}

package/dist/components/feature-grid/feature.d.ts

@@ -0,0 +1,18 @@
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One feature inside `st-feature-grid`: an icon, a title and a short description.
+ *
+ * Slots: `icon` (an `st-icon` or an inline svg), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+export declare class StFeature extends StRowItem {
+    private _hasIcon;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-feature": StFeature;
+    }
+}
+//# sourceMappingURL=feature.d.ts.map

package/dist/components/feature-grid/feature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.d.ts","sourceRoot":"","sources":["../../../src/components/feature-grid/feature.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AACH,qBACa,SAAU,SAAQ,SAAS;IAC7B,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,sCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/feature-grid/feature.js

@@ -0,0 +1,91 @@
+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, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One feature inside `st-feature-grid`: an icon, a title and a short description.
+ *
+ * Slots: `icon` (an `st-icon` or an inline svg), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+let StFeature = class StFeature extends StRowItem {
+    constructor() {
+        super(...arguments);
+        this._hasIcon = false;
+    }
+    render() {
+        return this.frame(html `
+      <div class="card">
+        <div class="icon" ?hidden=${!this._hasIcon}>
+          <slot
+            name="icon"
+            @slotchange=${(e) => (this._hasIcon = e.target.assignedNodes().length > 0)}
+          ></slot>
+        </div>
+        <slot name="title"></slot>
+        <div class="body"><slot></slot></div>
+      </div>
+    `);
+    }
+};
+StFeature.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      .card {
+        display: grid;
+        align-content: start;
+        gap: var(--st-spacing-sm);
+        height: 100%;
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      .icon {
+        display: inline-flex;
+        width: 2.75rem;
+        height: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+      }
+
+      .icon[hidden] {
+        display: none;
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0;
+      }
+    `,
+];
+__decorate([
+    state()
+], StFeature.prototype, "_hasIcon", void 0);
+StFeature = __decorate([
+    customElement("st-feature")
+], StFeature);
+export { StFeature };
+//# sourceMappingURL=feature.js.map

package/dist/components/feature-grid/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature.js","sourceRoot":"","sources":["../../../src/components/feature-grid/feature.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QACY,aAAQ,GAAG,KAAK,CAAC;IAgEpC,CAAC;IAdC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;oCAEU,CAAC,IAAI,CAAC,QAAQ;;;0BAGxB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;;;;KAM7G,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA9DQ,gBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;CACF,AA9CY,CA8CX;AAhDe;IAAhB,KAAK,EAAE;2CAA0B;AADvB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiErB"}

package/dist/components/field/field.js

@@ -18,9 +18,9 @@ StField.styles = [
       :host {
         display: flex;
         flex-direction: column;
-        gap: var(--st-spacing-xs, 0.25rem);
+        gap: var(--st-spacing-xs);
         width: 100%;
-        margin-bottom: var(--st-spacing-md, 1rem);
+        margin-bottom: var(--st-spacing-md);
       }
     `,
 ];

package/dist/components/footer/footer.js

@@ -39,7 +39,7 @@ StFooter.styles = [
         display: block;
         border-top: 1px solid var(--st-color-border);
         background-color: var(--st-color-surface);
-        padding: var(--st-spacing-lg, 2rem) 0;
+        padding: var(--st-spacing-lg) 0;
         margin-top: auto;
       }
 
@@ -48,17 +48,17 @@ StFooter.styles = [
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: var(--st-spacing-md, 1rem);
+        gap: var(--st-spacing-md);
         max-width: 1200px;
         margin: 0 auto;
-        padding: 0 var(--st-spacing-md, 1rem);
+        padding: 0 var(--st-spacing-md);
         color: var(--st-color-text-muted);
         font-size: 0.875rem;
       }
 
       .links {
         display: flex;
-        gap: var(--st-spacing-md, 1rem);
+        gap: var(--st-spacing-md);
         flex-wrap: wrap;
         justify-content: center;
       }

package/dist/components/form/form-reset.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns every form and field inside `root` to its starting state: values go back to what the
+ * markup says, errors are cleared, and `st-form`s return to their first step. Works on Sondor
+ * fields, plain HTML controls and forms, so a modal or panel can be wiped before it is used again.
+ */
+export declare function resetFormState(root: ParentNode): void;
+//# sourceMappingURL=form-reset.d.ts.map

package/dist/components/form/form-reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-reset.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-reset.ts"],"names":[],"mappings":"AA0BA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAarD"}

package/dist/components/form/form-reset.js

@@ -0,0 +1,47 @@
+/** Clears a field's error state: resetting its value should not leave it looking wrong. */
+function clearValidation(el) {
+    if (typeof el.invalid === "boolean")
+        el.invalid = false;
+    if (typeof el.error === "string")
+        el.error = "";
+}
+/** Puts a plain HTML control back to the value written in the markup. */
+function resetNative(el) {
+    if (el instanceof HTMLInputElement) {
+        if (el.type === "checkbox" || el.type === "radio")
+            el.checked = el.defaultChecked;
+        else if (el.type === "file")
+            el.value = "";
+        else
+            el.value = el.defaultValue;
+    }
+    else if (el instanceof HTMLTextAreaElement) {
+        el.value = el.defaultValue;
+    }
+    else if (el instanceof HTMLSelectElement) {
+        Array.from(el.options).forEach((option) => (option.selected = option.defaultSelected));
+    }
+}
+/**
+ * Returns every form and field inside `root` to its starting state: values go back to what the
+ * markup says, errors are cleared, and `st-form`s return to their first step. Works on Sondor
+ * fields, plain HTML controls and forms, so a modal or panel can be wiped before it is used again.
+ */
+export function resetFormState(root) {
+    for (const el of Array.from(root.querySelectorAll("*"))) {
+        if (el instanceof HTMLFormElement) {
+            el.reset();
+        }
+        else if (el.localName === "st-form") {
+            el.reset?.();
+        }
+        else if (typeof el.formResetCallback === "function") {
+            el.formResetCallback();
+            clearValidation(el);
+        }
+        else {
+            resetNative(el);
+        }
+    }
+}
+//# sourceMappingURL=form-reset.js.map

package/dist/components/form/form-reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-reset.js","sourceRoot":"","sources":["../../../src/components/form/form-reset.ts"],"names":[],"mappings":"AAOA,2FAA2F;AAC3F,SAAS,eAAe,CAAC,EAAc;IACrC,IAAI,OAAO,EAAE,CAAC,OAAO,KAAK,SAAS;QAAE,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;IACxD,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,QAAQ;QAAE,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC;AAClD,CAAC;AAED,yEAAyE;AACzE,SAAS,WAAW,CAAC,EAAW;IAC9B,IAAI,EAAE,YAAY,gBAAgB,EAAE,CAAC;QACnC,IAAI,EAAE,CAAC,IAAI,KAAK,UAAU,IAAI,EAAE,CAAC,IAAI,KAAK,OAAO;YAAE,EAAE,CAAC,OAAO,GAAG,EAAE,CAAC,cAAc,CAAC;aAC7E,IAAI,EAAE,CAAC,IAAI,KAAK,MAAM;YAAE,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC;;YACtC,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC;IAClC,CAAC;SAAM,IAAI,EAAE,YAAY,mBAAmB,EAAE,CAAC;QAC7C,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,YAAY,CAAC;IAC7B,CAAC;SAAM,IAAI,EAAE,YAAY,iBAAiB,EAAE,CAAC;QAC3C,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IACzF,CAAC;AACH,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,IAAgB;IAC7C,KAAK,MAAM,EAAE,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAa,GAAG,CAAC,CAAC,EAAE,CAAC;QACpE,IAAI,EAAE,YAAY,eAAe,EAAE,CAAC;YAClC,EAAE,CAAC,KAAK,EAAE,CAAC;QACb,CAAC;aAAM,IAAI,EAAE,CAAC,SAAS,KAAK,SAAS,EAAE,CAAC;YACtC,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC;QACf,CAAC;aAAM,IAAI,OAAO,EAAE,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;YACtD,EAAE,CAAC,iBAAiB,EAAE,CAAC;YACvB,eAAe,CAAC,EAAE,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/components/form/form.d.ts

@@ -16,6 +16,11 @@ export declare class StForm extends LitElement {
     updated(changedProperties: PropertyValues<this>): void;
     private _handleGlobalKeyDown;
     private _updateModalFooter;
+    /**
+     * Clears everything entered: fields return to their starting values, errors are cleared, the
+     * form goes back to its first step and stops loading.
+     */
+    reset(): void;
     private _handleSlotChange;
     private _updateStepVisibility;
     private _validateCurrentContext;