@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/dist/components/section/section.js

@@ -0,0 +1,240 @@
+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, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+import "../container/container.js";
+import "../reveal/reveal.js";
+import { StRowItem } from "./row-item.js";
+export const sectionTones = ["auto", "default", "surface", "accent"];
+export const sectionSpaces = ["none", "sm", "md", "lg"];
+const HEADER_SLOTS = ["eyebrow", "title", "lead"];
+/** Items in a row animate in turn, three at a time, so late items don't wait to be seen. */
+const ITEM_DELAY_MS = 120;
+const ITEMS_PER_WAVE = 3;
+/**
+ * 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.
+ */
+let StSection = class StSection extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** `auto` alternates between rows; the others are fixed. */
+        this.tone = "auto";
+        /** Vertical padding. */
+        this.space = "md";
+        /** Maximum width of the content. */
+        this.width = "lg";
+        /** Alignment of the header block. */
+        this.align = "center";
+        /** How the row animates in as it is scrolled to. `none` turns it off. */
+        this.reveal = "slide-up";
+        /** Accessible name. When set the section becomes a labelled landmark. */
+        this.label = "";
+        /** Renders immediately even when off screen. */
+        this.eager = false;
+        this._hasHeader = false;
+        this._onHeaderSlotChange = () => (this._hasHeader = this._headerPresent());
+        /** Hands the row's animation settings to any item components inside it. */
+        this._onItemsChange = (e) => {
+            const items = e.target
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof StRowItem);
+            items.forEach((item, i) => {
+                item.inheritedReveal = this.reveal;
+                item.revealDelay = (i % ITEMS_PER_WAVE) * ITEM_DELAY_MS;
+            });
+        };
+    }
+    willUpdate(changed) {
+        // Know about the header before the first render, so a row at the top of the page is shown
+        // straight away instead of fading in once its header is discovered. (The server cannot look.)
+        if (!this.hasUpdated)
+            this._hasHeader = isServer || this._headerPresent();
+        super.willUpdate(changed);
+    }
+    _headerPresent() {
+        return HEADER_SLOTS.some((name) => this.querySelector(`:scope > [slot="${name}"]`));
+    }
+    updated(changed) {
+        // A row that changes its animation after load passes the change on to its items.
+        if (changed.has("reveal") && changed.get("reveal") !== undefined) {
+            this.renderRoot.querySelector("slot:not([name])")?.dispatchEvent(new Event("slotchange"));
+        }
+    }
+    /** The eyebrow, title and lead. Rows that lay the header out themselves call this directly. */
+    renderHeader() {
+        return html `
+      <st-reveal class="header-reveal" effect=${this.reveal} ?hidden=${!this._hasHeader}>
+        <div class="header">
+          ${HEADER_SLOTS.map((name) => html `<slot name=${name} @slotchange=${this._onHeaderSlotChange}></slot>`)}
+        </div>
+      </st-reveal>
+    `;
+    }
+    /** Wraps part of a row so it animates in with the row's effect. */
+    animateIn(content, delay = 0) {
+        return html `<st-reveal effect=${this.reveal} delay=${delay}>${content}</st-reveal>`;
+    }
+    /**
+     * 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.
+     */
+    frame(content, options = {}) {
+        const { header = true, animated = true } = options;
+        return html `
+      <div class="section" role=${this.label ? "region" : nothing} aria-label=${this.label || nothing}>
+        <st-container size=${this.width}>
+          ${header ? this.renderHeader() : nothing}
+          ${animated ? this.animateIn(content, 100) : content}
+        </st-container>
+      </div>
+    `;
+    }
+    render() {
+        return this.frame(html `<slot @slotchange=${this._onItemsChange}></slot>`);
+    }
+};
+StSection.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        /* The align attribute doubles as an old HTML text-align hint; only the header should centre. */
+        text-align: start;
+        scroll-margin-top: var(--st-section-scroll-offset, var(--st-site-header-height, 0px));
+        background: var(--_bg, var(--st-color-bg));
+        color: var(--_fg, var(--st-color-text));
+        --_pad: var(--st-section-space-md);
+        /* Cards and tiles inside a row read this so they stand out from the row behind them. */
+        --st-row-card-bg: var(--st-color-surface);
+      }
+
+      :host(:not([eager])) {
+        content-visibility: auto;
+        contain-intrinsic-size: auto 36rem;
+      }
+
+      :host([tone="surface"]) {
+        --_bg: var(--st-color-surface);
+        --st-row-card-bg: var(--st-color-bg);
+      }
+
+      /* Auto: every second row takes the surface colour. Pure CSS, so it also works before any
+         JavaScript runs and with server rendering. */
+      :host([tone="auto"]:nth-child(even)) {
+        --_bg: var(--st-color-surface);
+        --st-row-card-bg: var(--st-color-bg);
+      }
+
+      :host([tone="accent"]) {
+        --_bg: var(--st-color-primary);
+        --_fg: var(--st-color-on-primary);
+        --_muted: var(--st-color-on-primary);
+        --st-row-card-bg: rgb(255 255 255 / 0.12);
+      }
+
+      :host([space="none"]) {
+        --_pad: 0;
+      }
+      :host([space="sm"]) {
+        --_pad: var(--st-section-space-sm);
+      }
+      :host([space="lg"]) {
+        --_pad: var(--st-section-space-lg);
+      }
+
+      .section {
+        padding-block: var(--_pad);
+      }
+
+      .header {
+        display: grid;
+        gap: var(--st-spacing-sm);
+        max-width: 48rem;
+        margin-bottom: var(--st-spacing-2xl);
+      }
+
+      :host([align="center"]) .header {
+        margin-inline: auto;
+        text-align: center;
+      }
+
+      ::slotted([slot="eyebrow"]) {
+        margin: 0;
+        color: var(--_eyebrow, var(--st-color-primary-text));
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      :host([tone="accent"]) ::slotted([slot="eyebrow"]) {
+        --_eyebrow: var(--st-color-on-primary);
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 !important;
+        color: inherit;
+        font-size: var(--st-font-size-3xl) !important;
+        line-height: var(--st-line-height-tight) !important;
+      }
+
+      ::slotted([slot="lead"]) {
+        margin: 0;
+        color: var(--_muted, var(--st-color-text-muted));
+        font-size: var(--st-font-size-lg);
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StSection.prototype, "tone", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StSection.prototype, "space", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StSection.prototype, "width", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StSection.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StSection.prototype, "reveal", void 0);
+__decorate([
+    property({ type: String })
+], StSection.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StSection.prototype, "eager", void 0);
+__decorate([
+    state()
+], StSection.prototype, "_hasHeader", void 0);
+StSection = __decorate([
+    customElement("st-section")
+], StSection);
+export { StSection };
+//# sourceMappingURL=section.js.map

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

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

package/dist/components/select/select.js

@@ -339,7 +339,7 @@ StSelect.styles = css `
     }
 
     .combobox.is-invalid {
-      border-color: var(--st-color-danger, #dc2626);
+      border-color: var(--st-color-danger);
     }
 
     .combobox:focus-visible {
@@ -381,7 +381,7 @@ StSelect.styles = css `
       background: var(--st-color-surface);
       border: 1px solid var(--st-color-border);
       border-radius: var(--st-radius-md);
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      box-shadow: var(--st-shadow-md);
       overflow: hidden;
     }
 
