@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/split/split.js

@@ -0,0 +1,104 @@
+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, state } from "lit/decorators.js";
+import { StSection } from "../section/section.js";
+/**
+ * Text beside an image, video or any other media: the classic "explain one thing" row. The two
+ * columns stack on narrow screens, with the text first. Use `reverse` to swap sides, so a page
+ * of several split rows can alternate.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, the default slot (body text), `actions` (buttons) and
+ * `media`.
+ */
+let StSplit = class StSplit extends StSection {
+    constructor() {
+        super();
+        /** Puts the media on the left on wide screens. */
+        this.reverse = false;
+        this._hasActions = false;
+        this.align = "start";
+    }
+    render() {
+        return this.frame(html `
+        <div class="split">
+          <div class="text">
+            ${this.renderHeader()}
+            ${this.animateIn(html `
+                <div class="body"><slot @slotchange=${this._onItemsChange}></slot></div>
+                <div class="actions" ?hidden=${!this._hasActions}>
+                  <slot
+                    name="actions"
+                    @slotchange=${(e) => (this._hasActions = e.target.assignedNodes().length > 0)}
+                  ></slot>
+                </div>
+              `, 100)}
+          </div>
+          <div class="media">${this.animateIn(html `<slot name="media"></slot>`, 150)}</div>
+        </div>
+      `, { header: false, animated: false });
+    }
+};
+StSplit.styles = [
+    ...StSection.styles,
+    css `
+      .split {
+        display: grid;
+        gap: var(--st-spacing-2xl);
+        align-items: center;
+      }
+
+      @media (min-width: 52rem) {
+        .split {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        :host([reverse]) .media {
+          order: -1;
+        }
+      }
+
+      .text {
+        display: grid;
+        gap: var(--st-spacing-md);
+      }
+
+      .header {
+        margin-bottom: 0;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0 0 var(--st-spacing-md);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+      }
+
+      .media ::slotted(*) {
+        width: 100%;
+        border-radius: var(--st-radius-lg);
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StSplit.prototype, "reverse", void 0);
+__decorate([
+    state()
+], StSplit.prototype, "_hasActions", void 0);
+StSplit = __decorate([
+    customElement("st-split")
+], StSplit);
+export { StSplit };
+//# sourceMappingURL=split.js.map

package/dist/components/split/split.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.js","sourceRoot":"","sources":["../../../src/components/split/split.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAEhD;;;;;;;GAOG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IAMpC;QACE,KAAK,EAAE,CAAC;QANV,kDAAkD;QACR,YAAO,GAAG,KAAK,CAAC;QAEzC,gBAAW,GAAG,KAAK,CAAC;QAInC,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;IACvB,CAAC;IAmDD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CACf,IAAI,CAAA;;;cAGI,IAAI,CAAC,YAAY,EAAE;cACnB,IAAI,CAAC,SAAS,CACd,IAAI,CAAA;sDACoC,IAAI,CAAC,cAAc;+CAC1B,CAAC,IAAI,CAAC,WAAW;;;kCAG9B,CAAC,CAAQ,EAAE,EAAE,CACzB,CAAC,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;eAGpF,EACD,GAAG,CACJ;;+BAEkB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAA,4BAA4B,EAAE,GAAG,CAAC;;OAE7E,EACD,EAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAC,CACjC,CAAC;IACJ,CAAC;CACF,CAAA;AA3EQ,cAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;CACF,AA/CY,CA+CX;AAxDwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiB;AAEzC;IAAhB,KAAK,EAAE;4CAA6B;AAJ1B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAsFnB"}

package/dist/components/stack/stack.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+export declare const stackGaps: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl"];
+export type StackGap = (typeof stackGaps)[number];
+/**
+ * Lays children out in a line with even spacing. Vertical by default; set `direction="row"` for
+ * a horizontal row that wraps on small screens.
+ */
+export declare class StStack extends LitElement {
+    gap: StackGap;
+    direction: "column" | "row";
+    align: "start" | "center" | "end" | "stretch";
+    justify: "start" | "center" | "end" | "between";
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-stack": StStack;
+    }
+}
+//# sourceMappingURL=stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/components/stack/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,eAAO,MAAM,SAAS,YAAI,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC;AAChF,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD;;;GAGG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACI,GAAG,EAAE,QAAQ,CAAQ;IACrB,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IACvC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAC1D,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAW;IAEnG,MAAM,CAAC,MAAM,4BA0DX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/stack/stack.js

@@ -0,0 +1,102 @@
+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";
+export const stackGaps = ["none", "xs", "sm", "md", "lg", "xl", "2xl"];
+/**
+ * Lays children out in a line with even spacing. Vertical by default; set `direction="row"` for
+ * a horizontal row that wraps on small screens.
+ */
+let StStack = class StStack extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.gap = "md";
+        this.direction = "column";
+        this.align = "stretch";
+        this.justify = "start";
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StStack.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: var(--_gap, var(--st-spacing-md));
+        align-items: var(--_align, stretch);
+        justify-content: var(--_justify, flex-start);
+      }
+
+      :host([direction="row"]) {
+        flex-direction: row;
+      }
+
+      :host([gap="none"]) {
+        --_gap: 0;
+      }
+      :host([gap="xs"]) {
+        --_gap: var(--st-spacing-xs);
+      }
+      :host([gap="sm"]) {
+        --_gap: var(--st-spacing-sm);
+      }
+      :host([gap="md"]) {
+        --_gap: var(--st-spacing-md);
+      }
+      :host([gap="lg"]) {
+        --_gap: var(--st-spacing-lg);
+      }
+      :host([gap="xl"]) {
+        --_gap: var(--st-spacing-xl);
+      }
+      :host([gap="2xl"]) {
+        --_gap: var(--st-spacing-2xl);
+      }
+
+      :host([align="start"]) {
+        --_align: flex-start;
+      }
+      :host([align="center"]) {
+        --_align: center;
+      }
+      :host([align="end"]) {
+        --_align: flex-end;
+      }
+
+      :host([justify="center"]) {
+        --_justify: center;
+      }
+      :host([justify="end"]) {
+        --_justify: flex-end;
+      }
+      :host([justify="between"]) {
+        --_justify: space-between;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StStack.prototype, "gap", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StStack.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StStack.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StStack.prototype, "justify", void 0);
+StStack = __decorate([
+    customElement("st-stack")
+], StStack);
+export { StStack };
+//# sourceMappingURL=stack.js.map

package/dist/components/stack/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","sourceRoot":"","sources":["../../../src/components/stack/stack.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;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC;AAGhF;;;GAGG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACoC,QAAG,GAAa,IAAI,CAAC;QACrB,cAAS,GAAqB,QAAQ,CAAC;QACvC,UAAK,GAA2C,SAAS,CAAC;QAC1D,YAAO,GAA2C,OAAO,CAAC;IAiErG,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AA/DQ,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;CACF,AA1DY,CA0DX;AA/DuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAsB;AACrB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAwC;AACvC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAA2D;AAC1D;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAA2D;AAJxF,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqEnB"}

package/dist/components/stat-card/stat-card.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+import "../icon/icon.js";
+import "../skeleton/skeleton.js";
+export type StatTrend = "up" | "down" | "flat";
+/**
+ * KPI card: a label, a headline value and an optional change indicator. Slot a chart such as
+ * `<st-sparkline slot="chart">` for context. Set `interactive` to make it a button that
+ * emits `st-stat-select`, e.g. to drill into a dashboard section.
+ */
+export declare class StStatCard extends LitElement {
+    label: string;
+    value: string;
+    /** Percentage change versus the comparison period (e.g. 12.5 or -3). */
+    delta?: number;
+    deltaLabel: string;
+    /** Set when a decrease is good news (e.g. error rate, latency). */
+    invert: boolean;
+    icon: string;
+    loading: boolean;
+    interactive: boolean;
+    static styles: import("lit").CSSResult[];
+    private get _trend();
+    private get _sentiment();
+    private _select;
+    private _onKeydown;
+    private _renderDelta;
+    render(): import("lit-html").TemplateResult<1>;
+    private get _trendText();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-stat-card": StStatCard;
+    }
+}
+//# sourceMappingURL=stat-card.d.ts.map

package/dist/components/stat-card/stat-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat-card/stat-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGnD,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/C;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACX,KAAK,SAAM;IACrC,wEAAwE;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACW,UAAU,SAAM;IACpE,mEAAmE;IACxC,MAAM,UAAS;IAChB,IAAI,SAAM;IACT,OAAO,UAAS;IACD,WAAW,UAAS;IAE9D,MAAM,CAAC,MAAM,4BAgEX;IAEF,OAAO,KAAK,MAAM,GAGjB;IAED,OAAO,KAAK,UAAU,GAIrB;IAED,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,YAAY;IAgBpB,MAAM,yCAyBL;IAED,OAAO,KAAK,UAAU,GAOrB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/stat-card/stat-card.js

@@ -0,0 +1,199 @@
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../skeleton/skeleton.js";
+/**
+ * KPI card: a label, a headline value and an optional change indicator. Slot a chart such as
+ * `<st-sparkline slot="chart">` for context. Set `interactive` to make it a button that
+ * emits `st-stat-select`, e.g. to drill into a dashboard section.
+ */
+let StStatCard = class StStatCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "";
+        this.value = "";
+        this.deltaLabel = "";
+        /** Set when a decrease is good news (e.g. error rate, latency). */
+        this.invert = false;
+        this.icon = "";
+        this.loading = false;
+        this.interactive = false;
+    }
+    get _trend() {
+        if (this.delta === undefined || this.delta === 0 || Number.isNaN(this.delta))
+            return "flat";
+        return this.delta > 0 ? "up" : "down";
+    }
+    get _sentiment() {
+        const trend = this._trend;
+        if (trend === "flat")
+            return "neutral";
+        return (trend === "up") !== this.invert ? "good" : "bad";
+    }
+    _select() {
+        if (!this.interactive)
+            return;
+        this.dispatchEvent(new CustomEvent("st-stat-select", {
+            detail: { label: this.label, value: this.value, delta: this.delta },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _onKeydown(e) {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this._select();
+        }
+    }
+    _renderDelta() {
+        if (this.delta === undefined)
+            return nothing;
+        const trend = this._trend;
+        const icon = trend === "up" ? "arrow-up" : trend === "down" ? "arrow-down" : "minus";
+        const sign = trend === "up" ? "+" : "";
+        return html `
+      <div class="delta">
+        <span class="delta-value ${this._sentiment}">
+          <st-icon name=${icon} size="sm" aria-hidden="true"></st-icon>
+          <span>${sign}${this.delta}%</span>
+        </span>
+        ${this.deltaLabel ? html `<span>${this.deltaLabel}</span>` : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const description = this.delta === undefined ? "" : `, ${this._trendText}`;
+        return html `
+      <div
+        class="card"
+        role=${this.interactive ? "button" : "group"}
+        tabindex=${this.interactive ? "0" : nothing}
+        aria-label=${`${this.label}: ${this.loading ? "loading" : this.value}${this.loading ? "" : description}`}
+        aria-busy=${this.loading ? "true" : "false"}
+        @click=${this._select}
+        @keydown=${this._onKeydown}
+      >
+        <div class="header">
+          ${this.icon
+            ? html `<st-icon name=${this.icon} size="sm" aria-hidden="true"></st-icon>`
+            : nothing}
+          <span>${this.label}</span>
+        </div>
+        ${this.loading
+            ? html `<st-skeleton variant="text" width="60%" height="2rem"></st-skeleton>`
+            : html `<div class="value">${this.value}</div>`}
+        ${this.loading ? nothing : this._renderDelta()}
+        <slot name="chart"></slot>
+      </div>
+    `;
+    }
+    get _trendText() {
+        const trend = this._trend;
+        const word = trend === "flat" ? "unchanged" : trend === "up" ? "up" : "down";
+        // The visible text ("+12%", "vs last week") must appear unbroken in the accessible name (WCAG 2.5.3, Label in Name),
+        // so the direction goes last in brackets instead of between the figure and its label.
+        const sign = trend === "up" ? "+" : "";
+        return `${sign}${this.delta ?? 0}%${this.deltaLabel ? ` ${this.deltaLabel}` : ""} (${word})`;
+    }
+};
+StStatCard.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        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-color-surface);
+        color: var(--st-color-text);
+        text-align: left;
+        font: inherit;
+      }
+      :host([interactive]) .card {
+        cursor: pointer;
+      }
+      :host([interactive]) .card:hover {
+        background: var(--st-color-surface-hover);
+      }
+      .card:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+      .value {
+        font-size: var(--st-font-size-3xl);
+        font-weight: var(--st-font-weight-bold);
+        line-height: var(--st-line-height-tight);
+      }
+      .delta {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text-muted);
+      }
+      .delta-value {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font-weight: var(--st-font-weight-medium);
+      }
+      .good {
+        color: var(--st-color-success);
+      }
+      .bad {
+        color: var(--st-color-error-text);
+      }
+      .neutral {
+        color: var(--st-color-text-muted);
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StStatCard.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], StStatCard.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], StStatCard.prototype, "delta", void 0);
+__decorate([
+    property({ type: String, attribute: "delta-label" })
+], StStatCard.prototype, "deltaLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], StStatCard.prototype, "invert", void 0);
+__decorate([
+    property({ type: String })
+], StStatCard.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], StStatCard.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StStatCard.prototype, "interactive", void 0);
+StStatCard = __decorate([
+    customElement("st-stat-card")
+], StStatCard);
+export { StStatCard };
+//# sourceMappingURL=stat-card.js.map

