@reliability-design/web 1.4.1 → 1.4.2

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/rel-radio.ts

@@ -76,6 +76,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 +91,10 @@ export class RelRadio extends LitElement {
 
     input {
       position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
       opacity: 0;
       pointer-events: none;
     }

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

@@ -34,7 +34,7 @@ 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 |
+| `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 |
@@ -107,7 +107,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

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

@@ -14,6 +14,8 @@ export interface SelectOptionObject {
   value: string;
   label?: string;
   supportingText?: string;
+  /** rel-icon name rendered as a prefix (leading icon) on the menu item. */
+  icon?: string;
 }
 export type SelectOption = string | SelectOptionObject;
 
@@ -21,11 +23,17 @@ interface NormalizedOption {
   value: string;
   label: string;
   supportingText: string;
+  icon: string;
 }
 
 function normalizeOption(o: SelectOption): NormalizedOption {
-  if (typeof o === "string") return { value: o, label: o, supportingText: "" };
-  return { value: o.value, label: o.label ?? o.value, supportingText: o.supportingText ?? "" };
+  if (typeof o === "string") return { value: o, label: o, supportingText: "", icon: "" };
+  return {
+    value: o.value,
+    label: o.label ?? o.value,
+    supportingText: o.supportingText ?? "",
+    icon: o.icon ?? "",
+  };
 }
 
 @customElement("rel-select")
@@ -67,8 +75,12 @@ export class RelSelect extends LitElement {
 
   @property({ type: String, attribute: "select-all-label" }) selectAllLabel: string = "Select all";
 
-  /** Max selected chips shown before collapsing the rest into a "+N" badge. */
-  @property({ type: Number, attribute: "max-visible-chips" }) maxVisibleChips: number = 3;
+  /**
+   * Optional hard cap on visible chips. By default (no cap) the visible
+   * count adapts to the trigger's width: chips collapse into the "+N" badge
+   * one by one instead of wrapping to a second line.
+   */
+  @property({ type: Number, attribute: "max-visible-chips" }) maxVisibleChips: number = Infinity;
 
   // Boolean props default true and toggled off via ="false" are a classic Lit
   // trap: for type:Boolean, attribute *presence* (not its string value)
@@ -84,9 +96,19 @@ export class RelSelect extends LitElement {
   @state() private searchValue = "";
   @state() private internalState: "default" | "focused" = "default";
 
+  /** How many chips currently fit in the trigger width (width-adaptive). */
+  @state() private visibleChipCount = Infinity;
+
   @query(".select-trigger") private triggerEl!: HTMLButtonElement;
   @query(".search-input") private searchInputEl!: HTMLInputElement;
   @query(".select-listbox") private listboxEl!: HTMLDivElement;
+  @query(".select-value") private valueEl!: HTMLElement;
+  @query(".select-chips-measure") private chipsMeasureEl!: HTMLElement;
+
+  /** Must match the `gap` of .select-chips / .select-chips-measure. */
+  private static readonly CHIP_GAP = 6;
+
+  private chipResizeObserver?: ResizeObserver;
 
   private uniqueId = `select-${Math.random().toString(36).slice(2)}`;
 
@@ -232,7 +254,7 @@ export class RelSelect extends LitElement {
       display: flex;
       align-items: center;
       gap: 6px;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       color: var(--rel-select-value-color, var(--rel-text-default));
       overflow: hidden;
     }
@@ -251,11 +273,33 @@ export class RelSelect extends LitElement {
       white-space: nowrap;
     }
 
+    /* Chips never wrap — the number of rendered chips adapts to the
+       available width instead (see computeVisibleChips), collapsing the
+       remainder into a trailing "+N" chip. overflow:hidden guards the one
+       frame between a resize and the recomputation catching up. */
     .select-chips {
       display: flex;
       align-items: center;
       gap: 6px;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
+      min-width: 0;
+      overflow: hidden;
+    }
+
+    /* Invisible copy of ALL selected chips (plus a worst-case "+N" chip),
+       laid out unconstrained so computeVisibleChips can read each chip's
+       natural width — including chips currently collapsed into "+N", whose
+       widths are needed again when the field grows. */
+    .select-chips-measure {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: max-content;
+      visibility: hidden;
+      pointer-events: none;
     }
 
     /* rel-chip's outer element is a tabindex="0" span, not a native button —
@@ -430,6 +474,21 @@ export class RelSelect extends LitElement {
       letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
+    /* Groups the optional prefix icon with the label so the trailing
+       check indicator stays pinned to the right edge of the row. */
+    .select-option-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+    }
+
+    .select-option-icon {
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, var(--rel-text-default));
+    }
+
     .select-option-label {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -480,9 +539,23 @@ export class RelSelect extends LitElement {
 
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    // firstUpdated only runs once — re-observe if the element is re-attached.
+    if (this.chipResizeObserver && this.triggerEl) {
+      this.chipResizeObserver.observe(this.triggerEl);
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeGlobalListeners();
+    this.chipResizeObserver?.disconnect();
+  }
+
+  protected firstUpdated() {
+    this.chipResizeObserver = new ResizeObserver(() => this.computeVisibleChips());
+    this.chipResizeObserver.observe(this.triggerEl);
   }
 
   protected willUpdate(changed: PropertyValues<this>) {
@@ -491,6 +564,65 @@ export class RelSelect extends LitElement {
     }
   }
 
+  protected updated(changed: PropertyValues<this>) {
+    if (
+      changed.has("selectedValues") ||
+      changed.has("options") ||
+      changed.has("multiple") ||
+      changed.has("size")
+    ) {
+      // rAF: rel-chip renders in its own (microtask) update cycle, so its
+      // width isn't measurable synchronously here — by the next frame it is.
+      requestAnimationFrame(() => this.computeVisibleChips());
+    }
+  }
+
+  /**
+   * Width-adaptive chip collapsing: measures every selected chip in the
+   * hidden .select-chips-measure row and works out how many fit in the value
+   * area, always reserving room for the trailing "+N" chip when not all fit.
+   * At least one chip stays visible no matter how narrow the field gets.
+   */
+  private computeVisibleChips() {
+    if (!this.isConnected || !this.multiple || this.selectedValues.length === 0) return;
+    const measure = this.chipsMeasureEl;
+    const container = this.valueEl;
+    if (!measure || !container) return;
+
+    const available = container.clientWidth;
+    if (available <= 0) return; // hidden (display:none) — RO will refire when visible
+
+    const children = Array.from(measure.children) as HTMLElement[];
+    if (children.length < 2) return;
+
+    const gap = RelSelect.CHIP_GAP;
+    // Last measure child is the worst-case "+N" chip (N = total selected,
+    // i.e. the widest label the badge can ever need).
+    const overflowWidth = children[children.length - 1].offsetWidth;
+    const chipWidths = children.slice(0, -1).map((c) => c.offsetWidth);
+    const total = chipWidths.reduce((sum, w) => sum + w, 0) + gap * (chipWidths.length - 1);
+
+    let fit: number;
+    if (total <= available) {
+      fit = chipWidths.length;
+    } else {
+      fit = 0;
+      let used = 0;
+      for (let i = 0; i < chipWidths.length; i++) {
+        const w = chipWidths[i] + (i > 0 ? gap : 0);
+        if (used + w + gap + overflowWidth <= available) {
+          used += w;
+          fit = i + 1;
+        } else {
+          break;
+        }
+      }
+      fit = Math.max(1, fit);
+    }
+
+    if (fit !== this.visibleChipCount) this.visibleChipCount = fit;
+  }
+
   private get normalizedOptions(): NormalizedOption[] {
     return this.options.map(normalizeOption);
   }
@@ -719,7 +851,7 @@ export class RelSelect extends LitElement {
 
   private renderChips() {
     const values = this.selectedValues;
-    const visible = values.slice(0, this.maxVisibleChips);
+    const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
     const overflow = values.length - visible.length;
     const opts = this.normalizedOptions;
 
@@ -758,6 +890,34 @@ export class RelSelect extends LitElement {
     `;
   }
 
