@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/image/image.ts

@@ -0,0 +1,165 @@
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {styleMap} from "lit/directives/style-map.js";
+import {resetStyles} from "../../styles/reset.js";
+
+/** Anything that looks like a URL is drawn as a blurred image, anything else as a plain colour. */
+const isUrl = (value: string) => /^(data:|https?:|\/|\.)/.test(value);
+
+/**
+ * A responsive image frame. Slot a normal `<img>` (or `<picture>`) so the alt text, `srcset`
+ * and `sizes` stay in your markup for search engines and screen readers. The frame reserves the
+ * space with `ratio` so the page never jumps, lazy loads the image, and fades it in.
+ *
+ * Slots: default (the `<img>` or `<picture>`) and `caption`.
+ * Mark the first image on the page (the one visitors see immediately) with `priority`.
+ */
+@customElement("st-image")
+export class StImage extends LitElement {
+  /** Width / height of the frame, such as "16/9" or "1". Leave empty to use the image's own shape. */
+  @property({type: String}) ratio = "";
+  @property({type: String, reflect: true}) fit: "cover" | "contain" = "cover";
+  /** Shown while the image loads: a CSS colour, or a tiny image URL that is drawn blurred. */
+  @property({type: String}) placeholder = "";
+  /** Loads straight away at high priority. Use it for the main image above the fold. */
+  @property({type: Boolean}) priority = false;
+
+  @state() private _hasCaption = false;
+
+  private _image?: HTMLImageElement;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      figure {
+        display: grid;
+        gap: var(--st-spacing-sm);
+      }
+
+      .frame {
+        position: relative;
+        overflow: hidden;
+        aspect-ratio: var(--_ratio, auto);
+        background-color: var(--_placeholder-color, var(--st-color-surface));
+        border-radius: var(--st-image-radius, var(--st-radius-md));
+      }
+
+      .blur {
+        position: absolute;
+        inset: 0;
+        background-size: cover;
+        background-position: center;
+        filter: blur(1.25rem);
+        transform: scale(1.15);
+      }
+
+      slot:not([name]) {
+        display: block;
+        height: 100%;
+      }
+
+      ::slotted(picture) {
+        display: block;
+        height: 100%;
+      }
+
+      ::slotted(img),
+      ::slotted(picture) {
+        position: relative;
+        width: 100%;
+        transition: opacity 0.4s ease;
+      }
+
+      :host([data-pending]) ::slotted(img),
+      :host([data-pending]) ::slotted(picture) {
+        opacity: 0;
+      }
+
+      figcaption {
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        ::slotted(img),
+        ::slotted(picture) {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  protected updated() {
+    if (this.ratio) this.style.setProperty("--_ratio", this.ratio);
+    else this.style.removeProperty("--_ratio");
+
+    const colour = this.placeholder && !isUrl(this.placeholder) ? this.placeholder : "";
+    if (colour) this.style.setProperty("--_placeholder-color", colour);
+    else this.style.removeProperty("--_placeholder-color");
+
+    this._applyToImage();
+  }
+
+  private _onSlotChange(e: Event) {
+    const slotted = (e.target as HTMLSlotElement).assignedElements();
+    const wrapper = slotted.find((el) => el.tagName === "IMG" || el.tagName === "PICTURE");
+    const img = wrapper instanceof HTMLImageElement ? wrapper : wrapper?.querySelector("img");
+    this._image = img ?? undefined;
+    this._applyToImage();
+  }
+
+  private _applyToImage() {
+    const img = this._image;
+    if (!img) return;
+
+    // Authors can still override either attribute on their own <img>.
+    if (!img.hasAttribute("decoding")) img.decoding = "async";
+    if (!img.hasAttribute("loading")) img.loading = this.priority ? "eager" : "lazy";
+    if (this.priority && !img.hasAttribute("fetchpriority")) img.setAttribute("fetchpriority", "high");
+
+    // Fill the frame whatever the image's own dimensions are (only when a ratio is set).
+    img.style.objectFit = this.fit;
+    if (this.ratio) {
+      img.style.height = "100%";
+    }
+
+    if (img.complete) {
+      this.removeAttribute("data-pending");
+      return;
+    }
+    this.setAttribute("data-pending", "");
+    const done = () => this.removeAttribute("data-pending");
+    img.addEventListener("load", done, {once: true});
+    img.addEventListener("error", done, {once: true});
+  }
+
+  render() {
+    return html`
+      <figure>
+        <div class="frame">
+          ${this.placeholder && isUrl(this.placeholder)
+            ? html`<div class="blur" style=${styleMap({backgroundImage: `url(${JSON.stringify(this.placeholder)})`})}></div>`
+            : nothing}
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+        <figcaption ?hidden=${!this._hasCaption}>
+          <slot
+            name="caption"
+            @slotchange=${(e: Event) =>
+              (this._hasCaption = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+          ></slot>
+        </figcaption>
+      </figure>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-image": StImage;
+  }
+}

package/src/components/input/input.ts

@@ -119,21 +119,21 @@ export class StInput extends LitElement {
       /* 🚀 NEW: Explicit error text styling */
       .error-text {
         font-size: var(--st-font-size-xs);
-        color: var(--st-color-error, #dc2626);
+        color: var(--st-color-error);
         margin: 0;
         font-weight: 500;
       }
 
       :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error, #dc2626);
+        border-color: var(--st-color-error);
       }
 
       :host([invalid]) .input-wrapper:focus-within {
-        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
+        box-shadow: 0 0 0 1px var(--st-color-error);
       }
 
       :host([invalid]) .help-text {
-        color: var(--st-color-error, #dc2626);
+        color: var(--st-color-error);
       }
 
       :host([disabled]) .input-wrapper {

package/src/components/lazy/lazy.ts

@@ -0,0 +1,94 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+/**
+ * Holds back heavy, non-essential markup (embeds, maps, widgets, comment threads) until it is
+ * about to scroll into view. Put the markup inside a `<template>`: it stays inert, so nothing
+ * downloads or runs, until `st-lazy` copies it into the page.
+ *
+ * Keep important text outside it. Content inside a template is not part of the page until it
+ * loads, so search engines may not index it.
+ *
+ * Slots: default (the `<template>`) and `placeholder` (shown until loaded).
+ * Events: `st-lazy-load` (bubbles, composed) once the content has been added.
+ */
+@customElement("st-lazy")
+export class StLazy extends LitElement {
+  /** How far (in pixels) before entering the viewport loading starts. */
+  @property({type: Number}) margin = 200;
+  /** Space reserved until loaded, to stop the page jumping (any CSS length). */
+  @property({type: String, attribute: "min-height"}) minHeight = "";
+  /** True once the content has been added. Setting it to true loads immediately. */
+  @property({type: Boolean, reflect: true}) loaded = false;
+
+  private _observer?: IntersectionObserver;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        min-height: var(--_min-height, 0);
+      }
+
+      :host([loaded]) {
+        min-height: 0;
+      }
+
+      :host([loaded]) slot[name="placeholder"] {
+        display: none;
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.loaded) {
+      this.load();
+    } else if (typeof IntersectionObserver === "undefined") {
+      this.load();
+    } else {
+      this._observer = new IntersectionObserver(
+        (entries) => entries.some((entry) => entry.isIntersecting) && this.load(),
+        {rootMargin: `${this.margin}px 0px`},
+      );
+      this._observer.observe(this);
+    }
+  }
+
+  disconnectedCallback() {
+    this._observer?.disconnect();
+    this._observer = undefined;
+    super.disconnectedCallback();
+  }
+
+  protected updated() {
+    if (this.minHeight) this.style.setProperty("--_min-height", this.minHeight);
+    else this.style.removeProperty("--_min-height");
+  }
+
+  /** Adds the template content now instead of waiting for the scroll. */
+  load() {
+    this._observer?.disconnect();
+    this._observer = undefined;
+    const template = this.querySelector<HTMLTemplateElement>(":scope > template");
+    const first = !this.hasAttribute("data-lazy-done");
+    if (template && first) {
+      this.setAttribute("data-lazy-done", "");
+      this.append(template.content.cloneNode(true));
+    }
+    if (!this.loaded) this.loaded = true;
+    if (first) this.dispatchEvent(new CustomEvent("st-lazy-load", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`<slot name="placeholder"></slot><slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-lazy": StLazy;
+  }
+}

package/src/components/line-chart/line-chart.ts

@@ -0,0 +1,271 @@
+import {html, css, svg, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StChartBase, type ChartSeries} from "../chart/chart-base.js";
+import {areaPaths, chartColor, clamp, linePath, niceScale, stepIndex} from "../chart/chart.utils.js";
+
+const MARGIN = {top: 12, right: 16, bottom: 28, left: 48};
+
+/**
+ * Line (and optional area) chart with a shared crosshair tooltip.
+ * Hover/focus a position to read every series; click or press Enter/Space to select it.
+ */
+@customElement("st-line-chart")
+export class StLineChart extends StChartBase {
+  /** X axis category labels, one per data point. */
+  @property({type: Array}) labels: string[] = [];
+  @property({type: Array}) series: ChartSeries[] = [];
+  /** Fills the area under each line. */
+  @property({type: Boolean}) area = false;
+  @property({type: Number, attribute: "y-min"}) yMin?: number;
+  @property({type: Number, attribute: "y-max"}) yMax?: number;
+  /** Index of the selected position, or null. */
+  @property({type: Number, reflect: true}) selected: number | null = null;
+
+  @state() private _active: number | null = null;
+  @state() private _hidden = new Set<number>();
+
+  static styles = [
+    resetStyles,
+    StChartBase.baseStyles,
+    css`
+      .line {
+        fill: none;
+        stroke-width: 2;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+      }
+      .area {
+        opacity: 0.15;
+      }
+      .crosshair {
+        stroke: var(--st-color-text-muted);
+        stroke-width: 1;
+        stroke-dasharray: 4 3;
+      }
+      .selected-band {
+        fill: var(--st-color-primary-muted);
+      }
+      .point {
+        stroke: var(--st-color-bg);
+        stroke-width: 2;
+      }
+    `,
+  ];
+
+  private get _visible() {
+    return this.series
+      .map((s, i) => ({s, i, color: chartColor(i, s.color)}))
+      .filter(({i}) => !this._hidden.has(i));
+  }
+
+  private get _count() {
+    return Math.max(this.labels.length, ...this.series.map((s) => s.data.length), 0);
+  }
+
+  private _geometry() {
+    const innerW = Math.max(this._width - MARGIN.left - MARGIN.right, 1);
+    const innerH = Math.max(this.height - MARGIN.top - MARGIN.bottom, 1);
+    const values = this._visible.flatMap(({s}) => s.data.filter((v): v is number => v != null));
+    const lo = this.yMin ?? Math.min(0, ...values);
+    const hi = this.yMax ?? Math.max(0, ...values);
+    const scale = niceScale(lo, hi);
+    const n = this._count;
+    const x = (i: number) => MARGIN.left + (n <= 1 ? innerW / 2 : (i * innerW) / (n - 1));
+    const y = (v: number) =>
+      MARGIN.top + innerH * (1 - (clamp(v, scale.min, scale.max) - scale.min) / (scale.max - scale.min));
+    return {innerW, innerH, scale, n, x, y};
+  }
+
+  private _valuesAt(index: number) {
+    return this.series.map((s, i) => ({
+      series: s.name,
+      value: s.data[index] ?? null,
+      color: chartColor(i, s.color),
+      hidden: this._hidden.has(i),
+    }));
+  }
+
+  private _label(index: number) {
+    return this.labels[index] ?? String(index + 1);
+  }
+
+  private _setActive(index: number | null) {
+    if (index === this._active) return;
+    this._active = index;
+    if (index === null) {
+      this.hideTooltip();
+      this.emit("st-chart-leave", {});
+      return;
+    }
+    const {x, y, scale} = this._geometry();
+    const visibleValues = this._valuesAt(index).filter((v) => !v.hidden && v.value !== null);
+    const top = visibleValues.length
+      ? Math.min(...visibleValues.map((v) => y(v.value as number)))
+      : y(scale.max);
+    const title = this._label(index);
+    this.showTooltip(
+      {
+        x: x(index),
+        y: top,
+        title,
+        rows: visibleValues.map((v) => ({
+          label: v.series,
+          value: this.fmt(v.value as number),
+          color: v.color,
+        })),
+      },
+      `${title}: ${visibleValues.map((v) => `${v.series} ${this.fmt(v.value as number)}`).join(", ")}`,
+    );
+    this.emit("st-chart-hover", {index, label: title, values: visibleValues});
+  }
+
+  private _select(index: number) {
+    if (!this.selectable) return;
+    this.selected = this.selected === index ? null : index;
+    this.emit("st-chart-select", {
+      index,
+      label: this._label(index),
+      values: this._valuesAt(index),
+      selected: this.selected === index,
+    });
+  }
+
+  private _indexFromPointer(e: PointerEvent) {
+    const {innerW, n} = this._geometry();
+    const rect = (e.currentTarget as SVGElement).ownerSVGElement!.getBoundingClientRect();
+    const ratio = clamp((e.clientX - rect.left - MARGIN.left) / innerW, 0, 1);
+    return n <= 1 ? 0 : Math.round(ratio * (n - 1));
+  }
+
+  private _onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") return this._setActive(null);
+    if ((e.key === "Enter" || e.key === " ") && this._active !== null) {
+      e.preventDefault();
+      return this._select(this._active);
+    }
+    const next = stepIndex(e.key, this._active, this._count);
+    if (next !== null) {
+      e.preventDefault();
+      this._setActive(next);
+    }
+  }
+
+  private _toggleSeries(index: number) {
+    const hidden = new Set(this._hidden);
+    if (hidden.has(index)) hidden.delete(index);
+    else hidden.add(index);
+    this._hidden = hidden;
+    this._active = null;
+    this.hideTooltip();
+    this.emit("st-chart-legend-toggle", {
+      name: this.series[index].name,
+      index,
+      hidden: hidden.has(index),
+    });
+  }
+
+  private _renderPlot() {
+    const {innerW, innerH, scale, n, x, y} = this._geometry();
+    const baseline = y(clamp(0, scale.min, scale.max));
+    const stride = Math.max(1, Math.ceil((n * 56) / innerW));
+    return svg`
+      <svg width=${this._width} height=${this.height} aria-hidden="true">
+        ${scale.ticks.map(
+          (t) => svg`
+            <line class="grid" x1=${MARGIN.left} x2=${MARGIN.left + innerW} y1=${y(t)} y2=${y(t)}></line>
+            <text class="tick" x=${MARGIN.left - 8} y=${y(t)} text-anchor="end" dominant-baseline="middle">${this.fmtAxis(t)}</text>
+          `,
+        )}
+        ${Array.from({length: n}, (_, i) =>
+          i % stride === 0
+            ? svg`<text class="tick" x=${x(i)} y=${MARGIN.top + innerH + 18} text-anchor="middle">${this._label(i)}</text>`
+            : nothing,
+        )}
+        ${this.selected !== null && this.selected < n
+          ? svg`<rect class="selected-band" x=${x(this.selected) - 12} y=${MARGIN.top} width="24" height=${innerH}></rect>`
+          : nothing}
+        ${this._visible.map(({s, color}) => {
+          const points = Array.from({length: n}, (_, i) => {
+            const v = s.data[i];
+            return v == null ? null : ([x(i), y(v)] as [number, number]);
+          });
+          return svg`
+            ${this.area
+              ? areaPaths(points, baseline).map(
+                  (d) => svg`<path class="area" d=${d} style="fill:${color}"></path>`,
+                )
+              : nothing}
+            <path class="line" d=${linePath(points)} style="stroke:${color}"></path>
+            ${points.map((p, i) =>
+              p
+                ? svg`<circle class="point animate" cx=${p[0]} cy=${p[1]} style="fill:${color}"
+                    r=${i === this._active || i === this.selected ? 5 : 3}></circle>`
+                : nothing,
+            )}
+          `;
+        })}
+        ${this._active !== null
+          ? svg`<line class="crosshair" x1=${x(this._active)} x2=${x(this._active)} y1=${MARGIN.top} y2=${MARGIN.top + innerH}></line>`
+          : nothing}
+        <rect
+          x=${MARGIN.left}
+          y=${MARGIN.top}
+          width=${innerW}
+          height=${innerH}
+          class="hit"
+          fill="transparent"
+          @pointermove=${(e: PointerEvent) => this._setActive(this._indexFromPointer(e))}
+          @pointerleave=${() => this._setActive(null)}
+          @click=${(e: PointerEvent) => this._select(this._indexFromPointer(e))}
+        ></rect>
+      </svg>
+    `;
+  }
+
+  render() {
+    const n = this._count;
+    return html`
+      <div class="chart">
+        ${this._width > 0
+          ? html`
+              <div
+                class="plot"
+                tabindex="0"
+                role="group"
+                aria-roledescription="line chart"
+                aria-label=${this.label || "Line chart"}
+                @keydown=${this._onKeydown}
+                @focus=${() => this._active === null && n && this._setActive(0)}
+                @blur=${() => this._setActive(null)}
+              >
+                ${this._renderPlot()} ${this.renderTooltip()}
+              </div>
+            `
+          : nothing}
+        ${this.renderLegend(
+          this.series.map((s, i) => ({
+            name: s.name,
+            color: chartColor(i, s.color),
+            hidden: this._hidden.has(i),
+          })),
+          (i) => this._toggleSeries(i),
+        )}
+        ${this.renderLiveRegion()}
+        ${this.renderDataTable(
+          ["Category", ...this.series.map((s) => s.name)],
+          Array.from({length: n}, (_, i) => [
+            this._label(i),
+            ...this.series.map((s) => (s.data[i] == null ? "–" : this.fmt(s.data[i] as number))),
+          ]),
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-line-chart": StLineChart;
+  }
+}