@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-time-picker/time-parse.test.ts

@@ -1,67 +0,0 @@
-import { test } from "node:test";
-import assert from "node:assert/strict";
-import { parseTimeInput } from "./time-parse";
-
-const time = (hour: number, minute: number, second = 0) => ({
-  kind: "time" as const,
-  hour,
-  minute,
-  second,
-});
-
-test("now shortcut: n / now, any case, padded", () => {
-  assert.deepEqual(parseTimeInput("n"), { kind: "now" });
-  assert.deepEqual(parseTimeInput("N"), { kind: "now" });
-  assert.deepEqual(parseTimeInput(" now "), { kind: "now" });
-});
-
-test("bare hour", () => {
-  assert.deepEqual(parseTimeInput("9"), time(9, 0));
-  assert.deepEqual(parseTimeInput("09"), time(9, 0));
-  assert.deepEqual(parseTimeInput("17"), time(17, 0));
-  assert.deepEqual(parseTimeInput("0"), time(0, 0));
-  assert.deepEqual(parseTimeInput("23"), time(23, 0));
-});
-
-test("compact digits HMM / HHMM / HHMMSS", () => {
-  assert.deepEqual(parseTimeInput("930"), time(9, 30));
-  assert.deepEqual(parseTimeInput("0930"), time(9, 30));
-  assert.deepEqual(parseTimeInput("1705"), time(17, 5));
-  assert.deepEqual(parseTimeInput("093015"), time(9, 30, 15));
-});
-
-test("separated: colon, dot, space", () => {
-  assert.deepEqual(parseTimeInput("9:30"), time(9, 30));
-  assert.deepEqual(parseTimeInput("9.30"), time(9, 30));
-  assert.deepEqual(parseTimeInput("9 30"), time(9, 30));
-  assert.deepEqual(parseTimeInput("17:05:30"), time(17, 5, 30));
-});
-
-test("meridiem suffixes", () => {
-  assert.deepEqual(parseTimeInput("9 pm"), time(21, 0));
-  assert.deepEqual(parseTimeInput("9:30p"), time(21, 30));
-  assert.deepEqual(parseTimeInput("9:30 PM"), time(21, 30));
-  assert.deepEqual(parseTimeInput("9a"), time(9, 0));
-  assert.deepEqual(parseTimeInput("930pm"), time(21, 30));
-});
-
-test("12am → 0h, 12pm → 12h", () => {
-  assert.deepEqual(parseTimeInput("12am"), time(0, 0));
-  assert.deepEqual(parseTimeInput("12 pm"), time(12, 0));
-  assert.deepEqual(parseTimeInput("12:30 am"), time(0, 30));
-});
-
-test("invalid input rejected", () => {
-  assert.equal(parseTimeInput(""), null);
-  assert.equal(parseTimeInput("   "), null);
-  assert.equal(parseTimeInput("asdf"), null);
-  assert.equal(parseTimeInput("25:00"), null);
-  assert.equal(parseTimeInput("9:70"), null);
-  assert.equal(parseTimeInput("9:30:70"), null);
-  assert.equal(parseTimeInput("24"), null);
-  assert.equal(parseTimeInput("13pm"), null); // 12h clock with meridiem
-  assert.equal(parseTimeInput("0pm"), null);
-  assert.equal(parseTimeInput("12345"), null); // 5 digits is ambiguous
-  assert.equal(parseTimeInput("9:30:15:10"), null);
-  assert.equal(parseTimeInput("pm"), null);
-});

package/dist/components/rel-time-picker/time-parse.ts

