@reliability-design/web 1.4.5 → 1.4.6

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 import "./rel-drawer-footer";
@@ -550,6 +550,9 @@ export class RelDrawer extends LitElement {
           style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
+          aria-labelledby="${hasTitle ? "drawer-title" : nothing}"
+          aria-describedby="${hasDescription ? "drawer-description" : nothing}"
+          aria-label="${hasTitle ? nothing : "Drawer"}"
           tabindex="-1">
           ${showHandleBar
             ? html`<div
@@ -564,10 +567,10 @@ export class RelDrawer extends LitElement {
                   <div class="header-top">
                     <div>
                       ${hasTitle
-                        ? html`<h2 class="title">${this.title}</h2>`
+                        ? html`<h2 class="title" id="drawer-title">${this.title}</h2>`
                         : ""}
                       ${hasDescription
-                        ? html`<p class="description">${this.description}</p>`
+                        ? html`<p class="description" id="drawer-description">${this.description}</p>`
                         : ""}
                     </div>
                     ${showCloseButton

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

@@ -450,6 +450,8 @@ export class RelMenu extends LitElement {
       this.type === "checkbox"
         ? html`<rel-checkbox
             class="menu-control"
+            inert
+            aria-hidden="true"
             label="${item.label}"
             status="${item.checked ? "checked" : "unchecked"}"
             state="${item.disabled ? "disabled" : "default"}"
@@ -457,6 +459,8 @@ export class RelMenu extends LitElement {
         : this.type === "select-option"
         ? html`<rel-radio
             class="menu-control"
+            inert
+            aria-hidden="true"
             .options="${[{ value: item.label, label: item.label, disabled: !!item.disabled }]}"
             .selectedValue="${item.active ? item.label : null}"
           ></rel-radio>`
@@ -475,6 +479,7 @@ export class RelMenu extends LitElement {
         class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
         role="${role}"
         aria-checked="${ariaChecked}"
+        aria-label="${this.type === "checkbox" || this.type === "select-option" ? item.label : nothing}"
         aria-disabled="${item.disabled ? "true" : nothing}"
         aria-haspopup="${hasSubmenu ? "menu" : nothing}"
         aria-expanded="${hasSubmenu ? String(!!item.open) : nothing}"
@@ -524,6 +529,7 @@ export class RelMenu extends LitElement {
       <div
         part="list" class="rel-menu ${this.type === "fixed" || this.type === "fit" ? this.type : ""}"
         role="menu"
+        aria-label="Menu"
         tabindex="0"
         aria-activedescendant="${activeDescendant}"
         @keydown="${this.onKeydown}"

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

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 export type OtpType = "numeric" | "alphanumeric";
 
@@ -77,7 +78,7 @@ export class RelOtp extends LitElement {
       height: 48px;
       border: var(--rel-stroke-sm) solid var(--rel-border-default);
       border-radius: var(--rel-border-radius-sm);
-      background: var(--rel-bg-neutral);
+      background: var(--rel-bg-neutral);
       text-align: center;
       color: var(--rel-text-default);
       outline: none;
@@ -230,6 +231,7 @@ export class RelOtp extends LitElement {
           composed: true,
         })
       );
+      announce("Code complete");
     }
   }
 
@@ -390,6 +392,13 @@ export class RelOtp extends LitElement {
 
     this.updateValue();
 
+    const filled = this.cells.filter((c) => c).length;
+    if (filled < this.length) {
+      announce(
+        `${filled} ${this.type === "alphanumeric" ? "characters" : "digits"} entered`
+      );
+    }
+
     // Focus next empty cell or last cell
     const nextEmptyIndex = this.cells.findIndex((c, i) => i >= startIndex && !c);
     if (nextEmptyIndex >= 0) {
@@ -480,6 +489,7 @@ export class RelOtp extends LitElement {
                     ?readonly="${this.readonly}"
                     ?required="${this.required && index === 0}"
                     aria-label="${this.getAriaLabel(index)}"
+                    aria-invalid="${this.invalid ? "true" : nothing}"
                     @pointerdown="${this.handlePointerDown}"
                     @input="${this.handleInput}"
                     @keydown="${this.handleKeyDown}"

package/dist/components/rel-pagination/rel-pagination.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";
 
 @customElement("rel-pagination")
 export class RelPagination extends LitElement {
@@ -390,6 +391,18 @@ export class RelPagination extends LitElement {
     const total = this.computedTotalPages;
     if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
     if (this.page === undefined) this.currentPage = newPage;
+    announce(`Page ${newPage} of ${total}`);
+    const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;
+    if (focused?.classList.contains("pag-nav-btn")) {
+      this.updateComplete.then(() => {
+        if (focused.isConnected && focused.disabled) {
+          const sibling = focused.parentElement?.querySelector<HTMLButtonElement>(
+            ".pag-nav-btn:not(:disabled)"
+          );
+          sibling?.focus();
+        }
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { page: newPage },

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

@@ -5,6 +5,12 @@ import { getDeepActiveElement, getFocusableElements } from "../../utils/focus.js
 type SideType = "top" | "right" | "bottom" | "left";
 type AlignType = "start" | "center" | "end";
 
+/** Every currently-open popover on the page (module-level, shared by all
+ *  instances). Used so opening one popover light-dismisses any other open
+ *  popover it is not nested inside — regardless of whether it was opened by
+ *  pointer, keyboard, or programmatically. */
+const openPopovers = new Set<RelPopover>();
+
 @customElement("rel-popover")
 export class RelPopover extends LitElement {
   /* =======================
@@ -182,6 +188,9 @@ export class RelPopover extends LitElement {
   private onOpen() {
     this.returnFocusEl = getDeepActiveElement() ?? this.triggerEl;
 
+    this.closeOtherPopovers();
+    openPopovers.add(this);
+
     this.addGlobalListeners();
     this.showNativePopover();
 
@@ -192,11 +201,29 @@ export class RelPopover extends LitElement {
   }
 
   private onClose() {
+    openPopovers.delete(this);
     this.removeGlobalListeners();
     this.hideNativePopover();
     this.restoreFocus();
   }
 
+  /**
+   * Light-dismiss every other open popover that isn't an ancestor of this
+   * one (nested popovers keep their parent open). This is what the outside-
+   * pointerdown listener would do for a click on our trigger — except the
+   * trigger handler stops that pointerdown in the capture phase, and a
+   * keyboard (Enter/Space) or programmatic open never produces one at all.
+   * Honors each popover's own `closeOnOutsideClick` setting.
+   */
+  private closeOtherPopovers() {
+    for (const other of openPopovers) {
+      if (other === this) continue;
+      if (!other.closeOnOutsideClick) continue;
+      if (other.contains(this)) continue;
+      other.setOpen(false);
+    }
+  }
+
   /* =======================
    * TOP LAYER (native Popover API)
    *
@@ -234,7 +261,11 @@ export class RelPopover extends LitElement {
 
   private addGlobalListeners() {
     if (this.closeOnOutsideClick) {
-      document.addEventListener("pointerdown", this.onOutsidePointerDown);
+      // Capture phase: another popover's trigger handler (onHostPointerDown)
+      // calls stopPropagation() in its own capture listener, which would
+      // otherwise swallow the event before a bubble-phase document listener
+      // ever saw it — leaving this popover open alongside the new one.
+      document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     }
 
     if (this.closeOnEscape || this.trapFocus) {
@@ -246,7 +277,7 @@ export class RelPopover extends LitElement {
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     document.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.updatePosition, true);

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

@@ -15,6 +15,9 @@ export class RelProgress extends LitElement {
   @property({ type: Number })
   value = 0;
 
+  @property({ type: String })
+  label = "";
+
   private radius = 15.9155;
   private circumference = 2 * Math.PI * this.radius;
 
@@ -155,9 +158,14 @@ export class RelProgress extends LitElement {
     return Math.min(100, Math.max(0, this.value));
   }
 
+  private get accessibleName() {
+    if (this.label) return this.label;
+    return this.mode.endsWith("indeterminate") ? "Loading" : "Progress";
+  }
+
   private renderLinearDeterminate() {
     return html`
-      <div part="track" class="linear-track" role="progressbar"
+      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}"
         aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
         <div part="indicator" class="linear-bar determinate" style="width: ${this.safeValue}%"></div>
       </div>
@@ -166,7 +174,7 @@ export class RelProgress extends LitElement {
 
   private renderLinearIndeterminate() {
     return html`
-      <div part="track" class="linear-track" role="progressbar">
+      <div part="track" class="linear-track" role="progressbar" aria-label="${this.accessibleName}">
         <div part="indicator" class="linear-bar indeterminate"></div>
       </div>
     `;
@@ -177,7 +185,8 @@ export class RelProgress extends LitElement {
       this.circumference - (this.safeValue / 100) * this.circumference;
 
     return html`
-      <div class="circular">
+      <div class="circular" role="progressbar" aria-label="${this.accessibleName}"
+        aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
         <svg viewBox="0 0 36 36" class="circular-svg">
           <circle class="circular-bg" cx="18" cy="18" r="${this.radius}" />
           <circle
@@ -195,7 +204,7 @@ export class RelProgress extends LitElement {
 
   private renderCircularIndeterminate() {
     return html`
-      <div class="circular">
+      <div class="circular" role="progressbar" aria-label="${this.accessibleName}">
         <svg viewBox="0 0 50 50" class="spinner">
           <circle
             class="spinner-path"

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

@@ -61,9 +61,11 @@ A radio button group component that allows users to select a single option from
 | `options` | `RadioOption[]` | `[]` | Array of radio options (see RadioOption interface below) |
 | `name` | `string` | `"radio-group"` | Name attribute for the radio group (for form grouping) |
 | `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Layout axis: `"vertical"` stacks options in a column; `"horizontal"` lays them out in a wrapping row (reflected attribute) |
-| `size` | `"small" \| "medium"` | `"medium"` | Control scale: `"medium"` = 20px circle with body-lg labels; `"small"` = 16px circle with body-md labels (reflected attribute) |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Control scale (Figma Size L/M/S): `"medium"` = 20px control with body-lg labels; `"large"` = 24px control with body-xl labels; `"small"` = 20px control with body-md labels — S and M share the control size, only typography steps down (reflected attribute) |
+| `density` | `"compact" \| "comfortable"` | `"compact"` | Supporting-text layout (Figma Density): `"compact"` puts the supporting text on its own line under the row, indented past the control; `"comfortable"` stacks label + supporting text beside the control (reflected attribute) |
+| `alignment` | `"leading" \| "trailing"` | `"leading"` | Control position (Figma Layout): `"trailing"` pushes the control to the far edge of the row and always renders comfortable density — the spec has no compact trailing layout (reflected attribute) |
 | `selectedValue` | `string \| null` | `null` | Currently selected option value (reflected attribute) |
-| `disabled` | `boolean` | `false` | Disables the entire radio group |
+| `disabled` | `boolean` | `false` | Disables the entire radio group (renders at 40% opacity) |
 
 ### RadioOption Interface
 ```typescript
@@ -72,7 +74,8 @@ interface RadioOption {
   label: string;           // Display label
   supportingText?: string; // Optional helper text below the label
   disabled?: boolean;      // Disable individual option
-  error?: boolean;         // Show error state for individual option
+  icon?: string;           // rel-icon name rendered before the label
+  avatar?: string;         // 1–2 initials rendered as a circular chip before the label (ignored when icon is set)
 }
 ```