@reliability-design/web 1.4.4 → 1.4.6

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,85 @@
+/**
+ * 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,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 export type ToastType = "default" | "error";
 
@@ -35,7 +36,7 @@ export class RelToast extends LitElement {
       align-items: center;
       gap: var(--rel-spacing-xs);
       background-color: var(--rel-bg-neutral-inverse-1);
-      color: var(--rel-text-inverse);
+      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);
@@ -135,6 +136,7 @@ export class RelToast extends LitElement {
     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);
@@ -185,7 +187,7 @@ export class RelToast extends LitElement {
 
   render() {
     return html`
-      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
+      <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

package/dist/components/rel-tooltip/README.md

@@ -65,12 +65,19 @@ None exposed.
 - `--rel-spacing-sm` - Horizontal padding
 
 ### Color Tokens
-- `--rel-bg-neutral-inverse-1` - Background color (dark gray)
-- `--rel-bg-surface` - Text color
+- `--rel-bg-neutral-inverse-2` - Background color (near-black in light theme, white in dark theme)
+- `--rel-text-inverse` - Text color (white in light theme, near-black in dark theme)
+- `--rel-colors-dark-alpha-3` - Elevation shadow color (Figma `shadow/sm`: 0 2px 4px at 10% black; applied via `drop-shadow` so the tail casts the same shadow as the bubble)
 
 ### Border Tokens
 - `--rel-border-radius-sm` - Border radius
 
+### Theming
+Colors use inverse semantic tokens, so the tooltip adapts automatically when
+`data-theme="dark"` (or `.dark`) is set on an ancestor — no page refresh needed.
+Dark-theme rendering (white bubble, dark text) is unchanged by the elevation
+shadow, which is effectively invisible on dark backgrounds.
+
 ## Accessibility
 - Uses `role="tooltip"` on the tooltip bubble
 - `aria-hidden="true"` on tooltip (content is supplemental, not critical)
@@ -78,11 +85,12 @@ None exposed.
 - For critical information, consider alternative patterns (e.g., visible labels or expandable sections)
 
 ### Keyboard Interactions
-- No keyboard interactions (hover-only)
-- For keyboard accessibility, ensure slotted content is focusable and consider showing tooltip on focus
+- Tooltip shows on `:focus-within` as well as hover, so keyboard users see it when the slotted trigger receives focus (ensure the trigger is focusable)
+- `Escape` dismisses the tooltip (APG); it re-arms once hover/focus leaves and returns
+- Keyboard-triggered tooltips use the same theme-aware styling as hover-triggered ones
 
 ### Focus Behavior
-- Tooltip activation is hover-only by default
+- Tooltip activates on hover or focus within the trigger
 - Does not interfere with focus on slotted content
 
 ## Notes / Edge Cases

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

@@ -43,6 +43,9 @@ export class RelTooltip extends LitElement {
       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 */
@@ -57,6 +60,12 @@ export class RelTooltip extends LitElement {
       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);
@@ -131,6 +140,30 @@ export class RelTooltip extends LitElement {
     }
   `;
 
+  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();
   }

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

@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` elements inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-button` elements inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 @customElement("rel-topbar-actions")
 export class RelTopbarActions extends LitElement {

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

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators.js";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use a plain
- * `<a>`/logo markup inside the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `<a>`/logo markup inside the "Navbar" recipe at /docs/recipes/navbar.
  */
 @customElement("rel-topbar-brand")
 export class RelTopbarBrand extends LitElement {

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

@@ -3,7 +3,7 @@ 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 "App Topbar" recipe at /docs/recipes/app-topbar.
+ * item slots or `rel-popover` content in the "Navbar" recipe at /docs/recipes/navbar.
  */
 @customElement("rel-topbar-dropdown-item")
 export class RelTopbarDropdownItem extends LitElement {

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

@@ -3,7 +3,7 @@ import { customElement } from "lit/decorators.js";
 
 /**
  * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
- * `rel-popover` for nav dropdowns in the "App Topbar" recipe at /docs/recipes/app-topbar.
+ * `rel-popover` for nav dropdowns in the "Navbar" recipe at /docs/recipes/navbar.
  */
 @customElement("rel-topbar-dropdown")
 export class RelTopbarDropdown extends LitElement {