@reliability-design/web 1.4.1 → 1.4.3

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

@@ -4,16 +4,20 @@ import { repeat } from "lit/directives/repeat.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-chip/rel-chip.js";
 import "../rel-checkbox/rel-checkbox.js";
+import type { FieldLabelStyle } from "../rel-textfield/rel-textfield.js";
 
 export type SelectState = "default" | "error" | "disabled";
 export type SelectSize = "small" | "medium" | "large";
 export type SelectBorder = "rounded" | "sharp";
-export type SelectLabelStyle = "default" | "floating";
+/** Alias of the shared field type — kept so existing imports keep resolving. */
+export type SelectLabelStyle = FieldLabelStyle;
 
 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 +25,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")
@@ -36,7 +46,16 @@ export class RelSelect extends LitElement {
   // hyphens) — e.g. labelStyle would otherwise only respond to "labelstyle".
   // Every multi-word property below gets an explicit kebab-case `attribute`
   // so it works the way HTML usage actually looks.
-  @property({ type: String, attribute: "label-style" }) labelStyle: SelectLabelStyle = "default";
+  @property({ type: String, attribute: "label-style", reflect: true })
+  labelStyle: SelectLabelStyle = "default";
+
+  /**
+   * Accessible name for the trigger. Required when `labelStyle="none"`, since no
+   * `<label>` renders and a placeholder is not a valid naming mechanism.
+   */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+  /** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
+  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
 
   @property({ type: Array }) options: SelectOption[] = [];
 
@@ -67,8 +86,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 +107,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)}`;
 
@@ -127,6 +160,22 @@ export class RelSelect extends LitElement {
 
     }
 
+    /* ── labelStyle="none" ──
+       No label renders. An empty spacer holds the label row's full height so the
+       trigger still bottom-aligns with labelled siblings in a form row.
+       The reserve covers label line-height + the wrapper gap, and the negative
+       margin cancels the flex gap that would otherwise sit below it — so
+       --rel-field-label-reserve: 0 collapses the row to genuinely zero
+       (toolbars, table cells), not just to the leftover gap. */
+    .label-reserve {
+      flex: none;
+      height: var(
+        --rel-field-label-reserve,
+        calc(var(--rel-body-sm-regular-line-height) + var(--rel-spacing-2xs))
+      );
+      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
+    }
+
     /* Error only colors the border/focus ring and the supporting text below
        the field — label, floating label, placeholder, and icons stay normal. */
 
@@ -232,7 +281,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 +300,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 +501,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 +566,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 +591,83 @@ export class RelSelect extends LitElement {
     }
   }
 
+  private _warnedNoName = false;
+
+  protected updated(changed: PropertyValues<this>) {
+    if (
+      !this._warnedNoName &&
+      this.labelStyle === "none" &&
+      !this.fieldAriaLabel &&
+      !this.fieldAriaLabelledby &&
+      !this.getAttribute("aria-label")
+    ) {
+      this._warnedNoName = true;
+      console.warn(
+        '<rel-select label-style="none"> has no accessible name. Set ' +
+          "`field-aria-label` or `field-aria-labelledby` — a placeholder is not a " +
+          "valid naming mechanism.",
+        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 +896,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,11 +935,42 @@ 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;
     const isDisabled = this.state === "disabled";
+    const labelHidden = this.labelStyle === "none";
     const showFloatingChrome = this.labelStyle === "floating" && !!this.label;
+    // With no visible label the ARIA name comes from fieldAriaLabel instead.
+    const accessibleName = (labelHidden ? this.fieldAriaLabel : this.label) || "";
 
     const wrapperClasses = [
       "select-wrapper",
@@ -785,9 +993,11 @@ export class RelSelect extends LitElement {
 
     return html`
       <div class="${wrapperClasses}">
-        ${!showFloatingChrome && this.label
-          ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
-          : ""}
+        ${labelHidden
+          ? html`<div class="label-reserve" aria-hidden="true"></div>`
+          : !showFloatingChrome && this.label
+            ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
+            : ""}
 
         <div class="select-container">
           ${showFloatingChrome
@@ -806,7 +1016,8 @@ export class RelSelect extends LitElement {
             aria-controls="${listboxId}"
             aria-activedescendant="${activeOptionId}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.label || this.placeholder}"
+            aria-label="${this.fieldAriaLabelledby ? nothing : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
             @keydown="${this.onTriggerKeyDown}"
@@ -835,6 +1046,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
@@ -849,7 +1062,7 @@ export class RelSelect extends LitElement {
         part="panel list" class="select-listbox"
         role="listbox"
         aria-multiselectable="${this.multiple}"
-        aria-label="${this.label || "Options"}"
+        aria-label="${accessibleName || "Options"}"
         style="${this.panelStyle}"
         ?data-open="${this.open}"
       >
@@ -899,6 +1112,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 +1140,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/README.md

@@ -18,6 +18,13 @@ A text input field component with support for labels, icons, validation states,
   supportingText="Must be at least 8 characters">
 </rel-textfield>
 
+<!-- No label — an accessible name is required in its place -->
+<rel-textfield
+  label-style="none"
+  placeholder="Search orders"
+  field-aria-label="Search orders">
+</rel-textfield>
+
 <!-- Setting value via JavaScript -->
 <rel-textfield id="myField" label="Username"></rel-textfield>
 <script>
@@ -33,6 +40,10 @@ A text input field component with support for labels, icons, validation states,
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | - | Label text displayed above the input |
+| `label-style` | `"default" \| "floating" \| "none"` | - | Label presentation. `"none"` renders no label at all. Unset, the deprecated `floatingLabel` boolean decides |
+| `floatingLabel` | `boolean` | `false` | **Deprecated** — use `label-style="floating"`. Kept permanently as an alias |
+| `field-aria-label` | `string` | - | Accessible name for the input. Required with `label-style="none"` |
+| `field-aria-labelledby` | `string` | - | IDREF list of external element(s) naming the input. Wins over `field-aria-label` |
 | `placeholder` | `string` | `""` | Placeholder text |
 | `type` | `string` | `"text"` | Input type (text, email, password, etc.) |
 | `value` | `string` | `""` | Current input value |
@@ -72,10 +83,15 @@ None exposed.
 - `--rel-bg-neutral-elevated-1`: Disabled background
 - `--rel-spacing-*`: Spacing tokens
 - `--rel-border-radius-sm`: Border radius
+- `--rel-field-label-reserve`: Height held for the absent label row under `label-style="none"`, so the input 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
 
 - Associates `<label>` with input via `for`/`id`
+- With `label-style="none"` no `<label>` renders, so `field-aria-label` (or
+  `field-aria-labelledby`) must supply the accessible name — a placeholder is
+  not a valid naming mechanism. The component logs a console warning when both
+  are missing.
 - Supports native HTML5 input attributes (`required`, `disabled`, `readonly`, `maxlength`)
 - Focus ring visible on keyboard navigation (`:focus-visible`)
 - Error state communicated visually via border color