@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/table/table.js

@@ -4,9 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { resetStyles } from "../../styles/reset.js";
+import "../skeleton/skeleton.js";
+const SKELETON_ROWS = 3;
+/**
+ * Lightweight data table. Use `st-data-table` when you need sorting, search or pagination.
+ *
+ * Events: `st-row-click` (detail: the row object) when `clickable-rows` is set.
+ */
 let StTable = class StTable extends LitElement {
     constructor() {
         super(...arguments);
@@ -16,35 +25,92 @@ let StTable = class StTable extends LitElement {
         this.striped = false;
         this.hoverable = false;
         this.dense = false;
+        /** Keeps the header visible while the body scrolls. Set a height with `--st-table-max-height`. */
+        this.stickyHeader = false;
+        /** Shows placeholder rows and sets `aria-busy`. */
+        this.loading = false;
+        /** Makes rows focusable and emits `st-row-click` on click, Enter or Space. */
+        this.clickableRows = false;
+        /** Describes the table to assistive technology (and visually, unless `caption-hidden`). */
+        this.caption = "";
+        this.captionHidden = false;
+        this.emptyText = "No data available.";
+    }
+    _alignClass(col) {
+        return classMap({ "align-center": col.align === "center", "align-end": col.align === "end" });
+    }
+    _onRowClick(row) {
+        if (!this.clickableRows)
+            return;
+        this.dispatchEvent(new CustomEvent("st-row-click", { detail: row, bubbles: true, composed: true }));
+    }
+    _onRowKeydown(e, row) {
+        if (!this.clickableRows || (e.key !== "Enter" && e.key !== " "))
+            return;
+        e.preventDefault();
+        this._onRowClick(row);
+    }
+    _renderBody() {
+        const span = Math.max(this.columns.length, 1);
+        if (this.loading) {
+            return Array.from({ length: SKELETON_ROWS }, () => html `
+          <tr role="row">
+            ${this.columns.map(() => html `
+                <td role="cell"><st-skeleton variant="text" width="70%"></st-skeleton></td>
+              `)}
+          </tr>
+        `);
+        }
+        if (this.data.length === 0) {
+            return html `
+        <tr role="row">
+          <td role="cell" colspan=${span} class="empty-state">${this.emptyText}</td>
+        </tr>
+      `;
+        }
+        return this.data.map((row, index) => html `
+        <tr
+          role="row"
+          class=${classMap({ clickable: this.clickableRows })}
+          tabindex=${ifDefined(this.clickableRows ? "0" : undefined)}
+          @click=${() => this._onRowClick(row)}
+          @keydown=${(e) => this._onRowKeydown(e, row)}
+        >
+          ${this.columns.map((col) => html `
+              <td role="cell" class=${this._alignClass(col)} data-label=${col.header}>
+                ${col.render ? col.render(row, index) : (row[col.key] ?? "")}
+              </td>
+            `)}
+        </tr>
+      `);
+    }
+    _renderHead() {
+        return html `
+      <thead role="rowgroup">
+        <tr role="row">
+          ${this.columns.map((col) => html `
+              <th
+                role="columnheader"
+                scope="col"
+                class=${this._alignClass(col)}
+                style=${ifDefined(col.width ? `width:${col.width}` : undefined)}
+              >
+                ${col.header}
+              </th>
+            `)}
+        </tr>
+      </thead>
+    `;
     }
     render() {
         return html `
       <div class="table-wrapper">
-        <!-- 🚀 FIX: Explicit ARIA roles map to preserve semantics when CSS 'display' changes -->
-        <table role="table">
-          <thead role="rowgroup">
-            <tr role="row">
-              ${this.columns.map((col) => html `<th role="columnheader" scope="col">${col.header}</th>`)}
-            </tr>
-          </thead>
+        <!-- Explicit ARIA roles preserve semantics when CSS 'display' changes in vertical mode -->
+        <table role="table" aria-busy=${this.loading ? "true" : "false"}>
+          ${this.caption ? html `<caption>${this.caption}</caption>` : nothing}
+          ${this.columns.length ? this._renderHead() : nothing}
           <tbody role="rowgroup">
-            ${this.data.length === 0
-            ? html `
-                  <tr role="row">
-                    <td role="cell" colspan=${this.columns.length} class="empty-state">
-                      No data available.
-                    </td>
-                  </tr>
-                `
-            : this.data.map((row) => html `
-                    <tr role="row">
-                      ${this.columns.map(
-            // 🚀 FIX: Nullish coalescing prevents printing "undefined" for sparse data objects
-            (col) => html `
-                          <td role="cell" data-label=${col.header}>${row[col.key] ?? ""}</td>
-                        `)}
-                    </tr>
-                  `)}
+            ${this._renderBody()}
           </tbody>
         </table>
       </div>
@@ -61,20 +127,40 @@ StTable.styles = [
 
       .table-wrapper {
         width: 100%;
-        overflow-x: auto;
+        overflow: auto;
         -webkit-overflow-scrolling: touch;
+        max-height: var(--st-table-max-height, none);
       }
 
       table {
         width: 100%;
         border-collapse: collapse;
         text-align: left;
-        font-size: var(--st-font-size-base, 1rem);
+        font-size: var(--st-font-size-base);
+        color: var(--st-color-text);
+      }
+
+      caption {
+        padding: var(--st-spacing-sm) var(--st-spacing-lg);
+        text-align: left;
+        font-weight: var(--st-font-weight-medium);
         color: var(--st-color-text);
       }
 
+      :host([caption-hidden]) caption {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
       th {
-        font-weight: 600;
+        font-weight: var(--st-font-weight-semibold);
         padding: var(--st-spacing-md) var(--st-spacing-lg);
         border-bottom: 2px solid var(--st-color-border);
         color: var(--st-color-text-muted);
@@ -86,18 +172,42 @@ StTable.styles = [
         border-bottom: 1px solid var(--st-color-border);
       }
 
+      .align-center {
+        text-align: center;
+      }
+      .align-end {
+        text-align: end;
+      }
+
       /* Modifiers */
       :host([dense]) th,
       :host([dense]) td {
         padding: var(--st-spacing-sm) var(--st-spacing-md);
       }
 
+      :host([sticky-header]) th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background-color: var(--st-color-bg);
+      }
+
       :host([striped]) tbody tr:nth-of-type(odd) {
-        background-color: var(--st-color-surface-muted, #f8fafc);
+        background-color: var(--st-color-surface-muted);
+      }
+
+      :host([hoverable]) tbody tr:hover,
+      tbody tr.clickable:hover {
+        background-color: var(--st-color-surface-hover);
       }
 
-      :host([hoverable]) tbody tr:hover {
-        background-color: var(--st-color-surface-hover, #f1f5f9);
+      tbody tr.clickable {
+        cursor: pointer;
+      }
+
+      tbody tr.clickable:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
       }
 
       /* ==========================================================
@@ -147,7 +257,7 @@ StTable.styles = [
       /* Inject the header name on the left */
       :host([mode="vertical"]) td::before {
         content: attr(data-label);
-        font-weight: 600;
+        font-weight: var(--st-font-weight-semibold);
         text-align: left;
         padding-right: var(--st-spacing-md);
         color: var(--st-color-text-muted);
@@ -155,7 +265,7 @@ StTable.styles = [
 
       .empty-state {
         text-align: center;
-        padding: 2rem !important;
+        padding: var(--st-spacing-xl) !important;
         color: var(--st-color-text-muted);
         font-style: italic;
       }
@@ -179,6 +289,24 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StTable.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "sticky-header" })
+], StTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTable.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "clickable-rows" })
+], StTable.prototype, "clickableRows", void 0);
+__decorate([
+    property({ type: String })
+], StTable.prototype, "caption", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "caption-hidden" })
+], StTable.prototype, "captionHidden", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], StTable.prototype, "emptyText", void 0);
 StTable = __decorate([
     customElement("st-table")
 ], StTable);

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.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;AAU3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACoB,YAAO,GAAkB,EAAE,CAAC;QAC5B,SAAI,GAA0B,EAAE,CAAC;QAEjB,SAAI,GAAc,YAAY,CAAC;QAC9B,YAAO,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAClB,UAAK,GAAG,KAAK,CAAC;IAuJ1D,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;gBAMC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA,uCAAuC,GAAG,CAAC,MAAM,OAAO,CACtE;;;;cAID,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;8CAE0B,IAAI,CAAC,OAAO,CAAC,MAAM;;;;iBAIhD;YACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACX,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEP,IAAI,CAAC,OAAO,CAAC,GAAG;YAChB,mFAAmF;YACnF,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;uDACkB,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE;yBAC9D,CACF;;mBAEJ,CACF;;;;KAIZ,CAAC;IACJ,CAAC;CACF,CAAA;AArJQ,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,AA7GY,CA6GX;AArHuB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;wCAA6B;AAC5B;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;qCAAkC;AAEjB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgC;AAC9B;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiB;AAChB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAmB;AAClB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAe;AAP7C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8JnB"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"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"}

package/dist/components/team/person.d.ts

@@ -0,0 +1,19 @@
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One team member inside `st-team`.
+ *
+ * Slots: `photo` (an `img`, hidden when empty), `name` (a real heading such as `<h3>`), `role`,
+ * the default slot (a short bio) and `links` (social or contact links).
+ */
+export declare class StPerson extends StRowItem {
+    private _hasPhoto;
+    private _hasLinks;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-person": StPerson;
+    }
+}
+//# sourceMappingURL=person.d.ts.map

package/dist/components/team/person.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/components/team/person.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,SAAS;IAC5B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAEnC,MAAM,CAAC,MAAM,4BAmEX;IAEF,MAAM,sCAoBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/team/person.js

@@ -0,0 +1,123 @@
+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 team member inside `st-team`.
+ *
+ * Slots: `photo` (an `img`, hidden when empty), `name` (a real heading such as `<h3>`), `role`,
+ * the default slot (a short bio) and `links` (social or contact links).
+ */
+let StPerson = class StPerson extends StRowItem {
+    constructor() {
+        super(...arguments);
+        this._hasPhoto = false;
+        this._hasLinks = false;
+    }
+    render() {
+        return this.frame(html `
+      <div class="person">
+        <span class="photo" ?hidden=${!this._hasPhoto}>
+          <slot
+            name="photo"
+            @slotchange=${(e) => (this._hasPhoto = e.target.assignedNodes().length > 0)}
+          ></slot>
+        </span>
+        <slot name="name"></slot>
+        <slot name="role"></slot>
+        <div class="bio"><slot></slot></div>
+        <div class="links" ?hidden=${!this._hasLinks}>
+          <slot
+            name="links"
+            @slotchange=${(e) => (this._hasLinks = e.target.assignedNodes().length > 0)}
+          ></slot>
+        </div>
+      </div>
+    `);
+    }
+};
+StPerson.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        text-align: center;
+      }
+
+      .person {
+        display: grid;
+        justify-items: center;
+        gap: var(--st-spacing-xs);
+      }
+
+      .photo {
+        display: block;
+        overflow: hidden;
+        width: 7rem;
+        height: 7rem;
+        margin-bottom: var(--st-spacing-sm);
+        border-radius: 50%;
+        background: var(--st-color-surface-muted);
+      }
+
+      .photo[hidden] {
+        display: none;
+      }
+
+      .photo ::slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      ::slotted([slot="name"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-lg) !important;
+      }
+
+      ::slotted([slot="role"]) {
+        display: block;
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      .bio {
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .bio ::slotted(*) {
+        margin: 0;
+      }
+
+      .links {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--st-spacing-md);
+        margin-top: var(--st-spacing-sm);
+      }
+
+      .links[hidden] {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    state()
+], StPerson.prototype, "_hasPhoto", void 0);
+__decorate([
+    state()
+], StPerson.prototype, "_hasLinks", void 0);
+StPerson = __decorate([
+    customElement("st-person")
+], StPerson);
+export { StPerson };
+//# sourceMappingURL=person.js.map

package/dist/components/team/person.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/components/team/person.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,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QACY,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAG,KAAK,CAAC;IA4FrC,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;sCAEY,CAAC,IAAI,CAAC,SAAS;;;0BAG3B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;;;;qCAM9E,CAAC,IAAI,CAAC,SAAS;;;0BAG1B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;;KAI9G,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA1FQ,eAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgEF;CACF,AAnEY,CAmEX;AAtEe;IAAhB,KAAK,EAAE;2CAA2B;AAClB;IAAhB,KAAK,EAAE;2CAA2B;AAFxB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8FpB"}

package/dist/components/team/team.d.ts

@@ -0,0 +1,18 @@
+import { StSection } from "../section/section.js";
+import "./person.js";
+/**
+ * A row introducing the people behind a company, as `st-person` cards in a grid that wraps on
+ * narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-person` items.
+ */
+export declare class StTeam extends StSection {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-team": StTeam;
+    }
+}
+//# sourceMappingURL=team.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"team.d.ts","sourceRoot":"","sources":["../../../src/components/team/team.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,aAAa,CAAC;AAErB;;;;;GAKG;AACH,qBACa,MAAO,SAAQ,SAAS;IACnC,MAAM,CAAC,MAAM,4BASX;IAEF,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/team/team.js

@@ -0,0 +1,36 @@
+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 "./person.js";
+/**
+ * A row introducing the people behind a company, as `st-person` cards in a grid that wraps on
+ * narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-person` items.
+ */
+let StTeam = class StTeam extends StSection {
+    render() {
+        return this.frame(html `<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`, { animated: false });
+    }
+};
+StTeam.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        display: grid;
+        gap: var(--st-spacing-2xl) var(--st-spacing-lg);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+      }
+    `,
+];
+StTeam = __decorate([
+    customElement("st-team")
+], StTeam);
+export { StTeam };
+//# sourceMappingURL=team.js.map

package/dist/components/team/team.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team.js","sourceRoot":"","sources":["../../../src/components/team/team.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,aAAa,CAAC;AAErB;;;;;GAKG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAYnC,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;AAjBQ,aAAM,GAAG;IACd,GAAG,SAAS,CAAC,MAAM;IACnB,GAAG,CAAA;;;;;;KAMF;CACF,AATY,CASX;AAVS,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAkBlB"}

package/dist/components/testimonials/testimonial.d.ts

@@ -0,0 +1,18 @@
+import { StRowItem } from "../section/row-item.js";
+/**
+ * One customer quote inside `st-testimonials`.
+ *
+ * Slots: the default slot (the quote), `author` (their name), `role` (their job and company) and
+ * `avatar` (a small photo or `st-avatar`).
+ */
+export declare class StTestimonial extends StRowItem {
+    private _hasAvatar;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-testimonial": StTestimonial;
+    }
+}
+//# sourceMappingURL=testimonial.d.ts.map

package/dist/components/testimonials/testimonial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.d.ts","sourceRoot":"","sources":["../../../src/components/testimonials/testimonial.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAC;AAEjD;;;;;GAKG;AACH,qBACa,aAAc,SAAQ,SAAS;IACjC,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,4BAiEX;IAEF,MAAM,sCAkBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/components/testimonials/testimonial.js

@@ -0,0 +1,115 @@
+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 customer quote inside `st-testimonials`.
+ *
+ * Slots: the default slot (the quote), `author` (their name), `role` (their job and company) and
+ * `avatar` (a small photo or `st-avatar`).
+ */
+let StTestimonial = class StTestimonial extends StRowItem {
+    constructor() {
+        super(...arguments);
+        this._hasAvatar = false;
+    }
+    render() {
+        return this.frame(html `
+      <figure>
+        <blockquote><slot></slot></blockquote>
+        <figcaption>
+          <span class="avatar" ?hidden=${!this._hasAvatar}>
+            <slot
+              name="avatar"
+              @slotchange=${(e) => (this._hasAvatar = e.target.assignedNodes().length > 0)}
+            ></slot>
+          </span>
+          <span>
+            <slot name="author"></slot>
+            <slot name="role"></slot>
+          </span>
+        </figcaption>
+      </figure>
+    `);
+    }
+};
+StTestimonial.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      figure {
+        display: grid;
+        align-content: space-between;
+        gap: var(--st-spacing-lg);
+        height: 100%;
+        margin: 0;
+        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));
+      }
+
+      blockquote {
+        margin: 0;
+        font-size: var(--st-font-size-lg);
+        line-height: 1.6;
+      }
+
+      blockquote ::slotted(*) {
+        margin: 0;
+      }
+
+      figcaption {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-md);
+      }
+
+      .avatar {
+        display: inline-flex;
+        flex-shrink: 0;
+        overflow: hidden;
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+      }
+
+      .avatar[hidden] {
+        display: none;
+      }
+
+      .avatar ::slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      ::slotted([slot="author"]) {
+        display: block;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      ::slotted([slot="role"]) {
+        display: block;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+    `,
+];
+__decorate([
+    state()
+], StTestimonial.prototype, "_hasAvatar", void 0);
+StTestimonial = __decorate([
+    customElement("st-testimonial")
+], StTestimonial);
+export { StTestimonial };
+//# sourceMappingURL=testimonial.js.map

