@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/accordion/accordion.ts

@@ -0,0 +1,209 @@
+import {LitElement, html, css, nothing, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {AccordionColor, AccordionVariant} from "./accordion.constants.js";
+import "../icon/icon.js";
+
+let nextId = 0;
+
+/**
+ * Collapsible section. The header is a disclosure button and the content is a labelled region
+ * that animates open and closed (respecting `prefers-reduced-motion`).
+ */
+@customElement("st-accordion")
+export class StAccordion extends LitElement {
+  @property({type: String}) heading = "";
+  @property({type: Boolean, reflect: true}) open = false;
+  /** Accordions sharing the same `group` close each other. */
+  @property({type: String}) group = "";
+  /** Optional icon name shown before the heading. */
+  @property({type: String}) icon = "";
+  @property({type: String, reflect: true}) color: AccordionColor = "default";
+  @property({type: String, reflect: true}) variant: AccordionVariant = "soft";
+
+  private readonly _id = `st-accordion-${nextId++}`;
+  private _hasUpdated = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+        border: 1px solid var(--_accent);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-bg);
+
+        /* Default (neutral) palette */
+        --_accent: var(--st-color-border);
+        --_accent-text: var(--st-color-text);
+        --_soft-bg: var(--st-color-surface-muted);
+        --_on-accent: var(--st-color-text);
+      }
+      :host([color="primary"]) {
+        --_accent: var(--st-color-primary);
+        --_accent-text: var(--st-color-primary-text);
+        --_soft-bg: var(--st-color-primary-bg);
+        --_on-accent: var(--st-color-on-primary);
+      }
+      :host([color="info"]) {
+        --_accent: var(--st-color-info);
+        --_accent-text: var(--st-color-info-text);
+        --_soft-bg: var(--st-color-info-bg);
+        --_on-accent: var(--st-color-on-info);
+      }
+      :host([color="success"]) {
+        --_accent: var(--st-color-success);
+        --_accent-text: var(--st-color-success);
+        --_soft-bg: var(--st-color-success-bg);
+        --_on-accent: var(--st-color-on-success);
+      }
+      :host([color="warning"]) {
+        --_accent: var(--st-color-warning);
+        --_accent-text: var(--st-color-warning);
+        --_soft-bg: var(--st-color-warning-bg);
+        --_on-accent: var(--st-color-on-warning);
+      }
+      :host([color="error"]) {
+        --_accent: var(--st-color-error);
+        --_accent-text: var(--st-color-error-text);
+        --_soft-bg: var(--st-color-error-bg);
+        --_on-accent: var(--st-color-on-danger);
+      }
+
+      /* Header colors per variant */
+      .header {
+        --_header-bg: var(--_soft-bg);
+        --_header-text: var(--_accent-text);
+      }
+      :host([variant="solid"]) .header {
+        --_header-bg: var(--_accent);
+        --_header-text: var(--_on-accent);
+      }
+      :host([variant="solid"][color="default"]) .header {
+        --_header-bg: var(--st-color-surface-hover);
+        --_header-text: var(--st-color-text);
+      }
+      :host([variant="outline"]) .header {
+        --_header-bg: transparent;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        width: 100%;
+        padding: var(--st-spacing-md);
+        border: 0;
+        background: var(--_header-bg);
+        color: var(--_header-text);
+        font-weight: var(--st-font-weight-medium);
+        text-align: left;
+        cursor: pointer;
+      }
+      .header:hover {
+        filter: brightness(var(--st-hover-brightness));
+      }
+      .header:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
+      }
+      .title {
+        flex: 1;
+      }
+      .chevron {
+        transition: transform 0.25s ease;
+      }
+      :host([open]) .chevron {
+        transform: rotate(180deg);
+      }
+
+      /* Animated panel: grid rows animate 0fr -> 1fr without measuring heights in JS */
+      .panel {
+        display: grid;
+        grid-template-rows: 0fr;
+        visibility: hidden;
+        transition:
+          grid-template-rows 0.25s ease,
+          visibility 0s linear 0.25s;
+      }
+      :host([open]) .panel {
+        grid-template-rows: 1fr;
+        visibility: visible;
+        transition:
+          grid-template-rows 0.25s ease,
+          visibility 0s;
+      }
+      .panel-inner {
+        min-height: 0;
+        overflow: hidden;
+      }
+      /* Distinct content surface so it never blends with the header */
+      .content {
+        padding: var(--st-spacing-md);
+        background: var(--st-color-bg);
+        color: var(--st-color-text);
+        border-top: 1px solid var(--_accent);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .chevron,
+        .panel,
+        :host([open]) .panel {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("open") && this._hasUpdated) {
+      this.dispatchEvent(
+        new CustomEvent("st-toggle", {detail: {open: this.open}, bubbles: true, composed: true}),
+      );
+      if (this.open && this.group) this._closeGroupSiblings();
+    }
+    this._hasUpdated = true;
+  }
+
+  private _closeGroupSiblings() {
+    const root = this.getRootNode() as Document | ShadowRoot;
+    root
+      .querySelectorAll<StAccordion>(`st-accordion[group="${CSS.escape(this.group)}"]`)
+      .forEach((el) => {
+        if (el !== this) el.open = false;
+      });
+  }
+
+  render() {
+    const headerId = `${this._id}-header`;
+    const panelId = `${this._id}-panel`;
+    return html`
+      <button
+        class="header"
+        id=${headerId}
+        type="button"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${panelId}
+        @click=${() => (this.open = !this.open)}
+      >
+        ${this.icon
+          ? html`<st-icon name=${this.icon} size="sm" aria-hidden="true"></st-icon>`
+          : nothing}
+        <span class="title">${this.heading}</span>
+        <st-icon class="chevron" name="angle-down" size="sm" aria-hidden="true"></st-icon>
+      </button>
+      <div class="panel" id=${panelId} role="region" aria-labelledby=${headerId}>
+        <div class="panel-inner">
+          <div class="content"><slot></slot></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-accordion": StAccordion;
+  }
+}

package/src/components/alert/alert.constants.ts

@@ -1,2 +1,5 @@
 export const alertColors = ["info", "success", "warning", "error"] as const;
 export type AlertColor = typeof alertColors[number];
+
+/** Why an alert closed, reported in `st-close`. */
+export type AlertCloseReason = "dismiss" | "timeout" | "api";

package/src/components/alert/alert.ts

@@ -1,21 +1,57 @@
-import {LitElement, html, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import {LitElement, html, css, nothing, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
-import { AlertColor } from "./alert.constants.js";
+import {AlertColor, AlertCloseReason} from "./alert.constants.js";
+import "../icon/icon.js";
 
+type Phase = "open" | "closing" | "closed";
+
+/** Longest we wait for the hide transition before closing anyway. */
+const TRANSITION_FALLBACK_MS = 400;
+
+/**
+ * Inline message with an icon, content, a `confirm` action under the message and a dismiss
+ * `action` at the end. It can also hide itself after `timeout` milliseconds. Hiding always
+ * animates (unless the user prefers reduced motion).
+ *
+ * Slots: `icon` (start), default (message), `confirm` (below the message, bottom-left, e.g. a
+ * "Renew" or "Undo" button) and `action` (top-right, the dismiss control). Set `dismissible` for
+ * a ready-made dismiss button, or slot your own into `action`.
+ * Dismissing: call `dismiss()`, set `open = false`, click the built-in button, or add a
+ * `data-dismiss` attribute to any slotted element, which closes the alert when clicked.
+ * Events: `st-close` (bubbles, composed) with `detail.reason` of "dismiss", "timeout" or "api",
+ * fired once the alert has finished hiding.
+ */
 @customElement("st-alert")
 export class StAlert extends LitElement {
   @property({type: String, reflect: true}) color: AlertColor = "info";
+  /** Whether the alert is shown. Setting it to false hides it with an animation. */
+  @property({type: Boolean, reflect: true}) open = true;
+  /**
+   * Hides the alert automatically after this many milliseconds (0 keeps it). The countdown
+   * pauses while the pointer or keyboard focus is inside, so people have time to read and act.
+   */
+  @property({type: Number}) timeout = 0;
+  /** Shows a built-in dismiss button in the `action` slot (your own slotted content replaces it). */
+  @property({type: Boolean, reflect: true}) dismissible = false;
+  @property({type: String, attribute: "dismiss-label"}) dismissLabel = "Dismiss";
+
+  @state() private _phase: Phase = "open";
+  @state() private _hasAction = false;
+  @state() private _hasConfirm = false;
+
+  private _reason: AlertCloseReason = "api";
+  private _timer?: number;
+  private _fallback?: number;
+  private _remaining = 0;
+  private _deadline = 0;
+  private _paused = false;
 
   static styles = [
     resetStyles,
     css`
       :host {
-        display: flex;
-        gap: var(--st-spacing-md);
-        padding: var(--st-spacing-md);
-        border-radius: 6px;
-        border: 1px solid transparent;
+        display: block;
         font-size: var(--st-font-size-base);
         line-height: 1.5;
 
@@ -25,7 +61,7 @@ export class StAlert extends LitElement {
         --_alert-text: var(--st-color-info);
         --_alert-icon: var(--st-color-info);
       }
-      
+
       /* State Modifiers */
       :host([color="error"]) {
         --_alert-bg: var(--st-color-error-bg);
@@ -48,10 +84,44 @@ export class StAlert extends LitElement {
         --_alert-text: var(--st-color-warning);
       }
 
-      /* Apply the variables */
-      :host {
+      /*
+       * Hiding animates grid rows from 1fr to 0fr, which collapses the alert's height smoothly
+       * without measuring it in JavaScript. The padding and border live one level deeper so they
+       * collapse too.
+       */
+      .wrap {
+        display: grid;
+        grid-template-rows: 1fr;
+        opacity: 1;
+        transition:
+          grid-template-rows 0.25s ease,
+          opacity 0.2s ease;
+      }
+
+      .wrap.closing {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .wrap {
+          transition: none;
+        }
+      }
+
+      .clip {
+        min-height: 0;
+        overflow: hidden;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border: 1px solid var(--_alert-border);
+        border-radius: var(--st-radius-sm);
         background-color: var(--_alert-bg);
-        border-color: var(--_alert-border);
         color: var(--_alert-text);
       }
 
@@ -79,6 +149,49 @@ export class StAlert extends LitElement {
         flex-direction: column;
         gap: var(--st-spacing-xs);
         flex: 1;
+        min-width: 0;
+      }
+
+      /* Confirm Slot: sits under the message, bottom-left */
+      .confirm {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        margin-top: var(--st-spacing-xs);
+      }
+
+      /* Action Slot: the dismiss control, top-right */
+      .action {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        align-self: flex-start;
+        margin: calc(var(--st-spacing-xs) * -1) calc(var(--st-spacing-xs) * -1) 0 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      .dismiss {
+        display: inline-flex;
+        padding: var(--st-spacing-xs);
+        border: 0;
+        border-radius: var(--st-radius-sm);
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .dismiss:hover {
+        background: color-mix(in srgb, var(--_alert-border) 18%, transparent);
+      }
+
+      .dismiss:focus-visible {
+        outline: 2px solid var(--_alert-border);
+        outline-offset: 1px;
       }
     `,
   ];
@@ -89,15 +202,169 @@ export class StAlert extends LitElement {
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "alert");
     }
+    this.addEventListener("click", this._onClick);
+    this.addEventListener("pointerenter", this._pause);
+    this.addEventListener("pointerleave", this._resume);
+    this.addEventListener("focusin", this._pause);
+    this.addEventListener("focusout", this._onFocusOut);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this._onClick);
+    this.removeEventListener("pointerenter", this._pause);
+    this.removeEventListener("pointerleave", this._resume);
+    this.removeEventListener("focusin", this._pause);
+    this.removeEventListener("focusout", this._onFocusOut);
+    this._clearTimers();
+    super.disconnectedCallback();
+  }
+
+  /** Hides the alert with an animation. Resolves nothing; listen for `st-close`. */
+  dismiss(reason: AlertCloseReason = "api") {
+    if (this._phase !== "open") return;
+    this._reason = reason;
+    this.open = false;
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("open")) {
+      if (!this.open && this._phase === "open") {
+        // The first render of an alert that starts closed should not animate.
+        this._phase = this.hasUpdated ? "closing" : "closed";
+      } else if (this.open) {
+        this._phase = "open";
+      }
+    }
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    this.toggleAttribute("hidden", this._phase === "closed");
+
+    if (changed.has("open") || changed.has("timeout")) this._restartTimer();
+
+    if (this._phase === "closing" && !this._fallback) this._beginClose();
+  }
+
+  // ----------------------------------------------------------------- closing
+
+  private _beginClose() {
+    this._clearTimers();
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce) {
+      this._finishClose();
+      return;
+    }
+    // transitionend normally finishes the close; this guarantees it if it never fires.
+    this._fallback = window.setTimeout(() => this._finishClose(), TRANSITION_FALLBACK_MS);
   }
 
+  private _onTransitionEnd = (e: TransitionEvent) => {
+    if (e.propertyName === "grid-template-rows" && this._phase === "closing") this._finishClose();
+  };
+
+  private _finishClose() {
+    window.clearTimeout(this._fallback);
+    this._fallback = undefined;
+    if (this._phase !== "closing") return;
+    this._phase = "closed";
+    const reason = this._reason;
+    this._reason = "api";
+    this.dispatchEvent(
+      new CustomEvent("st-close", {detail: {reason}, bubbles: true, composed: true}),
+    );
+  }
+
+  private _clearTimers() {
+    window.clearTimeout(this._timer);
+    window.clearTimeout(this._fallback);
+    this._timer = undefined;
+    this._fallback = undefined;
+  }
+
+  // ----------------------------------------------------------------- timeout
+
+  private _restartTimer() {
+    window.clearTimeout(this._timer);
+    this._timer = undefined;
+    if (!this.open || this.timeout <= 0 || this._phase !== "open") return;
+    this._remaining = this.timeout;
+    // A timer that restarts while the user is already interacting stays paused.
+    if (!this._paused) this._startTimer();
+  }
+
+  private _startTimer() {
+    window.clearTimeout(this._timer);
+    this._deadline = Date.now() + this._remaining;
+    this._timer = window.setTimeout(() => this.dismiss("timeout"), this._remaining);
+  }
+
+  private _pause = () => {
+    this._paused = true;
+    if (this._timer === undefined) return;
+    window.clearTimeout(this._timer);
+    this._timer = undefined;
+    this._remaining = Math.max(this._deadline - Date.now(), 0);
+  };
+
+  private _resume = () => {
+    this._paused = false;
+    if (this.open && this.timeout > 0 && this._phase === "open" && this._timer === undefined) {
+      this._startTimer();
+    }
+  };
+
+  private _onFocusOut = (e: FocusEvent) => {
+    // Only resume once focus has left the alert entirely.
+    if (!this.contains(e.relatedTarget as Node | null)) this._resume();
+  };
+
+  // ---------------------------------------------------------------- actions
+
+  private _onClick = (e: MouseEvent) => {
+    const hit = e
+      .composedPath()
+      .find((el) => el instanceof HTMLElement && el !== this && el.hasAttribute("data-dismiss"));
+    if (hit) this.dismiss("dismiss");
+  };
+
   render() {
     return html`
-      <div class="icon-container">
-        <slot name="icon"></slot>
-      </div>
-      <div class="content">
-        <slot></slot>
+      <div class="wrap ${this._phase === "closing" ? "closing" : ""}" @transitionend=${this._onTransitionEnd}>
+        <div class="clip">
+          <div class="alert">
+            <div class="icon-container">
+              <slot name="icon"></slot>
+            </div>
+            <div class="content">
+              <slot></slot>
+              <div class="confirm" ?hidden=${!this._hasConfirm}>
+                <slot
+                  name="confirm"
+                  @slotchange=${(e: Event) =>
+                    (this._hasConfirm = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+                ></slot>
+              </div>
+            </div>
+            <div class="action" ?hidden=${!this._hasAction && !this.dismissible}>
+              <slot
+                name="action"
+                @slotchange=${(e: Event) =>
+                  (this._hasAction = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+              >
+                ${this.dismissible
+                  ? html`<button
+                      class="dismiss"
+                      type="button"
+                      aria-label=${this.dismissLabel}
+                      @click=${() => this.dismiss("dismiss")}
+                    >
+                      <st-icon name="x" size="sm" aria-hidden="true"></st-icon>
+                    </button>`
+                  : nothing}
+              </slot>
+            </div>
+          </div>
+        </div>
       </div>
     `;
   }

package/src/components/avatar/avatar.ts

@@ -0,0 +1,84 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+
+@customElement("st-avatar")
+export class StAvatar extends LitElement {
+  @property({type: String}) src = "";
+  /** Full name; used for the accessible name and to derive initials when there is no image. */
+  @property({type: String}) name = "";
+  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
+  @state() private _failed = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        --_size: 2.5rem;
+        width: var(--_size);
+        height: var(--_size);
+        flex-shrink: 0;
+      }
+      :host([size="sm"]) {
+        --_size: 1.75rem;
+        font-size: var(--st-font-size-xs);
+      }
+      :host([size="lg"]) {
+        --_size: 3.5rem;
+        font-size: 1.25rem;
+      }
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 50%;
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+        border: 1px solid var(--st-color-border);
+        font-weight: var(--st-font-weight-medium);
+        user-select: none;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    `,
+  ];
+
+  protected willUpdate(changed: Map<string, unknown>) {
+    if (changed.has("src")) this._failed = false;
+  }
+
+  /** First letters of the first and last words, uppercased. */
+  get initials() {
+    const parts = this.name.trim().split(/\s+/).filter(Boolean);
+    if (!parts.length) return "";
+    const last = parts.length > 1 ? parts[parts.length - 1][0] : "";
+    return (parts[0][0] + last).toUpperCase();
+  }
+
+  render() {
+    const showImage = this.src && !this._failed;
+    return html`
+      <div class="avatar" role="img" aria-label=${this.name || "Avatar"}>
+        ${showImage
+          ? html`<img src=${this.src} alt="" @error=${() => (this._failed = true)} />`
+          : this.initials
+            ? html`<span aria-hidden="true">${this.initials}</span>`
+            : html`<st-icon name="user" size="sm" aria-hidden="true"></st-icon>`}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-avatar": StAvatar;
+  }
+}