@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/back-to-top/back-to-top.ts

@@ -0,0 +1,140 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+
+/**
+ * A button that appears once the reader has scrolled down, and takes them back to the top. Focus
+ * moves to the top of the page too, so keyboard and screen reader users are not left behind.
+ *
+ * Events: `st-back-to-top` when pressed.
+ */
+@customElement("st-back-to-top")
+export class StBackToTop extends LitElement {
+  /** How far (in pixels) the page must be scrolled before the button appears. */
+  @property({type: Number}) threshold = 400;
+  /** Accessible name and tooltip. */
+  @property({type: String}) label = "Back to top";
+  @property({type: String, reflect: true}) position: "right" | "left" = "right";
+
+  @state() private _visible = false;
+  private _frame = 0;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        position: fixed;
+        bottom: var(--st-spacing-lg);
+        right: var(--st-spacing-lg);
+        z-index: var(--st-back-to-top-z, 90);
+      }
+
+      :host([position="left"]) {
+        right: auto;
+        left: var(--st-spacing-lg);
+      }
+
+      button {
+        display: grid;
+        place-items: center;
+        width: 3rem;
+        height: 3rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: 50%;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        box-shadow: var(--st-shadow-md);
+        cursor: pointer;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(0.5rem);
+        transition:
+          opacity 0.2s ease,
+          transform 0.2s ease,
+          visibility 0.2s;
+      }
+
+      button.visible {
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+      }
+
+      button:hover {
+        background: var(--st-color-surface-hover);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        button {
+          transition: none;
+        }
+      }
+
+      @media print {
+        :host {
+          display: none;
+        }
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("scroll", this._schedule, {passive: true});
+    this._schedule();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("scroll", this._schedule);
+    cancelAnimationFrame(this._frame);
+    super.disconnectedCallback();
+  }
+
+  private _schedule = () => {
+    cancelAnimationFrame(this._frame);
+    this._frame = requestAnimationFrame(() => {
+      this._visible = window.scrollY > this.threshold;
+    });
+  };
+
+  private _onClick() {
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    window.scrollTo({top: 0, behavior: reduce ? "auto" : "smooth"});
+
+    // Move focus to the start of the page without scrolling again.
+    const body = document.body;
+    if (!body.hasAttribute("tabindex")) {
+      body.setAttribute("tabindex", "-1");
+      body.addEventListener("blur", () => body.removeAttribute("tabindex"), {once: true});
+    }
+    body.focus({preventScroll: true});
+
+    this.dispatchEvent(new CustomEvent("st-back-to-top", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <button
+        type="button"
+        class=${this._visible ? "visible" : ""}
+        aria-label=${this.label}
+        title=${this.label}
+        @click=${this._onClick}
+      >
+        <st-icon name="arrow-up" aria-hidden="true"></st-icon>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-back-to-top": StBackToTop;
+  }
+}

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

@@ -0,0 +1,295 @@
+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 {chartColor, clamp, niceScale, stepIndex} from "../chart/chart.utils.js";
+
+const MARGIN = {top: 12, right: 16, bottom: 28, left: 48};
+const BAND_PADDING = 0.2;
+
+export interface BarRef {
+  series: number;
+  index: number;
+}
+
+/**
+ * Grouped or stacked bar chart. Each bar is individually hoverable, focusable via the arrow
+ * keys, and selectable. Stacked mode assumes non-negative values per category for totals.
+ */
+@customElement("st-bar-chart")
+export class StBarChart extends StChartBase {
+  @property({type: Array}) labels: string[] = [];
+  @property({type: Array}) series: ChartSeries[] = [];
+  @property({type: Boolean}) stacked = false;
+  @property({type: Number, attribute: "y-min"}) yMin?: number;
+  @property({type: Number, attribute: "y-max"}) yMax?: number;
+  /** The selected bar, e.g. `{ "series": 0, "index": 2 }`, or null. */
+  @property({type: Object}) selected: BarRef | null = null;
+
+  @state() private _active: BarRef | null = null;
+  @state() private _hidden = new Set<number>();
+
+  static styles = [
+    resetStyles,
+    StChartBase.baseStyles,
+    css`
+      .bar {
+        cursor: default;
+      }
+      :host([selectable]) .bar {
+        cursor: pointer;
+      }
+      .bar.dim {
+        opacity: 0.45;
+      }
+      .bar.active {
+        stroke: var(--st-color-text);
+        stroke-width: 2;
+      }
+      .bar.chosen {
+        stroke: var(--st-color-text);
+        stroke-width: 2;
+        stroke-dasharray: 4 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 _label(index: number) {
+    return this.labels[index] ?? String(index + 1);
+  }
+
+  /** Bars in keyboard order: category by category, visible series within each. */
+  private get _bars(): BarRef[] {
+    const bars: BarRef[] = [];
+    for (let index = 0; index < this._count; index++) {
+      for (const {s, i} of this._visible) {
+        if (s.data[index] != null) bars.push({series: i, index});
+      }
+    }
+    return bars;
+  }
+
+  private _layout() {
+    const innerW = Math.max(this._width - MARGIN.left - MARGIN.right, 1);
+    const innerH = Math.max(this.height - MARGIN.top - MARGIN.bottom, 1);
+    const n = this._count;
+    const visible = this._visible;
+    let lo = 0;
+    let hi = 0;
+    for (let index = 0; index < n; index++) {
+      let pos = 0;
+      let neg = 0;
+      for (const {s} of visible) {
+        const v = s.data[index];
+        if (v == null) continue;
+        if (this.stacked) (v >= 0 ? (pos += v) : (neg += v));
+        else {
+          pos = Math.max(pos, v);
+          neg = Math.min(neg, v);
+        }
+      }
+      hi = Math.max(hi, pos);
+      lo = Math.min(lo, neg);
+    }
+    const scale = niceScale(this.yMin ?? lo, this.yMax ?? hi);
+    const y = (v: number) =>
+      MARGIN.top + innerH * (1 - (clamp(v, scale.min, scale.max) - scale.min) / (scale.max - scale.min));
+    const band = innerW / Math.max(n, 1);
+    const groupW = band * (1 - BAND_PADDING);
+    return {innerW, innerH, n, scale, y, band, groupW, visible};
+  }
+
+  private _barRect(ref: BarRef, layout = this._layout()) {
+    const {y, band, groupW, visible, scale} = layout;
+    const zero = y(clamp(0, scale.min, scale.max));
+    const value = this.series[ref.series].data[ref.index] as number;
+    const left = MARGIN.left + ref.index * band + (band - groupW) / 2;
+    let x = left;
+    let width = groupW;
+    let top: number;
+    let bottom: number;
+    if (this.stacked) {
+      let offset = 0;
+      for (const {s, i} of visible) {
+        if (i === ref.series) break;
+        const v = s.data[ref.index];
+        if (v != null && v >= 0 === value >= 0) offset += v;
+      }
+      top = y(offset + value);
+      bottom = y(offset);
+    } else {
+      width = groupW / Math.max(visible.length, 1);
+      x = left + visible.findIndex(({i}) => i === ref.series) * width;
+      top = y(value);
+      bottom = zero;
+    }
+    return {x, width, top: Math.min(top, bottom), height: Math.max(Math.abs(bottom - top), 1)};
+  }
+
+  private _same(a: BarRef | null, b: BarRef | null) {
+    return !!a && !!b && a.series === b.series && a.index === b.index;
+  }
+
+  private _describe(ref: BarRef) {
+    const s = this.series[ref.series];
+    const value = s.data[ref.index] as number;
+    return {
+      index: ref.index,
+      label: this._label(ref.index),
+      series: s.name,
+      seriesIndex: ref.series,
+      value,
+    };
+  }
+
+  private _setActive(ref: BarRef | null) {
+    if (this._same(ref, this._active)) return;
+    this._active = ref;
+    if (!ref) {
+      this.hideTooltip();
+      this.emit("st-chart-leave", {});
+      return;
+    }
+    const layout = this._layout();
+    const rect = this._barRect(ref, layout);
+    const d = this._describe(ref);
+    const rows = [{label: d.series, value: this.fmt(d.value), color: chartColor(ref.series, this.series[ref.series].color)}];
+    if (this.stacked) {
+      const total = layout.visible.reduce((sum, {s}) => sum + (s.data[ref.index] ?? 0), 0);
+      rows.push({label: "Total", value: this.fmt(total), color: undefined as unknown as string});
+    }
+    this.showTooltip(
+      {x: rect.x + rect.width / 2, y: rect.top, title: d.label, rows},
+      `${d.label}, ${d.series}: ${this.fmt(d.value)}`,
+    );
+    this.emit("st-chart-hover", d);
+  }
+
+  private _select(ref: BarRef) {
+    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 bars = this._bars;
+    const current = this._active ? bars.findIndex((b) => this._same(b, this._active)) : null;
+    const next = stepIndex(e.key, current === -1 ? null : current, bars.length);
+    if (next !== null) {
+      e.preventDefault();
+      this._setActive(bars[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 layout = this._layout();
+    const {innerW, innerH, scale, n, y, band} = layout;
+    const stride = Math.max(1, Math.ceil((n * 56) / innerW));
+    const emphasis = this._active ?? this.selected;
+    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=${MARGIN.left + band * i + band / 2} y=${MARGIN.top + innerH + 18} text-anchor="middle">${this._label(i)}</text>`
+            : nothing,
+        )}
+        ${this._bars.map((ref) => {
+          const r = this._barRect(ref, layout);
+          const color = chartColor(ref.series, this.series[ref.series].color);
+          const dim = emphasis && !this._same(emphasis, ref) ? "dim" : "";
+          return svg`
+            <rect
+              class="bar animate ${dim} ${this._same(this._active, ref) ? "active" : ""} ${this._same(this.selected, ref) ? "chosen" : ""}"
+              x=${r.x} y=${r.top} width=${r.width} height=${r.height} rx="2"
+              style="fill:${color}"
+              @pointerenter=${() => this._setActive(ref)}
+              @pointerleave=${() => this._setActive(null)}
+              @click=${() => this._select(ref)}
+            ></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="bar chart"
+                aria-label=${this.label || "Bar chart"}
+                @keydown=${this._onKeydown}
+                @focus=${() => !this._active && this._bars.length && this._setActive(this._bars[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-bar-chart": StBarChart;
+  }
+}

package/src/components/breadcrumb/breadcrumb.ts

@@ -26,7 +26,7 @@ export class StBreadcrumb extends LitElement {
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        font-size: var(--st-font-size-sm, 0.875rem);
+        font-size: var(--st-font-size-sm);
       }
 
       ol {
@@ -46,7 +46,7 @@ export class StBreadcrumb extends LitElement {
 
       li:not(:last-child)::after {
         content: "/";
-        margin: 0 var(--st-spacing-sm, 0.5rem);
+        margin: 0 var(--st-spacing-sm);
         color: var(--st-color-border);
       }
 

package/src/components/button/button.ts

@@ -2,6 +2,7 @@ import {LitElement, html, css, nothing} from "lit";
 import {customElement, property} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
 import {ButtonColor, ButtonSize, ButtonVariant} from "./button.constants.js";
+export type {ButtonColor, ButtonSize, ButtonVariant};
 
 @customElement("st-button")
 export class StButton extends LitElement {
@@ -69,7 +70,7 @@ export class StButton extends LitElement {
         --_bg: transparent;
       }
       :host([variant="outline"][color="default"]) {
-        --_border: var(--st-gray-500, #71717a);
+        --_border: var(--st-gray-500);
         --_text: var(--st-color-text);
       }
       :host([variant="outline"][color="primary"]) {
@@ -167,26 +168,26 @@ export class StButton extends LitElement {
         line-height: 1;
 
         cursor: pointer;
-        font-weight: var(--st-font-weight-medium, 500);
+        font-weight: var(--st-font-weight-medium);
         transition: all 0.2s ease;
         text-decoration: none;
 
-        border-radius: var(--btn-radius-tl, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-tr, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-br, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-bl, var(--st-radius-md, 0.5rem));
+        border-radius: var(--btn-radius-tl, var(--st-radius-md))
+          var(--btn-radius-tr, var(--st-radius-md))
+          var(--btn-radius-br, var(--st-radius-md))
+          var(--btn-radius-bl, var(--st-radius-md));
       }
 
       :host([active]) .btn {
         filter: brightness(0.9);
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--st-shadow-inset);
         background-color: var(--_bg); /* Retain base background */
       }
 
       .btn:focus-visible {
         outline: none;
         box-shadow:
-          0 0 0 2px var(--st-color-bg, #ffffff),
+          0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
         z-index: 1;
       }

package/src/components/button-group/button-group.ts

@@ -23,14 +23,14 @@ export class StButtonGroup extends LitElement {
 
       /* 2. Restore ONLY the left corners for the first button */
       ::slotted(st-button:first-child) {
-        --btn-radius-tl: var(--st-radius-md, 0.5rem);
-        --btn-radius-bl: var(--st-radius-md, 0.5rem);
+        --btn-radius-tl: var(--st-radius-md);
+        --btn-radius-bl: var(--st-radius-md);
       }
 
       /* 3. Restore ONLY the right corners for the last button */
       ::slotted(st-button:last-child) {
-        --btn-radius-tr: var(--st-radius-md, 0.5rem);
-        --btn-radius-br: var(--st-radius-md, 0.5rem);
+        --btn-radius-tr: var(--st-radius-md);
+        --btn-radius-br: var(--st-radius-md);
       }
 
       /* 4. Collapse borders by pulling adjacent buttons left */

package/src/components/calendar/calendar.ts

@@ -31,6 +31,9 @@ const formatIsoLocal = (date: Date): string => {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 };
 
+/** Reads `.value` from a custom form element event target. */
+const targetValue = <T = string>(e: Event) => (e.target as unknown as {value: T}).value;
+
 @customElement("st-calendar")
 export class StCalendar extends LitElement {
   static formAssociated = true;
@@ -74,7 +77,7 @@ export class StCalendar extends LitElement {
       }
 
       :host([invalid]) {
-        border-color: var(--st-color-error, #dc2626);
+        border-color: var(--st-color-error);
       }
 
       .header {
@@ -117,7 +120,7 @@ export class StCalendar extends LitElement {
       }
 
       .nav-button:hover {
-        background-color: var(--st-color-surface-hover, #f1f5f9);
+        background-color: var(--st-color-surface-hover);
         color: var(--st-color-text);
       }
 
@@ -164,7 +167,7 @@ export class StCalendar extends LitElement {
       }
 
       .day:hover:not(:disabled):not(.empty) {
-        background-color: var(--st-color-surface-hover, #f1f5f9);
+        background-color: var(--st-color-surface-hover);
       }
 
       .day:focus-visible {
@@ -185,18 +188,18 @@ export class StCalendar extends LitElement {
 
       .day[aria-current="date"] {
         font-weight: var(--st-font-weight-bold);
-        color: var(--st-color-primary);
-        background-color: var(--st-color-primary-light, #eff6ff);
+        color: var(--st-color-primary-text);
+        background-color: var(--st-color-primary-bg);
       }
 
       .day[aria-selected="true"] {
         background-color: var(--st-color-primary);
-        color: var(--st-color-on-primary, var(--st-color-bg, #ffffff));
+        color: var(--st-color-on-primary);
         font-weight: var(--st-font-weight-bold);
       }
 
       .day[aria-selected="true"]:hover {
-        background-color: var(--st-color-primary-dark, #1d4ed8);
+        background-color: var(--st-color-primary-dark);
       }
     `,
   ];
@@ -413,7 +416,7 @@ export class StCalendar extends LitElement {
             .options=${monthOptions}
             .value=${String(this._viewMonth)}
             ?disabled=${this.disabled}
-            @change=${(e: any) => (this._viewMonth = Number(e.target.value))}
+            @change=${(e: Event) => (this._viewMonth = Number(targetValue(e)))}
           ></st-select>
 
           <st-select
@@ -422,7 +425,7 @@ export class StCalendar extends LitElement {
             .options=${yearOptions}
             .value=${String(this._viewYear)}
             ?disabled=${this.disabled}
-            @change=${(e: any) => (this._viewYear = Number(e.target.value))}
+            @change=${(e: Event) => (this._viewYear = Number(targetValue(e)))}
           ></st-select>
         </div>