@reliability-design/web 1.4.5 → 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 */

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

@@ -3,6 +3,7 @@ import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-alert/rel-alert";
 import "../rel-progress/rel-progress";
+import { announce } from "../../utils/announce";
 
 /** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
 export type UploadStatus = "ready" | "uploading" | "success" | "error";
@@ -143,6 +144,8 @@ export class RelUpload extends LitElement {
   private aborter?: AbortController;
   private delayTimer?: ReturnType<typeof setTimeout>;
   private lastSignature = "";
+  private lastHeading = "";
+  private lastAlertText = "";
 
   static styles = css`
     :host {
@@ -601,6 +604,13 @@ export class RelUpload extends LitElement {
     if (rejected.length) this.emit("rel-invalid", { rejected });
     this.emit("rel-files-added", { added, rejected });
     this.emit("rel-change", { files: this.files });
+    const accepted = added.length - rejected.length;
+    if (accepted > 0) {
+      announce(`${accepted} file${accepted === 1 ? "" : "s"} added`);
+    }
+    if (rejected.length > 0) {
+      announce(`${rejected.length} file${rejected.length === 1 ? "" : "s"} rejected`, "assertive");
+    }
     this.notify();
   }
 
@@ -727,6 +737,7 @@ export class RelUpload extends LitElement {
     this.files = this.files.filter((f) => f.id !== id);
     this.emit("rel-remove", { id, file: target?.file });
     this.emit("rel-change", { files: this.files });
+    if (target) announce(`${target.name} removed`);
     this.notify();
   }
 
@@ -738,6 +749,7 @@ export class RelUpload extends LitElement {
     this.delayed = false;
     if (this.inputEl) this.inputEl.value = "";
     this.emit("rel-change", { files: this.files });
+    announce("File list cleared");
     this.notify();
   }
 
@@ -803,6 +815,19 @@ export class RelUpload extends LitElement {
 
   updated() {
     this.notify();
+    const heading = this.files.length ? this.listHeading : "";
+    if (heading !== this.lastHeading) {
+      this.lastHeading = heading;
+      if (heading) {
+        announce(heading, this.phase === "failed" ? "assertive" : "polite");
+      }
+    }
+    const alert = this.alertContent;
+    const alertText = alert ? `${alert.message1}. ${alert.message2}` : "";
+    if (alertText !== this.lastAlertText) {
+      this.lastAlertText = alertText;
+      if (alertText) announce(alertText, "assertive");
+    }
   }
 
   // ── render ────────────────────────────────────────────────────────────────