@reliability-design/web 1.4.1 → 1.4.3

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } 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";
@@ -7,6 +8,8 @@ type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
 @customElement("rel-checkbox")
 export class RelCheckbox extends LitElement {
   @property({ type: String }) label = "Label";
+  /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
+  @property({ type: String }) icon = "";
   @property({ type: String }) supportingtext = "";
   @property({ type: String }) state: CheckboxState = "default";
   @property({ type: String }) status: CheckboxStatus = "unchecked";
@@ -36,6 +39,14 @@ export class RelCheckbox extends LitElement {
     }
 
     .row {
+      /* Containing block for the hidden input below — without this the
+         absolutely-positioned input resolves against the document (or any
+         positioned ancestor in the consumer page), where it neither moves
+         with intermediate scroll containers nor stays aligned with the
+         visible box. Tabbing to it then makes the browser scroll the WRONG
+         scroller (often the window past a 100vh overflow-hidden shell),
+         shoving the whole page up and leaving it in a broken state. */
+      position: relative;
       display: flex;
       align-items: center;
       gap: var(--rel-spacing-xs);
@@ -44,6 +55,10 @@ export class RelCheckbox extends LitElement {
 
     input {
       position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
       opacity: 0;
       pointer-events: none;
     }
@@ -147,6 +162,21 @@ export class RelCheckbox extends LitElement {
       color: var(--rel-text-disabled);
     }
 
+    /* Optional label prefix icon — tracks the label's color in every state
+       (rel-icon inherits currentColor). */
+    .icon-prefix {
+      flex-shrink: 0;
+      color: var(--rel-text-default);
+    }
+
+    .default .row:hover .icon-prefix {
+      color: var(--rel-text-body);
+    }
+
+    .disabled .icon-prefix {
+      color: var(--rel-text-disabled);
+    }
+
     .label {
       /* Figma: label rests on text-default; text-body is the hover color */
       color: var(--rel-text-default);
@@ -226,6 +256,10 @@ 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>
         </label>
 

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

@@ -53,10 +53,19 @@ export class RelDrawer extends LitElement {
       bottom: 0;
       z-index: 1000;
       pointer-events: none;
+      /* pointer-events:none only blocks the mouse — the closed drawer's
+         close button and slotted content would otherwise stay in the Tab
+         order and swallow keyboard focus into invisible off-screen UI.
+         visibility also removes them from the tab order; the transition
+         delays the flip to hidden until the close animation has played. */
+      visibility: hidden;
+      transition: visibility 0s linear var(--drawer-transition-duration);
     }
 
     .drawer-container.open {
       pointer-events: auto;
+      visibility: visible;
+      transition-delay: 0s;
     }
 
     /* Overlay */

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

@@ -61,6 +61,16 @@ export class RelPopover extends LitElement {
       position: fixed;
       z-index: 1001;
       display: none;
+      /* Reset native [popover] UA styles (the wrapper 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;
+      border: none;
+      background: transparent;
+      overflow: visible;
+      color: inherit;
     }
 
     .content-wrapper[open] {
@@ -84,6 +94,7 @@ export class RelPopover extends LitElement {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
     this.removeGlobalListeners();
+    this.hideNativePopover();
   }
 
   firstUpdated() {
@@ -157,6 +168,7 @@ export class RelPopover extends LitElement {
       (document.activeElement as HTMLElement) ?? this.triggerEl;
 
     this.addGlobalListeners();
+    this.showNativePopover();
 
     requestAnimationFrame(() => {
       this.updatePosition();
@@ -166,9 +178,41 @@ export class RelPopover extends LitElement {
 
   private onClose() {
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.restoreFocus();
   }
 
+  /* =======================
+   * TOP LAYER (native Popover API)
+   *
+   * 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 content. Promoting the wrapper to
+   * the browser top layer sidesteps both. `manual` keeps light-dismiss
+   * and Escape handling under this component's own control.
+   * ======================= */
+
+  private showNativePopover() {
+    const w = this.contentWrapper;
+    if (!w || typeof w.showPopover !== "function") return;
+    try {
+      if (!w.matches(":popover-open")) w.showPopover();
+    } catch {
+      /* older engines / detached element — fixed-position fallback applies */
+    }
+  }
+
+  private hideNativePopover() {
+    const w = this.contentWrapper;
+    if (!w || typeof w.hidePopover !== "function") return;
+    try {
+      if (w.matches(":popover-open")) w.hidePopover();
+    } catch {
+      /* already hidden or unsupported — nothing to do */
+    }
+  }
+
   /* =======================
    * GLOBAL LISTENERS
    * ======================= */
@@ -312,6 +356,17 @@ export class RelPopover extends LitElement {
     top = Math.max(8, Math.min(top, window.innerHeight - c.height - 8));
     left = Math.max(8, Math.min(left, window.innerWidth - c.width - 8));
 
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the wrapper away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    this.contentWrapper.style.top = `${top}px`;
+    this.contentWrapper.style.left = `${left}px`;
+    const applied = this.contentWrapper.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    this.contentWrapper.style.top = `${top}px`;
+    this.contentWrapper.style.left = `${left}px`;
+
     this.contentStyle = `top:${top}px;left:${left}px;`;
   };
 
@@ -344,6 +399,7 @@ export class RelPopover extends LitElement {
       <div
         id="${this.uniqueId}"
         class="content-wrapper"
+        popover="manual"
         style="${this.contentStyle}"
         ?open="${this.activeOpen}"
       >

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

@@ -28,6 +28,17 @@ A radio button group component that allows users to select a single option from
   planRadio.selectedValue = 'basic';
 </script>
 
+<!-- Horizontal row layout -->
+<rel-radio id="sizeRadio" name="size-group" orientation="horizontal"></rel-radio>
+<script>
+  const sizeRadio = document.getElementById('sizeRadio');
+  sizeRadio.options = [
+    { value: 's', label: 'Small' },
+    { value: 'm', label: 'Medium' },
+    { value: 'l', label: 'Large' }
+  ];
+</script>
+
 <!-- Listen for changes -->
 <rel-radio id="preferenceRadio"></rel-radio>
 <script>
@@ -49,6 +60,8 @@ 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) |
 | `selectedValue` | `string \| null` | `null` | Currently selected option value (reflected attribute) |
 | `disabled` | `boolean` | `false` | Disables the entire radio group |
 
@@ -82,7 +95,8 @@ None exposed.
 - `--rel-fonts-weight-body-medium` - Font weight for labels
 
 ### Spacing Tokens
-- `--rel-spacing-xs` - Gap between radio options
+- `--rel-spacing-xs` - Gap between radio options (also the row gap when wrapping horizontally)
+- `--rel-spacing-xl` - Column gap between options in `orientation="horizontal"`
 - `--rel-spacing-3xs` - Gap within each option (label and supporting text)
 - `--rel-spacing-2xs` - Gap between radio circle and label
 
@@ -94,6 +108,7 @@ None exposed.
 - `--rel-text-danger` - Error state border and dot color
 
 ## Accessibility
+- The option list renders with `role="radiogroup"` and `aria-orientation` reflecting the `orientation` prop
 - Uses visually hidden native radio inputs for proper screen reader support
 - Custom visual radio circle with proper focus indicators
 - Focus visible state with outline offset for keyboard navigation

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import type { Orientation } from "../rel-stepper/rel-stepper.js";
 
 export interface RadioOption {
   value: string;
@@ -14,6 +15,14 @@ export class RelRadio extends LitElement {
 
   @property({ type: String }) name = "radio-group";
 
+  /** Layout axis of the option list. `"vertical"` (default) stacks options in
+   *  a column; `"horizontal"` lays them out in a wrapping row. */
+  @property({ type: String, reflect: true }) orientation: Orientation = "vertical";
+
+  /** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
+   *  `"small"` = 16px circle with body-md labels. */
+  @property({ type: String, reflect: true }) size: "small" | "medium" = "medium";
+
   @property({ type: String, reflect: true })
   selectedValue: string | null = null;
 
@@ -45,6 +54,15 @@ export class RelRadio extends LitElement {
       gap: var(--rel-spacing-xs);
     }
 
+    /* Horizontal orientation — options flow in a wrapping row. Wider column
+       gap than the vertical rhythm so adjacent option labels read as separate
+       choices; row gap keeps the vertical value for wrapped lines. */
+    :host([orientation="horizontal"]) .rel-radio-group {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: var(--rel-spacing-xs) var(--rel-spacing-xl);
+    }
+
     .rel-radio-option {
       display: inline-flex;
       flex-direction: column;
@@ -76,6 +94,14 @@ export class RelRadio extends LitElement {
     }
 
     .radio-main {
+      /* Containing block for the hidden input below — without this the
+         absolutely-positioned input resolves against the document (or any
+         positioned ancestor in the consumer page), where it neither moves
+         with intermediate scroll containers nor stays aligned with the
+         visible radio. Tabbing to it then makes the browser scroll the
+         WRONG scroller, shoving the whole page up (same bug as
+         rel-checkbox — keep the two fixes in sync). */
+      position: relative;
       display: flex;
       align-items: center;
       gap: var(--rel-spacing-2xs);
@@ -83,6 +109,10 @@ export class RelRadio extends LitElement {
 
     input {
       position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
       opacity: 0;
       pointer-events: none;
     }
@@ -135,6 +165,34 @@ export class RelRadio extends LitElement {
 
     }
 
+    /* Size variant (medium is the base scale above). Supporting-text indent =
+       circle width + the radio-main gap, so it stays aligned under the label. */
+    :host([size="small"]) .radio-custom {
+      width: 16px;
+      height: 16px;
+    }
+
+    :host([size="small"]) input:checked + .radio-custom::after {
+      inset: 3px;
+    }
+
+    :host([size="small"]) .radio-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"]) .radio-supporting {
+      margin-left: 24px;
+      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);
+    }
+
     /* Error state (Figma State=Error, both Is Checked values) */
     .rel-radio-option.error-unchecked .radio-custom,
     .rel-radio-option.error-checked .radio-custom {
@@ -231,7 +289,12 @@ export class RelRadio extends LitElement {
 
   render() {
     return html`
-      <div part="base" class="rel-radio-group">
+      <div
+        part="base"
+        class="rel-radio-group"
+        role="radiogroup"
+        aria-orientation="${this.orientation}"
+      >
         ${this.options.map((o) => this.renderOption(o))}
       </div>
       ${this.error && this.errorMessage

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

@@ -34,7 +34,10 @@ A custom combobox-style select component built on the same textfield visual lang
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `""` | Label text displayed above the select |
-| `options` | `string[]` | `[]` | Array of option values to display in dropdown |
+| `label-style` | `"default" \| "floating" \| "none"` | `"default"` | Label presentation. `"default"` sits above the trigger, `"floating"` rests over the placeholder and animates onto the border line, `"none"` renders no label at all |
+| `field-aria-label` | `string` | - | Accessible name for the trigger. Required with `label-style="none"` |
+| `field-aria-labelledby` | `string` | - | IDREF list of external element(s) naming the trigger. Wins over `field-aria-label` |
+| `options` | `(string \| SelectOptionObject)[]` | `[]` | Options to display in the dropdown. Each entry is either a plain string or an object: `{ value, label?, supportingText?, icon? }`. `icon` is a `rel-icon` name rendered as a prefix (leading icon) on the menu item — before the label in single-select rows, and between the checkbox and label in multi-select rows |
 | `selected` | `string` | `""` | Currently selected option value |
 | `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the select |
 | `supportingText` | `string` | `""` | Helper or error text displayed below the select |
@@ -80,6 +83,9 @@ None exposed.
 ### Border Tokens
 - `--rel-border-radius-xs` - Rounded border radius (default `border="rounded"`)
 
+### Layout Tokens
+- `--rel-field-label-reserve` - Height held for the absent label row under `label-style="none"`, so the trigger bottom-aligns with labelled siblings. Defaults to the label line-height plus the wrapper gap; set to `0` to collapse the row entirely in compact contexts (toolbars, table cells)
+
 ## Accessibility
 - Trigger input uses `role="combobox"` with `aria-haspopup="listbox"`, `aria-expanded`, and `aria-controls`
 - Dropdown panel uses `role="listbox"`; each option uses `role="option"` with `aria-selected`
@@ -107,7 +113,9 @@ None exposed.
 - Icons (left/right) adjust internal padding automatically to accommodate icon space
 - The chevron is always visible on the far right and rotates 180° when the dropdown is open; a custom `rightIcon` replaces it entirely (no chevron) and does not rotate
 - In error state, supporting text is styled with error color for visual consistency; the error state automatically clears once a valid option is selected
-- Options array is rendered as-is; complex objects not supported (use string values only)
+- Options accept plain strings or `{ value, label?, supportingText?, icon? }` objects; string entries use the same text for value and label
+- In multi-select, selected chips stay on a single line: the number of visible chips adapts to the field's width and the rest collapse into a trailing "+N" chip (recomputed on selection changes and via `ResizeObserver` on resize). At least one chip is always shown. `max-visible-chips` is an optional additional hard cap (uncapped by default)
+- An option's `icon` renders only when set — options without one simply omit the prefix icon (no reserved empty space), and an unknown icon name logs a `rel-icon` console warning and renders nothing
 - Typed text that doesn't exactly match (case-insensitive) any option reverts to the last committed `selected` value on blur, Escape, or Tab
 - The ghost-text suggestion shows the remainder of the first option whose name starts with the typed text (case-insensitive); it has no effect on filtering, which matches substrings anywhere in an option
 - Dropdown panel is positioned via `position: fixed` and flips above the trigger if there isn't enough viewport space below