@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,1416 +0,0 @@
-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";
-import { announce } from "../../utils/announce";
-
-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;
-  /** Virtual highlight on the Select-All header row (multi mode). */
-  @state() private selectAllHighlighted = false;
-
-  private typeaheadBuffer = "";
-  private typeaheadTimer: number | undefined;
-  @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-all-row.highlighted {
-      background: var(--rel-select-option-hover, var(--rel-bg-neutral-elevated-1));
-    }
-
-    .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() {
-    // Capture phase so a pointerdown that another component stops in its own
-    // capture listener (e.g. a rel-popover trigger) still closes this listbox.
-    document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
-    window.addEventListener("resize", this.updatePosition);
-    window.addEventListener("scroll", this.onPageScroll, true);
-  }
-
-  private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
-    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.selectAllHighlighted = false;
-    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];
-    announce(`${option.label} ${idx >= 0 ? "deselected" : "selected"}`);
-    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];
-    }
-    announce(status === "checked" ? "All options deselected" : "All options selected");
-    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);
-    const opt = this.normalizedOptions.find((o) => o.value === value);
-    announce(`${opt?.label ?? value} removed`);
-    this.emitChange();
-  }
-
-  private onTriggerClick() {
-    if (this.open) this.closeListbox();
-    else this.openListbox();
-  }
-
-  private onTriggerKeyDown(e: KeyboardEvent) {
-    if (this.state === "disabled") return;
-
-    // Chips render inside the trigger <button>, so their remove buttons can
-    // never be tab stops — Backspace/Delete is the keyboard path for
-    // removing the most recent selection (standard multi-combobox behavior).
-    if (
-      this.multiple &&
-      (e.key === "Backspace" || e.key === "Delete") &&
-      this.selectedValues.length > 0
-    ) {
-      e.preventDefault();
-      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
-      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;
-    const count = this.filteredOptions.length;
-    this.highlightedIndex = count > 0 ? 0 : -1;
-    this.selectAllHighlighted = false;
-    if (count === 0) {
-      announce(this.options.length === 0 ? "No options available" : "No matches found");
-    } else {
-      announce(`${count} option${count === 1 ? "" : "s"} available`);
-    }
-    requestAnimationFrame(() => this.updatePosition());
-  };
-
-  private onSearchKeyDown(e: KeyboardEvent) {
-    // Backspace in an empty search field removes the last chip (see
-    // onTriggerKeyDown for the rationale).
-    if (
-      this.multiple &&
-      e.key === "Backspace" &&
-      this.searchValue === "" &&
-      this.selectedValues.length > 0
-    ) {
-      this.removeChip(this.selectedValues[this.selectedValues.length - 1]);
-      return;
-    }
-    this.handleListNavigation(e);
-  }
-
-  private handleListNavigation(e: KeyboardEvent) {
-    const filtered = this.filteredOptions;
-    // The Select-All row participates in arrow navigation as a virtual row
-    // above the first option — it lives in the panel header, outside the
-    // option list, and would otherwise be keyboard-unreachable.
-    const hasSelectAll = this.multiple && filtered.length > 0;
-
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        if (this.selectAllHighlighted) {
-          this.selectAllHighlighted = false;
-          this.highlightedIndex = filtered.length > 0 ? 0 : -1;
-        } else if (this.highlightedIndex === -1 && hasSelectAll) {
-          this.selectAllHighlighted = true;
-        } else {
-          this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
-        }
-        this.scrollHighlightedIntoView();
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        if (!this.selectAllHighlighted && this.highlightedIndex <= 0 && hasSelectAll) {
-          this.highlightedIndex = -1;
-          this.selectAllHighlighted = true;
-        } else {
-          this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
-        }
-        this.scrollHighlightedIntoView();
-        break;
-      case "Home":
-        if (filtered.length === 0) break;
-        e.preventDefault();
-        this.selectAllHighlighted = false;
-        this.highlightedIndex = 0;
-        this.scrollHighlightedIntoView();
-        break;
-      case "End":
-        if (filtered.length === 0) break;
-        e.preventDefault();
-        this.selectAllHighlighted = false;
-        this.highlightedIndex = filtered.length - 1;
-        this.scrollHighlightedIntoView();
-        break;
-      case " ":
-        // With a search field, Space types into it; only the no-search mode
-        // (trigger holds focus) treats Space as toggle/select.
-        if (!this.noSearch) return;
-        e.preventDefault();
-        this.activateHighlighted();
-        break;
-      case "Enter":
-        e.preventDefault();
-        this.activateHighlighted();
-        break;
-      case "Escape":
-        e.preventDefault();
-        this.closeListbox();
-        break;
-      case "Tab":
-        this.closeListbox();
-        break;
-      default:
-        this.handleTypeahead(e);
-        break;
-    }
-  }
-
-  /** APG typeahead for the no-search mode (with a search field, typing
-   *  filters instead). Accumulates printable keys for 500 ms and jumps the
-   *  highlight to the next option whose label starts with the buffer. */
-  private handleTypeahead(e: KeyboardEvent) {
-    if (!this.noSearch) return;
-    if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
-
-    e.preventDefault();
-    const isNewQuery = this.typeaheadBuffer === "";
-    this.typeaheadBuffer += e.key.toLowerCase();
-    clearTimeout(this.typeaheadTimer);
-    this.typeaheadTimer = window.setTimeout(() => {
-      this.typeaheadBuffer = "";
-    }, 500);
-
-    const filtered = this.filteredOptions;
-    if (filtered.length === 0) return;
-
-    // A fresh single-letter query starts searching AFTER the highlight (so
-    // repeated presses cycle through matches); a growing buffer re-tests the
-    // current one first.
-    const start = Math.max(0, this.highlightedIndex) + (isNewQuery ? 1 : 0);
-    for (let offset = 0; offset < filtered.length; offset++) {
-      const idx = (start + offset) % filtered.length;
-      if (filtered[idx].label.toLowerCase().startsWith(this.typeaheadBuffer)) {
-        this.selectAllHighlighted = false;
-        this.highlightedIndex = idx;
-        this.scrollHighlightedIntoView();
-        return;
-      }
-    }
-  }
-
-  private activateHighlighted() {
-    if (this.selectAllHighlighted) {
-      this.toggleSelectAll();
-      return;
-    }
-    const filtered = this.filteredOptions;
-    if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
-      const opt = filtered[this.highlightedIndex];
-      if (this.multiple) this.toggleMultiOption(opt);
-      else this.selectSingleOption(opt);
-    }
-  }
-
-  private scrollHighlightedIntoView() {
-    if (this.highlightedIndex < 0) return;
-    requestAnimationFrame(() => {
-      this.renderRoot
-        .querySelector<HTMLElement>(`#${this.uniqueId}-option-${this.highlightedIndex}`)
-        ?.scrollIntoView({ block: "nearest" });
-    });
-  }
-
-  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.selectAllHighlighted
-      ? `${this.uniqueId}-select-all`
-      : this.highlightedIndex >= 0
-      ? `${this.uniqueId}-option-${this.highlightedIndex}`
-      : "";
-
-    const selectedSingle = opts.find((o) => o.value === this.selected);
-
-    const baseName = accessibleName || this.placeholder;
-    let triggerLabel = baseName;
-    if (this.multiple && this.selectedValues.length > 0) {
-      const labels = this.selectedValues.map((v) => opts.find((o) => o.value === v)?.label ?? v);
-      const shown = labels.slice(0, 3);
-      const more = labels.length - shown.length;
-      triggerLabel = `${baseName}, ${shown.join(", ")}${more > 0 ? `, plus ${more} more` : ""}`;
-    } else if (!this.multiple && selectedSingle) {
-      triggerLabel = `${baseName}, ${selectedSingle.label}`;
-    }
-
-    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="${this.noSearch ? activeOptionId : nothing}"
-            aria-invalid="${this.state === "error"}"
-            aria-label="${this.fieldAriaLabelledby ? nothing : triggerLabel}"
-            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"
-                        role="combobox"
-                        aria-expanded="${this.open}"
-                        aria-controls="${listboxId}"
-                        aria-activedescendant="${activeOptionId}"
-                        aria-label="${accessibleName || this.placeholder}"
-                        placeholder="${this.searchPlaceholder}"
-                        .value="${this.searchValue}"
-                        @input="${this.onSearchInput}"
-                        @keydown="${(e: KeyboardEvent) => this.onSearchKeyDown(e)}"
-                      />
-                    </div>
-                  </div>`
-                : ""}
-              ${this.multiple && filtered.length > 0
-                ? html`<div
-                    id="${this.uniqueId}-select-all"
-                    class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
-                    role="option"
-                    aria-selected="${this.selectAllStatus === "checked"}"
-                    aria-label="${this.selectAllLabel}"
-                    @pointerenter="${() => {
-                      this.selectAllHighlighted = true;
-                      this.highlightedIndex = -1;
-                    }}"
-                    @pointerleave="${() => (this.selectAllHighlighted = false)}"
-                    @mousedown="${(e: Event) => e.preventDefault()}"
-                    @click="${() => this.toggleSelectAll()}"
-                  >
-                    <rel-checkbox
-                      inert
-                      aria-hidden="true"
-                      label="${this.selectAllLabel}"
-                      status="${this.selectAllStatus}"
-                    ></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)}"
-                      aria-label="${option.label}"
-                      @pointerenter="${() => {
-                        this.highlightedIndex = index;
-                        this.selectAllHighlighted = false;
-                      }}"
-                      @mousedown="${(e: Event) => e.preventDefault()}"
-                      @click="${() => this.toggleMultiOption(option)}"
-                    >
-                      <rel-checkbox
-                        inert
-                        aria-hidden="true"
-                        label="${option.label}"
-                        icon="${option.icon}"
-                        supportingtext="${option.supportingText}"
-                        status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
-                      ></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;
-  }
-}