+  /**
+   * Hidden, unconstrained copy of every selected chip used purely for width
+   * measurement (see computeVisibleChips). Chips mirror the visible ones'
+   * width-affecting props (removable adds the ✕ icon). The trailing chip is
+   * the widest "+N" badge that could ever be needed.
+   */
+  private renderChipsMeasure() {
+    const values = this.selectedValues;
+    const opts = this.normalizedOptions;
+    return html`
+      <span class="select-chips-measure" aria-hidden="true">
+        ${values.map((v) => {
+          const opt = opts.find((o) => o.value === v);
+          return html`
+            <rel-chip
+              label="${opt?.label ?? v}"
+              size="sm"
+              variant="subtle"
+              border="default"
+              ?removable=${this.state !== "disabled"}
+            ></rel-chip>
+          `;
+        })}
+        <rel-chip label="+${values.length}" size="sm" variant="fill" border="default"></rel-chip>
+      </span>
+    `;
+  }
+
   render() {
     const opts = this.normalizedOptions;
     const filtered = this.filteredOptions;
@@ -835,6 +995,8 @@ export class RelSelect extends LitElement {
               class="icon ${this.rightIcon ? "" : "chevron"}"
             ></rel-icon>
           </button>
+
+          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing}
         </div>
 
         ${this.supportingText
@@ -899,6 +1061,7 @@ export class RelSelect extends LitElement {
                     >
                       <rel-checkbox
                         label="${option.label}"
+                        icon="${option.icon}"
                         supportingtext="${option.supportingText}"
                         status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
                         @rel-change=${(e: Event) => {
@@ -926,7 +1089,16 @@ export class RelSelect extends LitElement {
                       @click="${() => this.selectSingleOption(option)}"
                       @pointerenter="${() => (this.highlightedIndex = index)}"
                     >
-                      <span class="select-option-label">${option.label}</span>
+                      <span class="select-option-content">
+                        ${option.icon
+                          ? html`<rel-icon
+                              name="${option.icon}"
+                              size="sm"
+                              class="select-option-icon"
+                            ></rel-icon>`
+                          : nothing}
+                        <span class="select-option-label">${option.label}</span>
+                      </span>
                       ${option.value === this.selected
                         ? html`<rel-icon name="check" size="sm" class="select-option-check"></rel-icon>`
                         : ""}

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

@@ -41,10 +41,19 @@ export class RelModal extends LitElement {
       bottom: 0;
       z-index: 1000;
       pointer-events: none;
+      /* pointer-events:none only blocks the mouse — the closed modal's
+         close button and slotted content would otherwise stay in the Tab
+         order and swallow keyboard focus into invisible 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(--modal-transition-duration);
     }
 
     .modal-container.open {
       pointer-events: auto;
+      visibility: visible;
+      transition-delay: 0s;
     }
 
     .overlay {
@@ -291,6 +300,17 @@ export class RelModal extends LitElement {
     document.removeEventListener("keydown", this.handleKeydown);
   }
 
+  protected willUpdate() {
+    // `title` doubles as HTML's global tooltip attribute: leaving it on the
+    // host shows a native tooltip anywhere over the modal, including the
+    // full-viewport backdrop. Sync it into the property, then strip it.
+    if (this.hasAttribute("title")) {
+      const value = this.getAttribute("title") ?? "";
+      this.removeAttribute("title");
+      this.title = value;
+    }
+  }
+
   updated(changed: Map<string, unknown>) {
     if (changed.has("open")) {
       if (this.open) {

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

@@ -568,6 +568,11 @@ export class RelTextfield extends LitElement {
     if (rightIcon) this.rightIcon = rightIcon;
   }
 
+  /** Focuses the inner input/textarea (the host itself is not focusable). */
+  focus(options?: FocusOptions) {
+    (this.renderRoot.querySelector("input, textarea") as HTMLElement | null)?.focus(options);
+  }
+
   private handleFocus() {
     if (!this.isDisabled) {
       this.internalState = "focused";