@@ -1,85 +0,0 @@
-/**
- * Free-form time parsing for rel-time-picker's typed keyboard entry.
- *
- * Pure (no DOM, no Date.now) so it is unit-testable in Node. The component
- * owns range checks (minTime/maxTime, minuteStep snapping) and the "now"
- * clock — this module only turns text into a time or a shortcut intent.
- *
- * Accepted input (case/whitespace-insensitive):
- *   "9"        →  9:00           "930"      →  9:30
- *   "0930"     →  9:30           "093015"   →  9:30:15
- *   "9:30"     →  9:30           "9.30"     →  9:30
- *   "9 30"     →  9:30           "17:05:30" → 17:05:30
- *   "9 pm"     → 21:00           "9:30p"    → 21:30
- *   "12am"     →  0:00           "12 pm"    → 12:00
- *   "n", "now" → the Now shortcut
- */
-
-export type TimeInputResult =
-  | { kind: "time"; hour: number; minute: number; second: number }
-  | { kind: "now" }
-  | null;
-
-export function parseTimeInput(text: string): TimeInputResult {
-  let input = text.trim().toLowerCase();
-  if (!input) return null;
-
-  if (input === "n" || input === "now") return { kind: "now" };
-
-  // Meridiem suffix: "am"/"pm"/"a"/"p", optionally space-separated.
-  let meridiem: "am" | "pm" | null = null;
-  const meridiemMatch = input.match(/\s*(am|pm|a|p)\.?$/);
-  if (meridiemMatch) {
-    meridiem = meridiemMatch[1].startsWith("a") ? "am" : "pm";
-    input = input.slice(0, meridiemMatch.index).trim();
-  }
-  if (!input) return null;
-
-  let hour: number;
-  let minute = 0;
-  let second = 0;
-
-  if (/^\d+$/.test(input)) {
-    // Bare digits: H, HH, HMM, HHMM, HHMMSS.
-    switch (input.length) {
-      case 1:
-      case 2:
-        hour = parseInt(input, 10);
-        break;
-      case 3:
-        hour = parseInt(input.slice(0, 1), 10);
-        minute = parseInt(input.slice(1), 10);
-        break;
-      case 4:
-        hour = parseInt(input.slice(0, 2), 10);
-        minute = parseInt(input.slice(2), 10);
-        break;
-      case 6:
-        hour = parseInt(input.slice(0, 2), 10);
-        minute = parseInt(input.slice(2, 4), 10);
-        second = parseInt(input.slice(4), 10);
-        break;
-      default:
-        return null;
-    }
-  } else {
-    // Separated parts: "H:MM", "H.MM", "H MM", "HH:MM:SS".
-    const parts = input.split(/[:.\s]+/);
-    if (parts.length < 2 || parts.length > 3) return null;
-    if (!parts.every((p) => /^\d{1,2}$/.test(p))) return null;
-    hour = parseInt(parts[0], 10);
-    minute = parseInt(parts[1], 10);
-    if (parts.length === 3) second = parseInt(parts[2], 10);
-  }
-
-  if (meridiem) {
-    // 12-hour clock: hour must be 1–12; 12am → 0, 12pm → 12.
-    if (hour < 1 || hour > 12) return null;
-    hour = meridiem === "am" ? hour % 12 : (hour % 12) + 12;
-  } else if (hour > 23) {
-    return null;
-  }
-  if (minute > 59 || second > 59) return null;
-
-  return { kind: "time", hour, minute, second };
-}

package/dist/components/rel-toast/rel-toast.ts

