@reliability-design/web 1.4.0 → 1.4.2

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
 
 type CheckboxState = "default" | "error" | "disabled";
 type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
@@ -7,6 +8,8 @@ type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
 @customElement("rel-checkbox")
 export class RelCheckbox extends LitElement {
   @property({ type: String }) label = "Label";
+  /** rel-icon name rendered between the checkbox and the label (label prefix icon). */
+  @property({ type: String }) icon = "";
   @property({ type: String }) supportingtext = "";
   @property({ type: String }) state: CheckboxState = "default";
   @property({ type: String }) status: CheckboxStatus = "unchecked";
@@ -36,6 +39,14 @@ export class RelCheckbox extends LitElement {
     }
 
     .row {
+      /* Containing block for the hidden input below — without this the
+         absolutely-positioned input resolves against the document (or any
+         positioned ancestor in the consumer page), where it neither moves
+         with intermediate scroll containers nor stays aligned with the
+         visible box. Tabbing to it then makes the browser scroll the WRONG
+         scroller (often the window past a 100vh overflow-hidden shell),
+         shoving the whole page up and leaving it in a broken state. */
+      position: relative;
       display: flex;
       align-items: center;
       gap: var(--rel-spacing-xs);
@@ -44,6 +55,10 @@ export class RelCheckbox extends LitElement {
 
     input {
       position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
       opacity: 0;
       pointer-events: none;
     }
@@ -147,6 +162,21 @@ export class RelCheckbox extends LitElement {
       color: var(--rel-text-disabled);
     }
 
+    /* Optional label prefix icon — tracks the label's color in every state
+       (rel-icon inherits currentColor). */
+    .icon-prefix {
+      flex-shrink: 0;
+      color: var(--rel-text-default);
+    }
+
+    .default .row:hover .icon-prefix {
+      color: var(--rel-text-body);
+    }
+
+    .disabled .icon-prefix {
+      color: var(--rel-text-disabled);
+    }
+
     .label {
       /* Figma: label rests on text-default; text-body is the hover color */
       color: var(--rel-text-default);
@@ -226,6 +256,10 @@ export class RelCheckbox extends LitElement {
             </svg>
           </span>
 
+          ${this.icon
+            ? html`<rel-icon name="${this.icon}" size="md" class="icon-prefix"></rel-icon>`
+            : null}
+
           <span part="label" class="label">${this.label}</span>
         </label>
 

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

@@ -24,6 +24,10 @@ export class RelDrawer extends LitElement {
 
   @state() private isDragging = false;
   @state() private dragOffset = 0;
+  // Once a left/right drawer finishes sliding in, we drop its transform so that
+  // `position: fixed` descendants (select dropdowns, popovers, tooltips) are no
+  // longer trapped by the transformed panel's containing block.
+  @state() private settled = false;
 
   @query(".panel") private panelElement!: HTMLElement;
   @query(".overlay") private overlayElement!: HTMLElement;
@@ -49,10 +53,19 @@ export class RelDrawer extends LitElement {
       bottom: 0;
       z-index: 1000;
       pointer-events: none;
+      /* pointer-events:none only blocks the mouse — the closed drawer's
+         close button and slotted content would otherwise stay in the Tab
+         order and swallow keyboard focus into invisible off-screen UI.
+         visibility also removes them from the tab order; the transition
+         delays the flip to hidden until the close animation has played. */
+      visibility: hidden;
+      transition: visibility 0s linear var(--drawer-transition-duration);
     }
 
     .drawer-container.open {
       pointer-events: auto;
+      visibility: visible;
+      transition-delay: 0s;
     }
 
     /* Overlay */
@@ -130,6 +143,15 @@ export class RelDrawer extends LitElement {
       transform: translateX(0);
     }
 
+    /* Once settled open, drop the (now identity) transform on left/right panels
+       so their fixed-position descendants (select dropdowns, popovers, tooltips)
+       escape the transformed containing block instead of being clipped by the
+       panel. Bottom keeps its transform (used for centering). */
+    .drawer-container.open .panel[data-side="left"].settled,
+    .drawer-container.open .panel[data-side="right"].settled {
+      transform: none;
+    }
+
     /* Dragging state */
     .panel.dragging {
       transition: none;
@@ -183,36 +205,36 @@ export class RelDrawer extends LitElement {
       gap: var(--rel-spacing-sm);
     }
 
-    .title {
+    .title {
       color: var(--rel-text-label);
-      margin: 0;
+      margin: 0;
 
-      font-family: var(--rel-headings-lg-font-family);
+      font-family: var(--rel-headings-lg-font-family);
 
-      font-weight: var(--rel-headings-lg-font-weight);
+      font-weight: var(--rel-headings-lg-font-weight);
 
-      font-size: var(--rel-headings-lg-font-size);
+      font-size: var(--rel-headings-lg-font-size);
 
-      line-height: var(--rel-headings-lg-line-height);
+      line-height: var(--rel-headings-lg-line-height);
 
-      letter-spacing: var(--rel-headings-lg-letter-spacing);
+      letter-spacing: var(--rel-headings-lg-letter-spacing);
 
     }
 
-    .description {
+    .description {
       color: var(--rel-text-body);
       margin: 0;
-      opacity: 0.8;
+      opacity: 0.8;
 
-      font-family: var(--rel-body-lg-regular-font-family);
+      font-family: var(--rel-body-lg-regular-font-family);
 
-      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-weight: var(--rel-body-lg-regular-font-weight);
 
-      font-size: var(--rel-body-lg-regular-font-size);
+      font-size: var(--rel-body-lg-regular-font-size);
 
-      line-height: var(--rel-body-lg-regular-line-height);
+      line-height: var(--rel-body-lg-regular-line-height);
 
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
 
     }
 
@@ -320,6 +342,27 @@ export class RelDrawer extends LitElement {
 
     document.addEventListener("keydown", this.handleKeydown);
 
+    // After the slide-in transition completes, mark the panel settled so its
+    // transform is dropped (frees fixed-position dropdowns/popovers). A timeout
+    // backstops the case where transitionend doesn't fire.
+    this.settled = false;
+    this.updateComplete.then(() => {
+      const panel = this.panelElement;
+      if (!panel) return;
+      let done = false;
+      const settle = () => {
+        if (done) return;
+        done = true;
+        this.settled = true;
+        panel.removeEventListener("transitionend", onEnd);
+      };
+      const onEnd = (e: TransitionEvent) => {
+        if (e.propertyName === "transform") settle();
+      };
+      panel.addEventListener("transitionend", onEnd);
+      setTimeout(settle, 500);
+    });
+
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: true },
@@ -330,6 +373,7 @@ export class RelDrawer extends LitElement {
   }
 
   private handleClose() {
+    this.settled = false;
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
 
@@ -537,7 +581,7 @@ export class RelDrawer extends LitElement {
 
         <div
           part="panel"
-          class="panel ${this.isDragging ? "dragging" : ""}"
+          class="panel ${this.isDragging ? "dragging" : ""} ${this.settled ? "settled" : ""}"
           data-side="${this.side}"
           style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"

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

@@ -61,6 +61,16 @@ export class RelPopover extends LitElement {
       position: fixed;
       z-index: 1001;
       display: none;
+      /* Reset native [popover] UA styles (the wrapper is promoted to the
+         top layer so transformed ancestors — e.g. a centered rel-modal
+         panel — can't hijack its containing block or clip it). */
+      inset: auto;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: transparent;
+      overflow: visible;
+      color: inherit;
     }
 
     .content-wrapper[open] {
@@ -84,6 +94,7 @@ export class RelPopover extends LitElement {
     super.disconnectedCallback();
     this.removeEventListener("pointerdown", this.onHostPointerDown, true);
     this.removeGlobalListeners();
+    this.hideNativePopover();
   }
 
   firstUpdated() {
@@ -157,6 +168,7 @@ export class RelPopover extends LitElement {
       (document.activeElement as HTMLElement) ?? this.triggerEl;
 
     this.addGlobalListeners();
+    this.showNativePopover();
 
     requestAnimationFrame(() => {
       this.updatePosition();
@@ -166,9 +178,41 @@ export class RelPopover extends LitElement {
 
   private onClose() {
     this.removeGlobalListeners();
+    this.hideNativePopover();
     this.restoreFocus();
   }
 
+  /* =======================
+   * TOP LAYER (native Popover API)
+   *
+   * A transformed ancestor (e.g. rel-modal's centered panel with
+   * translate(-50%,-50%)) becomes the containing block for position:fixed
+   * descendants, breaking viewport-based coordinates and letting the
+   * panel's overflow:hidden clip the content. Promoting the wrapper to
+   * the browser top layer sidesteps both. `manual` keeps light-dismiss
+   * and Escape handling under this component's own control.
+   * ======================= */
+
+  private showNativePopover() {
+    const w = this.contentWrapper;
+    if (!w || typeof w.showPopover !== "function") return;
+    try {
+      if (!w.matches(":popover-open")) w.showPopover();
+    } catch {
+      /* older engines / detached element — fixed-position fallback applies */
+    }
+  }
+
+  private hideNativePopover() {
+    const w = this.contentWrapper;
+    if (!w || typeof w.hidePopover !== "function") return;
+    try {
+      if (w.matches(":popover-open")) w.hidePopover();
+    } catch {
+      /* already hidden or unsupported — nothing to do */
+    }
+  }
+
   /* =======================
    * GLOBAL LISTENERS
    * ======================= */
@@ -312,6 +356,17 @@ export class RelPopover extends LitElement {
     top = Math.max(8, Math.min(top, window.innerHeight - c.height - 8));
     left = Math.max(8, Math.min(left, window.innerWidth - c.width - 8));
 
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the wrapper away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    this.contentWrapper.style.top = `${top}px`;
+    this.contentWrapper.style.left = `${left}px`;
+    const applied = this.contentWrapper.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    this.contentWrapper.style.top = `${top}px`;
+    this.contentWrapper.style.left = `${left}px`;
+
     this.contentStyle = `top:${top}px;left:${left}px;`;
   };
 
@@ -344,6 +399,7 @@ export class RelPopover extends LitElement {
       <div
         id="${this.uniqueId}"
         class="content-wrapper"
+        popover="manual"
         style="${this.contentStyle}"
         ?open="${this.activeOpen}"
       >

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

@@ -76,6 +76,14 @@ export class RelRadio extends LitElement {
     }
 
     .radio-main {
+      /* Containing block for the hidden input below — without this the
+         absolutely-positioned input resolves against the document (or any
+         positioned ancestor in the consumer page), where it neither moves
+         with intermediate scroll containers nor stays aligned with the
+         visible radio. Tabbing to it then makes the browser scroll the
+         WRONG scroller, shoving the whole page up (same bug as
+         rel-checkbox — keep the two fixes in sync). */
+      position: relative;
       display: flex;
       align-items: center;
       gap: var(--rel-spacing-2xs);
@@ -83,6 +91,10 @@ export class RelRadio extends LitElement {
 
     input {
       position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
       opacity: 0;
       pointer-events: none;
     }

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

@@ -34,7 +34,7 @@ A custom combobox-style select component built on the same textfield visual lang
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `label` | `string` | `""` | Label text displayed above the select |
-| `options` | `string[]` | `[]` | Array of option values to display in dropdown |
+| `options` | `(string \| SelectOptionObject)[]` | `[]` | Options to display in the dropdown. Each entry is either a plain string or an object: `{ value, label?, supportingText?, icon? }`. `icon` is a `rel-icon` name rendered as a prefix (leading icon) on the menu item — before the label in single-select rows, and between the checkbox and label in multi-select rows |
 | `selected` | `string` | `""` | Currently selected option value |
 | `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the select |
 | `supportingText` | `string` | `""` | Helper or error text displayed below the select |
@@ -107,7 +107,9 @@ None exposed.
 - Icons (left/right) adjust internal padding automatically to accommodate icon space
 - The chevron is always visible on the far right and rotates 180° when the dropdown is open; a custom `rightIcon` replaces it entirely (no chevron) and does not rotate
 - In error state, supporting text is styled with error color for visual consistency; the error state automatically clears once a valid option is selected
-- Options array is rendered as-is; complex objects not supported (use string values only)
+- Options accept plain strings or `{ value, label?, supportingText?, icon? }` objects; string entries use the same text for value and label
+- In multi-select, selected chips stay on a single line: the number of visible chips adapts to the field's width and the rest collapse into a trailing "+N" chip (recomputed on selection changes and via `ResizeObserver` on resize). At least one chip is always shown. `max-visible-chips` is an optional additional hard cap (uncapped by default)
+- An option's `icon` renders only when set — options without one simply omit the prefix icon (no reserved empty space), and an unknown icon name logs a `rel-icon` console warning and renders nothing
 - Typed text that doesn't exactly match (case-insensitive) any option reverts to the last committed `selected` value on blur, Escape, or Tab
 - The ghost-text suggestion shows the remainder of the first option whose name starts with the typed text (case-insensitive); it has no effect on filtering, which matches substrings anywhere in an option
 - Dropdown panel is positioned via `position: fixed` and flips above the trigger if there isn't enough viewport space below

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

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