@reliability-design/web 1.4.5 → 1.4.6

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

@@ -278,7 +278,7 @@ export class RelAlert extends LitElement {
 
   render() {
     return html`
-      <div part="base" class="rel-alert alert-${this.type}" role="alert">
+      <div part="base" class="rel-alert alert-${this.type}" role="alert" aria-atomic="true">
         <div part="icon" class="rel-icon">${this.iconTemplate}</div>
 
         <div part="content" class="rel-content">

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

@@ -9,6 +9,7 @@ import type {
   TextFieldVariant,
   FieldLabelStyle,
 } from "../rel-textfield/rel-textfield.js";
+import { announce } from "../../utils/announce";
 
 /** An item is a plain string or any object read through displayField/valueField. */
 export type AutocompleteItem = string | Record<string, unknown>;
@@ -246,6 +247,15 @@ export class RelAutocomplete extends LitElement {
     this.internalValueWrite = false;
   }
 
+  private wasLoading = false;
+
+  protected updated() {
+    if (this.open && this.isLoading && !this.wasLoading) {
+      announce("Loading suggestions");
+    }
+    this.wasLoading = this.isLoading;
+  }
+
   /** Full normalized source list (remote results while searchFn drives, else items). */
   private get allItems(): NormalizedItem[] {
     const source = this.searchFn && this.remoteItems !== null ? this.remoteItems : this.items;
@@ -290,13 +300,15 @@ export class RelAutocomplete extends LitElement {
   // pointerdown and on any outside scroll instead of re-anchoring) ──
 
   private addGlobalListeners() {
-    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    // Capture phase so a pointerdown that another component stops in its own
+    // capture listener (e.g. a rel-popover trigger) still closes this panel.
+    document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.addEventListener("resize", this.updatePosition);
     window.addEventListener("scroll", this.onPageScroll, true);
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.onPageScroll, true);
   }
@@ -433,6 +445,17 @@ export class RelAutocomplete extends LitElement {
       this.debounceTimer = setTimeout(() => this.runSearch(this.inputText), this.debounceMs);
     } else {
       this.syncPanel();
+      this.announceResults();
+    }
+  }
+
+  private announceResults() {
+    if (!this.open || this.isLoading) return;
+    const n = this.filteredItems.length;
+    if (n === 0) {
+      if (this.inputText) announce(this.noResultsText);
+    } else {
+      announce(`${n} result${n === 1 ? "" : "s"} available`);
     }
   }
 
@@ -452,6 +475,7 @@ export class RelAutocomplete extends LitElement {
       if (seq === this.searchSeq) {
         this.searching = false;
         this.syncPanel();
+        this.announceResults();
       }
     }
   }
@@ -523,11 +547,13 @@ export class RelAutocomplete extends LitElement {
           return;
         }
         this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        this.announceHighlighted(filtered);
         break;
       case "ArrowUp":
         e.preventDefault();
         if (!this.open) return;
         this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        this.announceHighlighted(filtered);
         break;
       case "Enter":
         if (this.open && this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
@@ -552,6 +578,11 @@ export class RelAutocomplete extends LitElement {
     }
   }
 
+  private announceHighlighted(filtered: NormalizedItem[]) {
+    const item = filtered[this.highlightedIndex];
+    if (item) announce(`${item.label}, ${this.highlightedIndex + 1} of ${filtered.length}`);
+  }
+
   private onFocusIn() {
     if (this.disabled || this.readonly) return;
     if (this.queryLongEnough && (this.filteredItems.length > 0 || this.minSearchLength === 0)) {

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

@@ -142,6 +142,11 @@ export class RelBadge extends LitElement {
     return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
   }
 
+  private get computedAriaLabel() {
+    if (this.ariaLabel) return this.ariaLabel;
+    return this.number ? `${this.number} ${this.suffix}` : `New ${this.suffix}`;
+  }
+
   override updated(changedProperties: Map<PropertyKey, unknown>): void {
     if (changedProperties.has("color")) {
       if (this.color) {
@@ -162,7 +167,7 @@ export class RelBadge extends LitElement {
 
   render() {
     return html`
-      <span part="base" class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
+      <span part="base" class="${this.classes}" role="status" aria-label=${this.computedAriaLabel}>
         ${this.variant === "number" ? this.number : null}
       </span>
     `;

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 interface CalendarDay {
   date: Date;
@@ -99,6 +100,13 @@ export class RelCalendar extends LitElement {
       gap: var(--rel-spacing-2xs);
     }
 
+    .calendar-week {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-2xs);
+    }
+
     .weekday {
       text-align: center;
       color: var(--rel-text-placeholder);
@@ -315,6 +323,26 @@ export class RelCalendar extends LitElement {
     return formatter.format(new Date(this.viewYear, this.viewMonth, 1));
   }
 
+  private dayLabelFormatter: Intl.DateTimeFormat | null = null;
+  private dayLabelLocale = "";
+
+  private formatDayLabel(date: Date): string {
+    if (!this.dayLabelFormatter || this.dayLabelLocale !== this.locale) {
+      this.dayLabelLocale = this.locale;
+      this.dayLabelFormatter = new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+    }
+    return this.dayLabelFormatter.format(date);
+  }
+
+  private announceMonth() {
+    announce(`${this.getMonthName()} ${this.viewYear}`);
+  }
+
   private previousMonth() {
     if (this.viewMonth === 0) {
       this.viewMonth = 11;
@@ -322,6 +350,7 @@ export class RelCalendar extends LitElement {
     } else {
       this.viewMonth--;
     }
+    this.announceMonth();
   }
 
   private nextMonth() {
@@ -331,6 +360,7 @@ export class RelCalendar extends LitElement {
     } else {
       this.viewMonth++;
     }
+    this.announceMonth();
   }
 
   private selectDay(day: CalendarDay) {
@@ -385,6 +415,7 @@ export class RelCalendar extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear--;
+          this.announceMonth();
         } else {
           this.previousMonth();
         }
@@ -393,6 +424,7 @@ export class RelCalendar extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear++;
+          this.announceMonth();
         } else {
           this.nextMonth();
         }
@@ -451,9 +483,13 @@ export class RelCalendar extends LitElement {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
     const rovingIndex = this.getRovingIndex(days);
+    const weeks: CalendarDay[][] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
 
     return html`
-      <div role="grid" aria-label="Calendar">
+      <div>
         <div part="header" class="header">
           <button
             part="action" class="nav-button"
@@ -483,6 +519,7 @@ export class RelCalendar extends LitElement {
           </button>
         </div>
 
+        <div role="grid" aria-label="${this.getMonthName()} ${this.viewYear}">
         <div part="list" class="calendar-grid" role="row">
           ${weekdayLabels.map(
             (label) => html`
@@ -493,26 +530,35 @@ export class RelCalendar extends LitElement {
           )}
         </div>
 
-        <div part="list" class="calendar-grid">
-          ${days.map(
-            (day, index) => html`
-              <button
-                part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
-                  ? "today"
-                  : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
-                role="gridcell"
-                aria-label="${this.formatISODate(day.date)}"
-                aria-selected="${day.isSelected}"
-                ?disabled=${day.isDisabled}
-                @click=${() => this.selectDay(day)}
-                @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
-                tabindex="${index === rovingIndex ? 0 : -1}"
-              >
-                ${day.day}
-              </button>
+        <div part="list" class="calendar-grid" role="rowgroup">
+          ${weeks.map(
+            (week, weekIndex) => html`
+              <div class="calendar-week" role="row">
+                ${week.map((day, dayIndex) => {
+                  const index = weekIndex * 7 + dayIndex;
+                  return html`
+                    <button
+                      part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
+                        ? "today"
+                        : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
+                      role="gridcell"
+                      aria-label="${this.formatDayLabel(day.date)}"
+                      aria-selected="${day.isSelected}"
+                      aria-current=${day.isToday ? "date" : nothing}
+                      ?disabled=${day.isDisabled}
+                      @click=${() => this.selectDay(day)}
+                      @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
+                      tabindex="${index === rovingIndex ? 0 : -1}"
+                    >
+                      ${day.day}
+                    </button>
+                  `;
+                })}
+              </div>
             `
           )}
         </div>
+        </div>
       </div>
     `;
   }

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 @customElement("rel-carousel")
 export class RelCarousel extends LitElement {
@@ -41,6 +42,7 @@ export class RelCarousel extends LitElement {
   // Number of clone slides prepended before the real slides
   private clonesBefore = 0;
   private _silentJumping = false;
+  private _autoplayTick = false;
   private _ro?: ResizeObserver;
 
   static styles = css`
@@ -307,6 +309,12 @@ export class RelCarousel extends LitElement {
     const elements = slot.assignedElements();
     this.slideCount = elements.length;
 
+    elements.forEach((el, i) => {
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-roledescription", "slide");
+      el.setAttribute("aria-label", `${i + 1} of ${elements.length}`);
+    });
+
     // Clamp value to valid real-slide range
     if (this.value >= this.slideCount) this.value = Math.max(0, this.slideCount - 1);
     if (this.value < 0) this.value = 0;
@@ -397,9 +405,14 @@ export class RelCarousel extends LitElement {
       this.currentTranslate = translate;
       this.prevTranslate = translate;
       this.track!.style.transform = this.axisTransform(translate);
+      const fromAutoplay = this._autoplayTick;
       this.track!.addEventListener(
         "transitionend",
-        () => this.silentJump(this.slideCount - 1),
+        () => {
+          this._autoplayTick = fromAutoplay;
+          this.silentJump(this.slideCount - 1);
+          this._autoplayTick = false;
+        },
         { once: true }
       );
     }
@@ -419,9 +432,14 @@ export class RelCarousel extends LitElement {
       this.currentTranslate = translate;
       this.prevTranslate = translate;
       this.track!.style.transform = this.axisTransform(translate);
+      const fromAutoplay = this._autoplayTick;
       this.track!.addEventListener(
         "transitionend",
-        () => this.silentJump(0),
+        () => {
+          this._autoplayTick = fromAutoplay;
+          this.silentJump(0);
+          this._autoplayTick = false;
+        },
         { once: true }
       );
     }
@@ -452,6 +470,9 @@ export class RelCarousel extends LitElement {
   }
 
   private emitChange() {
+    if (!this._autoplayTick && this.slideCount > 0) {
+      announce(`Slide ${this.value + 1} of ${this.slideCount}`);
+    }
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: this.value },
@@ -466,7 +487,9 @@ export class RelCarousel extends LitElement {
 
     this.stopAutoplay();
     this.autoplayTimer = window.setInterval(() => {
+      this._autoplayTick = true;
       this.goToNext();
+      this._autoplayTick = false;
     }, this.interval);
   }
 

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

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "../rel-avatar/rel-avatar.js";
 import "@reliability-design/icons/rel-icon";
+import { announce } from "../../utils/announce";
 
 export type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
 export type ChipVariant = "fill" | "subtle";
@@ -76,6 +77,13 @@ export class RelChip extends LitElement {
       transition: background-color 0.15s ease;
     }
 
+    .chip-action {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+      outline: none;
+    }
+
     /* ── Size ── */
     :host([size="lg"]) .chip {
       height: 32px;
@@ -262,7 +270,7 @@ export class RelChip extends LitElement {
        outward by strokeWeight — outline-offset must be 0, not a positive
        gap (a positive offset was the bug: it drew a visible gap that
        doesn't exist in Figma). ── */
-    .chip:focus-visible {
+    .chip:has(.chip-action:focus-visible) {
       outline: 1.5px solid var(--rel-chip-focus-ring, var(--rel-border-focus));
       outline-offset: 1.5px;
       box-shadow: 0 0 0 1.5px var(--rel-border-focus-inner);
@@ -363,6 +371,7 @@ export class RelChip extends LitElement {
         composed: true,
       })
     );
+    announce(`${this.label} removed`);
   }
 
   /** The chip body is announced as a button, so it must also act on keys:
@@ -432,25 +441,27 @@ export class RelChip extends LitElement {
     }
 
     return html`
-      <span
-        part="base" class="${this.classes}"
-        role="button"
-        tabindex="0"
-        aria-label="${this.label}"
-        @keydown=${this.handleKeydown}
-      >
-        ${showAvatar
-          ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
-          : null}
-        ${showLeadingIcon
-          ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
-          : null}
-
-        <span part="label" class="chip-label">${this.label}</span>
-
-        ${this.trailingIcon
-          ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
-          : null}
+      <span part="base" class="${this.classes}">
+        <span
+          class="chip-action"
+          role="button"
+          tabindex="0"
+          aria-label="${this.label}"
+          @keydown=${this.handleKeydown}
+        >
+          ${showAvatar
+            ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
+            : null}
+          ${showLeadingIcon
+            ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
+            : null}
+
+          <span part="label" class="chip-label">${this.label}</span>
+
+          ${this.trailingIcon
+            ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
+            : null}
+        </span>
         ${this.removable
           ? html`<button
               class="chip-remove"

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

@@ -0,0 +1,116 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import {
+  parseDateInput,
+  isDayFirstPattern,
+  isDayFirstLocale,
+} from "./date-parse";
+
+// Reference "today": 2026-07-21 (a Tuesday), noon to dodge TZ edges.
+const ref = new Date(2026, 6, 21, 12, 0, 0);
+const opts = { referenceDate: ref };
+
+const ymd = (d: Date | null) =>
+  d === null
+    ? null
+    : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
+        d.getDate()
+      ).padStart(2, "0")}`;
+
+test("shortcuts: t / today / t±N / tN", () => {
+  assert.equal(ymd(parseDateInput("t", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("T", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("today", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("t+1", opts)), "2026-07-22");
+  assert.equal(ymd(parseDateInput("t1", opts)), "2026-07-22");
+  assert.equal(ymd(parseDateInput("T + 7", opts)), "2026-07-28");
+  assert.equal(ymd(parseDateInput("t-1", opts)), "2026-07-20");
+  assert.equal(ymd(parseDateInput("t-30", opts)), "2026-06-21");
+  // month/year rollover
+  assert.equal(ymd(parseDateInput("t+11", opts)), "2026-08-01");
+});
+
+test("incomplete shortcut is not 'today'", () => {
+  assert.equal(parseDateInput("t+", opts), null);
+  assert.equal(parseDateInput("t-", opts), null);
+});
+
+test("ISO and year-first forms", () => {
+  assert.equal(ymd(parseDateInput("2026-07-21", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("2026/7/21", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("2026.07.21", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("20260721", opts)), "2026-07-21");
+});
+
+test("numeric M/D/Y vs D/M/Y via dayFirst", () => {
+  assert.equal(ymd(parseDateInput("7/21/2026", opts)), "2026-07-21");
+  assert.equal(
+    ymd(parseDateInput("21/7/2026", { ...opts, dayFirst: true })),
+    "2026-07-21"
+  );
+  // ambiguous "3/4": order decided by dayFirst
+  assert.equal(ymd(parseDateInput("3/4/2026", opts)), "2026-03-04");
+  assert.equal(
+    ymd(parseDateInput("3/4/2026", { ...opts, dayFirst: true })),
+    "2026-04-03"
+  );
+  // a part > 12 forces the order regardless of dayFirst
+  assert.equal(ymd(parseDateInput("21/7/2026", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("7/21/2026", { ...opts, dayFirst: true })), "2026-07-21");
+});
+
+test("two-digit years map to 20YY", () => {
+  assert.equal(ymd(parseDateInput("7/21/26", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("21/7/26", { ...opts, dayFirst: true })), "2026-07-21");
+});
+
+test("month names, long and short, any case", () => {
+  assert.equal(ymd(parseDateInput("21 Jul 2026", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("Jul 21 2026", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("July 21, 2026", opts)), "2026-07-21");
+  assert.equal(ymd(parseDateInput("21 december 2026", opts)), "2026-12-21");
+});
+
+test("partial input fills from the reference date", () => {
+  assert.equal(ymd(parseDateInput("5", opts)), "2026-07-05"); // day in ref month
+  assert.equal(ymd(parseDateInput("21/7", { ...opts, dayFirst: true })), "2026-07-21");
+  assert.equal(ymd(parseDateInput("12/25", opts)), "2026-12-25");
+  assert.equal(ymd(parseDateInput("25 Dec", opts)), "2026-12-25");
+  assert.equal(ymd(parseDateInput("Dec 25", opts)), "2026-12-25");
+});
+
+test("impossible dates rejected", () => {
+  assert.equal(parseDateInput("2026-02-30", opts), null);
+  assert.equal(parseDateInput("31/4/2026", { ...opts, dayFirst: true }), null);
+  assert.equal(parseDateInput("0", opts), null);
+  assert.equal(parseDateInput("32", opts), null);
+  assert.equal(parseDateInput("13/13/2026", opts), null);
+});
+
+test("garbage rejected", () => {
+  assert.equal(parseDateInput("", opts), null);
+  assert.equal(parseDateInput("asdf", opts), null);
+  assert.equal(parseDateInput("1/2/3/4", opts), null);
+  assert.equal(parseDateInput("Jul", opts), null);
+  assert.equal(parseDateInput("tomorrow+1", opts), null);
+});
+
+test("leap day handling", () => {
+  assert.equal(ymd(parseDateInput("2028-02-29", opts)), "2028-02-29");
+  assert.equal(parseDateInput("2026-02-29", opts), null);
+});
+
+test("isDayFirstPattern", () => {
+  assert.equal(isDayFirstPattern("DD/MM/YYYY"), true);
+  assert.equal(isDayFirstPattern("MM/DD/YYYY"), false);
+  assert.equal(isDayFirstPattern("YYYY-MM-DD"), false);
+  assert.equal(isDayFirstPattern("D MMM YYYY"), true);
+  assert.equal(isDayFirstPattern("[Due] MM/DD"), false);
+  assert.equal(isDayFirstPattern("YYYY"), null);
+});
+
+test("isDayFirstLocale", () => {
+  assert.equal(isDayFirstLocale("en-US"), false);
+  assert.equal(isDayFirstLocale("en-GB"), true);
+  assert.equal(isDayFirstLocale("de-DE"), true);
+});