package/dist/components/stat-card/stat-card.js.map

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

package/dist/components/stats/stat.d.ts

@@ -0,0 +1,16 @@
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One figure inside `st-stats`: a big value and what it measures.
+ *
+ * Slots: `value` (such as `10k+` or `99.9%`) and the default slot for the label.
+ */
+export declare class StStat extends StRowItem {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-stat": StStat;
+    }
+}
+//# sourceMappingURL=stat.d.ts.map

package/dist/components/stats/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../src/components/stats/stat.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;GAIG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,MAAM,CAAC,MAAM,4BAsBX;IAEF,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/stats/stat.js

@@ -0,0 +1,51 @@
+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 { resetStyles } from "../../styles/reset.js";
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One figure inside `st-stats`: a big value and what it measures.
+ *
+ * Slots: `value` (such as `10k+` or `99.9%`) and the default slot for the label.
+ */
+let StStat = class StStat extends StRowItem {
+    render() {
+        return this.frame(html `
+      <span class="value"><slot name="value"></slot></span>
+      <span class="label"><slot></slot></span>
+    `);
+    }
+};
+StStat.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        text-align: center;
+      }
+
+      .value {
+        display: block;
+        color: var(--st-color-primary-text);
+        font-size: clamp(2rem, 5vw, 3rem);
+        font-weight: var(--st-font-weight-bold);
+        line-height: var(--st-line-height-tight);
+      }
+
+      .label {
+        display: block;
+        margin-top: var(--st-spacing-xs);
+        color: var(--st-color-text-muted);
+      }
+    `,
+];
+StStat = __decorate([
+    customElement("st-stat")
+], StStat);
+export { StStat };
+//# sourceMappingURL=stat.js.map

package/dist/components/stats/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","sourceRoot":"","sources":["../../../src/components/stats/stat.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC9B,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;GAIG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAyBnC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;;KAGrB,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA9BQ,aAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;CACF,AAtBY,CAsBX;AAvBS,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA+BlB"}

package/dist/components/stats/stats.d.ts

@@ -0,0 +1,19 @@
+import { StSection } from "../section/section.js";
+import "./stat.js";
+/**
+ * A row of headline figures ("10k customers", "99.9% uptime") as `st-stat` items. They sit side by
+ * side and wrap on narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-stat` items.
+ */
+export declare class StStats extends StSection {
+    constructor();
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-stats": StStats;
+    }
+}
+//# sourceMappingURL=stats.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../src/components/stats/stats.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,WAAW,CAAC;AAEnB;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,cAGC;IAED,MAAM,CAAC,MAAM,4BAcX;IAEF,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/stats/stats.js

@@ -0,0 +1,45 @@
+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 "./stat.js";
+/**
+ * A row of headline figures ("10k customers", "99.9% uptime") as `st-stat` items. They sit side by
+ * side and wrap on narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-stat` items.
+ */
+let StStats = class StStats extends StSection {
+    constructor() {
+        super();
+        this.space = "sm";
+    }
+    render() {
+        return this.frame(html `<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StStats.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        display: grid;
+        gap: var(--st-spacing-xl);
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+      }
+
+      :host([tone="accent"]) st-stat {
+        --st-color-primary-text: var(--st-color-on-primary);
+        --st-color-text-muted: var(--st-color-on-primary);
+      }
+    `,
+];
+StStats = __decorate([
+    customElement("st-stats")
+], StStats);
+export { StStats };
+//# sourceMappingURL=stats.js.map

package/dist/components/stats/stats.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats.js","sourceRoot":"","sources":["../../../src/components/stats/stats.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,WAAW,CAAC;AAEnB;;;;;GAKG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,SAAS;IACpC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAkBD,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;AAtBQ,cAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,AAdY,CAcX;AApBS,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA4BnB"}

package/dist/components/switch/switch.js

@@ -128,9 +128,9 @@ StSwitch.styles = [
       .thumb {
         width: 1rem;
         height: 1rem;
-        background-color: #ffffff; /* Explicitly white for contrast */
+        background-color: var(--st-white); /* Explicitly white for contrast */
         border-radius: 50%;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--st-shadow-sm);
         transform: translateX(0);
         transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }