@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/heat-map/heat-map.ts

@@ -0,0 +1,292 @@
+import {html, css, svg, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StChartBase} from "../chart/chart-base.js";
+import {clamp, normalize} from "../chart/chart.utils.js";
+
+export const heatMapColors = ["primary", "info", "success", "warning", "error"] as const;
+export type HeatMapColor = (typeof heatMapColors)[number];
+
+export interface HeatCellRef {
+  row: number;
+  col: number;
+}
+
+const MARGIN = {top: 28, right: 8, bottom: 8};
+
+/** Matrix heat map. Cell intensity is interpolated between the surface and the chosen color. */
+@customElement("st-heat-map")
+export class StHeatMap extends StChartBase {
+  @property({type: Array}) rows: string[] = [];
+  @property({type: Array}) columns: string[] = [];
+  /** `values[row][col]`; null/undefined renders an empty cell. */
+  @property({type: Array}) values: (number | null)[][] = [];
+  @property({type: Number}) min?: number;
+  @property({type: Number}) max?: number;
+  @property({type: String, reflect: true}) color: HeatMapColor = "primary";
+  /** Prints each value inside its cell when the cell is large enough. */
+  @property({type: Boolean, attribute: "show-values"}) showValues = false;
+  /** The selected cell, e.g. `{ "row": 1, "col": 2 }`, or null. */
+  @property({type: Object}) selected: HeatCellRef | null = null;
+
+  @state() private _active: HeatCellRef | null = null;
+
+  static styles = [
+    resetStyles,
+    StChartBase.baseStyles,
+    css`
+      :host {
+        --_ramp: var(--st-color-primary);
+        --_on-ramp: var(--st-color-on-primary);
+      }
+      :host([color="info"]) {
+        --_ramp: var(--st-color-info);
+        --_on-ramp: var(--st-color-on-info);
+      }
+      :host([color="success"]) {
+        --_ramp: var(--st-color-success);
+        --_on-ramp: var(--st-color-on-success);
+      }
+      :host([color="warning"]) {
+        --_ramp: var(--st-color-warning);
+        --_on-ramp: var(--st-color-on-warning);
+      }
+      :host([color="error"]) {
+        --_ramp: var(--st-color-error);
+        --_on-ramp: var(--st-color-on-danger);
+      }
+      .cell {
+        stroke: var(--st-color-bg);
+        stroke-width: 2;
+        cursor: default;
+      }
+      :host([selectable]) .cell {
+        cursor: pointer;
+      }
+      .cell.empty {
+        fill: var(--st-color-surface-muted);
+        opacity: 0.4;
+      }
+      .cell.active {
+        stroke: var(--st-color-text);
+      }
+      .cell.chosen {
+        stroke: var(--st-color-text);
+        stroke-dasharray: 4 2;
+      }
+      .cell-text {
+        font-size: var(--st-font-size-xs);
+        pointer-events: none;
+      }
+      .scale {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        margin-top: var(--st-spacing-sm);
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+      }
+      .scale-bar {
+        flex: 1;
+        max-width: 12rem;
+        height: 0.5rem;
+        border-radius: 999px;
+        border: 1px solid var(--st-color-border);
+        background: linear-gradient(
+          to right,
+          var(--st-color-surface-muted),
+          var(--_ramp)
+        );
+      }
+    `,
+  ];
+
+  private get _range(): [number, number] {
+    const flat = this.values.flat().filter((v): v is number => v != null);
+    return [this.min ?? Math.min(...flat, Infinity), this.max ?? Math.max(...flat, -Infinity)].map(
+      (v) => (Number.isFinite(v) ? v : 0),
+    ) as [number, number];
+  }
+
+  private _value(ref: HeatCellRef) {
+    return this.values[ref.row]?.[ref.col] ?? null;
+  }
+
+  private _same(a: HeatCellRef | null, b: HeatCellRef | null) {
+    return !!a && !!b && a.row === b.row && a.col === b.col;
+  }
+
+  private _layout() {
+    const maxLabel = Math.max(0, ...this.rows.map((r) => r.length));
+    const left = clamp(maxLabel * 7 + 16, 40, 140);
+    const innerW = Math.max(this._width - left - MARGIN.right, 1);
+    const innerH = Math.max(this.height - MARGIN.top - MARGIN.bottom, 1);
+    return {
+      left,
+      cellW: innerW / Math.max(this.columns.length, 1),
+      cellH: innerH / Math.max(this.rows.length, 1),
+    };
+  }
+
+  private _describe(ref: HeatCellRef) {
+    return {
+      row: ref.row,
+      col: ref.col,
+      rowLabel: this.rows[ref.row],
+      columnLabel: this.columns[ref.col],
+      value: this._value(ref),
+    };
+  }
+
+  private _setActive(ref: HeatCellRef | null) {
+    if (this._same(ref, this._active)) return;
+    this._active = ref;
+    if (!ref) {
+      this.hideTooltip();
+      this.emit("st-chart-leave", {});
+      return;
+    }
+    const {left, cellW, cellH} = this._layout();
+    const d = this._describe(ref);
+    const value = d.value === null ? "No data" : this.fmt(d.value);
+    this.showTooltip(
+      {
+        x: left + (ref.col + 0.5) * cellW,
+        y: MARGIN.top + ref.row * cellH,
+        title: `${d.rowLabel} · ${d.columnLabel}`,
+        rows: [{label: "Value", value}],
+      },
+      `${d.rowLabel}, ${d.columnLabel}: ${value}`,
+    );
+    this.emit("st-chart-hover", d);
+  }
+
+  private _select(ref: HeatCellRef) {
+    if (!this.selectable) return;
+    this.selected = this._same(this.selected, ref) ? null : {...ref};
+    this.emit("st-chart-select", {...this._describe(ref), selected: this.selected !== null});
+  }
+
+  private _onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") return this._setActive(null);
+    if ((e.key === "Enter" || e.key === " ") && this._active) {
+      e.preventDefault();
+      return this._select(this._active);
+    }
+    const cur = this._active ?? {row: 0, col: -1};
+    const rows = this.rows.length;
+    const cols = this.columns.length;
+    if (!rows || !cols) return;
+    let {row, col} = cur;
+    switch (e.key) {
+      case "ArrowRight": col = Math.min(col + 1, cols - 1); break;
+      case "ArrowLeft": col = Math.max(col - 1, 0); break;
+      case "ArrowDown": row = Math.min(row + 1, rows - 1); col = Math.max(col, 0); break;
+      case "ArrowUp": row = Math.max(row - 1, 0); col = Math.max(col, 0); break;
+      case "Home": col = 0; break;
+      case "End": col = cols - 1; break;
+      default: return;
+    }
+    e.preventDefault();
+    this._setActive({row, col});
+  }
+
+  private _renderPlot() {
+    const {left, cellW, cellH} = this._layout();
+    const [lo, hi] = this._range;
+    const emphasis = this._active ?? this.selected;
+    return svg`
+      <svg width=${this._width} height=${this.height} aria-hidden="true">
+        ${this.columns.map(
+          (c, i) => svg`<text class="tick" x=${left + (i + 0.5) * cellW} y=${MARGIN.top - 10} text-anchor="middle">${c}</text>`,
+        )}
+        ${this.rows.map(
+          (r, i) => svg`<text class="tick" x=${left - 8} y=${MARGIN.top + (i + 0.5) * cellH} text-anchor="end" dominant-baseline="middle">${r}</text>`,
+        )}
+        ${this.rows.map((_, row) =>
+          this.columns.map((_, col) => {
+            const ref = {row, col};
+            const value = this._value(ref);
+            const t = value === null ? 0 : normalize(value, lo, hi);
+            const pct = Math.round(t * 100);
+            const x = left + col * cellW;
+            const y = MARGIN.top + row * cellH;
+            const classes = [
+              "cell",
+              value === null ? "empty" : "",
+              this._same(this._active, ref) ? "active" : "",
+              this._same(this.selected, ref) ? "chosen" : "",
+            ].join(" ");
+            const label =
+              this.showValues && value !== null && cellW > 36 && cellH > 20
+                ? svg`<text class="cell-text" x=${x + cellW / 2} y=${y + cellH / 2} text-anchor="middle" dominant-baseline="middle"
+                    style="fill:${pct > 55 ? "var(--_on-ramp)" : "var(--st-color-text)"}">${this.fmtAxis(value)}</text>`
+                : nothing;
+            return svg`
+              <rect
+                class=${classes}
+                x=${x} y=${y} width=${cellW} height=${cellH} rx="3"
+                style=${value === null ? "" : `fill:color-mix(in srgb, var(--_ramp) ${pct}%, var(--st-color-surface-muted))`}
+                opacity=${emphasis && !this._same(emphasis, ref) && value !== null ? 0.7 : 1}
+                @pointerenter=${() => this._setActive(ref)}
+                @pointerleave=${() => this._setActive(null)}
+                @click=${() => this._select(ref)}
+              ></rect>
+              ${label}
+            `;
+          }),
+        )}
+      </svg>
+    `;
+  }
+
+  render() {
+    const [lo, hi] = this._range;
+    return html`
+      <div class="chart">
+        ${this._width > 0
+          ? html`
+              <div
+                class="plot"
+                tabindex="0"
+                role="group"
+                aria-roledescription="heat map"
+                aria-label=${this.label || "Heat map"}
+                @keydown=${this._onKeydown}
+                @focus=${() => !this._active && this.rows.length && this.columns.length && this._setActive({row: 0, col: 0})}
+                @blur=${() => this._setActive(null)}
+              >
+                ${this._renderPlot()} ${this.renderTooltip()}
+              </div>
+            `
+          : nothing}
+        ${this.hideLegend
+          ? nothing
+          : html`
+              <div class="scale" aria-hidden="true">
+                <span>${this.fmtAxis(lo)}</span>
+                <span class="scale-bar"></span>
+                <span>${this.fmtAxis(hi)}</span>
+              </div>
+            `}
+        ${this.renderLiveRegion()}
+        ${this.renderDataTable(
+          ["Row", ...this.columns],
+          this.rows.map((r, row) => [
+            r,
+            ...this.columns.map((_, col) => {
+              const v = this._value({row, col});
+              return v === null ? "–" : this.fmt(v);
+            }),
+          ]),
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-heat-map": StHeatMap;
+  }
+}

package/src/components/hero/hero.ts

@@ -0,0 +1,132 @@
+import {html, css} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+
+/**
+ * The opening row of a page: a big title, a short introduction and the main actions. Add a
+ * `media` (an image or video) and the row becomes two columns on wide screens, text beside media,
+ * stacking on narrow ones.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, `actions` (buttons), `media` and the default slot for
+ * anything extra under the actions (a note, a row of logos).
+ * It takes all the row options of `st-section` (tone, space, width, reveal, label).
+ */
+@customElement("st-hero")
+export class StHero extends StSection {
+  /** With media, shows it before the text instead of after. */
+  @property({type: Boolean, reflect: true}) reverse = false;
+
+  @state() private _hasMedia = false;
+  @state() private _hasActions = false;
+
+  constructor() {
+    super();
+    this.space = "lg";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .hero {
+        display: grid;
+        gap: var(--st-spacing-2xl);
+        align-items: center;
+      }
+
+      :host([data-media]) .hero {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      @media (min-width: 60rem) {
+        :host([data-media]) .hero {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        :host([reverse]) .media {
+          order: -1;
+        }
+      }
+
+      .text {
+        display: grid;
+        justify-items: center;
+        gap: var(--st-spacing-lg);
+      }
+
+      :host([data-media]) .text {
+        justify-items: start;
+      }
+
+      :host([data-media]) .header {
+        margin-inline: 0;
+        text-align: start;
+      }
+
+      .header {
+        margin-bottom: 0;
+      }
+
+      ::slotted([slot="title"]) {
+        font-size: clamp(2rem, 5vw, 3.5rem) !important;
+      }
+
+      ::slotted([slot="lead"]) {
+        font-size: var(--st-font-size-xl);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+        justify-content: center;
+      }
+
+      :host([data-media]) .actions {
+        justify-content: flex-start;
+      }
+
+      .media ::slotted(*) {
+        width: 100%;
+        border-radius: var(--st-radius-lg);
+      }
+    `,
+  ];
+
+  private _onMediaChange = (e: Event) => {
+    this._hasMedia = (e.target as HTMLSlotElement).assignedNodes().length > 0;
+    this.toggleAttribute("data-media", this._hasMedia);
+  };
+
+  render() {
+    return this.frame(
+      html`
+        <div class="hero">
+          <div class="text">
+            ${this.renderHeader()}
+            ${this.animateIn(
+              html`<div class="actions" ?hidden=${!this._hasActions}>
+                <slot
+                  name="actions"
+                  @slotchange=${(e: Event) =>
+                    (this._hasActions = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+                ></slot>
+              </div>`,
+              150,
+            )}
+            ${this.animateIn(html`<slot @slotchange=${this._onItemsChange}></slot>`, 250)}
+          </div>
+          <div class="media" ?hidden=${!this._hasMedia}>
+            ${this.animateIn(html`<slot name="media" @slotchange=${this._onMediaChange}></slot>`, 200)}
+          </div>
+        </div>
+      `,
+      {header: false, animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-hero": StHero;
+  }
+}

package/src/components/icon/icon-paths.ts

@@ -1,4 +1,11 @@
-import {svg} from "lit";
+import {svg, type SVGTemplateResult} from "lit";
+
+/**
+ * Stroke-based icon builder. The shared <st-icon> wrapper applies fill + stroke to every
+ * path, so line icons reset the fill and use a bold, round stroke on the 640 grid.
+ */
+const line = (body: SVGTemplateResult) =>
+  svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><g fill="none" stroke="currentColor" stroke-width="48" stroke-linecap="round" stroke-linejoin="round">${body}</g></svg>`;
 
 export const iconPaths = {
   "angles-down": {
@@ -203,6 +210,90 @@ export const iconPaths = {
   },
   "wrench": {
     classic: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M541.4 162.6C549 155 561.7 156.9 565.5 166.9C572.3 184.6 576 203.9 576 224C576 312.4 504.4 384 416 384C398.5 384 381.6 381.2 365.8 376L178.9 562.9C150.8 591 105.2 591 77.1 562.9C49 534.8 49 489.2 77.1 461.1L264 274.2C258.8 258.4 256 241.6 256 224C256 135.6 327.6 64 416 64C436.1 64 455.4 67.7 473.1 74.5C483.1 78.3 484.9 91 477.4 98.6L388.7 187.3C385.7 190.3 384 194.4 384 198.6L384 240C384 248.8 391.2 256 400 256L441.4 256C445.6 256 449.7 254.3 452.7 251.3L541.4 162.6z"/></svg>`
+  },
+  "x": {
+    classic: line(svg`<path d="M160 160L480 480M480 160L160 480"/>`)
+  },
+  "check": {
+    classic: line(svg`<path d="M128 336L256 464L512 192"/>`)
+  },
+  "search": {
+    classic: line(svg`<circle cx="280" cy="280" r="176"/><path d="M410 410L530 530"/>`)
+  },
+  "eye": {
+    classic: line(svg`<path d="M64 320C128 200 220 144 320 144C420 144 512 200 576 320C512 440 420 496 320 496C220 496 128 440 64 320Z"/><circle cx="320" cy="320" r="72"/>`)
+  },
+  "eye-slash": {
+    classic: line(svg`<path d="M64 320C128 200 220 144 320 144C420 144 512 200 576 320C512 440 420 496 320 496C220 496 128 440 64 320Z"/><circle cx="320" cy="320" r="72"/><path d="M120 120L520 520"/>`)
+  },
+  "copy": {
+    classic: line(svg`<rect x="216" y="216" width="320" height="320" rx="48"/><path d="M424 216V152A48 48 0 0 0 376 104H152A48 48 0 0 0 104 152V376A48 48 0 0 0 152 424H216"/>`)
+  },
+  "menu": {
+    classic: line(svg`<path d="M112 176H528M112 320H528M112 464H528"/>`)
+  },
+  "ellipsis": {
+    classic: line(svg`<path d="M144 320h.01M320 320h.01M496 320h.01"/>`)
+  },
+  "filter": {
+    classic: line(svg`<path d="M96 128H544L360 336V496L280 544V336Z"/>`)
+  },
+  "sort-up": {
+    classic: line(svg`<path d="M152 512V128M72 208L152 128L232 208M312 160H408M312 288H472M312 416H536"/>`)
+  },
+  "sort-down": {
+    classic: line(svg`<path d="M152 128V512M72 432L152 512L232 432M312 160H536M312 288H472M312 416H408"/>`)
+  },
+  "sliders": {
+    classic: line(svg`<path d="M96 160H544M96 320H544M96 480H544"/><circle cx="224" cy="160" r="48"/><circle cx="416" cy="320" r="48"/><circle cx="288" cy="480" r="48"/>`)
+  },
+  "calendar-clock": {
+    classic: line(svg`<rect x="80" y="112" width="400" height="400" rx="48"/><path d="M80 240H480M184 64V160M376 64V160"/><circle cx="480" cy="456" r="104"/><path d="M480 408V456L512 480"/>`)
+  },
+  "user": {
+    classic: line(svg`<circle cx="320" cy="208" r="96"/><path d="M112 544C112 430 204 352 320 352C436 352 528 430 528 544"/>`)
+  },
+  "lock": {
+    classic: line(svg`<rect x="128" y="288" width="384" height="256" rx="48"/><path d="M208 288V208A112 112 0 0 1 432 208V288M320 400V448"/>`)
+  },
+  "link": {
+    classic: line(svg`<path d="M272 368A96 96 0 0 0 408 368L520 256A96 96 0 0 0 384 120L352 152M368 272A96 96 0 0 0 232 272L120 384A96 96 0 0 0 256 520L288 488"/>`)
+  },
+  "external-link": {
+    classic: line(svg`<path d="M320 128H176A48 48 0 0 0 128 176V464A48 48 0 0 0 176 512H464A48 48 0 0 0 512 464V320M384 96H544V256M544 96L288 352"/>`)
+  },
+  "bell": {
+    classic: line(svg`<path d="M160 448H480C432 400 432 336 432 272A112 112 0 0 0 208 272C208 336 208 400 160 448ZM276 512A48 48 0 0 0 364 512"/>`)
+  },
+  "server": {
+    classic: line(svg`<rect x="96" y="96" width="448" height="176" rx="40"/><rect x="96" y="368" width="448" height="176" rx="40"/><path d="M192 184h.01M192 456h.01"/>`)
+  },
+  "hard-drive": {
+    classic: line(svg`<path d="M96 352L168 160H472L544 352V448A32 32 0 0 1 512 480H128A32 32 0 0 1 96 448ZM96 352H544M456 416h.01"/>`)
+  },
+  "monitor": {
+    classic: line(svg`<rect x="64" y="96" width="512" height="340" rx="40"/><path d="M320 436V540M200 544H440"/>`)
+  },
+  "loader": {
+    classic: line(svg`<path d="M320 96V176M320 464V544M96 320H176M464 320H544M161 161L218 218M422 422L479 479M161 479L218 422M422 218L479 161"/>`)
+  },
+  "cpu": {
+    classic: line(svg`<rect x="160" y="160" width="320" height="320" rx="32"/><rect x="256" y="256" width="128" height="128"/><path d="M256 64V160M384 64V160M256 480V576M384 480V576M64 256H160M64 384H160M480 256H576M480 384H576"/>`)
+  },
+  "box": {
+    classic: line(svg`<path d="M320 64L544 176V400L320 512L96 400V176ZM96 176L320 288L544 176M320 288V512"/>`)
+  },
+  "minus": {
+    classic: line(svg`<path d="M128 320H512"/>`)
+  },
+  "table": {
+    classic: line(svg`<rect x="80" y="112" width="480" height="416" rx="40"/><path d="M80 232H560M80 352H560M240 232V528"/>`)
+  },
+  "grid": {
+    classic: line(svg`<rect x="96" y="96" width="176" height="176" rx="32"/><rect x="368" y="96" width="176" height="176" rx="32"/><rect x="96" y="368" width="176" height="176" rx="32"/><rect x="368" y="368" width="176" height="176" rx="32"/>`)
+  },
+  "list": {
+    classic: line(svg`<path d="M112 160h.01M112 320h.01M112 480h.01M232 160H544M232 320H544M232 480H544"/>`)
   }
 };
 

package/src/components/icon/icon.ts

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement, property } from 'lit/decorators.js';
 import { iconPaths, IconName } from './icon-paths.js';
 import { resetStyles } from '../../styles/reset.js';
@@ -9,6 +10,9 @@ export type IconVariant = 'classic' | 'thin';
 export class StIcon extends LitElement {
   @property({ type: String }) name: IconName | string = '';
   @property({ type: String }) variant: IconVariant = 'classic';
+
+  /** Accessible name. When omitted the icon is decorative and hidden from assistive tech. */
+  @property({ type: String }) label = '';
   
   // Semantic Colors
   @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
@@ -64,7 +68,10 @@ export class StIcon extends LitElement {
 
     return html`
       <svg 
-        viewBox="0 0 24 24" 
+        viewBox="0 0 24 24"
+        role=${this.label ? 'img' : 'presentation'}
+        aria-label=${ifDefined(this.label || undefined)}
+        aria-hidden=${this.label ? 'false' : 'true'} 
         xmlns="http://www.w3.org/2000/svg"
         fill="currentColor"
         stroke="currentColor"