@rcarls/rc-select 0.1.0

package/dist/rc-select-BumY2uQl.js

@@ -0,0 +1,600 @@
+import { css as v, LitElement as f, nothing as _, html as c } from "lit";
+import { property as n, query as h, state as p } from "lit/decorators.js";
+import { ActiveDescendantController as b, AnchorController as m } from "@rcarls/rc-common";
+const g = v`
+  :host {
+    display: inline-block;
+  }
+
+  #anchor {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--rc-select-gap, var(--rc-control-gap, 0.25em));
+  }
+
+  #trigger {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--rc-select-gap, var(--rc-control-gap, 0.25em));
+    min-block-size: var(--rc-select-control-block-size, var(--rc-control-block-size, auto));
+    padding: var(--rc-select-padding-block, var(--rc-control-padding-block, 0.25em))
+      var(--rc-select-padding-inline, var(--rc-control-padding-inline, 0.5em));
+    min-width: 8em;
+    cursor: default;
+    user-select: none;
+    border: var(--rc-select-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-select-radius, var(--rc-control-radius, var(--rc-radius-sm, 0.125em)));
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    font-family: var(--rc-font-family, inherit);
+    font-size: var(--rc-font-size, inherit);
+    line-height: var(--rc-line-height, normal);
+    transition:
+      background-color var(--rc-motion-duration, 120ms),
+      border-color var(--rc-motion-duration, 120ms),
+      box-shadow var(--rc-motion-duration, 120ms);
+
+    /* Keyboard focus indicator */
+    outline: none;
+    &:focus-visible {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  [part='value-display'] {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part='toggle-icon'] {
+    flex-shrink: 0;
+    font-size: 0.75em;
+  }
+
+  /* Chips — the whole chip is the remove button for a larger touch target */
+  [part='chip'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rc-select-chip-gap, calc(var(--rc-control-gap, 0.25em) * 0.8));
+    padding: var(--rc-select-chip-padding-block, 0.1em)
+      var(--rc-select-chip-padding-inline, 0.3em);
+    border: var(--rc-select-chip-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-select-chip-radius, var(--rc-radius-md, 0.25em));
+    background: var(--rc-button-bg, ButtonFace);
+    color: var(--rc-button-text, ButtonText);
+    font: inherit;
+    font-size: 0.875em;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--rc-highlight, Highlight);
+      color: var(--rc-highlight-text, HighlightText);
+    }
+
+    &:focus-visible {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  /* Decorative × icon inside the chip — no interaction, aria-hidden */
+  [part='chip-remove'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    font-size: 0.85em;
+    pointer-events: none;
+  }
+
+  /* Hidden native select slot */
+  slot[name='select'] {
+    display: none;
+  }
+
+  /* Listbox popup — positioned by AnchorController via adoptedStyleSheets */
+  rc-listbox {
+    max-height: var(--rc-select-max-height, 20em);
+    overflow-y: auto;
+    background: var(--rc-surface, Canvas);
+    border: var(--rc-select-listbox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-select-listbox-radius, var(--rc-control-radius, 0));
+    box-shadow: var(--rc-select-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));
+    color: var(--rc-field-text, FieldText);
+    padding-block: var(--rc-select-listbox-padding-block, var(--rc-control-padding-block, 0.25em));
+
+    &:not(:popover-open) {
+      display: none;
+    }
+  }
+
+  /* Options within the listbox */
+  rc-listbox [part~='option'] {
+    display: flex;
+    align-items: center;
+    gap: var(--rc-item-gap, 0.4em);
+    padding: var(--rc-item-padding-block, 0.3em) var(--rc-item-padding-inline, 0.75em);
+    cursor: default;
+
+    /* display: flex overrides [hidden]'s browser-default display:none — restore it explicitly */
+    &[hidden] { display: none; }
+
+    &:not([hidden]):not([aria-disabled='true']):hover {
+      background: var(--rc-highlight, Highlight);
+      color: var(--rc-highlight-text, HighlightText);
+    }
+
+    &[data-active]:not([aria-disabled='true']) {
+      background: var(--rc-highlight, Highlight);
+      color: var(--rc-highlight-text, HighlightText);
+      outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));
+      outline-offset: -2px;
+    }
+
+    &[aria-disabled='true'] {
+      opacity: var(--rc-disabled-opacity, 0.5);
+      cursor: not-allowed;
+    }
+  }
+
+  /* Selection checkmark — reserves space whether visible or not */
+  rc-listbox [part~='option-checkmark'] {
+    flex-shrink: 0;
+    width: 1em;
+    text-align: center;
+    font-size: 0.85em;
+    visibility: hidden;
+  }
+
+  rc-listbox [part~='option'][aria-selected='true'] [part~='option-checkmark'] {
+    visibility: visible;
+  }
+
+  rc-listbox [part~='create-option'] {
+    font-style: italic;
+    border-top: 1px solid var(--rc-border-color, ButtonBorder);
+    margin-top: 0.25em;
+    padding-top: 0.3em;
+  }
+`;
+var y = Object.defineProperty, a = (u, e, t, i) => {
+  for (var s = void 0, r = u.length - 1, l; r >= 0; r--)
+    (l = u[r]) && (s = l(e, t, s) || s);
+  return s && y(e, t, s), s;
+};
+const d = class d extends f {
+  constructor() {
+    super(...arguments), this.open = !1, this.multiple = !1, this.disabled = !1, this.placeholder = "", this.display = "auto", this._selectedValues = /* @__PURE__ */ new Set(), this._chipNavIndex = -1, this._options = [], this._selectRef = null, this._mutationObserver = null, this._selectionInitialized = !1, this._typeAheadBuffer = "", this._typeAheadTimer = 0, this._adc = new b(this, {
+      host: () => this._$trigger ?? null,
+      items: () => this._$listbox?.navigableItems ?? []
+    }), this._anchorCtrl = new m(this, {
+      anchor: () => this._$anchor ?? null,
+      floating: () => this._$listbox ?? null,
+      shadowHost: () => this,
+      placement: "bottom-start",
+      offset: 2
+    }), this._onDocClick = (e) => {
+      this.open && (e.composedPath().includes(this) || this.closePopup(!1));
+    }, this._onDocKeyDown = (e) => {
+      this.open && e.key === "Escape" && (e.preventDefault(), this.closePopup());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._onDocClick, { capture: !0 }), document.addEventListener("keydown", this._onDocKeyDown, { capture: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocClick, { capture: !0 }), document.removeEventListener("keydown", this._onDocKeyDown, {
+      capture: !0
+    }), this._mutationObserver?.disconnect();
+  }
+  // ── Popup ────────────────────────────────────────────────────────────────────
+  openPopup() {
+    this.open || this.disabled || (this.open = !0, this._$listbox.showPopover(), this._anchorCtrl.update(), this.dispatchEvent(
+      new CustomEvent("rc-select-open", { bubbles: !0, composed: !0 })
+    ), this.requestUpdate());
+  }
+  closePopup(e = !0) {
+    this.open && (this.open = !1, this._$listbox.hidePopover(), this._adc.clear(), e && this._$trigger?.focus(), this.dispatchEvent(
+      new CustomEvent("rc-select-close", { bubbles: !0, composed: !0 })
+    ));
+  }
+  /**
+   * Current selection. Host writes update selection silently; user interaction
+   * emits `rc-select-change`.
+   */
+  get value() {
+    return this.multiple ? this.selectedValues : this.selectedValues[0] ?? "";
+  }
+  set value(e) {
+    const t = this._value;
+    if (this._value = e, e === void 0) {
+      this.requestUpdate("value", t);
+      return;
+    }
+    this._selectionInitialized = !0, this._applySelection(this._normalizeValue(e)), this.requestUpdate("value", t);
+  }
+  /** Initial uncontrolled selection, applied before user or native state owns the value. */
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  set defaultValue(e) {
+    const t = this._defaultValue;
+    this._defaultValue = e, !this._selectionInitialized && this._value === void 0 && e !== void 0 && this._applySelection(this._normalizeValue(e)), this.requestUpdate("defaultValue", t);
+  }
+  /** Programmatic option source. Omit to derive options from the slotted `<select>`. */
+  get options() {
+    return this._propertyOptions ? [...this._propertyOptions] : void 0;
+  }
+  set options(e) {
+    const t = this._propertyOptions;
+    this._propertyOptions = e ? [...e] : void 0, this._syncOptions(this._currentOptions()), this._mirrorOptionsToNativeSelect(), this.requestUpdate("options", t);
+  }
+  /** Selected values as a consistently-array-shaped convenience getter. */
+  get selectedValues() {
+    return [...this._selectedValues];
+  }
+  get selectedOptions() {
+    return this._selectedOptionsFor(this.selectedValues);
+  }
+  _applySelection(e) {
+    const t = this.multiple ? e : e.slice(0, 1);
+    this._selectedValues = new Set(t), this._$listbox?.setSelectedValues(t), this._syncNativeSelect(), this.requestUpdate();
+  }
+  // ── Slot: native <select> ────────────────────────────────────────────────────
+  _handleSelectSlotChange(e) {
+    const i = e.target.assignedElements().find(
+      (s) => s instanceof HTMLSelectElement
+    ) ?? null;
+    this._mutationObserver?.disconnect(), this._mutationObserver = null, this._selectRef = i ? new WeakRef(i) : null, i && queueMicrotask(() => {
+      i.isConnected && (this.multiple = i.multiple, this.disabled = i.disabled, this._syncOptionsFromSelect(i), this._mutationObserver = new MutationObserver(() => {
+        const s = this._selectRef?.deref();
+        if (s) {
+          if (this.multiple = s.multiple, this.disabled = s.disabled, this._propertyOptions !== void 0) {
+            this._applySelectionFromCurrentSource();
+            return;
+          }
+          this._syncOptionsFromSelect(s);
+        }
+      }), this._mutationObserver.observe(i, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0
+      }), this._syncAccessibleName(i));
+    });
+  }
+  _syncOptionsFromSelect(e) {
+    if (this._propertyOptions !== void 0) {
+      this._syncOptions(this._propertyOptions), this._mirrorOptionsToNativeSelect(), this._applySelectionFromCurrentSource();
+      return;
+    }
+    const t = this._optionsFromSelect(e);
+    this._syncOptions(t), this._applySelectionFromCurrentSource(), this._syncAccessibleName(e);
+  }
+  _applySelectionFromCurrentSource() {
+    if (this._value !== void 0) {
+      this._applySelection(this._normalizeValue(this._value));
+      return;
+    }
+    if (!this._selectionInitialized && this._defaultValue !== void 0) {
+      this._selectionInitialized = !0, this._applySelection(this._normalizeValue(this._defaultValue));
+      return;
+    }
+    const e = this._selectionInitialized ? this._selectedValuesFromNativeSelect() : this._defaultSelectedValuesFromNativeSelect();
+    this._selectionInitialized = !0, this._applySelection(e);
+  }
+  _syncOptions(e) {
+    this._options = [...e], this._$listbox && (this._$listbox.options = this._options);
+  }
+  _currentOptions() {
+    if (this._propertyOptions !== void 0) return this._propertyOptions;
+    const e = this._selectRef?.deref();
+    return e ? this._optionsFromSelect(e) : [];
+  }
+  _optionsFromSelect(e) {
+    const t = [];
+    for (const i of e.options)
+      i.value && t.push({
+        value: i.value,
+        label: i.text,
+        disabled: i.disabled
+      });
+    return t;
+  }
+  _selectedValuesFromNativeSelect() {
+    const e = this._selectRef?.deref();
+    return e ? Array.from(e.selectedOptions).map((t) => t.value).filter(Boolean) : this.selectedValues;
+  }
+  _defaultSelectedValuesFromNativeSelect() {
+    const e = this._selectRef?.deref();
+    return e ? Array.from(e.options).filter((t) => t.defaultSelected).map((t) => t.value).filter(Boolean) : this.selectedValues;
+  }
+  _mirrorOptionsToNativeSelect() {
+    const e = this._selectRef?.deref();
+    if (!(!e || this._propertyOptions === void 0)) {
+      this._mutationObserver?.disconnect(), e.replaceChildren();
+      for (const t of this._propertyOptions) {
+        const i = document.createElement("option");
+        i.value = t.value, i.text = t.label, i.disabled = t.disabled ?? !1, i.selected = this._selectedValues.has(t.value), e.add(i);
+      }
+      this._mutationObserver?.observe(e, {
+        childList: !0,
+        subtree: !0,
+        attributes: !0
+      });
+    }
+  }
+  _addOption(e) {
+    const t = this._options.some((r) => r.value === e.value) ? this._options.map((r) => r.value === e.value ? e : r) : [...this._options, e];
+    this._propertyOptions !== void 0 && (this._propertyOptions = t), this._syncOptions(t);
+    const i = this._selectRef?.deref();
+    if (!i || Array.from(i.options).some((r) => r.value === e.value)) return;
+    const s = document.createElement("option");
+    s.value = e.value, s.text = e.label, s.disabled = e.disabled ?? !1, s.selected = this._selectedValues.has(e.value), i.add(s);
+  }
+  _normalizeValue(e) {
+    return Array.isArray(e) ? e : e ? [e] : [];
+  }
+  _syncAccessibleName(e) {
+    if (!this._$trigger || this._$trigger.hasAttribute("aria-label")) return;
+    const t = e.getAttribute("aria-label") ?? e.labels?.[0]?.textContent?.trim() ?? null;
+    t ? this._$trigger.setAttribute("aria-label", t) : this._$trigger.removeAttribute("aria-label");
+  }
+  // ── Selection ────────────────────────────────────────────────────────────────
+  _handleListboxChange(e) {
+    const { optionValue: t, value: i, selected: s } = e.detail, r = t ?? (Array.isArray(i) ? i.at(-1) : i);
+    if (r) {
+      if (e.stopPropagation(), this.multiple) {
+        const l = new Set(this._selectedValues);
+        s ? l.add(r) : l.delete(r), this._selectedValues = l;
+      } else
+        this._selectedValues = s ? /* @__PURE__ */ new Set([r]) : /* @__PURE__ */ new Set(), s && this.closePopup();
+      this._selectionInitialized = !0, this._syncNativeSelect(), this._$listbox.setSelectedValues(this.selectedValues), this._dispatchChange();
+    }
+  }
+  _removeValue(e) {
+    const t = new Set(this._selectedValues);
+    t.delete(e), this._selectedValues = t, this._$listbox.setSelectedValues([...t]), this._selectionInitialized = !0, this._syncNativeSelect(), this._dispatchChange();
+  }
+  _syncNativeSelect() {
+    const e = this._selectRef?.deref();
+    if (e)
+      for (const t of e.options)
+        t.selected = this._selectedValues.has(t.value);
+  }
+  _dispatchChange() {
+    this.dispatchEvent(
+      new CustomEvent("rc-select-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.value,
+          selectedValues: this.selectedValues,
+          selectedOptions: this.selectedOptions
+        }
+      })
+    );
+  }
+  _selectedOptionsFor(e) {
+    return e.map((t) => this._options.find((i) => i.value === t) ?? {
+      value: t,
+      label: t
+    });
+  }
+  // ── Display helpers ──────────────────────────────────────────────────────────
+  get _effectiveDisplay() {
+    return this.display === "chips" ? "chips" : this.display === "compact" || window.matchMedia("(pointer: coarse)").matches ? "compact" : "chips";
+  }
+  _labelFor(e) {
+    const t = this._selectRef?.deref();
+    if (t) {
+      for (const i of t.options)
+        if (i.value === e) return i.text;
+    }
+    return e;
+  }
+  get _displayLabel() {
+    if (this._selectedValues.size === 0) return this.placeholder;
+    if (this._effectiveDisplay === "chips" && this.multiple)
+      return this.placeholder;
+    if (this._selectedValues.size === 1)
+      return this._labelFor([...this._selectedValues][0]);
+    const e = [...this._selectedValues];
+    return `${this._labelFor(e[0])}, +${e.length - 1} more`;
+  }
+  // ── Keyboard: trigger ────────────────────────────────────────────────────────
+  _handleTriggerKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), this.open ? this._adc.navigate(1) : (this.openPopup(), this._adc.navigateToFirst());
+        break;
+      case "ArrowUp":
+        e.preventDefault(), this.open ? this._adc.navigate(-1) : (this.openPopup(), this._adc.navigateToLast());
+        break;
+      case "Home":
+        this.open && (e.preventDefault(), this._adc.navigateToFirst());
+        break;
+      case "End":
+        this.open && (e.preventDefault(), this._adc.navigateToLast());
+        break;
+      case " ":
+      case "Enter":
+        e.preventDefault(), this.open ? this._activateActive() : (this.openPopup(), this._adc.navigateToFirst());
+        break;
+      case "Tab":
+        this.open && this.closePopup(!1);
+        break;
+      case "ArrowLeft":
+        !this.open && this.multiple && this._selectedValues.size > 0 && (e.preventDefault(), this._enterChipNav());
+        break;
+      default:
+        e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && this._handleTypeAhead(e.key);
+    }
+  }
+  _activateActive() {
+    const e = this._adc.activeItem;
+    e && e.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 })
+    );
+  }
+  // ── Type-ahead ───────────────────────────────────────────────────────────────
+  _handleTypeAhead(e) {
+    clearTimeout(this._typeAheadTimer), this._typeAheadBuffer += e.toLowerCase(), this._typeAheadTimer = window.setTimeout(() => {
+      this._typeAheadBuffer = "";
+    }, 500);
+    const i = (this._$listbox?.allOptions ?? []).find(
+      (s) => !s.disabled && s.label.toLowerCase().startsWith(this._typeAheadBuffer)
+    );
+    if (i)
+      if (!this.open)
+        this.multiple || (this._selectionInitialized = !0, this._applySelection([i.value]), this._dispatchChange());
+      else {
+        const r = this._$listbox.navigableItems.find(
+          (l) => l.getAttribute("data-value") === i.value
+        );
+        r && this._adc.navigateToItem(r);
+      }
+  }
+  // ── Chip keyboard navigation ─────────────────────────────────────────────────
+  _enterChipNav() {
+    const e = this._getChipButtons();
+    e.length !== 0 && (this._chipNavIndex = e.length - 1, e[this._chipNavIndex].focus());
+  }
+  _getChipButtons() {
+    return Array.from(
+      this.renderRoot.querySelectorAll(
+        'button[part~="chip"]'
+      )
+    );
+  }
+  _handleChipKeyDown(e, t) {
+    const i = this._getChipButtons();
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), this._chipNavIndex > 0 && (this._chipNavIndex--, i[this._chipNavIndex]?.focus());
+        break;
+      case "ArrowRight":
+        e.preventDefault(), this._chipNavIndex < i.length - 1 ? (this._chipNavIndex++, i[this._chipNavIndex]?.focus()) : (this._chipNavIndex = -1, this._$trigger?.focus());
+        break;
+      case "Escape":
+        e.preventDefault(), this._chipNavIndex = -1, this._$trigger?.focus();
+        break;
+      case "Delete":
+      case "Backspace":
+      case "Enter":
+      case " ":
+        e.preventDefault(), this._removeValue(t), this._chipNavIndex = -1, this._$trigger?.focus();
+        break;
+    }
+  }
+  // ── Trigger click ────────────────────────────────────────────────────────────
+  _handleTriggerClick() {
+    this.open ? this.closePopup() : this.openPopup();
+  }
+  // ── Render ───────────────────────────────────────────────────────────────────
+  render() {
+    const e = this.multiple && this._effectiveDisplay === "chips" && this._selectedValues.size > 0;
+    return c`
+      <div id="anchor" part="anchor">
+        <div
+          id="trigger"
+          part="trigger"
+          role="combobox"
+          tabindex=${this.disabled ? "-1" : "0"}
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="listbox"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-label=${this.placeholder || _}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+        >
+          ${e ? this._renderChips() : _}
+          <span part="value-display">${this._displayLabel}</span>
+          <span part="toggle-icon" aria-hidden="true">
+            <slot name="toggle-icon">&#9660;</slot>
+          </span>
+        </div>
+      </div>
+
+      <rc-listbox
+        id="listbox"
+        part="listbox"
+        popover="manual"
+        ?multiple=${this.multiple}
+        checkmark
+        @rc-listbox-change=${this._handleListboxChange}
+      ></rc-listbox>
+
+      <slot name="select" @slotchange=${this._handleSelectSlotChange}></slot>
+    `;
+  }
+  _renderChips() {
+    return c`
+      <span part="chips" role="group" aria-label="Selected items">
+        ${[...this._selectedValues].map((e) => {
+      const t = this._labelFor(e);
+      return c`
+            <button
+              type="button"
+              part="chip"
+              data-value=${e}
+              tabindex="-1"
+              aria-label=${`Remove ${t}`}
+              @click=${(i) => {
+        i.stopPropagation(), this._removeValue(e);
+      }}
+              @keydown=${(i) => this._handleChipKeyDown(i, e)}
+            >
+              <span part="chip-label">${t}</span
+              ><span part="chip-remove" aria-hidden="true">&#215;</span>
+            </button>
+          `;
+    })}
+      </span>
+    `;
+  }
+};
+d.styles = g;
+let o = d;
+a([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open");
+a([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "multiple");
+a([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+a([
+  n()
+], o.prototype, "placeholder");
+a([
+  n()
+], o.prototype, "display");
+a([
+  h("#anchor")
+], o.prototype, "_$anchor");
+a([
+  h("#trigger")
+], o.prototype, "_$trigger");
+a([
+  h("#listbox")
+], o.prototype, "_$listbox");
+a([
+  p()
+], o.prototype, "_selectedValues");
+a([
+  p()
+], o.prototype, "_chipNavIndex");
+a([
+  p()
+], o.prototype, "_options");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-select-BumY2uQl.js.map