@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/series-nav/series-nav.ts

@@ -0,0 +1,164 @@
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+interface Part {
+  href: string;
+  label: string;
+}
+
+/**
+ * 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.
+ */
+@customElement("st-series-nav")
+export class StSeriesNav extends LitElement {
+  /** Accessible name of the navigation. */
+  @property({type: String}) label = "Series";
+  /** Word shown before the part number. */
+  @property({type: String, attribute: "part-label"}) partLabel = "Part";
+  @property({type: String, attribute: "previous-label"}) previousLabel = "Previous";
+  @property({type: String, attribute: "next-label"}) nextLabel = "Next";
+
+  @state() private _parts: Part[] = [];
+  @state() private _current = -1;
+
+  static 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);
+      }
+    `,
+  ];
+
+  private _onSlotChange = (e: Event) => {
+    const links = (e.target as HTMLSlotElement)
+      .assignedElements({flatten: true})
+      .filter((el): el is HTMLAnchorElement => 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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-series-nav": StSeriesNav;
+  }
+}

package/src/components/site-header/site-header.ts

@@ -0,0 +1,276 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+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.
+ */
+@customElement("st-site-header")
+export class StSiteHeader extends LitElement {
+  /** Keeps the header at the top of the screen while scrolling. */
+  @property({type: Boolean, reflect: true}) sticky = false;
+  /** Screen width (in pixels) below which the links fold into a menu. */
+  @property({type: Number}) breakpoint = 768;
+  @property({type: String, attribute: "menu-label"}) menuLabel = "Menu";
+  @property({type: String, attribute: "nav-label"}) navLabel = "Main";
+  /** Where the skip link goes. Give your main content this id. */
+  @property({type: String, attribute: "skip-to"}) skipTo = "#main";
+  @property({type: String, attribute: "skip-label"}) skipLabel = "Skip to content";
+
+  @state() private _menuOpen = false;
+  @state() private _compact = false;
+
+  private _media?: MediaQueryList;
+  private _resize?: ResizeObserver;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        background: var(--st-color-bg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      :host([sticky]) {
+        position: sticky;
+        top: 0;
+        z-index: var(--st-site-header-z, 50);
+      }
+
+      .skip {
+        position: absolute;
+        left: var(--st-spacing-md);
+        top: 0;
+        z-index: 1;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-radius: 0 0 var(--st-radius-md) var(--st-radius-md);
+        background: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        transform: translateY(-120%);
+      }
+
+      .skip:focus {
+        transform: none;
+      }
+
+      .bar {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-lg);
+        max-width: var(--st-container-lg);
+        min-height: var(--st-site-header-min-height, 4rem);
+        margin-inline: auto;
+        padding-inline: var(--st-gutter);
+      }
+
+      .logo {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      nav {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: var(--st-spacing-lg);
+      }
+
+      ::slotted(a) {
+        color: var(--st-color-text-muted);
+        font-weight: var(--st-font-weight-medium);
+        text-decoration: none;
+      }
+
+      ::slotted(a:hover),
+      ::slotted(a[aria-current="page"]) {
+        color: var(--st-color-text);
+      }
+
+      ::slotted(a[aria-current="page"]) {
+        text-decoration: underline;
+        text-decoration-color: var(--st-color-primary);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 0.5em;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        margin-left: auto;
+      }
+
+      .toggle {
+        display: none;
+        padding: var(--st-spacing-sm);
+        border: 0;
+        border-radius: var(--st-radius-md);
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .toggle:hover {
+        background: var(--st-color-surface-hover);
+      }
+
+      .toggle:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      /* Narrow screens: the links fold into a panel under the bar. */
+      :host([data-compact]) .toggle {
+        display: inline-flex;
+      }
+
+      :host([data-compact]) nav {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--st-spacing-xs);
+        padding: var(--st-spacing-md) var(--st-gutter);
+        border-bottom: 1px solid var(--st-color-border);
+        background: var(--st-color-bg);
+        box-shadow: var(--st-shadow-lg);
+      }
+
+      :host([data-compact]) nav:not(.open) {
+        display: none;
+      }
+
+      :host([data-compact]) ::slotted(a) {
+        padding: var(--st-spacing-sm) 0;
+      }
+
+      @media print {
+        :host {
+          position: static;
+        }
+        .toggle,
+        .actions {
+          display: none;
+        }
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._media = window.matchMedia(`(max-width: ${this.breakpoint - 1}px)`);
+    this._media.addEventListener("change", this._onBreakpoint);
+    this._applyCompact(this._media.matches);
+    document.addEventListener("keydown", this._onKeydown);
+    document.addEventListener("pointerdown", this._onOutside);
+
+    this._resize = new ResizeObserver(() => this._publishHeight());
+    this._resize.observe(this);
+  }
+
+  disconnectedCallback() {
+    this._media?.removeEventListener("change", this._onBreakpoint);
+    document.removeEventListener("keydown", this._onKeydown);
+    document.removeEventListener("pointerdown", this._onOutside);
+    this._resize?.disconnect();
+    if (this.sticky) document.documentElement.style.removeProperty("--st-site-header-height");
+    super.disconnectedCallback();
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("breakpoint") && this._media) {
+      this._media.removeEventListener("change", this._onBreakpoint);
+      this._media = window.matchMedia(`(max-width: ${this.breakpoint - 1}px)`);
+      this._media.addEventListener("change", this._onBreakpoint);
+      this._applyCompact(this._media.matches);
+    }
+    if (changed.has("sticky")) this._publishHeight();
+  }
+
+  /** Closes the menu. */
+  close() {
+    this._menuOpen = false;
+  }
+
+  private _publishHeight() {
+    const root = document.documentElement.style;
+    if (this.sticky) root.setProperty("--st-site-header-height", `${this.offsetHeight}px`);
+    else root.removeProperty("--st-site-header-height");
+  }
+
+  private _applyCompact(compact: boolean) {
+    this._compact = compact;
+    this.toggleAttribute("data-compact", compact);
+    if (!compact) this._menuOpen = false;
+  }
+
+  private _onBreakpoint = (e: MediaQueryListEvent) => this._applyCompact(e.matches);
+
+  private _onKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && this._menuOpen) {
+      this._menuOpen = false;
+      this.renderRoot.querySelector<HTMLElement>(".toggle")?.focus();
+    }
+  };
+
+  private _onOutside = (e: PointerEvent) => {
+    if (this._menuOpen && !e.composedPath().includes(this)) this._menuOpen = false;
+  };
+
+  /** Choosing a link closes the menu. */
+  private _onNavClick = (e: MouseEvent) => {
+    if (e.composedPath().some((el) => el instanceof HTMLAnchorElement)) this._menuOpen = false;
+  };
+
+  render() {
+    return html`
+      <a class="skip" href=${this.skipTo}>${this.skipLabel}</a>
+      <header class="bar">
+        <div class="logo"><slot name="logo"></slot></div>
+        <nav
+          id="site-nav"
+          class=${this._menuOpen ? "open" : ""}
+          aria-label=${this.navLabel}
+          @click=${this._onNavClick}
+        >
+          <slot></slot>
+        </nav>
+        <div class="actions"><slot name="actions"></slot></div>
+        <button
+          class="toggle"
+          type="button"
+          aria-controls="site-nav"
+          aria-expanded=${this._menuOpen ? "true" : "false"}
+          aria-label=${this.menuLabel}
+          @click=${() => (this._menuOpen = !this._menuOpen)}
+        >
+          <st-icon name=${this._menuOpen ? "x" : "menu"} aria-hidden="true"></st-icon>
+        </button>
+      </header>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-site-header": StSiteHeader;
+  }
+}

