@reliability-design/web 1.4.3 → 1.4.4

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

@@ -94,3 +94,4 @@ Two data modes:
 - Form validation is *displayed* (`error`, `error-message`, `required`), not performed — validity logic belongs to the form layer (e.g. Angular validators)
 - CSS parts: `panel`, `list`, `option`, plus re-exported textfield parts (`label`, `control`, `input`, `helper`, `right-icon`)
 - Panel styling matches `rel-select`'s listbox; override via `--rel-autocomplete-bg`, `--rel-autocomplete-menu-border`, `--rel-autocomplete-menu-radius`, `--rel-autocomplete-menu-shadow`, `--rel-autocomplete-option-hover`
+- The open panel is promoted to the browser **top layer** (native Popover API, `popover="manual"`), so it renders correctly inside transformed / `overflow: hidden` containers — a centered `rel-modal`, a bottom `rel-drawer`. Engines without the Popover API fall back to `position: fixed` with a measure-and-cancel correction for transformed ancestors

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

@@ -143,6 +143,15 @@ export class RelAutocomplete extends LitElement {
       position: fixed;
       z-index: 1001;
       display: none;
+      /* Reset native [popover] UA styles (the panel is promoted to the
+         top layer so transformed ancestors — e.g. a centered rel-modal
+         panel — can't hijack its containing block or clip it). */
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       box-sizing: border-box;
       background: var(--rel-autocomplete-bg, var(--rel-bg-neutral));
       border: 1px solid var(--rel-autocomplete-menu-border, var(--rel-border-default));
@@ -222,6 +231,7 @@ export class RelAutocomplete extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     clearTimeout(this.debounceTimer);
   }
 
