@reliability-design/web 1.2.0 → 1.3.1

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

@@ -1,346 +1,1015 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
-import "@reliability-design/icons/rel-icon";
-
-export type SelectState = "default" | "error" | "disabled";
-export type SelectSize = "small" | "medium" | "large";
-export type SelectBorder = "rounded" | "sharp";
-
-@customElement("rel-select")
-export class RelSelect extends LitElement {
-  @property({ type: String }) label: string = "";
-
-  @property({ type: Array }) options: string[] = [];
-
-  @property({ type: String }) selected: string = "";
-
-  @property({ type: String }) state: SelectState = "default";
-
-  @property({ type: String }) supportingText: string = "";
-
-  @property({ type: String }) size: SelectSize = "medium";
-
-  @property({ type: String }) border: SelectBorder = "rounded";
-
-  @property({ type: String }) leftIcon: string = "";
-
-  @property({ type: String }) rightIcon: string = "";
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--rel-fontFamilies-primary);
-      width: 100%;
-    }
-
-    .select-wrapper {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    .select-label {
-      font-size: var(--rel-fontSizes-sm);
-      margin-bottom: var(--rel-spacing-space-3xs);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-heading);
-    }
-
-    .select-container {
-      position: relative;
-      display: flex;
-      align-items: center;
-    }
-
-    .icon {
-      position: absolute;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      pointer-events: none;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 16px;
-      color: var(--rel-color-text-primary);
-    }
-
-    .icon.left {
-      left: 10px;
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .icon.right {
-      right: 36px;
-    }
-
-    .icon.chevron {
-      right: 12px;
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--rel-color-text-primary);
-    }
-
-    .select-error .icon.chevron {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    .select-disabled .icon.chevron {
-      color: var(--rel-color-text-disabled);
-    }
-
-    select {
-      flex: 1;
-      appearance: none;
-      border: 1px solid var(--rel-color-border-default);
-      background-color: var(--rel-color-bg-primary);
-      font-family: var(--rel-fontFamilies-primary);
-      cursor: pointer;
-      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
-      color: var(--rel-color-text-heading);
-      width: 100%;
-      outline: none;
-    }
-
-    select:hover:not(:disabled) {
-      border-color: var(--rel-color-text-primary);
-    }
-
-    select:focus-visible:not(:disabled) {
-      border-color: var(--rel-color-border-focus);
-      box-shadow: 0 0 0 2px var(--rel-color-border-focus);
-    }
-
-    /* States */
-    select.error {
-      border-color: var(--rel-error-surface-default, #D50000);
-      border-width: 2px;
-    }
-
-    select.error:focus {
-      box-shadow: 0 0 0 3px var(--rel-error-surface-light);
-    }
-
-    select:disabled {
-      background-color: var(--rel-color-bg-tertiary);
-      border-color: var(--rel-color-border-default);
-      color: var(--rel-color-text-disabled);
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    /* Sizes */
-    .select-small select {
-      font-size: var(--rel-fontSizes-xs);
-      padding: var(--rel-spacing-space-3xs) 36px
-        var(--rel-spacing-space-3xs) var(--rel-spacing-space-2xs);
-    }
-
-    .select-medium select {
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-2xs) 40px
-        var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
-    }
-
-    .select-large select {
-      font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) 44px
-        var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-    }
-
-    /* With icons */
-    .with-left-icon.select-small select {
-      padding-left: var(--rel-spacing-space-xl);
-    }
-
-    .with-left-icon.select-medium select {
-      padding-left: var(--rel-spacing-space-2xl);
-    }
-
-    .with-left-icon.select-large select {
-      padding-left: var(--rel-spacing-space-3xl);
-    }
-
-    .with-right-icon.select-small select {
-      padding-right: var(--rel-spacing-space-2xl);
-    }
-
-    .with-right-icon.select-medium select {
-      padding-right: var(--rel-spacing-space-3xl);
-    }
-
-    .with-right-icon.select-large select {
-      padding-right: 4rem;
-    }
-
-    /* Border */
-    .border-rounded select {
-      border-radius: var(--rel-borders-radius-border-radius-100);
-    }
-
-    .border-sharp select {
-      border-radius: 0;
-    }
-
-    /* Supporting text */
-    .supporting-text {
-      font-size: var(--rel-fontSizes-xs);
-      margin-top: var(--rel-spacing-space-3xs);
-      color: var(--rel-color-text-placeholder);
-    }
-
-    .error-text {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    .select-error .select-label {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    /* Dark mode — flip select background, text, border */
-    :host-context([data-theme="dark"]) select,
-    :host-context(.dark) select {
-      background-color: var(--rel-color-bg-secondary);
-      color: #ffffff;
-      border-color: var(--rel-color-border-default);
-    }
-
-    :host-context([data-theme="dark"]) select.error,
-    :host-context(.dark) select.error {
-      border-color: var(--rel-error-surface-default, #FF5252);
-      border-width: 2px;
-    }
-
-    /* Error — placeholder text red */
-    select.error::placeholder {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    /* Error — selected/placeholder option text red */
-    .select-error select {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    /* Error — icon red */
-    .select-error .icon,
-    .select-error rel-icon {
-      color: var(--rel-error-surface-default, #D50000);
-    }
-
-    :host-context([data-theme="dark"]) .select-error select,
-    :host-context(.dark) .select-error select {
-      color: var(--rel-error-surface-default, #FF5252);
-    }
-
-    :host-context([data-theme="dark"]) .select-error .icon,
-    :host-context([data-theme="dark"]) .select-error rel-icon,
-    :host-context(.dark) .select-error .icon,
-    :host-context(.dark) .select-error rel-icon {
-      color: var(--rel-error-surface-default, #FF5252);
-    }
-
-    /* Disabled label */
-    .select-disabled .select-label {
-      color: var(--rel-color-text-disabled);
-      cursor: not-allowed;
-      user-select: none;
-    }
-
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    const leftIcon = this.getAttribute('left-icon');
-    if (leftIcon) this.leftIcon = leftIcon;
-    const rightIcon = this.getAttribute('right-icon');
-    if (rightIcon) this.rightIcon = rightIcon;
-  }
-
-  private onChange(event: Event) {
-    const value = (event.target as HTMLSelectElement).value;
-    this.selected = value;
-    this.dispatchEvent(
-      new CustomEvent("changed", {
-        detail: { value },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    const containerClasses = [
-      "select-container",
-      this.leftIcon ? "with-left-icon" : "",
-      this.rightIcon ? "with-right-icon" : "",
-      `select-${this.size}`,
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const wrapperClasses = [
-      "select-wrapper",
-      `select-${this.state}`,
-      `border-${this.border}`,
-    ].join(" ");
-
-    const selectClasses = [this.state === "error" ? "error" : ""]
-      .filter(Boolean)
-      .join(" ");
-
-    const isDisabled = this.state === "disabled";
-
-    return html`
-      <div class="${wrapperClasses}">
-        ${this.label
-          ? html`<label class="select-label">${this.label}</label>`
-          : ""}
-
-        <div class="${containerClasses}">
-          ${this.leftIcon
-            ? html`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>`
-            : ""}
-
-          <select
-            class="${selectClasses}"
-            ?disabled="${isDisabled}"
-            @change="${this.onChange}"
-            .value="${this.selected}">
-            <option value="" disabled ?selected="${!this.selected}" hidden>
-              Select Option
-            </option>
-            ${this.options.map(
-              (option) => html`
-                <option value="${option}" ?selected="${option === this.selected}">
-                  ${option}
-                </option>
-              `
-            )}
-          </select>
-
-          ${this.rightIcon
-            ? html`<span class="icon right">${this.rightIcon}</span>`
-            : ""}
-
-          <rel-icon name="chevron-down" size="sm" class="icon chevron"></rel-icon>
-        </div>
-
-        ${this.supportingText
-          ? html`
-              <span
-                class="supporting-text ${this.state === "error"
-                  ? "error-text"
-                  : ""}">
-                ${this.supportingText}
-              </span>
-            `
-          : ""}
-      </div>
-    `;
-  }
-}
+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 "../../styles/vars-v2.css";
+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;
+}
+export type SelectOption = string | SelectOptionObject;
+
+interface NormalizedOption {
+  value: string;
+  label: string;
+  supportingText: string;
+}
+
+function normalizeOption(o: SelectOption): NormalizedOption {
+  if (typeof o === "string") return { value: o, label: o, supportingText: "" };
+  return { value: o.value, label: o.label ?? o.value, supportingText: o.supportingText ?? "" };
+}
+
+@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";
+
+  /** Max selected chips shown before collapsing the rest into a "+N" badge. */
+  @property({ type: Number, attribute: "max-visible-chips" }) maxVisibleChips: number = 3;
+
+  // 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";
+
+  @query(".select-trigger") private triggerEl!: HTMLButtonElement;
+  @query(".search-input") private searchInputEl!: HTMLInputElement;
+  @query(".select-listbox") private listboxEl!: HTMLDivElement;
+
+  private uniqueId = `select-${Math.random().toString(36).slice(2)}`;
+
+  static styles = css`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      width: 100%;
+    }
+
+    .select-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-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 {
+      font-size: var(--rel-fontSizes-sm, 14px);
+      font-weight: var(--rel-fontWeights-regular, 400);
+      color: var(--rel-select-label-color, #363636);
+    }
+
+    /* 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, #ffffff);
+      border: 1px solid var(--rel-select-border-default, #e5e5e5);
+      cursor: pointer;
+      font-family: inherit;
+      transition: border-color 0.15s ease;
+      text-align: left;
+    }
+
+    .border-rounded .select-trigger {
+      border-radius: var(--rel-select-radius, 4px);
+    }
+
+    .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, #0b0b0b);
+    }
+
+    .select-wrapper.error .select-trigger {
+      border-color: var(--rel-select-border-error, #ce3131);
+    }
+
+    .select-wrapper.disabled .select-trigger {
+      cursor: not-allowed;
+      background: var(--rel-select-bg-disabled, #fafafa);
+      border-color: var(--rel-select-border-default, #e5e5e5);
+    }
+
+    /* Sizes */
+    .select-wrapper.small .select-trigger {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      min-height: 40px;
+      font-size: var(--rel-fontSizes-sm, 14px);
+    }
+
+    .select-wrapper.medium .select-trigger {
+      padding: 12px;
+      min-height: 48px;
+      font-size: var(--rel-fontSizes-md, 16px);
+    }
+
+    .select-wrapper.large .select-trigger {
+      padding: var(--rel-spacing-space-md);
+      min-height: 56px;
+      font-size: var(--rel-fontSizes-lg, 18px);
+    }
+
+    /* Icons */
+    .select-trigger .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, #0b0b0b);
+    }
+
+    .select-trigger .icon.chevron {
+      transition: transform 0.15s ease;
+    }
+
+    .select-wrapper.open .icon.chevron {
+      transform: rotate(180deg);
+    }
+
+    .select-wrapper.disabled .icon {
+      color: var(--rel-color-text-disabled, #a3a3a3);
+    }
+
+    /* Value area */
+    .select-value {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      color: var(--rel-select-value-color, #0b0b0b);
+      overflow: hidden;
+    }
+
+    .select-value.placeholder {
+      color: var(--rel-select-placeholder-color, #757575);
+    }
+
+    .select-wrapper.disabled .select-value.placeholder {
+      color: var(--rel-select-placeholder-disabled-color, #7d7d7d);
+    }
+
+    .select-value-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .select-chips {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    /* 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, #ffffff);
+      padding: 0 4px;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-weight: 400;
+      line-height: 1;
+      color: var(--rel-select-placeholder-color, #757575);
+      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;
+    }
+
+    .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: 12px;
+      color: var(--rel-select-label-color, #363636);
+    }
+
+    /* 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 {
+      font-size: 13px;
+      color: var(--rel-select-supporting-color, #404040);
+    }
+
+    .select-support.error {
+      color: var(--rel-select-border-error, #ce3131);
+    }
+
+    /* ── Dropdown listbox ── */
+    .select-listbox {
+      position: fixed;
+      z-index: 1001;
+      display: none;
+      box-sizing: border-box;
+      background: var(--rel-select-bg, #ffffff);
+      border: 1px solid var(--rel-select-menu-border, #d4d4d4);
+      border-radius: var(--rel-select-menu-radius, 8px);
+      /* 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, 0 8px 24px rgba(11, 11, 11, 0.18));
+      max-height: 360px;
+      overflow-y: auto;
+    }
+
+    .select-listbox[data-open] {
+      display: block;
+    }
+
+    .select-search {
+      position: sticky;
+      top: 0;
+      background: var(--rel-select-bg, #ffffff);
+      padding: var(--rel-spacing-space-xs);
+      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+    }
+
+    /* 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, #e5e5e5);
+      border-radius: 4px;
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+
+    .search-input-wrap .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, #0b0b0b);
+    }
+
+    .search-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-select-value-color, #0b0b0b);
+    }
+
+    .search-input::placeholder {
+      color: var(--rel-select-placeholder-color, #757575);
+    }
+
+    :host([size="large"]) .search-input-wrap {
+      padding: 12px;
+    }
+
+    :host([size="large"]) .search-input {
+      font-size: var(--rel-fontSizes-md, 16px);
+    }
+
+    .select-options {
+      padding: 4px 0;
+    }
+
+    .select-option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: var(--rel-spacing-space-xs) 12px;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-select-value-color, #0b0b0b);
+      cursor: pointer;
+    }
+
+    .select-option-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .select-option-check {
+      flex-shrink: 0;
+      color: var(--rel-select-value-color, #0b0b0b);
+    }
+
+    .select-option:hover,
+    .select-option.highlighted {
+      background: var(--rel-select-option-hover, #ececec);
+    }
+
+    .select-option[aria-selected="true"] {
+      font-weight: var(--rel-fontWeights-medium);
+    }
+
+    .checkbox-option {
+      padding: 12px;
+    }
+
+    .checkbox-option:hover,
+    .checkbox-option.highlighted {
+      background: var(--rel-select-option-hover, #ececec);
+    }
+
+    .select-all-row {
+      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+      padding: 12px;
+    }
+
+    .select-empty {
+      padding: var(--rel-spacing-space-xs) 12px;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-select-placeholder-color, #757575);
+    }
+
+    /* Dark mode */
+    /* No :not(.error) needed here — error no longer recolors label/floating
+       label, so there's nothing left for these to compete with. */
+    :host-context([data-theme="dark"]) .select-label,
+    [data-theme="dark"] .select-label {
+      color: var(--rel-select-label-color-dark, #f5f5f5);
+    }
+
+    /* :not(.error) — supporting text IS still red on error, and this rule's
+       extra :host-context specificity would otherwise outrank the
+       theme-agnostic .select-support.error rule. */
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-support,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-support {
+      color: var(--rel-select-supporting-color-dark, #b3b3b3);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper.focused .floating-label,
+    [data-theme="dark"] .select-wrapper.focused .floating-label,
+    :host-context([data-theme="dark"]) .select-wrapper.has-value .floating-label,
+    [data-theme="dark"] .select-wrapper.has-value .floating-label,
+    :host-context([data-theme="dark"]) .select-wrapper.open .floating-label,
+    [data-theme="dark"] .select-wrapper.open .floating-label {
+      color: var(--rel-select-label-color-dark, #f5f5f5);
+    }
+
+    /* Background only here — kept unconditional so error-state triggers
+       still get the right dark background. border-color is split into its
+       own :not(.error) rule below: this rule's specificity (with the extra
+       :host-context) ties or beats the theme-agnostic error-border rule, and
+       since it's declared later in the file, an unconditional border-color
+       here would win the tie and show the default dark border instead of red
+       — regardless of open/focus state, i.e. even at rest. */
+    :host-context([data-theme="dark"]) .select-trigger,
+    [data-theme="dark"] .select-trigger,
+    :host-context([data-theme="dark"]) .floating-label,
+    [data-theme="dark"] .floating-label {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger {
+      border-color: var(--rel-select-border-default-dark, #333333);
+    }
+
+    /* Own border token, a touch lighter than the trigger's — a shadow alone
+       barely registers on a dark background, so the panel leans more on this
+       border to separate itself from the page behind it. */
+    :host-context([data-theme="dark"]) .select-listbox,
+    [data-theme="dark"] .select-listbox {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+      border-color: var(--rel-select-menu-border-dark, #454545);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper.disabled .select-trigger,
+    [data-theme="dark"] .select-wrapper.disabled .select-trigger {
+      background: var(--rel-select-bg-disabled-dark, #141414);
+    }
+
+    /* :not(.error): same trap as the label rules — this rule's extra
+       :host-context specificity would otherwise outrank the theme-agnostic
+       .select-wrapper.error .select-trigger rule and show the focus-white
+       border instead of error-red the moment an error field is opened. */
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error).open .select-trigger,
+    [data-theme="dark"] .select-wrapper:not(.error).open .select-trigger,
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger:focus-visible,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger:focus-visible {
+      border-color: var(--rel-select-border-focus-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .select-value,
+    [data-theme="dark"] .select-value,
+    :host-context([data-theme="dark"]) .search-input,
+    [data-theme="dark"] .search-input,
+    :host-context([data-theme="dark"]) .select-option,
+    [data-theme="dark"] .select-option,
+    :host-context([data-theme="dark"]) .select-option-check,
+    [data-theme="dark"] .select-option-check,
+    :host-context([data-theme="dark"]) .icon,
+    [data-theme="dark"] .icon {
+      color: var(--rel-select-value-color-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .select-option:hover,
+    [data-theme="dark"] .select-option:hover,
+    :host-context([data-theme="dark"]) .select-option.highlighted,
+    [data-theme="dark"] .select-option.highlighted,
+    :host-context([data-theme="dark"]) .checkbox-option:hover,
+    [data-theme="dark"] .checkbox-option:hover,
+    :host-context([data-theme="dark"]) .checkbox-option.highlighted,
+    [data-theme="dark"] .checkbox-option.highlighted {
+      background: var(--rel-select-option-hover-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-search,
+    [data-theme="dark"] .select-search {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+      border-color: var(--rel-select-divider-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-all-row,
+    [data-theme="dark"] .select-all-row {
+      border-color: var(--rel-select-divider-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-value.placeholder,
+    [data-theme="dark"] .select-value.placeholder,
+    :host-context([data-theme="dark"]) .floating-label,
+    [data-theme="dark"] .floating-label,
+    :host-context([data-theme="dark"]) .search-input::placeholder,
+    [data-theme="dark"] .search-input::placeholder,
+    :host-context([data-theme="dark"]) .select-empty,
+    [data-theme="dark"] .select-empty {
+      color: var(--rel-select-placeholder-color-dark, #a3a3a3);
+    }
+
+    :host-context([data-theme="dark"]) .search-input-wrap,
+    [data-theme="dark"] .search-input-wrap {
+      border-color: var(--rel-select-search-border-dark, #333333);
+    }
+  `;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeGlobalListeners();
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("multiple") && this.multiple === false) {
+      this.selectedValues = [];
+    }
+  }
+
+  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, 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>
+    `;
+  }
+
+  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 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"
+            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 class="select-value">${this.renderChips()}</span>`
+                : html`<span class="select-value placeholder">
+                    <span class="select-value-text">${this.placeholder}</span>
+                  </span>`
+              : html`<span 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>
+        </div>
+
+        ${this.supportingText
+          ? html`<span class="select-support ${this.state === "error" ? "error" : ""}">
+              ${this.supportingText}
+            </span>`
+          : ""}
+      </div>
+
+      <div
+        id="${listboxId}"
+        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
+                  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}"
+                        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}"
+                      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-label">${option.label}</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;
+  }
+}