@@ -1,206 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { announce } from "../../utils/announce";
-
-export type ToastType = "default" | "error";
-
-@customElement("rel-toast")
-export class RelToast extends LitElement {
-  @property({ type: String }) message: string = "";
-  @property({ type: String }) type: ToastType = "default";
-  @property({ type: String }) actionLabel?: string;
-  @property({ type: Number }) duration: number = 4000;
-  @property({ type: Boolean, reflect: true }) show = false;
-
-  @state() private visible: boolean = false;
-  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      position: fixed;
-      bottom: 24px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      pointer-events: none;
-      z-index: var(--rel-z-toast, 9000);
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    /* Toast container */
-    .toast {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      background-color: var(--rel-bg-neutral-inverse-1);
-      color: var(--rel-text-inverse);
-      border-radius: var(--rel-border-radius-sm);
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      box-shadow: var(--rel-shadows-shadow-300);
-      pointer-events: all;
-      animation: fadeInUp 0.25s ease;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .toast.error {
-      background-color: var(--rel-bg-danger);
-      color: var(--rel-text-static-light);
-    }
-
-    .toast.hidden {
-      display: none;
-    }
-
-    /* Message */
-    .toast-message {
-      flex: 1;
-    }
-
-    /* Action button */
-    .toast-action {
-      background: transparent;
-      border: none;
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
-      cursor: pointer;
-      transition: opacity 0.2s;
-    }
-
-    .toast-action:hover {
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-      opacity: 0.75;
-    }
-
-    .toast-action:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    /* Close button */
-    .toast-close {
-      background: transparent;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      border: none;
-      color: inherit;
-      font-size: 1rem;
-      cursor: pointer;
-      line-height: 1;
-      padding: var(--rel-spacing-2xs);
-      margin-left: var(--rel-spacing-2xs);
-    }
-
-    .toast-close:hover {
-      opacity: 0.75;
-    }
-
-    .toast-close:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-
-    @media (prefers-reduced-motion: reduce) {
-      .toast {
-        animation: none;
-      }
-    }
-
-    /* Animations */
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `;
-
-  willUpdate(changed: Map<string, unknown>) {
-    if (!changed.has('show')) return;
-    if (this.show) {
-      this.visible = true;
-      announce(this.message, this.type === "error" ? "assertive" : "polite");
-      if (this._dismissTimer) clearTimeout(this._dismissTimer);
-      if (this.duration > 0) {
-        this._dismissTimer = setTimeout(() => this.close(), this.duration);
-      }
-    } else {
-      this.visible = false;
-      if (this._dismissTimer) {
-        clearTimeout(this._dismissTimer);
-        this._dismissTimer = null;
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._dismissTimer) clearTimeout(this._dismissTimer);
-  }
-
-  open() {
-    this.show = true;
-  }
-
-  close() {
-    this.show = false;
-    this.visible = false;
-    if (this._dismissTimer) {
-      clearTimeout(this._dismissTimer);
-      this._dismissTimer = null;
-    }
-    this.dispatchEvent(
-      new CustomEvent("dismissed", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handleActionClick(event: Event) {
-    event.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent("action", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.close();
-  }
-
-  render() {
-    return html`
-      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite" aria-atomic="true">
-        <span part="label" class="toast-message">${this.message}</span>
-
-        ${this.actionLabel
-          ? html`<button
-              part="action" class="toast-action"
-              @click="${this.handleActionClick}"
-            >
-              ${this.actionLabel}
-            </button>`
-          : ""}
-
-        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
-      </div>
-    `;
-  }
-}

package/dist/components/rel-tooltip/rel-tooltip.ts

@@ -1,193 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type TooltipPosition = "above" | "below" | "left" | "right";
-export type TooltipType = "single-line" | "multi-line";
-
-@customElement("rel-tooltip")
-export class RelTooltip extends LitElement {
-  @property({ type: String }) text: string = "";
-  @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
-    false;
-
-  /** Figma "Type": single-line stays on one line; multi-line wraps at a max width. */
-  @property({ type: String, reflect: true }) type: TooltipType = "single-line";
-
-  // Stable id so aria-describedby can reference the bubble across renders.
-  private uniqueId = Math.random().toString(36).slice(2);
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-      position: absolute;
-      background-color: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-      padding: var(--rel-spacing-xs, 8px)
-        var(--rel-spacing-sm, 12px);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      overflow: visible;
-      /* Figma shadow/sm; drop-shadow (not box-shadow) so the border-drawn
-         tail casts the same shadow as the bubble. */
-      filter: drop-shadow(0px 2px 4px var(--rel-colors-dark-alpha-3, rgba(11, 11, 11, 0.1)));
-    }
-
-    /* Figma Type=Multi Line: wrap inside a bounded bubble */
-    :host([type="multi-line"]) .tooltip-bubble {
-      white-space: normal;
-      max-width: 220px;
-      width: max-content;
-    }
-
-    :host(:hover) .tooltip-bubble,
-    :host(:focus-within) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Escape-dismissed (APG): stays hidden until hover/focus leaves and
-       returns. Declared after the hover/focus rules so source order wins. */
-    :host([data-dismissed]) .tooltip-bubble {
-      opacity: 0;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.left {
-      right: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .tooltip-bubble.right {
-      left: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      width: 0;
-      height: 0;
-      display: block;
-    }
-
-    .tooltip-bubble.above .tooltip-tail,
-    .tooltip-bubble.below .tooltip-tail {
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-bottom: none;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-top: none;
-    }
-
-    .tooltip-bubble.left .tooltip-tail,
-    .tooltip-bubble.right .tooltip-tail {
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-    }
-
-    .tooltip-bubble.left .tooltip-tail {
-      right: -6px;
-      border-left: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-right: none;
-    }
-
-    .tooltip-bubble.right .tooltip-tail {
-      left: -6px;
-      border-right: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-left: none;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.onKeydown);
-    this.addEventListener("mouseleave", this.clearDismissed);
-    this.addEventListener("focusout", this.clearDismissed);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("keydown", this.onKeydown);
-    this.removeEventListener("mouseleave", this.clearDismissed);
-    this.removeEventListener("focusout", this.clearDismissed);
-  }
-
-  /** APG: Escape dismisses the tooltip. Not swallowed — an enclosing dialog
-   *  may legitimately close on the same keystroke. */
-  private onKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") this.toggleAttribute("data-dismissed", true);
-  };
-
-  private clearDismissed = () => {
-    this.removeAttribute("data-dismissed");
-  };
-
-  firstUpdated() {
-    this.linkTrigger();
-  }
-
-  private linkTrigger() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) return;
-    const trigger = slot.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
-    }
-  }
-
-  render() {
-    return html`
-      <slot @slotchange="${this.linkTrigger}"></slot>
-      <div
-        part="panel" class="tooltip-bubble ${this.position}"
-        id="tooltip-${this.uniqueId}"
-        role="tooltip"
-      >
-        ${this.text}
-        ${this.showTail ? html`<span part="indicator" class="tooltip-tail"></span>` : ""}
-      </div>
-    `;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -1,27 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` elements inside the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-actions")
-export class RelTopbarActions extends LitElement {
-  static styles = css`
-    .actions {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-  `;
-
-  render() {
-    return html`<div class="actions"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-actions": RelTopbarActions;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -1,54 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use a plain
- * `<a>`/logo markup inside the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-brand")
-export class RelTopbarBrand extends LitElement {
-  @property({ type: String }) src: string = "";
-  @property({ type: String }) href: string = "/";
-  @property({ type: String }) label: string = "";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-flex;
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      text-decoration: none;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
-    }
-
-    img {
-      display: block;
-    }
-  `;
-
-  render() {
-    return html`
-      <a href="${this.href}" aria-label="${this.label || "Home"}">
-        ${this.src
-          ? html`<img src="${this.src}" alt="${this.label}" />`
-          : html`<slot>${this.label}</slot>`}
-      </a>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-brand": RelTopbarBrand;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts

@@ -1,69 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
- * item slots or `rel-popover` content in the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-dropdown-item")
-export class RelTopbarDropdownItem extends LitElement {
-  @property({ type: String }) label: string = "";
-  @property({ type: String }) href: string = "#";
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  static styles = css`
-    .dropdown-item {
-      display: block;
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
-      color: var(--rel-text-default);
-      text-decoration: none;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .dropdown-item:hover {
-      background: var(--rel-action-overlay-hover);
-      border-radius: 0;
-    }
-
-    :host([active]) .dropdown-item {
-      color: var(--rel-topbar-item-active-color, var(--rel-text-success));
-      font-weight: var(--rel-fonts-weight-body-semibold, 600);
-    }
-
-  `;
-
-  private _handleClick(e: MouseEvent) {
-    if (this.hasAttribute("disabled")) {
-      e.preventDefault();
-      return;
-    }
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent("rel-select", {
-      detail: { value: this.href, label: this.label },
-      bubbles: true,
-      composed: true,
-    }));
-    this.dispatchEvent(new CustomEvent("rel-nav-select", {
-      detail: { value: this.href, label: this.label },
-      bubbles: true,
-      composed: true,
-    }));
-    this.active = true;
-    const siblings = this.parentElement?.querySelectorAll("rel-topbar-dropdown-item");
-    siblings?.forEach(s => { if (s !== this) (s as any).active = false; });
-  }
-
-  render() {
-    return html`<a href="${this.href}" class="dropdown-item" @click=${this._handleClick}>${this.label}</a>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-dropdown-item": RelTopbarDropdownItem;
-  }
-}