@reliability-design/web 1.4.2 → 1.4.4

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

@@ -1,1119 +1,1237 @@
-import { LitElement, html, css, nothing, PropertyValues } from "lit";
-import { customElement, property, state, query } from "lit/decorators.js";
-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";
-
-export type SelectState = "default" | "error" | "disabled";
-export type SelectSize = "small" | "medium" | "large";
-export type SelectBorder = "rounded" | "sharp";
-export type SelectLabelStyle = "default" | "floating";
-
-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;
-
-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: "", icon: "" };
-  return {
-    value: o.value,
-    label: o.label ?? o.value,
-    supportingText: o.supportingText ?? "",
-    icon: o.icon ?? "",
-  };
-}
-
-@customElement("rel-select")
-export class RelSelect extends LitElement {
-  @property({ type: String }) label: string = "";
-
-  // Lit's default attribute name is the property name fully lowercased (no
-  // 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: Array }) options: SelectOption[] = [];
-
-  /** Enables multi-select: selected values render as removable chips and options as checkboxes. */
-  @property({ type: Boolean }) multiple: boolean = false;
-
-  /** Selected value — single-select mode only. */
-  @property({ type: String }) selected: string = "";
-
-  /** Selected values — multi-select mode only. */
-  @property({ type: Array, attribute: "selected-values" }) selectedValues: string[] = [];
-
-  @property({ type: String }) state: SelectState = "default";
-
-  @property({ type: String, attribute: "supporting-text" }) supportingText: string = "";
-
-  @property({ type: String, reflect: true }) size: SelectSize = "medium";
-
-  @property({ type: String }) border: SelectBorder = "rounded";
-
-  @property({ type: String, attribute: "left-icon" }) leftIcon: string = "";
-
-  @property({ type: String, attribute: "right-icon" }) rightIcon: string = "";
-
-  @property({ type: String }) placeholder: string = "Select option";
-
-  @property({ type: String, attribute: "search-placeholder" }) searchPlaceholder: string = "Search option";
-
-  @property({ type: String, attribute: "select-all-label" }) selectAllLabel: string = "Select all";
-
-  /**
-   * 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)
-  // decides truthiness, so searchable="false" would still read as true. Named
-  // negatively instead, so the natural HTML idiom — just adding the bare
-  // attribute, no value — does what it looks like it does.
-  /** Hides the in-panel search field. Figma's "Single Option" dropdown has no search bar at all — use this for short, non-searchable lists. */
-  @property({ type: Boolean, attribute: "no-search" }) noSearch: boolean = false;
-
-  @state() private open = false;
-  @state() private highlightedIndex = -1;
-  @state() private panelStyle = "";
-  @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)}`;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-      width: 100%;
-    }
-
-    .select-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-2xs);
-      width: 100%;
-    }
-
-    /* Dims everything inside uniformly (label, trigger, icons, value text,
-       supporting text) — matches rel-button's :host([disabled]) opacity
-       approach instead of relying on one barely-different background tint. */
-    .select-wrapper.disabled {
-      opacity: 0.5;
-    }
-
-    .select-label {
-      color: var(--rel-select-label-color, var(--rel-text-label));
-
-      font-family: var(--rel-body-sm-regular-font-family);
-
-      font-weight: var(--rel-body-sm-regular-font-weight);
-
-      font-size: var(--rel-body-sm-regular-font-size);
-
-      line-height: var(--rel-body-sm-regular-line-height);
-
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-
-    }
-
-    /* Error only colors the border/focus ring and the supporting text below
-       the field — label, floating label, placeholder, and icons stay normal. */
-
-    /* Container */
-    .select-container {
-      position: relative;
-    }
-
-    /* Trigger button — visually a text field, semantically a combobox button */
-    .select-trigger {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      box-sizing: border-box;
-      gap: 8px;
-      background: var(--rel-select-bg, var(--rel-bg-neutral));
-      border: 1px solid var(--rel-select-border-default, var(--rel-border-default));
-      cursor: pointer;
-      font-family: inherit;
-      transition: border-color 0.15s ease;
-      text-align: left;
-    }
-
-    .border-rounded .select-trigger {
-      border-radius: var(--rel-select-radius, var(--rel-border-radius-xs));
-    }
-
-    .border-sharp .select-trigger {
-      border-radius: 0;
-    }
-
-    .select-trigger:focus-visible,
-    .select-wrapper.open .select-trigger {
-      outline: none;
-      border-color: var(--rel-select-border-focus, var(--rel-border-strong));
-    }
-
-    .select-wrapper.error .select-trigger {
-      border-color: var(--rel-select-border-error, var(--rel-border-danger));
-    }
-
-    .select-wrapper.disabled .select-trigger {
-      cursor: not-allowed;
-      background: var(--rel-select-bg-disabled, var(--rel-bg-neutral-elevated-1));
-      border-color: var(--rel-select-border-default, var(--rel-border-default));
-    }
-
-    /* Sizes */
-    .select-wrapper.small .select-trigger {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      min-height: 40px;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .select-wrapper.medium .select-trigger {
-      padding: 12px;
-      min-height: 48px;
-      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);
-    }
-
-    .select-wrapper.large .select-trigger {
-      padding: var(--rel-spacing-md);
-      min-height: 56px;
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    /* Icons */
-    .select-trigger .icon {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      color: var(--rel-select-icon-color, var(--rel-text-default));
-    }
-
-    .select-trigger .icon.chevron {
-      transition: transform 0.15s ease;
-    }
-
-    .select-wrapper.open .icon.chevron {
-      transform: rotate(180deg);
-    }
-
-    .select-wrapper.disabled .icon {
-      color: var(--rel-text-disabled);
-    }
-
-    /* Value area */
-    .select-value {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: nowrap;
-      color: var(--rel-select-value-color, var(--rel-text-default));
-      overflow: hidden;
-    }
-
-    .select-value.placeholder {
-      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
-    }
-
-    .select-wrapper.disabled .select-value.placeholder {
-      color: var(--rel-select-placeholder-disabled-color, var(--rel-text-disabled));
-    }
-
-    .select-value-text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      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: 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 —
-       a disabled native <button> ancestor doesn't suppress clicks on that
-       automatically the way it would for a nested native form control, so
-       this has to be switched off explicitly. The cursor still correctly
-       falls through to the disabled trigger underneath. */
-    .select-wrapper.disabled .select-chips {
-      pointer-events: none;
-    }
-
-    /* Floating label — single element that animates between resting (inside,
-       at the value position) and floated (small, on the border line), same
-       mechanism as rel-textfield's [floatinglabel]. */
-    .floating-label {
-      position: absolute;
-      left: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      background: var(--rel-select-bg, var(--rel-bg-neutral));
-      padding: 0 4px;
-      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
-      pointer-events: none;
-      z-index: 1;
-      white-space: nowrap;
-      transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, color 0.15s ease;
-      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);
-    }
-
-    .floating-label.has-left-icon {
-      left: 40px;
-    }
-
-    .select-wrapper.focused .floating-label,
-    .select-wrapper.has-value .floating-label,
-    .select-wrapper.open .floating-label {
-      top: 0;
-      left: 12px;
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-      font-weight: var(--rel-body-xs-medium-font-weight);
-      color: var(--rel-select-label-color, var(--rel-text-label));
-    }
-
-    /* The real placeholder hides while the float-label rests in its spot,
-       and fades in once the label has moved up to the border. */
-    .select-wrapper.floating .select-value.placeholder {
-      opacity: 0;
-      transition: opacity 0.1s ease;
-    }
-
-    .select-wrapper.floating.focused .select-value.placeholder,
-    .select-wrapper.floating.open .select-value.placeholder {
-      opacity: 1;
-    }
-
-    /* Supporting text */
-    .select-support {
-      margin-top: var(--rel-spacing-3xs);
-      font-size: 13px;
-      color: var(--rel-select-supporting-color, var(--rel-text-caption));
-    }
-
-    .select-support.error {
-      color: var(--rel-text-danger);
-    }
-
-    /* ── Dropdown listbox ── */
-    .select-listbox {
-      position: fixed;
-      z-index: 1001;
-      display: none;
-      box-sizing: border-box;
-      background: var(--rel-select-bg, var(--rel-bg-neutral));
-      border: 1px solid var(--rel-select-menu-border, var(--rel-border-default));
-      border-radius: var(--rel-select-menu-radius, var(--rel-border-radius-sm));
-      /* A border alone doesn't read clearly against a similarly-light page,
-         and a shadow alone barely shows on a dark background — together
-         they hold up in both themes. */
-      box-shadow: var(--rel-select-menu-shadow, var(--rel-shadows-shadow-300));
-      max-height: 360px;
-      overflow-y: auto;
-    }
-
-    .select-listbox[data-open] {
-      display: block;
-    }
-
-    .select-search {
-      position: sticky;
-      top: 0;
-      background: var(--rel-select-bg, var(--rel-bg-neutral));
-      padding: var(--rel-spacing-xs);
-      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
-    }
-
-    /* Base = "small" textfield sizing, shared by both small AND medium
-       select — only "large" select bumps the search field up to "medium". */
-    .search-input-wrap {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      border: 1px solid var(--rel-select-search-border, var(--rel-border-default));
-      border-radius: 4px;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-    }
-
-    .search-input-wrap .icon {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      color: var(--rel-select-icon-color, var(--rel-text-default));
-    }
-
-    .search-input {
-      flex: 1;
-      min-width: 0;
-      border: none;
-      outline: none;
-      background: transparent;
-      color: var(--rel-select-value-color, var(--rel-text-default));
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .search-input::placeholder {
-      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
-    }
-
-    :host([size="large"]) .search-input-wrap {
-      padding: 12px;
-    }
-
-    :host([size="large"]) .search-input {
-
-      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);
-
-    }
-
-    .select-options {
-      padding: 4px 0;
-    }
-
-    .select-option {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: var(--rel-spacing-xs) 12px;
-      color: var(--rel-select-value-color, var(--rel-text-default));
-      cursor: pointer;
-      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);
-    }
-
-    /* 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;
-      white-space: nowrap;
-    }
-
-    .select-option-check {
-      flex-shrink: 0;
-      color: var(--rel-select-value-color, var(--rel-text-default));
-    }
-
-    .select-option:hover,
-    .select-option.highlighted {
-      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
-    }
-
-    .select-option[aria-selected="true"] {
-      font-weight: var(--rel-body-md-medium-font-weight);
-    }
-
-    :host([size="large"]) .select-option[aria-selected="true"] {
-      font-weight: var(--rel-body-lg-medium-font-weight);
-    }
-
-    .checkbox-option {
-      padding: 12px;
-    }
-
-    .checkbox-option:hover,
-    .checkbox-option.highlighted {
-      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
-    }
-
-    .select-all-row {
-      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
-      padding: 12px;
-    }
-
-    .select-empty {
-      padding: var(--rel-spacing-xs) 12px;
-      color: var(--rel-select-placeholder-color, var(--rel-text-body));
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-  `;
-
-  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>) {
-    if (changed.has("multiple") && this.multiple === false) {
-      this.selectedValues = [];
-    }
-  }
-
-  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);
-  }
-
-  /** Options matching the current search text (substring match, case-insensitive). */
-  private get filteredOptions(): NormalizedOption[] {
-    const opts = this.normalizedOptions;
-    if (!this.searchValue) return opts;
-    const v = this.searchValue.toLowerCase();
-    return opts.filter((o) => o.label.toLowerCase().includes(v));
-  }
-
-  private get hasValue(): boolean {
-    return this.multiple ? this.selectedValues.length > 0 : !!this.selected;
-  }
-
-  /** Icon size scales with the select's own size, matching the trigger. */
-  private get iconSize(): "xs" | "sm" | "md" {
-    return this.size === "small" ? "xs" : this.size === "large" ? "md" : "sm";
-  }
-
-  /** The search field uses "small" sizing for both small and medium select — only "large" select bumps it to "medium". */
-  private get searchIconSize(): "sm" | "md" {
-    return this.size === "large" ? "md" : "sm";
-  }
-
-  private get selectAllStatus(): "checked" | "unchecked" | "indeterminate" {
-    const filtered = this.filteredOptions;
-    if (filtered.length === 0) return "unchecked";
-    const selectedCount = filtered.filter((o) => this.selectedValues.includes(o.value)).length;
-    if (selectedCount === 0) return "unchecked";
-    if (selectedCount === filtered.length) return "checked";
-    return "indeterminate";
-  }
-
-  private addGlobalListeners() {
-    document.addEventListener("pointerdown", this.onOutsidePointerDown);
-    window.addEventListener("resize", this.updatePosition);
-    window.addEventListener("scroll", this.onPageScroll, true);
-  }
-
-  private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
-    window.removeEventListener("resize", this.updatePosition);
-    window.removeEventListener("scroll", this.onPageScroll, true);
-  }
-
-  private onOutsidePointerDown = (e: PointerEvent) => {
-    if (!this.open) return;
-    const path = e.composedPath();
-    if (path.includes(this)) return;
-    this.closeListbox();
-  };
-
-  // Continuously re-deriving a fixed-position panel's coordinates from
-  // every page scroll event is fragile (it's what was causing the panel to
-  // jump to the top of the viewport). Instead, close the panel on any
-  // *outside* scroll, same as clicking outside — scrolling the option list
-  // itself (target is the listbox) is the one case that should NOT close it.
-  private onPageScroll = (e: Event) => {
-    if (!this.open) return;
-    if (e.composedPath()[0] === this.listboxEl) return;
-    this.closeListbox();
-  };
-
-  private emitChange() {
-    this.dispatchEvent(
-      new CustomEvent("changed", {
-        detail: { value: this.multiple ? this.selectedValues : this.selected },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private openListbox() {
-    if (this.state === "disabled" || this.open) return;
-    this.open = true;
-    this.searchValue = "";
-    // No pre-highlight — the first item showing a hover-style highlight
-    // before the user has touched anything reads as an unintended default.
-    // Highlight only kicks in once they actually hover or press an arrow key.
-    this.highlightedIndex = -1;
-    this.addGlobalListeners();
-    requestAnimationFrame(() => {
-      this.updatePosition();
-      // preventScroll: focusing the search field must not let the browser
-      // scroll the page into view — that would move the trigger (normal
-      // flow) out from under the panel (fixed position, already computed
-      // above), breaking the anchor. When there's no search field, focus
-      // simply stays on the trigger, which already has the nav keydown
-      // handling wired up for this case.
-      if (!this.noSearch) {
-        this.searchInputEl?.focus({ preventScroll: true });
-      }
-    });
-  }
-
-  private closeListbox() {
-    if (!this.open) return;
-    this.open = false;
-    this.removeGlobalListeners();
-    this.triggerEl?.focus();
-  }
-
-  private updatePosition = () => {
-    if (!this.triggerEl || !this.listboxEl) return;
-
-    this.listboxEl.setAttribute("data-open", "");
-
-    const t = this.triggerEl.getBoundingClientRect();
-    const c = this.listboxEl.getBoundingClientRect();
-
-    let top = t.bottom + 4;
-    if (top + c.height > window.innerHeight - 8) {
-      top = Math.max(8, t.top - c.height - 4);
-    }
-
-    // Use t.width (the trigger's width, which is also what we set the panel's
-    // own width to below) rather than c.width — c.width reflects the
-    // *previous* render's panelStyle, so on the very next measurement it can
-    // be a frame stale, nudging left by a few px even when there's no real
-    // overflow. Checking against t.width directly removes that drift.
-    let left = t.left;
-    if (left + t.width > window.innerWidth - 8) {
-      left = Math.max(8, window.innerWidth - t.width - 8);
-    }
-
-    this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
-  };
-
-  private selectSingleOption(option: NormalizedOption) {
-    this.selected = option.value;
-    if (this.state === "error") this.state = "default";
-    this.closeListbox();
-    this.emitChange();
-  }
-
-  private toggleMultiOption(option: NormalizedOption) {
-    const idx = this.selectedValues.indexOf(option.value);
-    this.selectedValues =
-      idx >= 0
-        ? this.selectedValues.filter((v) => v !== option.value)
-        : [...this.selectedValues, option.value];
-    if (this.state === "error") this.state = "default";
-    this.emitChange();
-  }
-
-  private toggleSelectAll() {
-    const filtered = this.filteredOptions;
-    const status = this.selectAllStatus;
-    if (status === "checked") {
-      const filteredValues = new Set(filtered.map((o) => o.value));
-      this.selectedValues = this.selectedValues.filter((v) => !filteredValues.has(v));
-    } else {
-      const toAdd = filtered.map((o) => o.value).filter((v) => !this.selectedValues.includes(v));
-      this.selectedValues = [...this.selectedValues, ...toAdd];
-    }
-    if (this.state === "error") this.state = "default";
-    this.emitChange();
-  }
-
-  private removeChip(value: string) {
-    if (this.state === "disabled") return;
-    this.selectedValues = this.selectedValues.filter((v) => v !== value);
-    this.emitChange();
-  }
-
-  private onTriggerClick() {
-    if (this.open) this.closeListbox();
-    else this.openListbox();
-  }
-
-  private onTriggerKeyDown(e: KeyboardEvent) {
-    if (this.state === "disabled") return;
-    if (!this.open) {
-      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
-        e.preventDefault();
-        this.openListbox();
-      }
-      return;
-    }
-    // No search field to hold focus/keydown in this mode — the trigger
-    // itself keeps focus while open, so it needs the same nav handling.
-    if (this.noSearch) this.handleListNavigation(e);
-  }
-
-  private onSearchInput = (e: InputEvent) => {
-    this.searchValue = (e.target as HTMLInputElement).value;
-    this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
-    requestAnimationFrame(() => this.updatePosition());
-  };
-
-  private onSearchKeyDown(e: KeyboardEvent) {
-    this.handleListNavigation(e);
-  }
-
-  private handleListNavigation(e: KeyboardEvent) {
-    const filtered = this.filteredOptions;
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-          const opt = filtered[this.highlightedIndex];
-          if (this.multiple) this.toggleMultiOption(opt);
-          else this.selectSingleOption(opt);
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        this.closeListbox();
-        break;
-      case "Tab":
-        this.closeListbox();
-        break;
-    }
-  }
-
-  private renderChips() {
-    const values = this.selectedValues;
-    const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
-    const overflow = values.length - visible.length;
-    const opts = this.normalizedOptions;
-
-    return html`
-      <span class="select-chips">
-        ${repeat(
-          visible,
-          (v) => v,
-          (v) => {
-            const opt = opts.find((o) => o.value === v);
-            // Keyed by value: rel-chip tracks its own "removed" flag
-            // internally once its (x) is clicked, so reusing DOM nodes
-            // positionally (plain .map()) could hand a freshly-shown value
-            // a node that still remembers being removed as a *different*
-            // value. Keying forces a fresh node per value instead.
-            return html`
-              <rel-chip
-                label="${opt?.label ?? v}"
-                size="sm"
-                variant="subtle"
-                border="default"
-                ?removable=${this.state !== "disabled"}
-                @click=${(e: Event) => e.stopPropagation()}
-                @removed=${(e: Event) => {
-                  e.stopPropagation();
-                  this.removeChip(v);
-                }}
-              ></rel-chip>
-            `;
-          }
-        )}
-        ${overflow > 0
-          ? html`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>`
-          : nothing}
-      </span>
-    `;
-  }
-
-  /**
-   * 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 showFloatingChrome = this.labelStyle === "floating" && !!this.label;
-
-    const wrapperClasses = [
-      "select-wrapper",
-      this.size,
-      this.state,
-      `border-${this.border}`,
-      showFloatingChrome ? "floating" : "",
-      this.internalState === "focused" ? "focused" : "",
-      this.hasValue ? "has-value" : "",
-      this.open ? "open" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const listboxId = `${this.uniqueId}-listbox`;
-    const activeOptionId =
-      this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
-
-    const selectedSingle = opts.find((o) => o.value === this.selected);
-
-    return html`
-      <div class="${wrapperClasses}">
-        ${!showFloatingChrome && this.label
-          ? html`<label part="label" class="select-label" for="${this.uniqueId}">${this.label}</label>`
-          : ""}
-
-        <div class="select-container">
-          ${showFloatingChrome
-            ? html`<span class="floating-label${this.leftIcon ? " has-left-icon" : ""}"
-                >${this.label}</span
-              >`
-            : ""}
-
-          <button
-            id="${this.uniqueId}"
-            type="button"
-            part="trigger" class="select-trigger"
-            role="combobox"
-            aria-haspopup="listbox"
-            aria-expanded="${this.open}"
-            aria-controls="${listboxId}"
-            aria-activedescendant="${activeOptionId}"
-            aria-invalid="${this.state === "error"}"
-            aria-label="${this.label || this.placeholder}"
-            ?disabled="${isDisabled}"
-            @click="${this.onTriggerClick}"
-            @keydown="${this.onTriggerKeyDown}"
-            @focus="${() => (this.internalState = "focused")}"
-            @blur="${() => (this.internalState = "default")}"
-          >
-            ${this.leftIcon
-              ? html`<rel-icon name="${this.leftIcon}" size="${this.iconSize}" class="icon left"></rel-icon>`
-              : ""}
-
-            ${this.multiple
-              ? this.selectedValues.length > 0
-                ? html`<span part="value" class="select-value">${this.renderChips()}</span>`
-                : html`<span part="value" class="select-value placeholder">
-                    <span class="select-value-text">${this.placeholder}</span>
-                  </span>`
-              : html`<span part="value" class="select-value ${selectedSingle ? "" : "placeholder"}">
-                  <span class="select-value-text"
-                    >${selectedSingle ? selectedSingle.label : this.placeholder}</span
-                  >
-                </span>`}
-
-            <rel-icon
-              name="${this.rightIcon || "chevron-down"}"
-              size="${this.iconSize}"
-              class="icon ${this.rightIcon ? "" : "chevron"}"
-            ></rel-icon>
-          </button>
-
-          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing}
-        </div>
-
-        ${this.supportingText
-          ? html`<span part="helper" class="select-support ${this.state === "error" ? "error" : ""}">
-              ${this.supportingText}
-            </span>`
-          : ""}
-      </div>
-
-      <div
-        id="${listboxId}"
-        part="panel list" class="select-listbox"
-        role="listbox"
-        aria-multiselectable="${this.multiple}"
-        aria-label="${this.label || "Options"}"
-        style="${this.panelStyle}"
-        ?data-open="${this.open}"
-      >
-        ${!this.noSearch
-          ? html`<div class="select-search">
-              <div class="search-input-wrap">
-                <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
-                <input
-                  part="input" class="search-input"
-                  type="text"
-                  placeholder="${this.searchPlaceholder}"
-                  .value="${this.searchValue}"
-                  @input="${this.onSearchInput}"
-                  @keydown="${(e: KeyboardEvent) => this.onSearchKeyDown(e)}"
-                />
-              </div>
-            </div>`
-          : ""}
-
-        ${filtered.length === 0
-          ? html`<div class="select-empty">
-              ${opts.length === 0 ? "No options available" : "No matches found"}
-            </div>`
-          : this.multiple
-          ? html`
-              <div class="select-all-row">
-                <rel-checkbox
-                  label="${this.selectAllLabel}"
-                  status="${this.selectAllStatus}"
-                  @rel-change=${(e: Event) => {
-                    e.stopPropagation();
-                    this.toggleSelectAll();
-                  }}
-                ></rel-checkbox>
-              </div>
-              <div class="select-options">
-                ${repeat(
-                  filtered,
-                  (option) => option.value,
-                  (option, index) => html`
-                    <div
-                      id="${this.uniqueId}-option-${index}"
-                      class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
-                      role="option"
-                      aria-selected="${this.selectedValues.includes(option.value)}"
-                      @pointerenter="${() => (this.highlightedIndex = index)}"
-                    >
-                      <rel-checkbox
-                        label="${option.label}"
-                        icon="${option.icon}"
-                        supportingtext="${option.supportingText}"
-                        status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
-                        @rel-change=${(e: Event) => {
-                          e.stopPropagation();
-                          this.toggleMultiOption(option);
-                        }}
-                      ></rel-checkbox>
-                    </div>
-                  `
-                )}
-              </div>
-            `
-          : html`
-              <div class="select-options">
-                ${repeat(
-                  filtered,
-                  (option) => option.value,
-                  (option, index) => html`
-                    <div
-                      id="${this.uniqueId}-option-${index}"
-                      part="option" class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
-                      role="option"
-                      aria-selected="${option.value === this.selected}"
-                      @mousedown="${(e: Event) => e.preventDefault()}"
-                      @click="${() => this.selectSingleOption(option)}"
-                      @pointerenter="${() => (this.highlightedIndex = index)}"
-                    >
-                      <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>`
-                        : ""}
-                    </div>
-                  `
-                )}
-              </div>
-            `}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-select": RelSelect;
-  }
-}
+import { LitElement, html, css, nothing, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+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";
+/** 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;
+
+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: "", icon: "" };
+  return {
+    value: o.value,
+    label: o.label ?? o.value,
+    supportingText: o.supportingText ?? "",
+    icon: o.icon ?? "",
+  };
+}
+
+@customElement("rel-select")
+export class RelSelect extends LitElement {
+  @property({ type: String }) label: string = "";
+
+  // Lit's default attribute name is the property name fully lowercased (no
+  // 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", 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[] = [];
+
+  /** Enables multi-select: selected values render as removable chips and options as checkboxes. */
+  @property({ type: Boolean }) multiple: boolean = false;
+
+  /** Selected value — single-select mode only. */
+  @property({ type: String }) selected: string = "";
+
+  /** Selected values — multi-select mode only. */
+  @property({ type: Array, attribute: "selected-values" }) selectedValues: string[] = [];
+
+  @property({ type: String }) state: SelectState = "default";
+
+  @property({ type: String, attribute: "supporting-text" }) supportingText: string = "";
+
+  @property({ type: String, reflect: true }) size: SelectSize = "medium";
+
+  @property({ type: String }) border: SelectBorder = "rounded";
+
+  @property({ type: String, attribute: "left-icon" }) leftIcon: string = "";
+
+  @property({ type: String, attribute: "right-icon" }) rightIcon: string = "";
+
+  @property({ type: String }) placeholder: string = "Select option";
+
+  @property({ type: String, attribute: "search-placeholder" }) searchPlaceholder: string = "Search option";
+
+  @property({ type: String, attribute: "select-all-label" }) selectAllLabel: string = "Select all";
+
+  /**
+   * 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)
+  // decides truthiness, so searchable="false" would still read as true. Named
+  // negatively instead, so the natural HTML idiom — just adding the bare
+  // attribute, no value — does what it looks like it does.
+  /** Hides the in-panel search field. Figma's "Single Option" dropdown has no search bar at all — use this for short, non-searchable lists. */
+  @property({ type: Boolean, attribute: "no-search" }) noSearch: boolean = false;
+
+  @state() private open = false;
+  @state() private highlightedIndex = -1;
+  @state() private panelStyle = "";
+  @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)}`;
+
+  static styles = css`
+    :host {
+      color: var(--rel-text-default);
+      display: block;
+      font-family: var(--rel-fonts-font-family);
+      width: 100%;
+    }
+
+    .select-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-2xs);
+      width: 100%;
+    }
+
+    /* Dims everything inside uniformly (label, trigger, icons, value text,
+       supporting text) — matches rel-button's :host([disabled]) opacity
+       approach instead of relying on one barely-different background tint. */
+    .select-wrapper.disabled {
+      opacity: 0.5;
+    }
+
+    .select-label {
+      color: var(--rel-select-label-color, var(--rel-text-label));
+
+      font-family: var(--rel-body-sm-regular-font-family);
+
+      font-weight: var(--rel-body-sm-regular-font-weight);
+
+      font-size: var(--rel-body-sm-regular-font-size);
+
+      line-height: var(--rel-body-sm-regular-line-height);
+
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+
+    }
+
+    /* ── 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. */
+
+    /* Container */
+    .select-container {
+      position: relative;
+    }
+
+    /* Trigger button — visually a text field, semantically a combobox button */
+    .select-trigger {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+      gap: 8px;
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      border: 1px solid var(--rel-select-border-default, var(--rel-border-default));
+      cursor: pointer;
+      font-family: inherit;
+      transition: border-color 0.15s ease;
+      text-align: left;
+    }
+
+    .border-rounded .select-trigger {
+      border-radius: var(--rel-select-radius, var(--rel-border-radius-xs));
+    }
+
+    .border-sharp .select-trigger {
+      border-radius: 0;
+    }
+
+    .select-trigger:focus-visible,
+    .select-wrapper.open .select-trigger {
+      outline: none;
+      border-color: var(--rel-select-border-focus, var(--rel-border-strong));
+    }
+
+    .select-wrapper.error .select-trigger {
+      border-color: var(--rel-select-border-error, var(--rel-border-danger));
+    }
+
+    .select-wrapper.disabled .select-trigger {
+      cursor: not-allowed;
+      background: var(--rel-select-bg-disabled, var(--rel-bg-neutral-elevated-1));
+      border-color: var(--rel-select-border-default, var(--rel-border-default));
+    }
+
+    /* Sizes */
+    .select-wrapper.small .select-trigger {
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+      min-height: 40px;
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+    .select-wrapper.medium .select-trigger {
+      padding: 12px;
+      min-height: 48px;
+      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);
+    }
+
+    .select-wrapper.large .select-trigger {
+      padding: var(--rel-spacing-md);
+      min-height: 56px;
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+    }
+
+    /* Icons */
+    .select-trigger .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, var(--rel-text-default));
+    }
+
+    .select-trigger .icon.chevron {
+      transition: transform 0.15s ease;
+    }
+
+    .select-wrapper.open .icon.chevron {
+      transform: rotate(180deg);
+    }
+
+    .select-wrapper.disabled .icon {
+      color: var(--rel-text-disabled);
+    }
+
+    /* Value area */
+    .select-value {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: nowrap;
+      color: var(--rel-select-value-color, var(--rel-text-default));
+      overflow: hidden;
+    }
+
+    .select-value.placeholder {
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
+    }
+
+    .select-wrapper.disabled .select-value.placeholder {
+      color: var(--rel-select-placeholder-disabled-color, var(--rel-text-disabled));
+    }
+
+    .select-value-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      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: 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 —
+       a disabled native <button> ancestor doesn't suppress clicks on that
+       automatically the way it would for a nested native form control, so
+       this has to be switched off explicitly. The cursor still correctly
+       falls through to the disabled trigger underneath. */
+    .select-wrapper.disabled .select-chips {
+      pointer-events: none;
+    }
+
+    /* Floating label — single element that animates between resting (inside,
+       at the value position) and floated (small, on the border line), same
+       mechanism as rel-textfield's [floatinglabel]. */
+    .floating-label {
+      position: absolute;
+      left: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+      padding: 0 4px;
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
+      pointer-events: none;
+      z-index: 1;
+      white-space: nowrap;
+      transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, color 0.15s ease;
+      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);
+    }
+
+    .floating-label.has-left-icon {
+      left: 40px;
+    }
+
+    .select-wrapper.focused .floating-label,
+    .select-wrapper.has-value .floating-label,
+    .select-wrapper.open .floating-label {
+      top: 0;
+      left: 12px;
+      font-size: var(--rel-body-sm-medium-font-size);
+      line-height: var(--rel-body-sm-medium-line-height);
+      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      font-weight: var(--rel-body-xs-medium-font-weight);
+      color: var(--rel-select-label-color, var(--rel-text-label));
+    }
+
+    /* The real placeholder hides while the float-label rests in its spot,
+       and fades in once the label has moved up to the border. */
+    .select-wrapper.floating .select-value.placeholder {
+      opacity: 0;
+      transition: opacity 0.1s ease;
+    }
+
+    .select-wrapper.floating.focused .select-value.placeholder,
+    .select-wrapper.floating.open .select-value.placeholder {
+      opacity: 1;
+    }
+
+    /* Supporting text */
+    .select-support {
+      margin-top: var(--rel-spacing-3xs);
+      font-size: 13px;
+      color: var(--rel-select-supporting-color, var(--rel-text-caption));
+    }
+
+    .select-support.error {
+      color: var(--rel-text-danger);
+    }
+
+    /* ── Dropdown listbox ── */
+    .select-listbox {
+      position: fixed;
+      z-index: 1001;
+      display: none;
+      /* Reset native [popover] UA styles (the listbox 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-select-bg, var(--rel-bg-neutral));
+      border: 1px solid var(--rel-select-menu-border, var(--rel-border-default));
+      border-radius: var(--rel-select-menu-radius, var(--rel-border-radius-sm));
+      /* A border alone doesn't read clearly against a similarly-light page,
+         and a shadow alone barely shows on a dark background — together
+         they hold up in both themes. */
+      box-shadow: var(--rel-select-menu-shadow, var(--rel-shadows-shadow-300));
+      max-height: 360px;
+      overflow-y: auto;
+    }
+
+    .select-listbox[data-open] {
+      display: block;
+    }
+
+    /* Search and Select All pin together while the options scroll beneath.
+       z-index is load-bearing: multiselect rows contain rel-checkbox, whose
+       .row wrapper is position:relative (Tab-scroll fix), so without it the
+       positioned rows paint over the sticky header in DOM order. */
+    .select-header {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: var(--rel-select-bg, var(--rel-bg-neutral));
+    }
+
+    .select-search {
+      padding: var(--rel-spacing-xs);
+      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
+    }
+
+    /* Base = "small" textfield sizing, shared by both small AND medium
+       select — only "large" select bumps the search field up to "medium". */
+    .search-input-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid var(--rel-select-search-border, var(--rel-border-default));
+      border-radius: 4px;
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
+    }
+
+    .search-input-wrap .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, var(--rel-text-default));
+    }
+
+    .search-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      color: var(--rel-select-value-color, var(--rel-text-default));
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+    .search-input::placeholder {
+      color: var(--rel-select-placeholder-color, var(--rel-text-placeholder));
+    }
+
+    :host([size="large"]) .search-input-wrap {
+      padding: 12px;
+    }
+
+    :host([size="large"]) .search-input {
+
+      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);
+
+    }
+
+    .select-options {
+      padding: 4px 0;
+    }
+
+    .select-option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: var(--rel-spacing-xs) 12px;
+      color: var(--rel-select-value-color, var(--rel-text-default));
+      cursor: pointer;
+      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);
+    }
+
+    /* 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;
+      white-space: nowrap;
+    }
+
+    .select-option-check {
+      flex-shrink: 0;
+      color: var(--rel-select-value-color, var(--rel-text-default));
+    }
+
+    .select-option:hover,
+    .select-option.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
+    .select-option[aria-selected="true"] {
+      font-weight: var(--rel-body-md-medium-font-weight);
+    }
+
+    :host([size="large"]) .select-option[aria-selected="true"] {
+      font-weight: var(--rel-body-lg-medium-font-weight);
+    }
+
+    .checkbox-option {
+      padding: 12px;
+    }
+
+    .checkbox-option:hover,
+    .checkbox-option.highlighted {
+      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
+    }
+
+    .select-all-row {
+      border-bottom: 1px solid var(--rel-select-divider, var(--rel-border-subtle));
+      padding: 12px;
+    }
+
+    .select-empty {
+      padding: var(--rel-spacing-xs) 12px;
+      color: var(--rel-select-placeholder-color, var(--rel-text-body));
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+  `;
+
+  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.hideNativePopover();
+    this.chipResizeObserver?.disconnect();
+  }
+
+  protected firstUpdated() {
+    this.chipResizeObserver = new ResizeObserver(() => this.computeVisibleChips());
+    this.chipResizeObserver.observe(this.triggerEl);
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("multiple") && this.multiple === false) {
+      this.selectedValues = [];
+    }
+  }
+
+  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);
+  }
+
+  /** Options matching the current search text (substring match, case-insensitive). */
+  private get filteredOptions(): NormalizedOption[] {
+    const opts = this.normalizedOptions;
+    if (!this.searchValue) return opts;
+    const v = this.searchValue.toLowerCase();
+    return opts.filter((o) => o.label.toLowerCase().includes(v));
+  }
+
+  private get hasValue(): boolean {
+    return this.multiple ? this.selectedValues.length > 0 : !!this.selected;
+  }
+
+  /** Icon size scales with the select's own size, matching the trigger. */
+  private get iconSize(): "xs" | "sm" | "md" {
+    return this.size === "small" ? "xs" : this.size === "large" ? "md" : "sm";
+  }
+
+  /** The search field uses "small" sizing for both small and medium select — only "large" select bumps it to "medium". */
+  private get searchIconSize(): "sm" | "md" {
+    return this.size === "large" ? "md" : "sm";
+  }
+
+  private get selectAllStatus(): "checked" | "unchecked" | "indeterminate" {
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return "unchecked";
+    const selectedCount = filtered.filter((o) => this.selectedValues.includes(o.value)).length;
+    if (selectedCount === 0) return "unchecked";
+    if (selectedCount === filtered.length) return "checked";
+    return "indeterminate";
+  }
+
+  private addGlobalListeners() {
+    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    window.addEventListener("resize", this.updatePosition);
+    window.addEventListener("scroll", this.onPageScroll, true);
+  }
+
+  private removeGlobalListeners() {
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    window.removeEventListener("resize", this.updatePosition);
+    window.removeEventListener("scroll", this.onPageScroll, true);
+  }
+
+  private onOutsidePointerDown = (e: PointerEvent) => {
+    if (!this.open) return;
+    const path = e.composedPath();
+    if (path.includes(this)) return;
+    this.closeListbox();
+  };
+
+  // Continuously re-deriving a fixed-position panel's coordinates from
+  // every page scroll event is fragile (it's what was causing the panel to
+  // jump to the top of the viewport). Instead, close the panel on any
+  // *outside* scroll, same as clicking outside — scrolling the option list
+  // itself (target is the listbox) is the one case that should NOT close it.
+  private onPageScroll = (e: Event) => {
+    if (!this.open) return;
+    if (e.composedPath()[0] === this.listboxEl) return;
+    this.closeListbox();
+  };
+
+  private emitChange() {
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: { value: this.multiple ? this.selectedValues : this.selected },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private openListbox() {
+    if (this.state === "disabled" || this.open) return;
+    this.open = true;
+    this.searchValue = "";
+    // No pre-highlight — the first item showing a hover-style highlight
+    // before the user has touched anything reads as an unintended default.
+    // Highlight only kicks in once they actually hover or press an arrow key.
+    this.highlightedIndex = -1;
+    this.addGlobalListeners();
+    requestAnimationFrame(() => {
+      this.showNativePopover();
+      this.updatePosition();
+      // preventScroll: focusing the search field must not let the browser
+      // scroll the page into view — that would move the trigger (normal
+      // flow) out from under the panel (fixed position, already computed
+      // above), breaking the anchor. When there's no search field, focus
+      // simply stays on the trigger, which already has the nav keydown
+      // handling wired up for this case.
+      if (!this.noSearch) {
+        this.searchInputEl?.focus({ preventScroll: true });
+      }
+    });
+  }
+
+  private closeListbox() {
+    if (!this.open) return;
+    this.open = false;
+    this.removeGlobalListeners();
+    this.hideNativePopover();
+    this.triggerEl?.focus();
+  }
+
+  /* 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 listbox. Promoting the listbox to
+   * the browser top layer sidesteps both — same fix as rel-popover /
+   * rel-autocomplete. `manual` keeps light-dismiss and Escape handling
+   * under this component's own control. */
+
+  private showNativePopover() {
+    const p = this.listboxEl;
+    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.listboxEl;
+    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 = () => {
+    if (!this.triggerEl || !this.listboxEl) return;
+
+    this.listboxEl.setAttribute("data-open", "");
+
+    const t = this.triggerEl.getBoundingClientRect();
+    const c = this.listboxEl.getBoundingClientRect();
+
+    let top = t.bottom + 4;
+    if (top + c.height > window.innerHeight - 8) {
+      top = Math.max(8, t.top - c.height - 4);
+    }
+
+    // Use t.width (the trigger's width, which is also what we set the panel's
+    // own width to below) rather than c.width — c.width reflects the
+    // *previous* render's panelStyle, so on the very next measurement it can
+    // be a frame stale, nudging left by a few px even when there's no real
+    // overflow. Checking against t.width directly removes that drift.
+    let left = t.left;
+    if (left + t.width > window.innerWidth - 8) {
+      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 listbox away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    this.listboxEl.style.top = `${top}px`;
+    this.listboxEl.style.left = `${left}px`;
+    this.listboxEl.style.width = `${t.width}px`;
+    const applied = this.listboxEl.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    this.listboxEl.style.top = `${top}px`;
+    this.listboxEl.style.left = `${left}px`;
+
+    this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
+  };
+
+  private selectSingleOption(option: NormalizedOption) {
+    this.selected = option.value;
+    if (this.state === "error") this.state = "default";
+    this.closeListbox();
+    this.emitChange();
+  }
+
+  private toggleMultiOption(option: NormalizedOption) {
+    const idx = this.selectedValues.indexOf(option.value);
+    this.selectedValues =
+      idx >= 0
+        ? this.selectedValues.filter((v) => v !== option.value)
+        : [...this.selectedValues, option.value];
+    if (this.state === "error") this.state = "default";
+    this.emitChange();
+  }
+
+  private toggleSelectAll() {
+    const filtered = this.filteredOptions;
+    const status = this.selectAllStatus;
+    if (status === "checked") {
+      const filteredValues = new Set(filtered.map((o) => o.value));
+      this.selectedValues = this.selectedValues.filter((v) => !filteredValues.has(v));
+    } else {
+      const toAdd = filtered.map((o) => o.value).filter((v) => !this.selectedValues.includes(v));
+      this.selectedValues = [...this.selectedValues, ...toAdd];
+    }
+    if (this.state === "error") this.state = "default";
+    this.emitChange();
+  }
+
+  private removeChip(value: string) {
+    if (this.state === "disabled") return;
+    this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    this.emitChange();
+  }
+
+  private onTriggerClick() {
+    if (this.open) this.closeListbox();
+    else this.openListbox();
+  }
+
+  private onTriggerKeyDown(e: KeyboardEvent) {
+    if (this.state === "disabled") return;
+    if (!this.open) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        this.openListbox();
+      }
+      return;
+    }
+    // No search field to hold focus/keydown in this mode — the trigger
+    // itself keeps focus while open, so it needs the same nav handling.
+    if (this.noSearch) this.handleListNavigation(e);
+  }
+
+  private onSearchInput = (e: InputEvent) => {
+    this.searchValue = (e.target as HTMLInputElement).value;
+    this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+    requestAnimationFrame(() => this.updatePosition());
+  };
+
+  private onSearchKeyDown(e: KeyboardEvent) {
+    this.handleListNavigation(e);
+  }
+
+  private handleListNavigation(e: KeyboardEvent) {
+    const filtered = this.filteredOptions;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+          const opt = filtered[this.highlightedIndex];
+          if (this.multiple) this.toggleMultiOption(opt);
+          else this.selectSingleOption(opt);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.closeListbox();
+        break;
+      case "Tab":
+        this.closeListbox();
+        break;
+    }
+  }
+
+  private renderChips() {
+    const values = this.selectedValues;
+    const visible = values.slice(0, Math.min(this.visibleChipCount, this.maxVisibleChips));
+    const overflow = values.length - visible.length;
+    const opts = this.normalizedOptions;
+
+    return html`
+      <span class="select-chips">
+        ${repeat(
+          visible,
+          (v) => v,
+          (v) => {
+            const opt = opts.find((o) => o.value === v);
+            // Keyed by value: rel-chip tracks its own "removed" flag
+            // internally once its (x) is clicked, so reusing DOM nodes
+            // positionally (plain .map()) could hand a freshly-shown value
+            // a node that still remembers being removed as a *different*
+            // value. Keying forces a fresh node per value instead.
+            return html`
+              <rel-chip
+                label="${opt?.label ?? v}"
+                size="sm"
+                variant="subtle"
+                border="default"
+                ?removable=${this.state !== "disabled"}
+                @click=${(e: Event) => e.stopPropagation()}
+                @removed=${(e: Event) => {
+                  e.stopPropagation();
+                  this.removeChip(v);
+                }}
+              ></rel-chip>
+            `;
+          }
+        )}
+        ${overflow > 0
+          ? html`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>`
+          : nothing}
+      </span>
+    `;
+  }
+
+  /**
+   * 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",
+      this.size,
+      this.state,
+      `border-${this.border}`,
+      showFloatingChrome ? "floating" : "",
+      this.internalState === "focused" ? "focused" : "",
+      this.hasValue ? "has-value" : "",
+      this.open ? "open" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const listboxId = `${this.uniqueId}-listbox`;
+    const activeOptionId =
+      this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+
+    const selectedSingle = opts.find((o) => o.value === this.selected);
+
+    return html`
+      <div class="${wrapperClasses}">
+        ${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
+            ? html`<span class="floating-label${this.leftIcon ? " has-left-icon" : ""}"
+                >${this.label}</span
+              >`
+            : ""}
+
+          <button
+            id="${this.uniqueId}"
+            type="button"
+            part="trigger" class="select-trigger"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded="${this.open}"
+            aria-controls="${listboxId}"
+            aria-activedescendant="${activeOptionId}"
+            aria-invalid="${this.state === "error"}"
+            aria-label="${this.fieldAriaLabelledby ? nothing : accessibleName || this.placeholder}"
+            aria-labelledby="${this.fieldAriaLabelledby ?? nothing}"
+            ?disabled="${isDisabled}"
+            @click="${this.onTriggerClick}"
+            @keydown="${this.onTriggerKeyDown}"
+            @focus="${() => (this.internalState = "focused")}"
+            @blur="${() => (this.internalState = "default")}"
+          >
+            ${this.leftIcon
+              ? html`<rel-icon name="${this.leftIcon}" size="${this.iconSize}" class="icon left"></rel-icon>`
+              : ""}
+
+            ${this.multiple
+              ? this.selectedValues.length > 0
+                ? html`<span part="value" class="select-value">${this.renderChips()}</span>`
+                : html`<span part="value" class="select-value placeholder">
+                    <span class="select-value-text">${this.placeholder}</span>
+                  </span>`
+              : html`<span part="value" class="select-value ${selectedSingle ? "" : "placeholder"}">
+                  <span class="select-value-text"
+                    >${selectedSingle ? selectedSingle.label : this.placeholder}</span
+                  >
+                </span>`}
+
+            <rel-icon
+              name="${this.rightIcon || "chevron-down"}"
+              size="${this.iconSize}"
+              class="icon ${this.rightIcon ? "" : "chevron"}"
+            ></rel-icon>
+          </button>
+
+          ${this.multiple && this.selectedValues.length > 0 ? this.renderChipsMeasure() : nothing}
+        </div>
+
+        ${this.supportingText
+          ? html`<span part="helper" class="select-support ${this.state === "error" ? "error" : ""}">
+              ${this.supportingText}
+            </span>`
+          : ""}
+      </div>
+
+      <div
+        id="${listboxId}"
+        part="panel list" class="select-listbox"
+        popover="manual"
+        role="listbox"
+        aria-multiselectable="${this.multiple}"
+        aria-label="${accessibleName || "Options"}"
+        style="${this.panelStyle}"
+        ?data-open="${this.open}"
+      >
+        ${!this.noSearch || (this.multiple && filtered.length > 0)
+          ? html`<div class="select-header">
+              ${!this.noSearch
+                ? html`<div class="select-search">
+                    <div class="search-input-wrap">
+                      <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
+                      <input
+                        part="input" class="search-input"
+                        type="text"
+                        placeholder="${this.searchPlaceholder}"
+                        .value="${this.searchValue}"
+                        @input="${this.onSearchInput}"
+                        @keydown="${(e: KeyboardEvent) => this.onSearchKeyDown(e)}"
+                      />
+                    </div>
+                  </div>`
+                : ""}
+              ${this.multiple && filtered.length > 0
+                ? html`<div class="select-all-row">
+                    <rel-checkbox
+                      label="${this.selectAllLabel}"
+                      status="${this.selectAllStatus}"
+                      @rel-change=${(e: Event) => {
+                        e.stopPropagation();
+                        this.toggleSelectAll();
+                      }}
+                    ></rel-checkbox>
+                  </div>`
+                : ""}
+            </div>`
+          : ""}
+
+        ${filtered.length === 0
+          ? html`<div class="select-empty">
+              ${opts.length === 0 ? "No options available" : "No matches found"}
+            </div>`
+          : this.multiple
+          ? html`
+              <div class="select-options">
+                ${repeat(
+                  filtered,
+                  (option) => option.value,
+                  (option, index) => html`
+                    <div
+                      id="${this.uniqueId}-option-${index}"
+                      class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
+                      role="option"
+                      aria-selected="${this.selectedValues.includes(option.value)}"
+                      @pointerenter="${() => (this.highlightedIndex = index)}"
+                    >
+                      <rel-checkbox
+                        label="${option.label}"
+                        icon="${option.icon}"
+                        supportingtext="${option.supportingText}"
+                        status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
+                        @rel-change=${(e: Event) => {
+                          e.stopPropagation();
+                          this.toggleMultiOption(option);
+                        }}
+                      ></rel-checkbox>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : html`
+              <div class="select-options">
+                ${repeat(
+                  filtered,
+                  (option) => option.value,
+                  (option, index) => html`
+                    <div
+                      id="${this.uniqueId}-option-${index}"
+                      part="option" class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
+                      role="option"
+                      aria-selected="${option.value === this.selected}"
+                      @mousedown="${(e: Event) => e.preventDefault()}"
+                      @click="${() => this.selectSingleOption(option)}"
+                      @pointerenter="${() => (this.highlightedIndex = index)}"
+                    >
+                      <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>`
+                        : ""}
+                    </div>
+                  `
+                )}
+              </div>
+            `}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-select": RelSelect;
+  }
+}