@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/team/team.ts

@@ -0,0 +1,37 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./person.js";
+
+/**
+ * A row introducing the people behind a company, as `st-person` cards in a grid that wraps on
+ * narrow screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-person` items.
+ */
+@customElement("st-team")
+export class StTeam extends StSection {
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        display: grid;
+        gap: var(--st-spacing-2xl) var(--st-spacing-lg);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-team": StTeam;
+  }
+}

package/src/components/testimonials/testimonial.ts

@@ -0,0 +1,108 @@
+import {html, css} from "lit";
+import {customElement, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StRowItem} from "../section/row-item.js";
+
+/**
+ * One customer quote inside `st-testimonials`.
+ *
+ * Slots: the default slot (the quote), `author` (their name), `role` (their job and company) and
+ * `avatar` (a small photo or `st-avatar`).
+ */
+@customElement("st-testimonial")
+export class StTestimonial extends StRowItem {
+  @state() private _hasAvatar = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      figure {
+        display: grid;
+        align-content: space-between;
+        gap: var(--st-spacing-lg);
+        height: 100%;
+        margin: 0;
+        padding: var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      blockquote {
+        margin: 0;
+        font-size: var(--st-font-size-lg);
+        line-height: 1.6;
+      }
+
+      blockquote ::slotted(*) {
+        margin: 0;
+      }
+
+      figcaption {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-md);
+      }
+
+      .avatar {
+        display: inline-flex;
+        flex-shrink: 0;
+        overflow: hidden;
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+      }
+
+      .avatar[hidden] {
+        display: none;
+      }
+
+      .avatar ::slotted(img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      ::slotted([slot="author"]) {
+        display: block;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      ::slotted([slot="role"]) {
+        display: block;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(html`
+      <figure>
+        <blockquote><slot></slot></blockquote>
+        <figcaption>
+          <span class="avatar" ?hidden=${!this._hasAvatar}>
+            <slot
+              name="avatar"
+              @slotchange=${(e: Event) => (this._hasAvatar = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+            ></slot>
+          </span>
+          <span>
+            <slot name="author"></slot>
+            <slot name="role"></slot>
+          </span>
+        </figcaption>
+      </figure>
+    `);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-testimonial": StTestimonial;
+  }
+}

package/src/components/testimonials/testimonials.ts

@@ -0,0 +1,37 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./testimonial.js";
+
+/**
+ * A row of customer quotes as `st-testimonial` cards. They sit in columns that wrap on narrow
+ * screens.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-testimonial` items.
+ */
+@customElement("st-testimonials")
+export class StTestimonials extends StSection {
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        display: grid;
+        gap: var(--st-spacing-lg);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-testimonials": StTestimonials;
+  }
+}

package/src/components/textarea/textarea.ts

@@ -122,15 +122,15 @@ export class StTextarea extends LitElement {
 
       /* Validation States */
       :host([invalid]) textarea {
-        border-color: var(--st-color-error, #dc2626);
+        border-color: var(--st-color-error);
       }
 
       :host([invalid]) textarea:focus {
-        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);
       }
 
       /* Disabled & Readonly */

package/src/components/theme-toggle/theme-toggle.ts

@@ -43,7 +43,7 @@ export class StThemeToggle extends LitElement {
       button[aria-pressed="true"] {
         background-color: var(--st-color-bg);
         color: var(--st-color-primary);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--st-shadow-sm);
       }
 
       svg {

package/src/components/time-picker/time-picker.ts

@@ -83,15 +83,15 @@ export class StTimePicker extends LitElement {
       /* Focus within ring */
       .input-wrapper:focus-within {
         border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted);
       }
 
       .input-wrapper.is-invalid {
-        border-color: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger);
       }
 
       .input-wrapper.is-disabled {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         cursor: not-allowed;
         opacity: 0.7;
       }

package/src/components/timeline/timeline-item.ts

@@ -0,0 +1,100 @@
+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 moment on a `st-timeline`.
+ *
+ * Slots: `date` (such as `2024` or `March 2025`), `title` (a real heading such as `<h3>`) and the
+ * default slot for the description.
+ */
+@customElement("st-timeline-item")
+export class StTimelineItem extends StRowItem {
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        padding-left: var(--st-spacing-2xl);
+        padding-bottom: var(--st-spacing-2xl);
+      }
+
+      :host(:last-child) {
+        padding-bottom: 0;
+      }
+
+      /* The line joining the markers. */
+      :host::before {
+        content: "";
+        position: absolute;
+        left: 0.4375rem;
+        top: 1.25rem;
+        bottom: -0.25rem;
+        width: 2px;
+        background: var(--st-color-border);
+      }
+
+      :host(:last-child)::before {
+        display: none;
+      }
+
+      /* The marker. */
+      .marker {
+        position: absolute;
+        left: 0;
+        top: 0.3rem;
+        width: 1rem;
+        height: 1rem;
+        border: 3px solid var(--st-color-primary);
+        border-radius: 50%;
+        background: var(--st-color-bg);
+      }
+
+      ::slotted([slot="date"]) {
+        display: block;
+        margin: 0 0 var(--st-spacing-xs);
+        color: var(--st-color-primary-text);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        letter-spacing: 0.04em;
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 0 var(--st-spacing-xs) !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(*) {
+        margin: 0;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <span class="marker" aria-hidden="true"></span>
+      ${this.frame(html`
+        <slot name="date"></slot>
+        <slot name="title"></slot>
+        <div class="body"><slot></slot></div>
+      `)}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-timeline-item": StTimelineItem;
+  }
+}

package/src/components/timeline/timeline.ts

@@ -0,0 +1,31 @@
+import {html} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./timeline-item.js";
+
+/**
+ * A vertical timeline: milestones in order, each a `st-timeline-item`. Use it for a company
+ * history, a roadmap or career experience. Items are exposed to assistive technology as a list.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-timeline-item` items.
+ */
+@customElement("st-timeline")
+export class StTimeline extends StSection {
+  constructor() {
+    super();
+    this.width = "md";
+  }
+
+  render() {
+    return this.frame(
+      html`<div class="items" role="list"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-timeline": StTimeline;
+  }
+}

package/src/components/toast/toast.ts

@@ -0,0 +1,153 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+
+interface ToastItem {
+  id: number;
+  message: string;
+  variant: ToastVariant;
+}
+
+const variantIcons: Record<ToastVariant, string> = {
+  info: "circle-info",
+  success: "circle-check",
+  warning: "triangle-exclamation",
+  error: "circle-cross",
+};
+
+/**
+ * Toast stack rendered in a polite live region. Use `showToast()` for a shared instance,
+ * or place an `<st-toast>` yourself and call its `show()` method.
+ */
+@customElement("st-toast")
+export class StToast extends LitElement {
+  @property({type: String, reflect: true}) position: "top-right" | "bottom-right" | "bottom-left" =
+    "bottom-right";
+  @state() private _toasts: ToastItem[] = [];
+
+  private _nextId = 0;
+  private _timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        position: fixed;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        max-width: min(24rem, calc(100vw - 2rem));
+        pointer-events: none;
+        right: 1rem;
+        bottom: 1rem;
+      }
+      :host([position="top-right"]) {
+        top: 1rem;
+        bottom: auto;
+      }
+      :host([position="bottom-left"]) {
+        left: 1rem;
+        right: auto;
+      }
+      .toast {
+        pointer-events: auto;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        border-radius: 0.5rem;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-left: 4px solid var(--_accent);
+        color: var(--st-color-text);
+        box-shadow: var(--st-shadow-lg);
+      }
+      .info {
+        --_accent: var(--st-color-info);
+      }
+      .success {
+        --_accent: var(--st-color-success);
+      }
+      .warning {
+        --_accent: var(--st-color-warning);
+      }
+      .error {
+        --_accent: var(--st-color-error);
+      }
+      .toast > st-icon {
+        color: var(--_accent);
+      }
+      .msg {
+        flex: 1;
+      }
+      button {
+        display: inline-flex;
+        background: none;
+        border: 0;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        border-radius: 0.25rem;
+      }
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+      }
+    `,
+  ];
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._timers.forEach(clearTimeout);
+    this._timers.clear();
+  }
+
+  /** Adds a toast; a `duration` of 0 keeps it until dismissed. Returns its id. */
+  show(message: string, options: {variant?: ToastVariant; duration?: number} = {}) {
+    const {variant = "info", duration = 5000} = options;
+    const id = this._nextId++;
+    this._toasts = [...this._toasts, {id, message, variant}];
+    if (duration > 0) this._timers.set(id, setTimeout(() => this.dismiss(id), duration));
+    return id;
+  }
+
+  dismiss(id: number) {
+    clearTimeout(this._timers.get(id));
+    this._timers.delete(id);
+    this._toasts = this._toasts.filter((t) => t.id !== id);
+  }
+
+  render() {
+    return html`
+      ${this._toasts.map(
+        (t) => html`
+          <div class="toast ${t.variant}" role=${t.variant === "error" ? "alert" : "status"}>
+            <st-icon name=${variantIcons[t.variant]} size="sm" aria-hidden="true"></st-icon>
+            <span class="msg">${t.message}</span>
+            <button type="button" aria-label="Dismiss notification" @click=${() => this.dismiss(t.id)}>
+              <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </div>
+        `,
+      )}
+    `;
+  }
+}
+
+/** Shows a toast using a shared `<st-toast>` host appended to document.body. */
+export function showToast(message: string, options?: {variant?: ToastVariant; duration?: number}) {
+  let host = document.querySelector<StToast>("st-toast");
+  if (!host) {
+    host = document.createElement("st-toast") as StToast;
+    document.body.appendChild(host);
+  }
+  return host.show(message, options);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-toast": StToast;
+  }
+}

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { resetStyles } from "../../styles/reset.js";
 
 @customElement("st-toggle-button")
@@ -9,6 +10,8 @@ export class StToggleButton extends LitElement {
   @property({ type: String }) value = "";
   @property({ type: Boolean, reflect: true }) selected = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
+  /** Accessible name. Required when the content is only an icon. Also shown as a tooltip. */
+  @property({ type: String }) label = "";
 
   static styles = [
     resetStyles,
@@ -36,7 +39,7 @@ export class StToggleButton extends LitElement {
       }
 
       button:hover:not(:disabled) {
-        background-color: var(--st-color-surface-hover, #f8fafc);
+        background-color: var(--st-color-surface-hover);
       }
 
       button:focus-visible {
@@ -47,8 +50,8 @@ export class StToggleButton extends LitElement {
 
       /* Active/Selected State */
       :host([selected]) button {
-        background-color: var(--st-color-primary-light, #eff6ff);
-        color: var(--st-color-primary-dark, #1d4ed8);
+        background-color: var(--st-color-primary-light);
+        color: var(--st-color-primary-dark);
         font-weight: var(--st-font-weight-semibold);
       }
 
@@ -59,7 +62,7 @@ export class StToggleButton extends LitElement {
 
       :host([disabled]) button {
         opacity: 0.5;
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
         color: var(--st-color-text-muted);
       }
 
@@ -87,6 +90,8 @@ export class StToggleButton extends LitElement {
       <button
         type="button"
         aria-pressed=${this.selected ? "true" : "false"}
+        aria-label=${ifDefined(this.label || undefined)}
+        title=${ifDefined(this.label || undefined)}
         ?disabled=${this.disabled}
         @click=${this._handleClick}
       >

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

@@ -70,7 +70,7 @@ export class StToggleGroup extends LitElement {
         left: 0;
         background: linear-gradient(
           to right,
-          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          var(--st-color-scroll-shadow) 0%,
           transparent 100%
         );
         border-top-left-radius: var(--st-radius-md);
@@ -81,7 +81,7 @@ export class StToggleGroup extends LitElement {
         right: 0;
         background: linear-gradient(
           to left,
-          var(--st-color-scroll-shadow, rgba(0, 0, 0, 0.15)) 0%,
+          var(--st-color-scroll-shadow) 0%,
           transparent 100%
         );
         border-top-right-radius: var(--st-radius-md);
@@ -98,10 +98,10 @@ export class StToggleGroup extends LitElement {
 
       /* 🚀 FIX: Dialed up to 0.5 for dark mode */
       :host([data-theme="dark"]) .scroll-wrapper::before {
-        background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+        background: linear-gradient(to right, var(--st-color-overlay) 0%, transparent 100%);
       }
       :host([data-theme="dark"]) .scroll-wrapper::after {
-        background: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
+        background: linear-gradient(to left, var(--st-color-overlay) 0%, transparent 100%);
       }
 
       .group-container {

package/src/components/tooltip/tooltip.ts

@@ -54,7 +54,7 @@ export class StTooltip extends LitElement {
           opacity 0.2s ease,
           transform 0.2s ease,
           visibility 0.2s;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--st-shadow-md);
       }
 
       .tooltip-popup::before {
@@ -78,44 +78,44 @@ export class StTooltip extends LitElement {
          ========================================== */
 
       .variant-info {
-        background: var(--st-color-info, #3b82f6);
-        border-color: var(--st-color-info, #3b82f6);
-        color: var(--st-color-on-info, #ffffff);
+        background: var(--st-color-info);
+        border-color: var(--st-color-info);
+        color: var(--st-color-on-info);
       }
       .variant-info::before {
-        background: var(--st-color-info, #3b82f6);
-        border-color: var(--st-color-info, #3b82f6);
+        background: var(--st-color-info);
+        border-color: var(--st-color-info);
       }
 
       .variant-success {
-        background: var(--st-color-success, #16a34a);
-        border-color: var(--st-color-success, #16a34a);
-        color: var(--st-color-on-success, #ffffff);
+        background: var(--st-color-success);
+        border-color: var(--st-color-success);
+        color: var(--st-color-on-success);
       }
       .variant-success::before {
-        background: var(--st-color-success, #16a34a);
-        border-color: var(--st-color-success, #16a34a);
+        background: var(--st-color-success);
+        border-color: var(--st-color-success);
       }
 
       .variant-warning {
-        background: var(--st-color-warning, #f59e0b);
-        border-color: var(--st-color-warning, #f59e0b);
+        background: var(--st-color-warning);
+        border-color: var(--st-color-warning);
         /* Warning usually needs dark text for contrast */
-        color: var(--st-color-on-warning, #1e293b);
+        color: var(--st-color-on-warning);
       }
       .variant-warning::before {
-        background: var(--st-color-warning, #f59e0b);
-        border-color: var(--st-color-warning, #f59e0b);
+        background: var(--st-color-warning);
+        border-color: var(--st-color-warning);
       }
 
       .variant-danger {
-        background: var(--st-color-danger, #dc2626);
-        border-color: var(--st-color-danger, #dc2626);
-        color: var(--st-color-on-danger, #ffffff);
+        background: var(--st-color-danger);
+        border-color: var(--st-color-danger);
+        color: var(--st-color-on-danger);
       }
       .variant-danger::before {
-        background: var(--st-color-danger, #dc2626);
-        border-color: var(--st-color-danger, #dc2626);
+        background: var(--st-color-danger);
+        border-color: var(--st-color-danger);
       }
 
       /* ==========================================