@sondor-technology/sondor-components 1.0.9 → 1.0.10

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

@@ -0,0 +1,263 @@
+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, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../avatar/avatar.js";
+/**
+ * A row inside `st-list`. It becomes a link when `href` is set, a button when `interactive`
+ * is set, and plain content otherwise.
+ *
+ * Slots: `leading` (icon, avatar, image), default (replaces heading/description), `meta`
+ * (right aligned details) and `actions` (buttons that stay clickable independently).
+ *
+ * Events: `st-item-click` (detail: `{ value, href }`) for links and interactive rows.
+ */
+let StListItem = class StListItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+        this.description = "";
+        /** Short right-aligned detail such as a date or status. */
+        this.meta = "";
+        /** Leading icon name. */
+        this.icon = "";
+        /** Leading avatar; shows initials derived from this name. */
+        this.avatar = "";
+        this.target = "_self";
+        /** Renders the row as a button that emits `st-item-click`. */
+        this.interactive = false;
+        /** Marks the row as the current item. */
+        this.selected = false;
+        this.disabled = false;
+        /** Identifier echoed back in `st-item-click`. */
+        this.value = "";
+        this._hasLeadingSlot = false;
+        this._hasActionsSlot = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "listitem");
+    }
+    _onSlotChange(e, name) {
+        const has = e.target.assignedNodes().length > 0;
+        if (name === "leading")
+            this._hasLeadingSlot = has;
+        else
+            this._hasActionsSlot = has;
+    }
+    _emitClick() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent("st-item-click", {
+            detail: { value: this.value, href: this.href },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _renderContent() {
+        return html `
+      <span class="leading" ?hidden=${!this._hasLeadingSlot && !this.avatar && !this.icon}>
+        <slot name="leading" @slotchange=${(e) => this._onSlotChange(e, "leading")}>
+          ${this.avatar
+            ? html `<st-avatar name=${this.avatar} size="sm"></st-avatar>`
+            : this.icon
+                ? html `<st-icon name=${this.icon} aria-hidden="true"></st-icon>`
+                : nothing}
+        </slot>
+      </span>
+      <span class="body">
+        <slot>
+          <span class="heading">${this.heading}</span>
+          ${this.description
+            ? html `<span class="description">${this.description}</span>`
+            : nothing}
+        </slot>
+      </span>
+      <span class="meta"><slot name="meta">${this.meta}</slot></span>
+    `;
+    }
+    render() {
+        const current = this.selected ? "true" : undefined;
+        const main = this.href
+            ? html `<a
+          class="main"
+          href=${this.href}
+          target=${this.target}
+          rel=${ifDefined(this.target === "_blank" ? "noopener noreferrer" : undefined)}
+          aria-current=${ifDefined(current)}
+          aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
+          tabindex=${ifDefined(this.disabled ? "-1" : undefined)}
+          @click=${this._emitClick}
+          >${this._renderContent()}</a
+        >`
+            : this.interactive
+                ? html `<button
+            class="main"
+            type="button"
+            aria-current=${ifDefined(current)}
+            ?disabled=${this.disabled}
+            @click=${this._emitClick}
+          >
+            ${this._renderContent()}
+          </button>`
+                : html `<div class="main" aria-current=${ifDefined(current)}>${this._renderContent()}</div>`;
+        return html `${main}
+      <div class="actions" ?hidden=${!this._hasActionsSlot}>
+        <slot name="actions" @slotchange=${(e) => this._onSlotChange(e, "actions")}></slot>
+      </div>`;
+    }
+};
+StListItem.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        border-bottom: 1px solid var(--st-list-divider, var(--st-color-border));
+        color: var(--st-color-text);
+      }
+
+      :host(:last-child) {
+        border-bottom: 0;
+      }
+
+      .main {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        padding: var(--st-list-item-padding-y, var(--st-spacing-md)) var(--st-spacing-md);
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        text-decoration: none;
+      }
+
+      a.main,
+      button.main {
+        cursor: pointer;
+      }
+
+      a.main:hover,
+      button.main:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      .main:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+
+      :host([selected]) .main {
+        background-color: var(--st-color-primary-bg);
+        box-shadow: inset 3px 0 0 var(--st-color-primary);
+      }
+
+      :host([disabled]) .main {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      .leading {
+        display: inline-flex;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .heading {
+        font-weight: var(--st-font-weight-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .description {
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .meta {
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .actions {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding-right: var(--st-spacing-md);
+      }
+
+    `,
+];
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "description", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "meta", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "avatar", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], StListItem.prototype, "value", void 0);
+__decorate([
+    state()
+], StListItem.prototype, "_hasLeadingSlot", void 0);
+__decorate([
+    state()
+], StListItem.prototype, "_hasActionsSlot", void 0);
+StListItem = __decorate([
+    customElement("st-list-item")
+], StListItem);
+export { StListItem };
+//# sourceMappingURL=list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list/list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AACnD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B;;;;;;;;GAQG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACqB,YAAO,GAAG,EAAE,CAAC;QACb,gBAAW,GAAG,EAAE,CAAC;QAC3C,2DAA2D;QACjC,SAAI,GAAG,EAAE,CAAC;QACpC,yBAAyB;QACC,SAAI,GAAG,EAAE,CAAC;QACpC,6DAA6D;QACnC,WAAM,GAAG,EAAE,CAAC;QAEZ,WAAM,GAAuB,OAAO,CAAC;QAC/D,8DAA8D;QACpB,gBAAW,GAAG,KAAK,CAAC;QAC9D,yCAAyC;QACC,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAC3D,iDAAiD;QACvB,UAAK,GAAG,EAAE,CAAC;QAEpB,oBAAe,GAAG,KAAK,CAAC;QACxB,oBAAe,GAAG,KAAK,CAAC;IAqL3C,CAAC;IA5EC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAEO,aAAa,CAAC,CAAQ,EAAE,IAA2B;QACzD,MAAM,GAAG,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QACrE,IAAI,IAAI,KAAK,SAAS;YAAE,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;;YAC9C,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;IAClC,CAAC;IAEO,UAAU;QAChB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,OAAO,IAAI,CAAA;sCACuB,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI;2CAC9C,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,SAAS,CAAC;YAC7E,IAAI,CAAC,MAAM;YACX,CAAC,CAAC,IAAI,CAAA,mBAAmB,IAAI,CAAC,MAAM,yBAAyB;YAC7D,CAAC,CAAC,IAAI,CAAC,IAAI;gBACT,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,gCAAgC;gBAChE,CAAC,CAAC,OAAO;;;;;kCAKW,IAAI,CAAC,OAAO;YAClC,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SAAS;YAC5D,CAAC,CAAC,OAAO;;;6CAGwB,IAAI,CAAC,IAAI;KACjD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QACnD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;YACpB,CAAC,CAAC,IAAI,CAAA;;iBAEK,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM;gBACd,SAAS,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;yBAC9D,SAAS,CAAC,OAAO,CAAC;0BACjB,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;qBAClD,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;mBAC7C,IAAI,CAAC,UAAU;aACrB,IAAI,CAAC,cAAc,EAAE;UACxB;YACJ,CAAC,CAAC,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA;;;2BAGa,SAAS,CAAC,OAAO,CAAC;wBACrB,IAAI,CAAC,QAAQ;qBAChB,IAAI,CAAC,UAAU;;cAEtB,IAAI,CAAC,cAAc,EAAE;oBACf;gBACZ,CAAC,CAAC,IAAI,CAAA,kCAAkC,SAAS,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC;QAEhG,OAAO,IAAI,CAAA,GAAG,IAAI;qCACe,CAAC,IAAI,CAAC,eAAe;2CACf,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,SAAS,CAAC;aAC5E,CAAC;IACZ,CAAC;CACF,CAAA;AAnLQ,iBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkGF;CACF,AArGY,CAqGX;AA1HwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CAAc;AACb;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAkB;AAEjB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAW;AAEV;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAW;AAEV;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAa;AACZ;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAe;AACd;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAsC;AAErB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAAqB;AAEpB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AACjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAEjC;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAY;AAEpB;IAAhB,KAAK,EAAE;mDAAiC;AACxB;IAAhB,KAAK,EAAE;mDAAiC;AApB9B,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAyMtB"}

package/dist/components/list/list.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+import "./list-item.js";
+import "../skeleton/skeleton.js";
+export interface ListItemData {
+    heading: string;
+    description?: string;
+    meta?: string;
+    icon?: string;
+    avatar?: string;
+    href?: string;
+    value?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    /** Overrides `clickable-items` for this row. */
+    interactive?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * 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`).
+ */
+export declare class StList extends LitElement {
+    items: ListItemData[];
+    /** Accessible name for the list. */
+    label: string;
+    dense: boolean;
+    /** Draws an outer border with rounded corners. */
+    bordered: boolean;
+    noDividers: boolean;
+    /** Rows from `items` without an `href` become buttons that emit `st-item-click`. */
+    clickableItems: boolean;
+    loading: boolean;
+    emptyText: string;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    updated(): void;
+    private _onItemClick;
+    private _renderItems;
+    render(): import("lit-html").TemplateResult<1>;
+    private _hasSlotted;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-list": StList;
+    }
+}
+//# sourceMappingURL=list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/list/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA+B,MAAM,KAAK,CAAC;AAI7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAID;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACX,KAAK,EAAE,YAAY,EAAE,CAAM;IACpD,oCAAoC;IACV,KAAK,SAAM;IACK,KAAK,UAAS;IACxD,kDAAkD;IACR,QAAQ,UAAS;IACS,UAAU,UAAS;IACvF,oFAAoF;IAC3B,cAAc,UAAS;IACtC,OAAO,UAAS;IACP,SAAS,SAAsB;IAElF,MAAM,CAAC,MAAM,4BAkCX;IAEF,iBAAiB,SAGhB;IAED,OAAO,SAIN;IAED,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,YAAY;IA+BpB,MAAM,yCASL;IAED,OAAO,CAAC,WAAW;CAIpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

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":"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"}

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"}