@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/src/components/split/split.ts

@@ -0,0 +1,106 @@
+import {html, css} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+
+/**
+ * Text beside an image, video or any other media: the classic "explain one thing" row. The two
+ * columns stack on narrow screens, with the text first. Use `reverse` to swap sides, so a page
+ * of several split rows can alternate.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, the default slot (body text), `actions` (buttons) and
+ * `media`.
+ */
+@customElement("st-split")
+export class StSplit extends StSection {
+  /** Puts the media on the left on wide screens. */
+  @property({type: Boolean, reflect: true}) reverse = false;
+
+  @state() private _hasActions = false;
+
+  constructor() {
+    super();
+    this.align = "start";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .split {
+        display: grid;
+        gap: var(--st-spacing-2xl);
+        align-items: center;
+      }
+
+      @media (min-width: 52rem) {
+        .split {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        :host([reverse]) .media {
+          order: -1;
+        }
+      }
+
+      .text {
+        display: grid;
+        gap: var(--st-spacing-md);
+      }
+
+      .header {
+        margin-bottom: 0;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0 0 var(--st-spacing-md);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+      }
+
+      .media ::slotted(*) {
+        width: 100%;
+        border-radius: var(--st-radius-lg);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`
+        <div class="split">
+          <div class="text">
+            ${this.renderHeader()}
+            ${this.animateIn(
+              html`
+                <div class="body"><slot @slotchange=${this._onItemsChange}></slot></div>
+                <div class="actions" ?hidden=${!this._hasActions}>
+                  <slot
+                    name="actions"
+                    @slotchange=${(e: Event) =>
+                      (this._hasActions = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+                  ></slot>
+                </div>
+              `,
+              100,
+            )}
+          </div>
+          <div class="media">${this.animateIn(html`<slot name="media"></slot>`, 150)}</div>
+        </div>
+      `,
+      {header: false, animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-split": StSplit;
+  }
+}

package/src/components/stack/stack.ts

@@ -0,0 +1,88 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export const stackGaps = ["none", "xs", "sm", "md", "lg", "xl", "2xl"] as const;
+export type StackGap = (typeof stackGaps)[number];
+
+/**
+ * Lays children out in a line with even spacing. Vertical by default; set `direction="row"` for
+ * a horizontal row that wraps on small screens.
+ */
+@customElement("st-stack")
+export class StStack extends LitElement {
+  @property({type: String, reflect: true}) gap: StackGap = "md";
+  @property({type: String, reflect: true}) direction: "column" | "row" = "column";
+  @property({type: String, reflect: true}) align: "start" | "center" | "end" | "stretch" = "stretch";
+  @property({type: String, reflect: true}) justify: "start" | "center" | "end" | "between" = "start";
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: var(--_gap, var(--st-spacing-md));
+        align-items: var(--_align, stretch);
+        justify-content: var(--_justify, flex-start);
+      }
+
+      :host([direction="row"]) {
+        flex-direction: row;
+      }
+
+      :host([gap="none"]) {
+        --_gap: 0;
+      }
+      :host([gap="xs"]) {
+        --_gap: var(--st-spacing-xs);
+      }
+      :host([gap="sm"]) {
+        --_gap: var(--st-spacing-sm);
+      }
+      :host([gap="md"]) {
+        --_gap: var(--st-spacing-md);
+      }
+      :host([gap="lg"]) {
+        --_gap: var(--st-spacing-lg);
+      }
+      :host([gap="xl"]) {
+        --_gap: var(--st-spacing-xl);
+      }
+      :host([gap="2xl"]) {
+        --_gap: var(--st-spacing-2xl);
+      }
+
+      :host([align="start"]) {
+        --_align: flex-start;
+      }
+      :host([align="center"]) {
+        --_align: center;
+      }
+      :host([align="end"]) {
+        --_align: flex-end;
+      }
+
+      :host([justify="center"]) {
+        --_justify: center;
+      }
+      :host([justify="end"]) {
+        --_justify: flex-end;
+      }
+      :host([justify="between"]) {
+        --_justify: space-between;
+      }
+    `,
+  ];
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-stack": StStack;
+  }
+}

package/src/components/stat-card/stat-card.ts

@@ -0,0 +1,179 @@
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+import "../skeleton/skeleton.js";
+
+export type StatTrend = "up" | "down" | "flat";
+
+/**
+ * KPI card: a label, a headline value and an optional change indicator. Slot a chart such as
+ * `<st-sparkline slot="chart">` for context. Set `interactive` to make it a button that
+ * emits `st-stat-select`, e.g. to drill into a dashboard section.
+ */
+@customElement("st-stat-card")
+export class StStatCard extends LitElement {
+  @property({type: String}) label = "";
+  @property({type: String}) value = "";
+  /** Percentage change versus the comparison period (e.g. 12.5 or -3). */
+  @property({type: Number}) delta?: number;
+  @property({type: String, attribute: "delta-label"}) deltaLabel = "";
+  /** Set when a decrease is good news (e.g. error rate, latency). */
+  @property({type: Boolean}) invert = false;
+  @property({type: String}) icon = "";
+  @property({type: Boolean}) loading = false;
+  @property({type: Boolean, reflect: true}) interactive = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-sm);
+        height: 100%;
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        text-align: left;
+        font: inherit;
+      }
+      :host([interactive]) .card {
+        cursor: pointer;
+      }
+      :host([interactive]) .card:hover {
+        background: var(--st-color-surface-hover);
+      }
+      .card:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+      .value {
+        font-size: var(--st-font-size-3xl);
+        font-weight: var(--st-font-weight-bold);
+        line-height: var(--st-line-height-tight);
+      }
+      .delta {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text-muted);
+      }
+      .delta-value {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        font-weight: var(--st-font-weight-medium);
+      }
+      .good {
+        color: var(--st-color-success);
+      }
+      .bad {
+        color: var(--st-color-error-text);
+      }
+      .neutral {
+        color: var(--st-color-text-muted);
+      }
+    `,
+  ];
+
+  private get _trend(): StatTrend {
+    if (this.delta === undefined || this.delta === 0 || Number.isNaN(this.delta)) return "flat";
+    return this.delta > 0 ? "up" : "down";
+  }
+
+  private get _sentiment() {
+    const trend = this._trend;
+    if (trend === "flat") return "neutral";
+    return (trend === "up") !== this.invert ? "good" : "bad";
+  }
+
+  private _select() {
+    if (!this.interactive) return;
+    this.dispatchEvent(
+      new CustomEvent("st-stat-select", {
+        detail: {label: this.label, value: this.value, delta: this.delta},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private _onKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._select();
+    }
+  }
+
+  private _renderDelta() {
+    if (this.delta === undefined) return nothing;
+    const trend = this._trend;
+    const icon = trend === "up" ? "arrow-up" : trend === "down" ? "arrow-down" : "minus";
+    const sign = trend === "up" ? "+" : "";
+    return html`
+      <div class="delta">
+        <span class="delta-value ${this._sentiment}">
+          <st-icon name=${icon} size="sm" aria-hidden="true"></st-icon>
+          <span>${sign}${this.delta}%</span>
+        </span>
+        ${this.deltaLabel ? html`<span>${this.deltaLabel}</span>` : nothing}
+      </div>
+    `;
+  }
+
+  render() {
+    const description = this.delta === undefined ? "" : `, ${this._trendText}`;
+    return html`
+      <div
+        class="card"
+        role=${this.interactive ? "button" : "group"}
+        tabindex=${this.interactive ? "0" : nothing}
+        aria-label=${`${this.label}: ${this.loading ? "loading" : this.value}${this.loading ? "" : description}`}
+        aria-busy=${this.loading ? "true" : "false"}
+        @click=${this._select}
+        @keydown=${this._onKeydown}
+      >
+        <div class="header">
+          ${this.icon
+            ? html`<st-icon name=${this.icon} size="sm" aria-hidden="true"></st-icon>`
+            : nothing}
+          <span>${this.label}</span>
+        </div>
+        ${this.loading
+          ? html`<st-skeleton variant="text" width="60%" height="2rem"></st-skeleton>`
+          : html`<div class="value">${this.value}</div>`}
+        ${this.loading ? nothing : this._renderDelta()}
+        <slot name="chart"></slot>
+      </div>
+    `;
+  }
+
+  private get _trendText() {
+    const trend = this._trend;
+    const word = trend === "flat" ? "unchanged" : trend === "up" ? "up" : "down";
+    // The visible text ("+12%", "vs last week") must appear unbroken in the accessible name (WCAG 2.5.3, Label in Name),
+    // so the direction goes last in brackets instead of between the figure and its label.
+    const sign = trend === "up" ? "+" : "";
+    return `${sign}${this.delta ?? 0}%${this.deltaLabel ? ` ${this.deltaLabel}` : ""} (${word})`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-stat-card": StStatCard;
+  }
+}

package/src/components/stats/stat.ts

@@ -0,0 +1,49 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StRowItem} from "../section/row-item.js";
+
+/**
+ * One figure inside `st-stats`: a big value and what it measures.
+ *
+ * Slots: `value` (such as `10k+` or `99.9%`) and the default slot for the label.
+ */
+@customElement("st-stat")
+export class StStat extends StRowItem {
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        text-align: center;
+      }
+
+      .value {
+        display: block;
+        color: var(--st-color-primary-text);
+        font-size: clamp(2rem, 5vw, 3rem);
+        font-weight: var(--st-font-weight-bold);
+        line-height: var(--st-line-height-tight);
+      }
+
+      .label {
+        display: block;
+        margin-top: var(--st-spacing-xs);
+        color: var(--st-color-text-muted);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(html`
+      <span class="value"><slot name="value"></slot></span>
+      <span class="label"><slot></slot></span>
+    `);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-stat": StStat;
+  }
+}

package/src/components/stats/stats.ts

@@ -0,0 +1,47 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./stat.js";
+
+/**
+ * A row of headline figures ("10k customers", "99.9% uptime") as `st-stat` items. They sit side by
+ * side and wrap on narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-stat` items.
+ */
+@customElement("st-stats")
+export class StStats extends StSection {
+  constructor() {
+    super();
+    this.space = "sm";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        display: grid;
+        gap: var(--st-spacing-xl);
+        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+      }
+
+      :host([tone="accent"]) st-stat {
+        --st-color-primary-text: var(--st-color-on-primary);
+        --st-color-text-muted: var(--st-color-on-primary);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-stats": StStats;
+  }
+}

package/src/components/switch/switch.ts

@@ -72,9 +72,9 @@ export class StSwitch extends LitElement {
       .thumb {
         width: 1rem;
         height: 1rem;
-        background-color: #ffffff; /* Explicitly white for contrast */
+        background-color: var(--st-white); /* Explicitly white for contrast */
         border-radius: 50%;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--st-shadow-sm);
         transform: translateX(0);
         transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }