@reliability-design/web 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog — @reliability-design/web
 
+## 1.4.3 (2026-07-30)
+
+### Added
+
+- **New `rel-time-picker` component.** A form-field trigger button opening an Hour / Min / AM-PM column popup. Follows the range-picker draft model: column clicks stage a draft, **Apply** commits (emitting `rel-change`), Cancel/`Escape`/outside click discards, and a **Now** button snaps the draft to the current time. Supports `format` (`12h` | `24h` — the committed `value` is always 24-hour `"HH:mm"`), `minute-step` intervals, inclusive `min-time`/`max-time` bounds, the standard field API (`label`, `placeholder`, `helper-text`, `error`/`invalid` + `error-message`, `required`, `readonly`, `disabled`, `clearable`, `size`, `fullWidth`, hidden form input via `name`), `::part` hooks (base, label, trigger, value, icon, panel, option, footer, helper), and full keyboard/ARIA support. The Angular package ships a matching ControlValueAccessor wrapper for reactive and template-driven forms.
+- **`label-style` prop (`default` | `floating` | `none`) on `rel-textfield`, `rel-select`, and `rel-autocomplete`.** `"none"` renders no visible label; supply `field-aria-label` or `field-aria-labelledby` to keep the control's accessible name. The old `floatingLabel` boolean remains as a deprecated alias for `label-style="floating"`.
+- **`orientation` prop on `rel-radio` (`vertical` | `horizontal`).** Horizontal lays options out in a wrapping row; the group now renders `role="radiogroup"` with `aria-orientation`.
+- **`size` prop on `rel-radio` (`small` | `medium`).** Small drops the circle from 20px to 16px and steps the label/supporting typography down a size for denser forms.
+
+## 1.4.2 (2026-07-29)
+
+### Added
+
+- **New `rel-autocomplete` component.** A searchable single-select type-ahead built on `rel-textfield`, so every field feature (label, sizes, variants, floating label, icons, error display) carries over. Supports local items with `contains`/`starts-with`/`none` filtering or a remote `searchFn` (debounced, latest-query-wins with stale responses discarded, automatic loading row), per-item icons, bolded match highlighting, `clearable`, a configurable no-results row, full keyboard navigation, and combobox ARIA. Ships with an Angular ControlValueAccessor wrapper.
+- Per-option leading icons in the `rel-select` menu — options accept an `icon` field (`rel-icon` name).
+- `rel-select` multi-select chips no longer wrap to a second line — the visible chip count adapts to the field width, collapsing the rest into the "+N" chip; `max-visible-chips` is now an optional extra cap (default uncapped, was 3).
+- `icon` prop on `rel-checkbox` — a leading `rel-icon` between the checkbox and label.
+- `focus()` method on `rel-textfield` that forwards to the inner input (the host itself is not focusable).
+
+### Fixed
+
+- Disabled `rel-button` styling — disabled buttons dim to 0.5 opacity, and only fill styles (primary, default, icon) flatten to the disabled fill; outline, ghost, link, and static keep their own shape.
+- `rel-popover` rendering misaligned when anchored inside a centered `rel-modal`.
+- Removed the native title-attribute tooltip on hover over a `rel-modal` title.
+- Tab-focusing a below-fold `rel-checkbox`/`rel-radio` no longer scrolls the wrong container (which shoved the page past fixed shells and broke the layout).
+- Closed `rel-drawer`/`rel-modal` panels are removed from the Tab order — keyboard focus no longer disappears into invisible close buttons or slotted content.
+
 ## 1.4.1 (2026-07-27)
 
 ### Fixed

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

@@ -59,7 +59,8 @@ Two data modes:
 | `loading` | `boolean` | `false` | Externally-controlled loading row (internal `searchFn` loading is automatic) |
 | `no-results-text` | `string` | `"No results found"` | Row shown when a query yields nothing |
 | `loading-text` | `string` | `"Loading…"` | Text next to the loading spinner |
-| `label`, `placeholder`, `size`, `variant`, `floating-label`, `prefix-icon`, `disabled`, `readonly`, `required`, `error`, `error-message`, `helper-text`, `name`, `full-width` | — | — | Passed through to the inner `rel-textfield` unchanged |
+| `label`, `placeholder`, `size`, `variant`, `label-style`, `floating-label`, `field-aria-label`, `field-aria-labelledby`, `prefix-icon`, `disabled`, `readonly`, `required`, `error`, `error-message`, `helper-text`, `name`, `full-width` | — | — | Passed through to the inner `rel-textfield` unchanged |
+| `label-style` | `"default" \| "floating" \| "none"` | — | Label presentation. `"none"` renders no label — pair it with `field-aria-label`. Unset, the deprecated `floating-label` boolean decides |
 
 ## Events
 
