@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/section/card-row.js

@@ -0,0 +1,174 @@
+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, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { StSection } from "./section.js";
+import { StCard } from "./card.js";
+/**
+ * Base for rows that list cards (blog posts, projects). Cards sit in a grid or a single column and
+ * can be filtered by topic: add `filterable` and a button appears for every topic used in the
+ * cards' `tags`.
+ */
+export class StCardRow extends StSection {
+    constructor() {
+        super(...arguments);
+        /** The most columns on wide screens (grid layout). */
+        this.columns = 3;
+        /** `grid` or one card per row. */
+        this.layout = "grid";
+        /** Shows topic buttons that filter the cards. */
+        this.filterable = false;
+        this.filterLabel = "Filter by topic";
+        this.allLabel = "All";
+        this._tags = [];
+        this._active = "";
+        this._visible = 0;
+        this._total = 0;
+        this._onCardsChange = (e) => {
+            this._onItemsChange(e);
+            const cards = this._cards;
+            cards.forEach((card) => (card.layout = this.layout));
+            this._tags = [...new Set(cards.flatMap((card) => card.tagList))].sort((a, b) => a.localeCompare(b));
+            this._total = cards.length;
+            this._applyFilter();
+        };
+    }
+    get _cards() {
+        const slot = this.renderRoot?.querySelector(".items slot");
+        return (slot?.assignedElements({ flatten: true }) ?? []).filter((el) => el instanceof StCard);
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.renderRoot
+            .querySelector(".items")
+            ?.style.setProperty("--_columns", String(Math.max(1, this.columns)));
+        if (changed.has("layout"))
+            this._cards.forEach((card) => (card.layout = this.layout));
+    }
+    _applyFilter() {
+        const cards = this._cards;
+        cards.forEach((card) => card.toggleAttribute("hidden", !!this._active && !card.tagList.includes(this._active)));
+        this._visible = cards.filter((card) => !card.hidden).length;
+    }
+    _choose(tag) {
+        this._active = tag;
+        this._applyFilter();
+        this.dispatchEvent(new CustomEvent("st-filter", { detail: { tag: tag || null, count: this._visible }, bubbles: true, composed: true }));
+    }
+    _renderFilters() {
+        if (!this.filterable || this._tags.length === 0)
+            return nothing;
+        return html `
+      <div class="filters" role="group" aria-label=${this.filterLabel}>
+        ${["", ...this._tags].map((tag) => html `
+            <button
+              type="button"
+              class="chip"
+              aria-pressed=${this._active === tag ? "true" : "false"}
+              @click=${() => this._choose(tag)}
+            >
+              ${tag || this.allLabel}
+            </button>
+          `)}
+      </div>
+      <p class="status" role="status">${this._visible} of ${this._total} shown</p>
+    `;
+    }
+    render() {
+        return this.frame(html `
+        ${this._renderFilters()}
+        <div class="items"><slot @slotchange=${this._onCardsChange}></slot></div>
+      `, { animated: false });
+    }
+}
+StCardRow.styles = [
+    ...StSection.styles,
+    css `
+      .items {
+        --_columns: 3;
+        --_gap: var(--st-spacing-lg);
+        display: grid;
+        gap: var(--_gap);
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(max(16rem, calc((100% - (var(--_columns) - 1) * var(--_gap)) / var(--_columns))), 1fr)
+        );
+      }
+
+      :host([layout="list"]) .items {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .filters {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--st-spacing-sm);
+        margin-bottom: var(--st-spacing-xl);
+      }
+
+      .chip {
+        padding: var(--st-spacing-xs) var(--st-spacing-md);
+        border: 1px solid var(--st-color-border);
+        border-radius: 999px;
+        background: none;
+        color: var(--st-color-text);
+        cursor: pointer;
+      }
+
+      .chip:hover {
+        background: var(--st-color-surface-hover);
+      }
+
+      .chip[aria-pressed="true"] {
+        border-color: var(--st-color-primary);
+        background: var(--st-color-primary);
+        color: var(--st-color-bg);
+      }
+
+      .chip:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      .status {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], StCardRow.prototype, "columns", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StCardRow.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StCardRow.prototype, "filterable", void 0);
+__decorate([
+    property({ type: String, attribute: "filter-label" })
+], StCardRow.prototype, "filterLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "all-label" })
+], StCardRow.prototype, "allLabel", void 0);
+__decorate([
+    state()
+], StCardRow.prototype, "_tags", void 0);
+__decorate([
+    state()
+], StCardRow.prototype, "_active", void 0);
+__decorate([
+    state()
+], StCardRow.prototype, "_visible", void 0);
+__decorate([
+    state()
+], StCardRow.prototype, "_total", void 0);
+//# sourceMappingURL=card-row.js.map

package/dist/components/section/card-row.js.map

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

package/dist/components/section/card.d.ts

@@ -0,0 +1,27 @@
+import { TemplateResult } from "lit";
+import { StRowItem } from "./row-item.js";
+/**
+ * Base for the cards in a filterable list (a blog post, a project). A card is a link target as a
+ * whole: pressing anywhere on it follows the link in its `title`, while that link stays a normal
+ * anchor in your markup for keyboard users, screen readers and search engines.
+ *
+ * Slots: `image`, `meta` (a date, reading time, tags), `title` (a heading containing the link),
+ * the default slot (a short description) and `footer` (extra links or buttons).
+ */
+export declare abstract class StCard extends StRowItem {
+    /** Comma-separated topics, used by the list's filter, such as `web, design`. */
+    tags: string;
+    /** Set by the list: a column of cards, or one card per row with the picture beside it. */
+    layout: "grid" | "list";
+    static styles: import("lit").CSSResult[];
+    /** The topics as a clean list. */
+    get tagList(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _titleLink;
+    private _markLinked;
+    private _onClick;
+    protected renderCard(): TemplateResult;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/components/section/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/section/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,cAAc,EAAC,MAAM,KAAK,CAAC;AAG9C,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;;;;;;GAOG;AACH,8BAAsB,MAAO,SAAQ,SAAS;IAC5C,gFAAgF;IACtD,IAAI,SAAM;IACpC,0FAA0F;IACjD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAU;IAE1E,MAAM,CAAC,MAAM,4BAuHX;IAEF,kCAAkC;IAClC,IAAI,OAAO,IAAI,MAAM,EAAE,CAKtB;IAED,iBAAiB,SAIhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ,CAQd;IAEF,SAAS,CAAC,UAAU,IAAI,cAAc,CAcrC;IAED,MAAM,mBAEL;CACF"}

package/dist/components/section/card.js

@@ -0,0 +1,205 @@
+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 { property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import { StRowItem } from "./row-item.js";
+/**
+ * Base for the cards in a filterable list (a blog post, a project). A card is a link target as a
+ * whole: pressing anywhere on it follows the link in its `title`, while that link stays a normal
+ * anchor in your markup for keyboard users, screen readers and search engines.
+ *
+ * Slots: `image`, `meta` (a date, reading time, tags), `title` (a heading containing the link),
+ * the default slot (a short description) and `footer` (extra links or buttons).
+ */
+export class StCard extends StRowItem {
+    constructor() {
+        super(...arguments);
+        /** Comma-separated topics, used by the list's filter, such as `web, design`. */
+        this.tags = "";
+        /** Set by the list: a column of cards, or one card per row with the picture beside it. */
+        this.layout = "grid";
+        this._onClick = (e) => {
+            if (e.defaultPrevented || e.button !== 0)
+                return;
+            // Real links, buttons and fields inside the card keep doing their own thing.
+            const interactive = e
+                .composedPath()
+                .some((el) => el instanceof HTMLElement && el !== this && el.matches("a, button, input, select, textarea, summary"));
+            if (interactive)
+                return;
+            this._titleLink()?.click();
+        };
+    }
+    /** The topics as a clean list. */
+    get tagList() {
+        return this.tags
+            .split(",")
+            .map((tag) => tag.trim())
+            .filter(Boolean);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this._onClick);
+        this._markLinked();
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this._onClick);
+        super.disconnectedCallback();
+    }
+    _titleLink() {
+        return this.querySelector(':scope > [slot="title"] a[href], :scope > a[slot="title"]');
+    }
+    _markLinked() {
+        this.toggleAttribute("data-linked", !!this._titleLink());
+    }
+    renderCard() {
+        return this.frame(html `
+      <article>
+        <div class="image"><slot name="image"></slot></div>
+        <div class="content">
+          <div class="body">
+            <slot name="meta"></slot>
+            <slot name="title" @slotchange=${() => this._markLinked()}></slot>
+            <div class="description"><slot></slot></div>
+          </div>
+          <div class="footer"><slot name="footer"></slot></div>
+        </div>
+      </article>
+    `);
+    }
+    render() {
+        return this.renderCard();
+    }
+}
+StCard.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+      }
+
+      article {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      :host([data-linked]) article {
+        cursor: pointer;
+      }
+
+      :host([data-linked]:hover) article {
+        border-color: var(--st-color-primary);
+        box-shadow: var(--st-shadow-md);
+      }
+
+      :host(:focus-within) article {
+        border-color: var(--st-color-primary);
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      .image:empty,
+      .image[hidden] {
+        display: none;
+      }
+
+      .image ::slotted(*) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 16 / 9;
+        object-fit: cover;
+      }
+
+      .body {
+        display: grid;
+        flex: 1;
+        align-content: start;
+        gap: var(--st-spacing-sm);
+        padding: var(--st-spacing-lg);
+      }
+
+      ::slotted([slot="meta"]) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-sm);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .description {
+        color: var(--st-color-text-muted);
+      }
+
+      .description ::slotted(*) {
+        margin: 0;
+      }
+
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+        padding: 0 var(--st-spacing-lg) var(--st-spacing-lg);
+      }
+
+      .footer[hidden] {
+        display: none;
+      }
+
+      .content {
+        display: contents;
+      }
+
+      /* One card per row, with the picture beside the text. */
+      @media (min-width: 40rem) {
+        :host([layout="list"]) article {
+          flex-direction: row;
+        }
+
+        :host([layout="list"]) .image {
+          flex: 0 0 34%;
+        }
+
+        :host([layout="list"]) .image ::slotted(*) {
+          aspect-ratio: auto;
+        }
+
+        :host([layout="list"]) .content {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        article {
+          transition: none;
+        }
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StCard.prototype, "tags", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StCard.prototype, "layout", void 0);
+//# sourceMappingURL=card.js.map

package/dist/components/section/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/section/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;;;;;;GAOG;AACH,MAAM,OAAgB,MAAO,SAAQ,SAAS;IAA9C;;QACE,gFAAgF;QACtD,SAAI,GAAG,EAAE,CAAC;QACpC,0FAA0F;QACjD,WAAM,GAAoB,MAAM,CAAC;QAsJlE,aAAQ,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAO;YACjD,6EAA6E;YAC7E,MAAM,WAAW,GAAG,CAAC;iBAClB,YAAY,EAAE;iBACd,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,OAAO,CAAC,6CAA6C,CAAC,CAAC,CAAC;YACvH,IAAI,WAAW;gBAAE,OAAO;YACxB,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC;QAC7B,CAAC,CAAC;IAqBJ,CAAC;IAxDC,kCAAkC;IAClC,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,IAAI;aACb,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;aACxB,MAAM,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,aAAa,CAAoB,2DAA2D,CAAC,CAAC;IAC5G,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3D,CAAC;IAYS,UAAU;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAA;;;;;;6CAMmB,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;;;;;;KAMhE,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3B,CAAC;CACF;AAjLQ,aAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHF;CACF,AAvHY,CAuHX;AA3HwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAW;AAEK;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAkC"}

package/dist/components/section/row-item.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, TemplateResult } from "lit";
+import type { RevealEffect } from "../reveal/reveal.constants.js";
+import "../reveal/reveal.js";
+/**
+ * Base class for the repeated items inside a row (a feature, a stat, a testimonial...). It makes
+ * each item animate in as it is scrolled to. The row hands down its own `reveal` setting and a
+ * small delay by position, so items arrive one after another. Set `reveal` on an item to
+ * override the row.
+ */
+export declare abstract class StRowItem extends LitElement {
+    /** How the item animates in. Leave empty to follow the row it is in. */
+    reveal: RevealEffect | "";
+    /** The row's own effect, set by the row. */
+    inheritedReveal: RevealEffect;
+    /** Milliseconds before the animation starts. Set by the row. */
+    revealDelay: number;
+    /** The effect in use: the item's own, otherwise its row's. */
+    get effect(): RevealEffect;
+    /** Wraps the item's content so it animates in. */
+    protected frame(content: TemplateResult): TemplateResult;
+}
+//# sourceMappingURL=row-item.d.ts.map

package/dist/components/section/row-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-item.d.ts","sourceRoot":"","sources":["../../../src/components/section/row-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,cAAc,EAAC,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAChE,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,8BAAsB,SAAU,SAAQ,UAAU;IAChD,wEAAwE;IAC/B,MAAM,EAAE,YAAY,GAAG,EAAE,CAAM;IACxE,4CAA4C;IACd,eAAe,EAAE,YAAY,CAAc;IACzE,gEAAgE;IACX,WAAW,SAAK;IAErE,8DAA8D;IAC9D,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,kDAAkD;IAClD,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,cAAc,GAAG,cAAc,CAWvD;CACF"}

package/dist/components/section/row-item.js

@@ -0,0 +1,53 @@
+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 } from "lit";
+import { property } from "lit/decorators.js";
+import "../reveal/reveal.js";
+/**
+ * Base class for the repeated items inside a row (a feature, a stat, a testimonial...). It makes
+ * each item animate in as it is scrolled to. The row hands down its own `reveal` setting and a
+ * small delay by position, so items arrive one after another. Set `reveal` on an item to
+ * override the row.
+ */
+export class StRowItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** How the item animates in. Leave empty to follow the row it is in. */
+        this.reveal = "";
+        /** The row's own effect, set by the row. */
+        this.inheritedReveal = "slide-up";
+        /** Milliseconds before the animation starts. Set by the row. */
+        this.revealDelay = 0;
+    }
+    /** The effect in use: the item's own, otherwise its row's. */
+    get effect() {
+        return this.reveal || this.inheritedReveal;
+    }
+    /** Wraps the item's content so it animates in. */
+    frame(content) {
+        return html `
+      <st-reveal
+        effect=${this.effect}
+        delay=${this.revealDelay}
+        offset="5"
+        style="display: block; height: 100%"
+      >
+        ${content}
+      </st-reveal>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, reflect: true })
+], StRowItem.prototype, "reveal", void 0);
+__decorate([
+    property({ attribute: false })
+], StRowItem.prototype, "inheritedReveal", void 0);
+__decorate([
+    property({ type: Number, attribute: "reveal-delay" })
+], StRowItem.prototype, "revealDelay", void 0);
+//# sourceMappingURL=row-item.js.map

