@reliability-design/web 1.4.2 → 1.4.4

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;
@@ -147,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 {
@@ -243,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-range-picker/rel-range-picker.ts

@@ -52,6 +52,8 @@ export class RelRangePicker extends LitElement {
   @state() private hoverDate: string | null = null;
 
   @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  @query(".popover") private popoverEl?: HTMLDivElement;
+  @query(".backdrop") private backdropEl?: HTMLDivElement;
 
   static styles = css`
     :host {
@@ -113,6 +115,17 @@ export class RelRangePicker extends LitElement {
 
     /* ── Popover shell ── */
     .popover {
+      /* Reset native [popover] UA styles first (the shell is promoted to
+         the top layer so transformed / overflow:hidden ancestors — e.g. a
+         centered rel-modal panel — can't hijack or clip it). While in the
+         top layer, JS overrides the anchored position below with inline
+         fixed coordinates; the CSS anchoring is the no-Popover-API
+         fallback. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
@@ -137,6 +150,13 @@ export class RelRangePicker extends LitElement {
     .backdrop {
       position: fixed;
       inset: 0;
+      /* Reset native [popover] UA styles — the backdrop is promoted to the
+         top layer right before the panel so the panel stacks above it. */
+      margin: 0;
+      padding: 0;
+      width: auto;
+      height: auto;
+      border: none;
       z-index: 2147483646;
       background: rgba(0,0,0,0.4);
     }
@@ -448,17 +468,111 @@ export class RelRangePicker extends LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
 
-  updated() {
+  updated(changed: Map<string, unknown>) {
     this.style.width = this.width;
     this.style.minWidth = this.minWidth;
     this.style.maxWidth = this.maxWidth;
     this.style.height = this.height;
     this.style.minHeight = this.minHeight;
     this.style.maxHeight = this.maxHeight;
+
+    // `open` is a public reflected property (consumers may set it directly,
+    // not only via the trigger), so top-layer promotion syncs here rather
+    // than inside openPopover/cancelPopover.
+    if (changed.has("open")) {
+      if (this.open) {
+        this.showTopLayer();
+        window.addEventListener("resize", this.onReposition);
+        window.addEventListener("scroll", this.onReposition, true);
+      } else {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+      }
+    }
+  }
+
+  /* A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, and its overflow:hidden clips position:absolute ones —
+   * either way the picker shell breaks inside a modal. Promoting shell
+   * (and popup-mode backdrop) to the browser top layer sidesteps both —
+   * same fix as rel-popover / rel-autocomplete / rel-select. `manual`
+   * keeps outside-click and Escape handling under this component's own
+   * control. While in the top layer the CSS anchoring (absolute, below
+   * the trigger) is meaningless, so popover mode gets inline fixed
+   * coordinates from updatePopoverPosition(). */
+
+  private showTopLayer() {
+    // Backdrop first — later-shown popovers stack above earlier ones.
+    for (const el of [this.mode === "popup" ? this.backdropEl : undefined, this.popoverEl]) {
+      if (!el || typeof el.showPopover !== "function") continue;
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+        /* older engines / detached element — CSS fallback applies */
+      }
+    }
+    if (this.mode === "popover") {
+      requestAnimationFrame(() => this.updatePopoverPosition());
+    }
   }
 
+  private hideTopLayer() {
+    for (const el of [this.popoverEl, this.backdropEl]) {
+      if (!el || typeof el.hidePopover !== "function") continue;
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+        /* already hidden or unsupported — nothing to do */
+      }
+    }
+    if (this.popoverEl) {
+      this.popoverEl.style.position = "";
+      this.popoverEl.style.top = "";
+      this.popoverEl.style.left = "";
+    }
+  }
+
+  private onReposition = () => {
+    if (this.open && this.mode === "popover") this.updatePopoverPosition();
+  };
+
+  private updatePopoverPosition = () => {
+    const panel = this.popoverEl;
+    if (!panel || !this.open || this.mode !== "popover") return;
+
+    // Host rect anchors both trigger variants (default button and icon).
+    const t = this.getBoundingClientRect();
+    const c = panel.getBoundingClientRect();
+
+    let top = t.bottom + 4;
+    if (top + c.height > window.innerHeight - 8) {
+      top = Math.max(8, t.top - c.height - 4);
+    }
+    let left = t.left;
+    if (left + c.width > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - c.width - 8);
+    }
+
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the shell away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    panel.style.position = "fixed";
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+    const applied = panel.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  };
+
   // ── Open / close ──
 
   private handleClickOutside = (e: MouseEvent) => {
@@ -916,11 +1030,12 @@ export class RelRangePicker extends LitElement {
           `}
 
       ${isPopup && this.open
-        ? html`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>`
+        ? html`<div part="overlay" class="backdrop" popover="manual" @click=${this.cancelPopover}></div>`
         : nothing}
 
       <div
         part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        popover="manual"
         role="dialog"
         aria-label="Select date range"
       >

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

@@ -34,6 +34,9 @@ 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 |
+| `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 |
@@ -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`
@@ -113,3 +119,4 @@ None exposed.
 - 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
+- The open listbox 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