@@ -436,7 +436,7 @@ StSelect.styles = css `
       display: block;
       margin-top: var(--st-spacing-xs);
       font-size: var(--st-font-size-xs);
-      color: var(--st-color-danger, #dc2626);
+      color: var(--st-color-danger);
     }
 
     .hidden-native {

package/dist/components/series-nav/series-nav.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from "lit";
+/**
+ * Navigation for a post that belongs to a series: where you are ("Part 2 of 5"), the full list of
+ * parts, and links to the previous and next part.
+ *
+ * List the parts in order as links, and mark the current one with `aria-current="page"`. The
+ * links stay in your markup, so search engines see the whole series from every part.
+ *
+ * Slots: `title` (the series name, a heading) and the default slot for the part links.
+ */
+export declare class StSeriesNav extends LitElement {
+    /** Accessible name of the navigation. */
+    label: string;
+    /** Word shown before the part number. */
+    partLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    private _parts;
+    private _current;
+    static styles: import("lit").CSSResult[];
+    private _onSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-series-nav": StSeriesNav;
+    }
+}
+//# sourceMappingURL=series-nav.d.ts.map

package/dist/components/series-nav/series-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-nav.d.ts","sourceRoot":"","sources":["../../../src/components/series-nav/series-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AASnD;;;;;;;;GAQG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,yCAAyC;IACf,KAAK,SAAY;IAC3C,yCAAyC;IACU,SAAS,SAAU;IACf,aAAa,SAAc;IAC/B,SAAS,SAAU;IAE7D,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,QAAQ,CAAM;IAE/B,MAAM,CAAC,MAAM,4BA0FX;IAEF,OAAO,CAAC,aAAa,CAMnB;IAEF,MAAM,yCA0BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/series-nav/series-nav.js

@@ -0,0 +1,178 @@
+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 { resetStyles } from "../../styles/reset.js";
+/**
+ * Navigation for a post that belongs to a series: where you are ("Part 2 of 5"), the full list of
+ * parts, and links to the previous and next part.
+ *
+ * List the parts in order as links, and mark the current one with `aria-current="page"`. The
+ * links stay in your markup, so search engines see the whole series from every part.
+ *
+ * Slots: `title` (the series name, a heading) and the default slot for the part links.
+ */
+let StSeriesNav = class StSeriesNav extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Accessible name of the navigation. */
+        this.label = "Series";
+        /** Word shown before the part number. */
+        this.partLabel = "Part";
+        this.previousLabel = "Previous";
+        this.nextLabel = "Next";
+        this._parts = [];
+        this._current = -1;
+        this._onSlotChange = (e) => {
+            const links = e.target
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof HTMLAnchorElement);
+            this._parts = links.map((a) => ({ href: a.getAttribute("href") ?? "", label: a.textContent?.trim() ?? "" }));
+            this._current = links.findIndex((a) => a.getAttribute("aria-current") === "page");
+        };
+    }
+    render() {
+        const total = this._parts.length;
+        const previous = this._current > 0 ? this._parts[this._current - 1] : undefined;
+        const next = this._current >= 0 && this._current < total - 1 ? this._parts[this._current + 1] : undefined;
+        return html `
+      <nav aria-label=${this.label}>
+        ${this._current >= 0
+            ? html `<p class="progress">${this.partLabel} ${this._current + 1} / ${total}</p>`
+            : nothing}
+        <slot name="title"></slot>
+        <div class="parts"><slot @slotchange=${this._onSlotChange}></slot></div>
+        ${previous || next
+            ? html `
+              <div class="pager">
+                ${previous
+                ? html `<a class="previous" href=${previous.href} rel="prev"><small>${this.previousLabel}</small>${previous.label}</a>`
+                : nothing}
+                ${next
+                ? html `<a class="next" href=${next.href} rel="next"><small>${this.nextLabel}</small>${next.label}</a>`
+                : nothing}
+              </div>
+            `
+            : nothing}
+      </nav>
+    `;
+    }
+};
+StSeriesNav.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-left: 4px solid var(--st-color-primary);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-surface);
+      }
+
+      .progress {
+        margin: 0 0 var(--st-spacing-xs);
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 0 var(--st-spacing-md) !important;
+        font-size: var(--st-font-size-lg) !important;
+      }
+
+      .parts {
+        display: grid;
+        gap: var(--st-spacing-xs);
+        counter-reset: part;
+      }
+
+      .parts ::slotted(a) {
+        counter-increment: part;
+        color: var(--st-color-text-muted);
+        text-decoration: none;
+      }
+
+      .parts ::slotted(a)::before {
+        content: counter(part) ". ";
+        color: var(--st-color-text-muted);
+      }
+
+      .parts ::slotted(a:hover) {
+        color: var(--st-color-text);
+        text-decoration: underline;
+      }
+
+      .parts ::slotted(a[aria-current="page"]) {
+        color: var(--st-color-text);
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      .pager {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--st-spacing-md);
+        margin-top: var(--st-spacing-md);
+        padding-top: var(--st-spacing-md);
+        border-top: 1px solid var(--st-color-border);
+      }
+
+      .pager a {
+        display: grid;
+        color: var(--st-color-primary-text);
+        font-weight: var(--st-font-weight-medium);
+        text-decoration: none;
+        gap: var(--st-spacing-xs);
+        max-width: 48%;
+      }
+
+      .pager .next {
+        margin-left: auto;
+        text-align: end;
+      }
+
+      .pager a:hover {
+        text-decoration: underline;
+      }
+
+      .pager a:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      .pager small {
+        color: var(--st-color-text-muted);
+        font-weight: var(--st-font-weight-regular, 400);
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StSeriesNav.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: "part-label" })
+], StSeriesNav.prototype, "partLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "previous-label" })
+], StSeriesNav.prototype, "previousLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "next-label" })
+], StSeriesNav.prototype, "nextLabel", void 0);
+__decorate([
+    state()
+], StSeriesNav.prototype, "_parts", void 0);
+__decorate([
+    state()
+], StSeriesNav.prototype, "_current", void 0);
+StSeriesNav = __decorate([
+    customElement("st-series-nav")
+], StSeriesNav);
+export { StSeriesNav };
+//# sourceMappingURL=series-nav.js.map

package/dist/components/series-nav/series-nav.js.map

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

package/dist/components/site-header/site-header.d.ts

@@ -0,0 +1,51 @@
+import { LitElement, PropertyValues } from "lit";
+import "../icon/icon.js";
+/**
+ * The top of a site: a logo, navigation links and a place for actions such as a theme toggle or a
+ * call-to-action button. On wide screens the links sit in a row. On narrow screens they fold into
+ * a menu opened by a button; the links stay in the page either way, so search engines see them.
+ *
+ * Slots:
+ *  - `logo`: your brand, usually a link to the home page.
+ *  - default: the navigation links. Mark the current page with `aria-current="page"`.
+ *  - `actions`: controls on the right (theme toggle, buttons).
+ *
+ * A "Skip to content" link is included for keyboard users. When `sticky`, the header publishes
+ * its height as `--st-site-header-height`, which sections use so anchor links are not hidden
+ * behind it.
+ */
+export declare class StSiteHeader extends LitElement {
+    /** Keeps the header at the top of the screen while scrolling. */
+    sticky: boolean;
+    /** Screen width (in pixels) below which the links fold into a menu. */
+    breakpoint: number;
+    menuLabel: string;
+    navLabel: string;
+    /** Where the skip link goes. Give your main content this id. */
+    skipTo: string;
+    skipLabel: string;
+    private _menuOpen;
+    private _compact;
+    private _media?;
+    private _resize?;
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Closes the menu. */
+    close(): void;
+    private _publishHeight;
+    private _applyCompact;
+    private _onBreakpoint;
+    private _onKeydown;
+    private _onOutside;
+    /** Choosing a link closes the menu. */
+    private _onNavClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-site-header": StSiteHeader;
+    }
+}
+//# sourceMappingURL=site-header.d.ts.map

package/dist/components/site-header/site-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-header.d.ts","sourceRoot":"","sources":["../../../src/components/site-header/site-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAG1D,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,iEAAiE;IACvB,MAAM,UAAS;IACzD,uEAAuE;IAC7C,UAAU,SAAO;IACQ,SAAS,SAAU;IACpB,QAAQ,SAAU;IACpE,gEAAgE;IAChB,MAAM,SAAW;IACd,SAAS,SAAqB;IAExE,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,CAAC,MAAM,CAAC,CAAiB;IAChC,OAAO,CAAC,OAAO,CAAC,CAAiB;IAEjC,MAAM,CAAC,MAAM,4BAyIX;IAEF,iBAAiB,SAUhB;IAED,oBAAoB,SAOnB;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,QAQ9C;IAED,uBAAuB;IACvB,KAAK,SAEJ;IAED,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,aAAa,CAA6D;IAElF,OAAO,CAAC,UAAU,CAKhB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,uCAAuC;IACvC,OAAO,CAAC,WAAW,CAEjB;IAEF,MAAM,yCA0BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}