package/dist/components/section/row-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-item.js","sourceRoot":"","sources":["../../../src/components/section/row-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,qBAAqB,CAAC;AAE7B;;;;;GAKG;AACH,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QACE,wEAAwE;QAC/B,WAAM,GAAsB,EAAE,CAAC;QACxE,4CAA4C;QACd,oBAAe,GAAiB,UAAU,CAAC;QACzE,gEAAgE;QACX,gBAAW,GAAG,CAAC,CAAC;IAoBvE,CAAC;IAlBC,8DAA8D;IAC9D,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,CAAC;IAC7C,CAAC;IAED,kDAAkD;IACxC,KAAK,CAAC,OAAuB;QACrC,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,MAAM;gBACZ,IAAI,CAAC,WAAW;;;;UAItB,OAAO;;KAEZ,CAAC;IACJ,CAAC;CACF;AAxB0C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgC;AAE1C;IAA7B,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;kDAA4C;AAEpB;IAApD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAC,CAAC;8CAAiB"}

package/dist/components/section/section.d.ts

@@ -0,0 +1,70 @@
+import { LitElement, PropertyValues, TemplateResult } from "lit";
+import type { ContainerSize } from "../container/container.js";
+import type { RevealEffect } from "../reveal/reveal.constants.js";
+import "../container/container.js";
+import "../reveal/reveal.js";
+export declare const sectionTones: readonly ["auto", "default", "surface", "accent"];
+export type SectionTone = (typeof sectionTones)[number];
+export declare const sectionSpaces: readonly ["none", "sm", "md", "lg"];
+export type SectionSpace = (typeof sectionSpaces)[number];
+/**
+ * A full-width row of a page: a background, responsive vertical spacing, a centred container and
+ * an optional header made of an eyebrow, title and lead. Stack rows to build a page. The ready-made
+ * rows (hero, features, call to action and so on) are all built on it, so every row shares the
+ * same spacing, header, tones and animation, and any row can follow any other.
+ *
+ * Slots: `eyebrow`, `title`, `lead` (the header: slot real headings so search engines and screen
+ * readers understand the page outline) and the default slot for the content.
+ *
+ * Tone: by default (`auto`) neighbouring rows alternate between the page and surface colours, so
+ * stacked rows are visually separated with no effort. Set `tone` to choose one yourself.
+ *
+ * Animation: the header and content animate in as they scroll into view (`reveal`, turn off with
+ * `reveal="none"`). Give the host an `id` to link to it (`#pricing`). Off-screen rows are not
+ * rendered until they are near the viewport (`content-visibility`); add `eager` to turn that off.
+ */
+export declare class StSection extends LitElement {
+    /** `auto` alternates between rows; the others are fixed. */
+    tone: SectionTone;
+    /** Vertical padding. */
+    space: SectionSpace;
+    /** Maximum width of the content. */
+    width: ContainerSize;
+    /** Alignment of the header block. */
+    align: "start" | "center";
+    /** How the row animates in as it is scrolled to. `none` turns it off. */
+    reveal: RevealEffect;
+    /** Accessible name. When set the section becomes a labelled landmark. */
+    label: string;
+    /** Renders immediately even when off screen. */
+    eager: boolean;
+    private _hasHeader;
+    static styles: import("lit").CSSResult[];
+    private _onHeaderSlotChange;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private _headerPresent;
+    /** Hands the row's animation settings to any item components inside it. */
+    protected _onItemsChange: (e: Event) => void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** The eyebrow, title and lead. Rows that lay the header out themselves call this directly. */
+    protected renderHeader(): TemplateResult;
+    /** Wraps part of a row so it animates in with the row's effect. */
+    protected animateIn(content: TemplateResult, delay?: number): TemplateResult;
+    /**
+     * The band every row sits in. Pass the row's content.
+     *  - `header: false`: the row lays the header out itself and calls `renderHeader()`.
+     *  - `animated: false`: the row animates its own parts (or its items do), so the content is not
+     *    wrapped in a second animation.
+     */
+    protected frame(content: TemplateResult, options?: {
+        header?: boolean;
+        animated?: boolean;
+    }): TemplateResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-section": StSection;
+    }
+}
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/section/section.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAgC,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAG7F,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AAChE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,eAAO,MAAM,YAAY,YAAI,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC;AAC9E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,eAAO,MAAM,aAAa,YAAI,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AACjE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,4DAA4D;IACnB,IAAI,EAAE,WAAW,CAAU;IACpE,wBAAwB;IACiB,KAAK,EAAE,YAAY,CAAQ;IACpE,oCAAoC;IACK,KAAK,EAAE,aAAa,CAAQ;IACrE,qCAAqC;IACI,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAY;IAC9E,yEAAyE;IAChC,MAAM,EAAE,YAAY,CAAc;IAC3E,yEAAyE;IAC/C,KAAK,SAAM;IACrC,gDAAgD;IACN,KAAK,UAAS;IAE/C,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,4BA+FX;IAEF,OAAO,CAAC,mBAAmB,CAAmD;IAE9E,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAKjD;IAED,OAAO,CAAC,cAAc;IAItB,2EAA2E;IAC3E,SAAS,CAAC,cAAc,MAAO,KAAK,UAQlC;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAK9C;IAED,+FAA+F;IAC/F,SAAS,CAAC,YAAY,IAAI,cAAc,CAUvC;IAED,mEAAmE;IACnE,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,SAAI,GAAG,cAAc,CAEtE;IAED;;;;;OAKG;IACH,SAAS,CAAC,KAAK,CACb,OAAO,EAAE,cAAc,EACvB,OAAO,GAAE;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAM,GACnD,cAAc,CAUhB;IAED,MAAM,mBAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}