package/src/components/skeleton/skeleton.ts

@@ -48,7 +48,7 @@ export class StSkeleton extends LitElement {
         width: var(--_width);
         height: var(--_height);
         
-        --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
+        --st-skeleton-radius: var(--st-radius-sm);
       }
 
       :host([variant="text"]) {
@@ -72,9 +72,9 @@ export class StSkeleton extends LitElement {
         
         background: linear-gradient(
           90deg,
-          var(--st-color-surface-muted, #f1f5f9) 25%,
-          var(--st-color-border, #e2e8f0) 37%,
-          var(--st-color-surface-muted, #f1f5f9) 63%
+          var(--st-color-surface-muted) 25%,
+          var(--st-color-border) 37%,
+          var(--st-color-surface-muted) 63%
         );
         background-size: 400% 100%;
         border-radius: var(--st-skeleton-radius);
@@ -92,19 +92,19 @@ export class StSkeleton extends LitElement {
       }
 
       :host([animation="pulse"]) .skeleton {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         animation: st-pulse 1.5s ease-in-out infinite;
       }
 
       :host([animation="none"]) .skeleton {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         animation: none;
       }
 
       @media (prefers-reduced-motion: reduce) {
         .skeleton {
           animation: none !important;
-          background: var(--st-color-surface-muted, #f1f5f9) !important;
+          background: var(--st-color-surface-muted) !important;
         }
       }
 

package/src/components/sparkline/sparkline.ts

@@ -0,0 +1,83 @@
+import {LitElement, html, css, svg, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {areaPaths, chartColor, linePath, normalize} from "../chart/chart.utils.js";
+
+const VIEW_WIDTH = 100;
+const PAD = 2;
+
+/** Tiny axis-less trend line for use inside cards, tables and stat blocks. */
+@customElement("st-sparkline")
+export class StSparkline extends LitElement {
+  @property({type: Array}) data: number[] = [];
+  /** Any CSS color; defaults to the first chart palette color. */
+  @property({type: String}) color = "";
+  @property({type: Number}) height = 32;
+  @property({type: Boolean}) area = false;
+  /** Accessible description, e.g. "Revenue trend, last 7 days". */
+  @property({type: String}) label = "Trend";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+      svg {
+        display: block;
+        width: 100%;
+        overflow: visible;
+      }
+      .line {
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+      }
+      .area {
+        opacity: 0.15;
+      }
+    `,
+  ];
+
+  render() {
+    const n = this.data.length;
+    if (n < 2) return nothing;
+    const lo = Math.min(...this.data);
+    const hi = Math.max(...this.data);
+    const h = this.height;
+    const points = this.data.map(
+      (v, i) =>
+        [
+          (i / (n - 1)) * VIEW_WIDTH,
+          h - PAD - normalize(v, lo, hi) * (h - PAD * 2),
+        ] as [number, number],
+    );
+    const color = chartColor(0, this.color);
+    const first = this.data[0];
+    const last = this.data[n - 1];
+    const summary = `${this.label}: from ${first} to ${last}`;
+    return html`
+      <svg
+        viewBox="0 0 ${VIEW_WIDTH} ${h}"
+        height=${h}
+        preserveAspectRatio="none"
+        role="img"
+        aria-label=${summary}
+      >
+        ${this.area
+          ? areaPaths(points, h).map((d) => svg`<path class="area" d=${d} style="fill:${color}"></path>`)
+          : nothing}
+        <path class="line" d=${linePath(points)} style="stroke:${color}"></path>
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-sparkline": StSparkline;
+  }
+}

package/src/components/spinner/spinner.ts

@@ -0,0 +1,55 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-spinner")
+export class StSpinner extends LitElement {
+  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
+  @property({type: String}) label = "Loading";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        --_size: 1.5rem;
+        color: var(--st-color-primary);
+      }
+      :host([size="sm"]) {
+        --_size: 1rem;
+      }
+      :host([size="lg"]) {
+        --_size: 2.5rem;
+      }
+
+      .ring {
+        width: var(--_size);
+        height: var(--_size);
+        border: 0.15rem solid var(--st-color-border);
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .ring {
+          animation-duration: 2.4s;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`<div class="ring" role="status" aria-label=${this.label}></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-spinner": StSpinner;
+  }
+}