@@ -83,6 +84,7 @@ Two data modes:
 - Combobox pattern: `role="combobox"` with `aria-expanded`, `aria-controls`, and `aria-activedescendant`; panel is `role="listbox"` with `role="option"` rows
 - Known limitation: the combobox role sits on a wrapper around the field rather than on the `<input>` itself — the input lives in `rel-textfield`'s nested shadow root, which `aria-activedescendant` cannot reference across. This is the standard pragmatic pattern for composed shadow components
 - Loading row uses `role="status"`; disabled/readonly never open the panel
+- With `label-style="none"` no `<label>` renders, so `field-aria-label` (or `field-aria-labelledby`) must supply the accessible name — it also names the suggestion panel. A placeholder is not a valid naming mechanism; the inner field logs a console warning when both are missing
 
 ## Notes / Edge Cases
 
@@ -92,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

@@ -3,7 +3,12 @@ import { customElement, property, state, query } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-textfield/rel-textfield.js";
-import type { RelTextfield, TextFieldSize, TextFieldVariant } from "../rel-textfield/rel-textfield.js";
+import type {
+  RelTextfield,
+  TextFieldSize,
+  TextFieldVariant,
+  FieldLabelStyle,
+} from "../rel-textfield/rel-textfield.js";
 
 /** An item is a plain string or any object read through displayField/valueField. */
 export type AutocompleteItem = string | Record<string, unknown>;
@@ -76,7 +81,15 @@ export class RelAutocomplete extends LitElement {
   @property({ type: String }) placeholder: string = "";
   @property({ type: String }) size: TextFieldSize = "medium";
   @property({ type: String }) variant: TextFieldVariant = "default";
+  /** See `FieldLabelStyle`. Left `undefined` the deprecated `floatingLabel` decides. */
+  @property({ type: String, attribute: "label-style", reflect: true })
+  labelStyle?: FieldLabelStyle;
+  /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
   @property({ type: Boolean, attribute: "floating-label" }) floatingLabel = false;
+  /** Accessible name for the input. Required when `labelStyle="none"`. */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+  /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
+  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
   @property({ type: String, attribute: "prefix-icon" }) prefixIcon?: string;
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) readonly = false;
@@ -105,6 +118,12 @@ export class RelAutocomplete extends LitElement {
    *  doesn't overwrite the input text the way it does for external writes. */
   private internalValueWrite = false;
 
+  /** Name used for the suggestion panel — the visible label, or fieldAriaLabel
+   *  once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
+  private get accessibleName() {
+    return (this.labelStyle === "none" ? this.fieldAriaLabel : this.label) || "";
+  }
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -124,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));
@@ -203,6 +231,7 @@ export class RelAutocomplete extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.hideNativePopover();
     clearTimeout(this.debounceTimer);
   }
 
@@ -290,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() {
@@ -298,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 = () => {
@@ -318,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;`;
   };
 
@@ -540,7 +613,10 @@ export class RelAutocomplete extends LitElement {
           .value="${this.inputText}"
           .size="${this.size}"
           .variant="${this.variant}"
+          .labelStyle="${this.labelStyle}"
           .floatingLabel="${this.floatingLabel}"
+          .fieldAriaLabel="${this.fieldAriaLabel}"
+          .fieldAriaLabelledby="${this.fieldAriaLabelledby}"
           .prefixIcon="${this.prefixIcon}"
           .disabled="${this.disabled}"
           .readonly="${this.readonly}"
@@ -561,8 +637,9 @@ export class RelAutocomplete extends LitElement {
         id="${panelId}"
         part="panel list"
         class="ac-panel"
+        popover="manual"
         role="listbox"
-        aria-label="${this.label || "Suggestions"}"
+        aria-label="${this.accessibleName || "Suggestions"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >

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

@@ -191,8 +191,8 @@ export class RelButton extends LitElement {
          pointer-events:none on the HOST would make it transparent to the
          pointer and suppress the cursor entirely. */
       cursor: not-allowed;
-      /* The disabled tokens are full-contrast pairs (light: #0B0B0B on
-         #C2C2C2, dark: #FFF on #404040), so on their own they render a
+      /* The disabled tokens are full-contrast pairs (light: near-black on
+         gray-300, dark: white on gray-700), so on their own they render a
          crisp button that reads as enabled. Dulling happens here instead —
          same opacity mechanism the rest of the library uses. */
       opacity: 0.5;

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>