@sondor-technology/sondor-components 1.0.8 → 1.0.10

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

@@ -0,0 +1,275 @@
+import {LitElement, html, css, nothing} from "lit";
+import {property, state} from "lit/decorators.js";
+import {formatCompact, formatValue} from "./chart.utils.js";
+
+export interface ChartSeries {
+  name: string;
+  data: (number | null)[];
+  color?: string;
+}
+
+export interface TooltipRow {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+export interface TooltipState {
+  x: number;
+  y: number;
+  title?: string;
+  rows: TooltipRow[];
+}
+
+export interface LegendItem {
+  name: string;
+  color: string;
+  hidden: boolean;
+}
+
+/**
+ * Shared behavior for the dashboard charts: responsive width, tooltip, legend toggling,
+ * screen-reader announcements and a visually hidden data table fallback.
+ *
+ * Events (all bubble and are composed):
+ * - `st-chart-hover`  fires when the pointer or keyboard focus moves to a datum.
+ * - `st-chart-leave`  fires when the active datum is cleared.
+ * - `st-chart-select` fires when a datum is selected/deselected (requires `selectable`).
+ * - `st-chart-legend-toggle` fires when a legend entry is shown/hidden.
+ */
+export abstract class StChartBase extends LitElement {
+  @property({type: Number}) height = 300;
+  /** Accessible name describing the chart. */
+  @property({type: String}) label = "";
+  @property({type: Boolean, reflect: true}) selectable = false;
+  @property({type: Boolean, attribute: "hide-legend"}) hideLegend = false;
+  /** Formats values in tooltips and on axes. Defaults to locale-aware numbers. */
+  @property({attribute: false}) valueFormatter?: (value: number) => string;
+
+  @state() protected _width = 0;
+  @state() protected _tooltip: TooltipState | null = null;
+  @state() protected _announce = "";
+
+  private _resizeObserver?: ResizeObserver;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._resizeObserver = new ResizeObserver((entries) => {
+      const width = Math.floor(entries[0].contentRect.width);
+      if (width !== this._width) this._width = width;
+    });
+    this._resizeObserver.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+
+  protected fmt(value: number) {
+    return this.valueFormatter ? this.valueFormatter(value) : formatValue(value);
+  }
+
+  protected fmtAxis(value: number) {
+    return this.valueFormatter ? this.valueFormatter(value) : formatCompact(value);
+  }
+
+  protected emit(name: string, detail: unknown) {
+    this.dispatchEvent(new CustomEvent(name, {detail, bubbles: true, composed: true}));
+  }
+
+  protected showTooltip(tooltip: TooltipState, announcement: string) {
+    this._tooltip = {...tooltip, x: Math.min(Math.max(tooltip.x, 56), this._width - 56)};
+    this._announce = announcement;
+  }
+
+  protected hideTooltip() {
+    this._tooltip = null;
+    this._announce = "";
+  }
+
+  protected renderTooltip() {
+    const t = this._tooltip;
+    if (!t) return nothing;
+    return html`
+      <div class="tooltip" aria-hidden="true" style="left:${t.x}px;top:${t.y}px">
+        ${t.title ? html`<div class="tooltip-title">${t.title}</div>` : nothing}
+        ${t.rows.map(
+          (r) => html`
+            <div class="tooltip-row">
+              ${r.color
+                ? html`<span class="swatch" style="background:${r.color}"></span>`
+                : nothing}
+              <span>${r.label}</span>
+              <span class="tooltip-value">${r.value}</span>
+            </div>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  protected renderLegend(items: LegendItem[], onToggle: (index: number) => void) {
+    if (this.hideLegend || !items.length) return nothing;
+    return html`
+      <ul class="legend" aria-label="Legend">
+        ${items.map(
+          (item, i) => html`
+            <li>
+              <button
+                type="button"
+                aria-pressed=${item.hidden ? "false" : "true"}
+                @click=${() => onToggle(i)}
+              >
+                <span class="swatch" style="background:${item.color}"></span>${item.name}
+              </button>
+            </li>
+          `,
+        )}
+      </ul>
+    `;
+  }
+
+  /** Visually hidden table so assistive technology can read every value. */
+  protected renderDataTable(headers: string[], rows: (string | number)[][]) {
+    return html`
+      <table class="sr-only">
+        <caption>
+          ${this.label || "Chart data"}
+        </caption>
+        <thead>
+          <tr>
+            ${headers.map((h) => html`<th scope="col">${h}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${rows.map(
+            (row) => html`
+              <tr>
+                ${row.map((cell, i) =>
+                  i === 0 ? html`<th scope="row">${cell}</th>` : html`<td>${cell}</td>`,
+                )}
+              </tr>
+            `,
+          )}
+        </tbody>
+      </table>
+    `;
+  }
+
+  protected renderLiveRegion() {
+    return html`<div class="sr-only" aria-live="polite" aria-atomic="true">${this._announce}</div>`;
+  }
+
+  static baseStyles = css`
+    :host {
+      display: block;
+      width: 100%;
+      color: var(--st-color-text);
+      font-family: var(--st-font-family, inherit);
+    }
+    .chart {
+      position: relative;
+    }
+    .plot {
+      position: relative;
+      border-radius: var(--st-radius-sm);
+      outline: none;
+    }
+    .plot:focus-visible {
+      outline: 2px solid var(--st-color-primary);
+      outline-offset: 2px;
+    }
+    svg {
+      display: block;
+      overflow: visible;
+    }
+    .tick {
+      fill: var(--st-color-text-muted);
+      font-size: var(--st-font-size-xs);
+    }
+    .grid {
+      stroke: var(--st-color-border);
+      stroke-width: 1;
+    }
+    .axis-line {
+      stroke: var(--st-color-text-muted);
+      stroke-width: 1;
+    }
+    .tooltip {
+      position: absolute;
+      z-index: 2;
+      pointer-events: none;
+      transform: translate(-50%, calc(-100% - 0.5rem));
+      padding: var(--st-spacing-xs) var(--st-spacing-sm);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      background: var(--st-color-surface);
+      box-shadow: var(--st-shadow-md);
+      font-size: var(--st-font-size-xs);
+      white-space: nowrap;
+    }
+    .tooltip-title {
+      margin-bottom: var(--st-spacing-xs);
+      font-weight: var(--st-font-weight-medium);
+    }
+    .tooltip-row {
+      display: flex;
+      align-items: center;
+      gap: var(--st-spacing-xs);
+    }
+    .tooltip-value {
+      margin-left: auto;
+      padding-left: var(--st-spacing-md);
+      font-weight: var(--st-font-weight-medium);
+    }
+    .swatch {
+      flex-shrink: 0;
+      width: 0.625rem;
+      height: 0.625rem;
+      border-radius: 2px;
+    }
+    .legend {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--st-spacing-xs) var(--st-spacing-md);
+      margin-top: var(--st-spacing-sm);
+      list-style: none;
+    }
+    .legend button {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--st-spacing-xs);
+      padding: 2px var(--st-spacing-xs);
+      border: 0;
+      border-radius: var(--st-radius-sm);
+      background: none;
+      color: var(--st-color-text);
+      font: inherit;
+      font-size: var(--st-font-size-xs);
+      cursor: pointer;
+    }
+    .legend button[aria-pressed="false"] {
+      opacity: 0.55;
+      text-decoration: line-through;
+    }
+    .legend button:focus-visible {
+      outline: 2px solid var(--st-color-primary);
+    }
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      .animate {
+        transition:
+          opacity 0.15s ease,
+          transform 0.15s ease;
+      }
+    }
+  `;
+}

package/src/components/chart/chart.utils.ts

@@ -0,0 +1,140 @@
+/** Pure helpers shared by the chart components (no DOM or Lit imports so they can be unit tested). */
+
+export const CHART_PALETTE_SIZE = 8;
+
+/** Resolves a series color: an explicit value wins, otherwise a theme palette token. */
+export const chartColor = (index: number, custom?: string) =>
+  custom || `var(--st-chart-${(index % CHART_PALETTE_SIZE) + 1})`;
+
+export const formatValue = (v: number) =>
+  new Intl.NumberFormat(undefined, {maximumFractionDigits: 2}).format(v);
+
+export const formatCompact = (v: number) =>
+  new Intl.NumberFormat(undefined, {notation: "compact", maximumFractionDigits: 1}).format(v);
+
+export const clamp = (v: number, min: number, max: number) => Math.min(Math.max(v, min), max);
+
+/** Maps `v` from [min, max] to [0, 1]; a flat range maps to 0. */
+export const normalize = (v: number, min: number, max: number) =>
+  max === min ? 0 : clamp((v - min) / (max - min), 0, 1);
+
+function niceNumber(range: number, round: boolean) {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let nice: number;
+  if (round) nice = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10;
+  else nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+  return nice * 10 ** exponent;
+}
+
+export interface NiceScale {
+  min: number;
+  max: number;
+  ticks: number[];
+}
+
+/** Computes a "nice" axis range and tick values that enclose [min, max]. */
+export function niceScale(min: number, max: number, tickCount = 5): NiceScale {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return {min: 0, max: 1, ticks: [0, 1]};
+  if (min === max) {
+    if (min === 0) max = 1;
+    else {
+      const pad = Math.abs(min) * 0.1;
+      min -= pad;
+      max += pad;
+    }
+  }
+  const step = niceNumber(niceNumber(max - min, false) / (tickCount - 1), true);
+  const niceMin = Math.floor(min / step) * step;
+  const niceMax = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  for (let v = niceMin; v <= niceMax + step / 2; v += step) {
+    ticks.push(Number(v.toFixed(10)));
+  }
+  return {min: ticks[0], max: ticks[ticks.length - 1], ticks};
+}
+
+/** Angle in radians measured clockwise from 12 o'clock. */
+export function polar(cx: number, cy: number, r: number, angle: number): [number, number] {
+  const a = angle - Math.PI / 2;
+  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+}
+
+/** SVG path for a pie slice (inner = 0) or donut segment between two angles. */
+export function arcPath(
+  cx: number,
+  cy: number,
+  r: number,
+  inner: number,
+  start: number,
+  end: number,
+) {
+  const full = Math.PI * 2 - 0.001;
+  const sweepEnd = Math.min(end, start + full);
+  const large = sweepEnd - start > Math.PI ? 1 : 0;
+  const [x1, y1] = polar(cx, cy, r, start);
+  const [x2, y2] = polar(cx, cy, r, sweepEnd);
+  if (inner <= 0) return `M${cx} ${cy}L${x1} ${y1}A${r} ${r} 0 ${large} 1 ${x2} ${y2}Z`;
+  const [x3, y3] = polar(cx, cy, inner, sweepEnd);
+  const [x4, y4] = polar(cx, cy, inner, start);
+  return `M${x1} ${y1}A${r} ${r} 0 ${large} 1 ${x2} ${y2}L${x3} ${y3}A${inner} ${inner} 0 ${large} 0 ${x4} ${y4}Z`;
+}
+
+/** Builds contiguous "M/L" path segments, breaking the line wherever a value is null. */
+export function linePath(points: ([number, number] | null)[]) {
+  let d = "";
+  let pen = false;
+  for (const p of points) {
+    if (!p) {
+      pen = false;
+      continue;
+    }
+    d += `${pen ? "L" : "M"}${p[0]} ${p[1]}`;
+    pen = true;
+  }
+  return d;
+}
+
+/** Closed area paths (one per contiguous segment) down to `baseline`. */
+export function areaPaths(points: ([number, number] | null)[], baseline: number) {
+  const paths: string[] = [];
+  let segment: [number, number][] = [];
+  const flush = () => {
+    if (segment.length > 1) {
+      const first = segment[0];
+      const last = segment[segment.length - 1];
+      paths.push(
+        `M${first[0]} ${baseline}` +
+          segment.map((p) => `L${p[0]} ${p[1]}`).join("") +
+          `L${last[0]} ${baseline}Z`,
+      );
+    }
+    segment = [];
+  };
+  for (const p of points) {
+    if (p) segment.push(p);
+    else flush();
+  }
+  flush();
+  return paths;
+}
+
+/** Moves a roving index for arrow-key navigation, returning null when the key is not handled. */
+export function stepIndex(key: string, current: number | null, length: number): number | null {
+  if (length <= 0) return null;
+  const at = current ?? -1;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowDown":
+      return Math.min(at + 1, length - 1);
+    case "ArrowLeft":
+    case "ArrowUp":
+      return Math.max(at - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return length - 1;
+    default:
+      return null;
+  }
+}

package/src/components/code-block/code-block.ts

@@ -37,7 +37,7 @@ export class StCodeBlock extends LitElement {
         margin: var(--st-spacing-md) 0;
         border-radius: 8px;
         /* 1. Lock background to a deep dark surface */
-        background-color: #161b22;
+        background-color: var(--st-code-bg);
         border: 1px solid var(--st-color-border);
         overflow: hidden;
       }
@@ -47,8 +47,8 @@ export class StCodeBlock extends LitElement {
         justify-content: space-between;
         align-items: center;
         /* 2. Lock header to a slightly darker shade */
-        background-color: #0d1117;
-        border-bottom: 1px solid #30363d;
+        background-color: var(--st-code-header-bg);
+        border-bottom: 1px solid var(--st-code-border);
         padding: 0 var(--st-spacing-md);
         min-height: 2.5rem; /* 40px */
       }
@@ -56,7 +56,7 @@ export class StCodeBlock extends LitElement {
       /* Single language label */
       .language-label {
         font-size: var(--st-font-size-xs);
-        color: #8b949e;
+        color: var(--st-code-muted);
         text-transform: uppercase;
         letter-spacing: 0.05em;
         font-weight: var(--st-font-weight-bold);
@@ -73,7 +73,7 @@ export class StCodeBlock extends LitElement {
         background: transparent;
         border: none;
         border-bottom: 2px solid transparent;
-        color: #8b949e;
+        color: var(--st-code-muted);
         font-size: var(--st-font-size-xs);
         font-weight: var(--st-font-weight-medium);
         padding: var(--st-spacing-xs) 0;
@@ -82,20 +82,20 @@ export class StCodeBlock extends LitElement {
       }
 
       .tab:hover {
-        color: #c9d1d9;
+        color: var(--st-code-text);
       }
 
       .tab.active {
         /* 3. Hardcode the active tab to a high-contrast blue instead of dynamic primary */
-        color: #79c0ff;
-        border-bottom-color: #79c0ff;
+        color: var(--st-code-accent);
+        border-bottom-color: var(--st-code-accent);
       }
 
       /* Copy Button */
       .copy-button {
         background: transparent;
         border: 1px solid transparent;
-        color: #8b949e;
+        color: var(--st-code-muted);
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -108,8 +108,8 @@ export class StCodeBlock extends LitElement {
       }
 
       .copy-button:hover {
-        color: #c9d1d9;
-        background-color: rgba(255, 255, 255, 0.1);
+        color: var(--st-code-text);
+        background-color: var(--st-code-hover);
       }
 
       .copy-button svg {
@@ -123,7 +123,7 @@ export class StCodeBlock extends LitElement {
       }
 
       .copy-button.copied {
-        color: #3fb950; /* High-contrast success green */
+        color: var(--st-code-success); /* High-contrast success green */
       }
 
       pre {
@@ -136,7 +136,7 @@ export class StCodeBlock extends LitElement {
         font-size: 0.875rem;
         line-height: 1.5;
         /* 4. Ensure default text stays light */
-        color: #c9d1d9;
+        color: var(--st-code-text);
       }
 
       .raw-content {
@@ -150,11 +150,11 @@ export class StCodeBlock extends LitElement {
       .token.prolog,
       .token.doctype,
       .token.cdata {
-        color: #8b949e;
+        color: var(--st-code-muted);
         font-style: italic;
       }
       .token.punctuation {
-        color: #8b949e;
+        color: var(--st-code-muted);
       }
       .token.namespace {
         opacity: 0.7;
@@ -166,7 +166,7 @@ export class StCodeBlock extends LitElement {
       .token.constant,
       .token.symbol,
       .token.deleted {
-        color: #79c0ff;
+        color: var(--st-code-accent);
       }
       .token.selector,
       .token.attr-name,
@@ -174,33 +174,33 @@ export class StCodeBlock extends LitElement {
       .token.char,
       .token.builtin,
       .token.inserted {
-        color: #a5d6ff;
+        color: var(--st-code-string);
       }
 
-      /* Replaced var(--st-color-text) with #c9d1d9 */
+      /* Replaced var(--st-color-text) with var(--st-code-text) */
       .token.operator,
       .token.entity,
       .token.url,
       .language-css .token.string,
       .style .token.string {
-        color: #c9d1d9;
+        color: var(--st-code-text);
       }
 
-      /* Replaced var(--st-color-primary) with #ff7b72 (High-contrast pink/red for keywords) */
+      /* Replaced var(--st-color-primary) with var(--st-code-keyword) (High-contrast pink/red for keywords) */
       .token.atrule,
       .token.attr-value,
       .token.keyword {
-        color: #ff7b72;
+        color: var(--st-code-keyword);
       }
 
       .token.function,
       .token.class-name {
-        color: #d2a8ff;
+        color: var(--st-code-function);
       }
       .token.regex,
       .token.important,
       .token.variable {
-        color: #ffa657;
+        color: var(--st-code-number);
       }
     `,
   ];
@@ -218,7 +218,7 @@ export class StCodeBlock extends LitElement {
       this._snippets = templates.map((template) => {
         const lang = template.getAttribute("data-lang") || this.language;
         const label = template.getAttribute("data-label") || lang; // Fallback to lang if no label provided
-        const rawCode = this._dedent(template.innerHTML);
+        const rawCode = this._dedent(this._sourceOf(template));
 
         const grammar = Prism.languages[lang] || Prism.languages.javascript;
         const highlightedCode = Prism.highlight(rawCode, grammar, lang);
@@ -241,6 +241,17 @@ export class StCodeBlock extends LitElement {
     this._activeIndex = 0;
   }
 
+  /**
+   * Plain-text templates (JavaScript, JSON, shell) are read as text so characters such as
+   * `=>`, `<` and `&` are not HTML-escaped. Templates holding markup are serialized as HTML.
+   */
+  private _sourceOf(template: HTMLTemplateElement): string {
+    const nodes = Array.from(template.content.childNodes);
+    return nodes.every((n) => n.nodeType === Node.TEXT_NODE)
+      ? (template.content.textContent ?? "")
+      : template.innerHTML;
+  }
+
   private _dedent(text: string): string {
     const lines = text.split("\n");
     const minIndent = lines