package/dist/components/testimonials/testimonial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonial.js","sourceRoot":"","sources":["../../../src/components/testimonials/testimonial.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,aAAa,GAAnB,MAAM,aAAc,SAAQ,SAAS;IAArC;;QACY,eAAU,GAAG,KAAK,CAAC;IAwFtC,CAAC;IAnBC,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;;;yCAIe,CAAC,IAAI,CAAC,UAAU;;;4BAG7B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,MAA0B,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;;;;;;;;;KASjH,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAtFQ,oBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8DF;CACF,AAjEY,CAiEX;AAnEe;IAAhB,KAAK,EAAE;iDAA4B;AADzB,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAyFzB"}

package/dist/components/testimonials/testimonials.d.ts

@@ -0,0 +1,18 @@
+import { StSection } from "../section/section.js";
+import "./testimonial.js";
+/**
+ * A row of customer quotes as `st-testimonial` cards. They sit in columns that wrap on narrow
+ * screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-testimonial` items.
+ */
+export declare class StTestimonials extends StSection {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-testimonials": StTestimonials;
+    }
+}
+//# sourceMappingURL=testimonials.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testimonials.d.ts","sourceRoot":"","sources":["../../../src/components/testimonials/testimonials.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAChD,OAAO,kBAAkB,CAAC;AAE1B;;;;;GAKG;AACH,qBACa,cAAe,SAAQ,SAAS;IAC3C,MAAM,CAAC,MAAM,4BASX;IAEF,MAAM,sCAKL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}