@@ -309,7 +319,10 @@ export class RelAutocomplete extends LitElement {
     this.open = true;
     this.highlightedIndex = -1;
     this.addGlobalListeners();
-    requestAnimationFrame(() => this.updatePosition());
+    requestAnimationFrame(() => {
+      this.showNativePopover();
+      this.updatePosition();
+    });
   }
 
   private closePanel() {
@@ -317,6 +330,35 @@ export class RelAutocomplete extends LitElement {
     this.open = false;
     this.highlightedIndex = -1;
     this.removeGlobalListeners();
+    this.hideNativePopover();
+  }
+
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, breaking viewport-based coordinates and letting the
+   * panel's overflow:hidden clip the suggestions. Promoting the panel to
+   * the browser top layer sidesteps both — same fix as rel-popover.
+   * `manual` keeps light-dismiss and Escape handling under this
+   * component's own control. */
+
+  private showNativePopover() {
+    const p = this.panelEl;
+    if (!p || typeof p.showPopover !== "function") return;
+    try {
+      if (!p.matches(":popover-open")) p.showPopover();
+    } catch {
+      /* older engines / detached element — fixed-position fallback applies */
+    }
+  }
+
+  private hideNativePopover() {
+    const p = this.panelEl;
+    if (!p || typeof p.hidePopover !== "function") return;
+    try {
+      if (p.matches(":popover-open")) p.hidePopover();
+    } catch {
+      /* already hidden or unsupported — nothing to do */
+    }
   }
 
   private updatePosition = () => {
@@ -337,6 +379,18 @@ export class RelAutocomplete extends LitElement {
       left = Math.max(8, window.innerWidth - t.width - 8);
     }
 
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the panel away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    this.panelEl.style.top = `${top}px`;
+    this.panelEl.style.left = `${left}px`;
+    this.panelEl.style.width = `${t.width}px`;
+    const applied = this.panelEl.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    this.panelEl.style.top = `${top}px`;
+    this.panelEl.style.left = `${left}px`;
+
     this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
   };
 
@@ -583,6 +637,7 @@ export class RelAutocomplete extends LitElement {
         id="${panelId}"
         part="panel list"
         class="ac-panel"
+        popover="manual"
         role="listbox"
         aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"

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

@@ -1,20 +1,41 @@
 # rel-checkbox
 
 ## Overview
-A tri-state checkbox component supporting checked, unchecked, and indeterminate states. Includes label and supporting text with built-in error and disabled states for form validation scenarios.
+A tri-state checkbox component supporting checked, unchecked, and indeterminate states. Includes label, optional supporting text, and optional label prefix icon, with built-in error and disabled states. Supports two sizes, two densities, and leading/trailing box alignment — matching the Figma Checkbox sheet vocabulary (Size, Density, Alignment) verbatim.
 
 ## Usage
 ```html
 <!-- Basic example -->
 <rel-checkbox label="Accept terms"></rel-checkbox>
 
-<!-- Example with common options -->
+<!-- Supporting text, compact density (default: text on its own line, indented past the box) -->
 <rel-checkbox
   label="Subscribe to newsletter"
   supportingtext="We'll send you weekly updates"
   status="unchecked"
   state="default">
 </rel-checkbox>
+
+<!-- Comfortable density: label + supporting text stack beside the box -->
+<rel-checkbox
+  density="comfortable"
+  label="Notify the broker"
+  supportingtext="Sends an email when the POD is uploaded">
+</rel-checkbox>
+
+<!-- Trailing alignment: box at the far edge of the row (settings-row style).
+     Trailing always renders comfortable density — compact has no trailing layout. -->
+<rel-checkbox
+  alignment="trailing"
+  label="Email notifications"
+  supportingtext="Weekly summary of load activity">
+</rel-checkbox>
+
+<!-- Small size -->
+<rel-checkbox size="small" label="Include archived"></rel-checkbox>
+
+<!-- Indeterminate (programmatic-only; user toggle resolves to checked/unchecked) -->
+<rel-checkbox label="Select all" status="indeterminate"></rel-checkbox>
 ```
 
 ## API
@@ -23,42 +44,62 @@ A tri-state checkbox component supporting checked, unchecked, and indeterminate
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `"Label"` | Label text displayed next to the checkbox |
-| `icon` | `string` | `""` | `rel-icon` name rendered between the checkbox and the label (label prefix icon). Unset renders no icon and reserves no space |
-| `supportingtext` | `string` | `""` | Helper text displayed below the checkbox and label |
+| `icon` | `string` | `""` | `rel-icon` name rendered between the checkbox and the label (label prefix icon; scales with `size`). Unset renders no icon and reserves no space |
+| `supportingtext` | `string` | `""` | Helper text; placement depends on `density` |
 | `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the checkbox |
-| `status` | `"unchecked" \| "checked" \| "indeterminate"` | `"unchecked"` | Current checked state of the checkbox |
+| `status` | `"unchecked" \| "checked" \| "indeterminate"` | `"unchecked"` | Current check state. Indeterminate is programmatic-only |
+| `checked` | `boolean` (accessor) | `false` | Convenience accessor over `status` (used by the Angular CVA) |
+| `size` | `"small" \| "medium"` | `"medium"` | Control scale: medium = 18px box, body-lg label, body-sm supporting text; small = 14px box, body-md label, body-xs supporting text (reflected) |
+| `density` | `"compact" \| "comfortable"` | `"compact"` | Supporting-text layout: compact puts it on its own line under the row, indented past the box; comfortable stacks label + supporting text beside the box (reflected) |
+| `alignment` | `"leading" \| "trailing"` | `"leading"` | Box position: leading = before the label; trailing = far edge of the row. Trailing always renders comfortable density — compact+trailing is "Not available" in the Figma sheet, and a dev-mode `console.warn` fires if requested (reflected) |
+| `value` | `string` | `""` | Value reported in the `rel-change` event detail |
+
+### Layout matrix (mirrors the Figma sheet)
+| Size | Density | Leading | Trailing |
+|------|---------|---------|----------|
+| M | Comfortable | ✓ | ✓ |
+| M | Compact | ✓ (default) | — renders comfortable |
+| S | Comfortable | ✓ | ✓ |
+| S | Compact | ✓ | — renders comfortable |
 
 ## Events
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `change` | `{ checked: boolean, indeterminate: boolean }` | Fired when checkbox state changes through user interaction |
+| `rel-change` | `{ checked: boolean, value: string }` | Fired on user toggle (bubbles, composed) |
 
 ## Slots
 Default slot not used.
 
 ## CSS Parts
-None exposed.
+- `base` — outer wrapper
+- `label` — label text span
+- `helper` — supporting text span
 
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
 - `--rel-fonts-font-family` - Font family
-- `--rel-body-md-regular-font-size`, `--rel-body-sm-regular-font-size` - Font sizes for label and supporting text
-- `--rel-fonts-weight-body-medium` - Font weight for label
+- `--rel-body-lg-regular-*` / `--rel-body-sm-regular-*` - Label and supporting text type (medium size)
+- `--rel-body-md-regular-*` / `--rel-body-xs-regular-*` - Label and supporting text type (small size)
+
+### Spacing Tokens
+- `--rel-spacing-xs` - Gap between box, icon, and label
+- `--rel-spacing-3xs` - Gap between label and supporting text (comfortable) / row and supporting text (compact)
 
 ### Color Tokens
-- `--rel-text-label` - Checkbox border and checked background color
-- `--rel-bg-surface` - Checkbox background and checkmark color
-- `--rel-text-default` - Label text color
-- `--rel-text-placeholder` - Supporting text color
-- `--rel-bg-danger` - Error state border and background color
-- `--rel-border-info` - Focus outline color
+- `--rel-text-default` - Box border and label text color (rest)
+- `--rel-text-body` - Hover color for box, label, and icon
+- `--rel-bg-neutral-inverse-2` - Checked box fill and indeterminate dash
+- `--rel-text-inverse` - Checkmark color
+- `--rel-text-caption` - Supporting text color
+- `--rel-border-focus` - Focus outline color
+- `--rel-border-danger` / `--rel-action-danger-fill` / `--rel-text-danger` - Error state colors
 
 ## Accessibility
 - Uses visually hidden native checkbox input for screen reader support
 - Custom visual checkbox with proper focus indicators
 - Focus visible state with outline offset for keyboard users
-- Label click targets the checkbox for larger interaction area
+- Label click targets the checkbox for larger interaction area (in trailing alignment the whole row is clickable)
 - Disabled state communicated through opacity reduction and cursor change
 
 ### Keyboard Interactions
@@ -67,12 +108,18 @@ None exposed.
 
 ### Focus Behavior
 - Focus outline appears with offset around the custom checkbox box
-- Uses info border color for high contrast
+- Uses focus border color for high contrast
 
 ## Notes / Edge Cases
-- Clicking cycles through three states in order: unchecked → checked → indeterminate → unchecked (repeating)
+- User toggling is binary: indeterminate is never entered by interaction — toggling from indeterminate resolves to checked. Set `status="indeterminate"` programmatically (e.g. a Select-All parent driven by app state)
 - When `state="disabled"`, click events are blocked and opacity is reduced to 0.55
-- The indeterminate state displays a horizontal line instead of a checkmark
-- In error state, the checkbox border and checked background use error color
-- Supporting text is positioned below with left padding to align with checkbox content
-- Native checkbox input is visually hidden but maintains accessibility features
+- The host is `display: block`, so a trailing checkbox stretches to its container width; constrain the parent to control row width
+- Comfortable density with no supporting text is visually identical to compact
+- The hidden native input is absolutely positioned against the `.row` containing block; keep `position: relative` on `.row` (Tab-scroll page-jump fix, shared with rel-radio)
+
+## Recipes (intentionally NOT component props)
+- **Selectable list row**: `alignment="trailing"` checkbox inside a padded, hover-highlighted container
+- **Select All / nested group**: parent checkbox with `status="indeterminate"` wired to children in app state
+- **Selectable card**: `rel-card` wrapping a checkbox; toggle a selected border on `rel-change`
+
+See the Storybook Checkbox stories for working recipe markup.

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

@@ -1,9 +1,12 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
+type CheckboxSize = "small" | "medium";
+type CheckboxDensity = "compact" | "comfortable";
+type CheckboxAlignment = "leading" | "trailing";
 
 @customElement("rel-checkbox")
 export class RelCheckbox extends LitElement {
@@ -15,6 +18,21 @@ export class RelCheckbox extends LitElement {
   @property({ type: String }) status: CheckboxStatus = "unchecked";
   @property({ type: String }) value = "";
 
+  /** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
+   *  label; `"small"` = 14px box with body-md label. */
+  @property({ type: String, reflect: true }) size: CheckboxSize = "medium";
+
+  /** Supporting-text layout (Figma Density). `"compact"` (default) puts the
+   *  supporting text on its own line under the row, indented past the box;
+   *  `"comfortable"` stacks label + supporting text beside the box. */
+  @property({ type: String, reflect: true }) density: CheckboxDensity = "compact";
+
+  /** Box position (Figma Alignment). `"leading"` (default) renders the box
+   *  before the label; `"trailing"` pushes it to the far edge of the row.
+   *  Trailing has no compact layout in the spec, so it always renders with
+   *  comfortable density. */
+  @property({ type: String, reflect: true }) alignment: CheckboxAlignment = "leading";
+
   get checked(): boolean {
     return this.status === "checked";
   }
@@ -53,6 +71,29 @@ export class RelCheckbox extends LitElement {
       cursor: pointer;
     }
 
+    /* Trailing alignment — box moves to the far edge, label stack to the
+       start. row-reverse keeps the box first in DOM order (input + .box
+       adjacency drives the focus ring) while space-between stretches the
+       row to its container. */
+    :host([alignment="trailing"]) .row {
+      flex-direction: row-reverse;
+      justify-content: space-between;
+    }
+
+    /* Comfortable density — label and supporting text stack beside the box. */
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-3xs);
+      min-width: 0;
+    }
+
+    .label-line {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+    }
+
     input {
       position: absolute;
       inset: 0;
@@ -195,7 +236,6 @@ export class RelCheckbox extends LitElement {
 
     .text {
       color: var(--rel-text-caption);
-      padding-left: 28px;
 
       font-family: var(--rel-body-sm-regular-font-family);
 
@@ -208,8 +248,63 @@ export class RelCheckbox extends LitElement {
       letter-spacing: var(--rel-body-sm-regular-letter-spacing);
 
     }
+
+    /* Compact density — supporting text sits under the whole row, indented
+       past the box (box width + row gap, matching the pre-existing 28px). */
+    .text-below {
+      padding-left: 28px;
+    }
+
+    /* Size variant (medium is the base scale above). */
+    :host([size="small"]) .box {
+      width: 14px;
+      height: 14px;
+      border-radius: 3px;
+    }
+
+    :host([size="small"]) svg {
+      width: 10px;
+      height: 10px;
+    }
+
+    :host([size="small"]) .label {
+      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);
+    }
+
+    :host([size="small"]) .text {
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
+    }
+
+    :host([size="small"]) .text-below {
+      padding-left: 24px;
+    }
   `;
 
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (
+      (changed.has("alignment") || changed.has("density")) &&
+      this.alignment === "trailing" &&
+      this.density === "compact"
+    ) {
+      console.warn(
+        '[rel-checkbox] density="compact" has no trailing layout; rendering comfortable density.'
+      );
+    }
+  }
+
+  /** Trailing has no compact layout in the spec — trailing wins. */
+  private get effectiveDensity(): CheckboxDensity {
+    return this.alignment === "trailing" ? "comfortable" : this.density;
+  }
+
   private toggle() {
     if (this.state === "disabled") return;
 
@@ -256,15 +351,27 @@ export class RelCheckbox extends LitElement {
             </svg>
           </span>
 
-          ${this.icon
-            ? html`<rel-icon name="${this.icon}" size="md" class="icon-prefix"></rel-icon>`
-            : null}
-
-          <span part="label" class="label">${this.label}</span>
+          <span class="content">
+            <span class="label-line">
+              ${this.icon
+                ? html`<rel-icon
+                    name="${this.icon}"
+                    size="${this.size === "small" ? "sm" : "md"}"
+                    class="icon-prefix"
+                  ></rel-icon>`
+                : null}
+
+              <span part="label" class="label">${this.label}</span>
+            </span>
+
+            ${this.effectiveDensity === "comfortable" && this.supportingtext
+              ? html`<span part="helper" class="text">${this.supportingtext}</span>`
+              : null}
+          </span>
         </label>
 
-        ${this.supportingtext
-          ? html`<span part="helper" class="text">${this.supportingtext}</span>`
+        ${this.effectiveDensity === "compact" && this.supportingtext
+          ? html`<span part="helper" class="text text-below">${this.supportingtext}</span>`
           : null}
       </div>
     `;

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

@@ -377,6 +377,20 @@ All interactions disabled:
 <rel-pagination totalPages="10" page="5" disabled></rel-pagination>
 ```
 
+### Very Large Page Counts
+
+Page buttons auto-widen to fit their number (min-width 40px). Far first/last
+buttons with numbers ≥ 10,000 are abbreviated so the control stays compact:
+`10000` → `10k`, `368178` → `368k`, `1234567` → `1.2M`. The exact page number
+is preserved in the button's `aria-label` and `title` (hover tooltip). The
+current page and its immediate neighbors always render exact — abbreviating
+them would make adjacent pages indistinguishable.
+
+```html
+<rel-pagination totalPages="368178" page="7"></rel-pagination>
+<!-- [<] [1] ... [6] [7] [8] ... [368k] [>] -->
+```
+
 ## Browser Support
 
 Compatible with all modern browsers supporting:

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("rel-pagination")
@@ -133,9 +133,10 @@ export class RelPagination extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      width: 40px;
+      width: auto;
+      min-width: 40px;
       height: 40px;
-      padding: var(--rel-spacing-xs);
+      padding: 0 var(--rel-spacing-xs);
       border-radius: var(--rel-border-radius-sm);
       border: 1px solid var(--rel-border-default);
       background: var(--rel-bg-neutral);
@@ -376,6 +377,15 @@ export class RelPagination extends LitElement {
     return pages;
   }
 
+  /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
+      Exact below 10,000; floored to k up to 1M; then M with one decimal. */
+  private formatPageLabel(n: number): string {
+    if (n < 10_000) return String(n);
+    if (n < 1_000_000) return `${Math.floor(n / 1000)}k`;
+    const m = Math.floor(n / 100_000) / 10;
+    return `${Number.isInteger(m) ? m.toFixed(0) : m}M`;
+  }
+
   private handlePageChange(newPage: number) {
     const total = this.computedTotalPages;
     if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
@@ -427,17 +437,23 @@ export class RelPagination extends LitElement {
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
-            ${pages.map((p) =>
-              p === -1
-                ? html`<span class="pag-ellipsis">...</span>`
-                : html`<button
-                    type="button"
-                    class="pag-page-btn ${Math.abs(p - current) <= 1 ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
-                    aria-label="Page ${p}"
-                    aria-current="${p === current ? "page" : "false"}"
-                    @click="${() => this.handlePageChange(p)}"
-                  >${p}</button>`
-            )}
+            ${pages.map((p) => {
+              if (p === -1) return html`<span class="pag-ellipsis">...</span>`;
+              /* Only far first/last buttons abbreviate. Anything in the
+                 visible window stays exact — abbreviating window pages like
+                 368174/368175 would render identical "368k" buttons. */
+              const isNear = Math.abs(p - current) <= 1;
+              const isEdge = p === 1 || p === total;
+              const label = isEdge && !isNear ? this.formatPageLabel(p) : String(p);
+              return html`<button
+                type="button"
+                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
+                aria-label="Page ${p}"
+                title="${label === String(p) ? nothing : `Page ${p}`}"
+                aria-current="${p === current ? "page" : "false"}"
+                @click="${() => this.handlePageChange(p)}"
+              >${label}</button>`;
+            })}
           </div>
           ${this.renderNavBtn("next")}
         </div>