@rcarls/rc-listbox 0.1.0

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light dark;
+  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}
+
+[data-theme="light"] { color-scheme: light; }
+[data-theme="dark"]  { color-scheme: dark;  }
+
+[data-theme="solarized-light"] {
+  color-scheme: light;
+  --rc-surface: #fdf6e3;
+  --rc-text:    #657b83;
+  --rc-border:  1px solid #93a1a1;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
+}
+
+[data-theme="solarized-dark"] {
+  color-scheme: dark;
+  --rc-surface: #002b36;
+  --rc-text:    #839496;
+  --rc-border:  1px solid #586e75;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+}
+
+.demo-page {
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.demo-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid ButtonBorder;
+}
+
+.demo-controls .demo-title {
+  flex: 1;
+}
+
+.demo-controls h1 {
+  margin: 0 0 0.15rem;
+  font-size: 1.5rem;
+}
+
+.demo-controls a {
+  font-size: 0.8rem;
+}
+
+.demo-section {
+  margin-bottom: 2rem;
+}
+
+.demo-section h2 {
+  margin: 0 0 0.5rem;
+}
+
+.theme-picker {
+  padding: 0.35em 0.75em;
+  font-family: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  border: 1px solid ButtonBorder;
+  border-radius: 4px;
+  background: Canvas;
+  color: CanvasText;
+}

package/dist/demo.js

@@ -0,0 +1,40 @@
+const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
+const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
+
+const stored = localStorage.getItem('rc-demo-theme') ?? '';
+applyTheme(stored);
+
+function applyTheme(theme) {
+  if (theme) {
+    document.documentElement.dataset.theme = theme;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+}
+
+function currentIndex() {
+  const current = document.documentElement.dataset.theme ?? '';
+  const idx = THEMES.indexOf(current);
+  return idx === -1 ? 0 : idx;
+}
+
+function updateButtons() {
+  const label = LABELS[currentIndex()];
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.textContent = label;
+  });
+}
+
+window.cycleTheme = function () {
+  const next = THEMES[(currentIndex() + 1) % THEMES.length];
+  applyTheme(next);
+  localStorage.setItem('rc-demo-theme', next);
+  updateButtons();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateButtons();
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.addEventListener('click', window.cycleTheme);
+  });
+});

package/dist/rc-listbox-D1vHntE2.js

@@ -0,0 +1,291 @@
+import { LitElement as p, nothing as u, html as r } from "lit";
+import { property as c, state as n } from "lit/decorators.js";
+import { ActiveDescendantController as _ } from "@rcarls/rc-common";
+var f = Object.defineProperty, l = (o, e, t, i) => {
+  for (var s = void 0, h = o.length - 1, d; h >= 0; h--)
+    (d = o[h]) && (s = d(e, t, s) || s);
+  return s && f(e, t, s), s;
+};
+let v = 0;
+class a extends p {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.checkmark = !1, this.filterStrategy = "contains", this._options = [], this._selectedValues = /* @__PURE__ */ new Set(), this._filterText = "", this._createLabel = null, this._selectionInitialized = !1, this._uid = `rc-lb-${++v}`, this._adc = new _(this, {
+      host: () => this,
+      items: () => this.navigableItems
+    }), this._onBlur = () => {
+      this._adc.clear();
+    }, this._onKeydown = (e) => {
+      if (!(e.altKey || e.ctrlKey || e.metaKey))
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault(), this._adc.activeItem ? this._adc.navigate(1) : this._adc.navigateToFirst(), this.multiple || this._selectActiveItem();
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault(), this._adc.activeItem ? this._adc.navigate(-1) : this._adc.navigateToLast(), this.multiple || this._selectActiveItem();
+            break;
+          }
+          case "Home": {
+            e.preventDefault(), this._adc.navigateToFirst(), this.multiple || this._selectActiveItem();
+            break;
+          }
+          case "End": {
+            e.preventDefault(), this._adc.navigateToLast(), this.multiple || this._selectActiveItem();
+            break;
+          }
+          case " ":
+          case "Enter": {
+            e.preventDefault();
+            const t = this._adc.activeItem?.getAttribute("data-value");
+            if (t == null) break;
+            this.multiple ? this.toggleOption(t) : this._selectActiveItem();
+            break;
+          }
+        }
+    };
+  }
+  /** Renders into the host element — no shadow root — so option IDs resolve in the parent shadow root. */
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listbox"), this.addEventListener("keydown", this._onKeydown), this.addEventListener("blur", this._onBlur);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("blur", this._onBlur);
+  }
+  updated() {
+    this.multiple ? this.setAttribute("aria-multiselectable", "true") : this.removeAttribute("aria-multiselectable");
+  }
+  // ── Options ─────────────────────────────────────────────────────────────────
+  /** All options regardless of filter state. */
+  get allOptions() {
+    return this._options;
+  }
+  /** Options currently passing the active filter. */
+  get filteredOptions() {
+    return this._options.filter((e) => this._isVisible(e));
+  }
+  /** Replace the full options list. Triggers a re-render. */
+  get options() {
+    return [...this._options];
+  }
+  /** Replace the full options list. Triggers a re-render. */
+  set options(e) {
+    this._options = [...e], this._applySelectionFromSource();
+  }
+  /** Append a single option without replacing the list. */
+  appendOption(e) {
+    this._options = [...this._options, e];
+  }
+  // ── Selection ────────────────────────────────────────────────────────────────
+  get selectedValues() {
+    return [...this._selectedValues];
+  }
+  /** Current selection. Host writes update silently. */
+  get value() {
+    return this.multiple ? this.selectedValues : this.selectedValues[0] ?? "";
+  }
+  /** Current selection. Host writes update silently. */
+  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. */
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  /** Initial uncontrolled selection. */
+  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);
+  }
+  /** Replace the selection set without firing `rc-listbox-change`. */
+  setSelectedValues(e) {
+    this._applySelection(e);
+  }
+  /**
+   * Toggle the selected state of the option with `value`.
+   * In single-select mode, toggleing a selected item deselects it (and selects
+   * the new item). Fires `rc-listbox-change`.
+   */
+  toggleOption(e) {
+    const t = this._options.find((s) => s.value === e);
+    if (!t || t.disabled) return;
+    const i = this._selectedValues.has(e);
+    if (this.multiple) {
+      const s = new Set(this._selectedValues);
+      i ? s.delete(e) : s.add(e), this._selectedValues = s;
+    } else
+      this._selectedValues = i ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([e]);
+    this._selectionInitialized = !0, this._dispatchChange(t, !i);
+  }
+  clearSelection() {
+    this._applySelection([]);
+  }
+  // ── Filtering ────────────────────────────────────────────────────────────────
+  /** Filter visible options to those whose label starts with `text` (case-insensitive). */
+  filterOptions(e) {
+    this._filterText = e;
+  }
+  clearFilter() {
+    this._filterText = "";
+  }
+  // ── Navigation target ────────────────────────────────────────────────────────
+  /**
+   * Ordered list of option elements currently navigable: visible and not disabled.
+   * Feed this to `ActiveDescendantController.items` in the parent component.
+   * Includes the create option element when one is set.
+   */
+  get navigableItems() {
+    const e = [];
+    for (let t = 0; t < this._options.length; t++) {
+      const i = this._options[t];
+      if (i.disabled || !this._isVisible(i)) continue;
+      const s = this.querySelector(`#${this._optId(t)}`);
+      s && e.push(s);
+    }
+    if (this._createLabel !== null) {
+      const t = this.querySelector(`#${this._uid}-create`);
+      t && e.push(t);
+    }
+    return e;
+  }
+  // ── Allow-create ─────────────────────────────────────────────────────────────
+  /**
+   * Show or hide the "Create" option at the end of the list.
+   * Pass `null` to hide it, or a non-empty string to show "Create '{label}'".
+   * Fires `rc-listbox-change` with `value: '__create__'` when activated.
+   */
+  setCreateOption(e) {
+    this._createLabel = e;
+  }
+  // ── Rendering ────────────────────────────────────────────────────────────────
+  render() {
+    return r`
+      ${this._options.map(
+      (e, t) => r`
+          <div
+            id=${this._optId(t)}
+            part="option"
+            role="option"
+            aria-selected=${this._selectedValues.has(e.value) ? "true" : "false"}
+            aria-disabled=${e.disabled ? "true" : "false"}
+            data-value=${e.value}
+            ?hidden=${!this._isVisible(e)}
+            @pointerdown=${(i) => {
+        i.preventDefault(), this.toggleOption(e.value);
+      }}
+          >${this.checkmark ? r`<span part="option-checkmark" aria-hidden="true">&#x2713;</span>` : u}<span part="option-label">${e.label}</span></div>
+        `
+    )}
+      ${this._createLabel !== null ? r`
+            <div
+              id=${`${this._uid}-create`}
+              part="option create-option"
+              role="option"
+              aria-selected="false"
+              data-value="__create__"
+              @pointerdown=${(e) => {
+      e.preventDefault(), this.dispatchEvent(
+        new CustomEvent("rc-listbox-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            value: this.value,
+            selected: !0,
+            optionValue: "__create__",
+            option: null,
+            selectedValues: this.selectedValues,
+            selectedOptions: this._selectedOptionsFor(this.selectedValues)
+          }
+        })
+      );
+    }}
+            >${this.checkmark ? r`<span part="option-checkmark" aria-hidden="true">&#x2713;</span>` : u}<span part="option-label">Create "${this._createLabel}"</span></div>
+          ` : u}
+    `;
+  }
+  /**
+   * Selects the active-descendant item without toggling (single-select safe).
+   * Used by arrow-key navigation so the item under the cursor is always selected.
+   */
+  _selectActiveItem() {
+    const e = this._adc.activeItem?.getAttribute("data-value");
+    if (e == null) return;
+    const t = this._options.find((i) => i.value === e);
+    !t || t.disabled || this._selectedValues.has(e) && this._selectedValues.size === 1 || (this._selectedValues = /* @__PURE__ */ new Set([e]), this._selectionInitialized = !0, this._dispatchChange(t, !0));
+  }
+  _optId(e) {
+    return `${this._uid}-${e}`;
+  }
+  _isVisible(e) {
+    if (!this._filterText) return !0;
+    const t = e.label.toLowerCase(), i = this._filterText.toLowerCase();
+    return typeof this.filterStrategy == "function" ? this.filterStrategy(t, i) : this.filterStrategy === "contains" ? t.includes(i) : t.startsWith(i);
+  }
+  _applySelection(e) {
+    this._selectedValues = new Set(this.multiple ? e : e.slice(0, 1));
+  }
+  _applySelectionFromSource() {
+    if (this._value !== void 0) {
+      this._applySelection(this._normalizeValue(this._value));
+      return;
+    }
+    !this._selectionInitialized && this._defaultValue !== void 0 && (this._selectionInitialized = !0, this._applySelection(this._normalizeValue(this._defaultValue)));
+  }
+  _normalizeValue(e) {
+    return Array.isArray(e) ? e : e ? [e] : [];
+  }
+  _dispatchChange(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("rc-listbox-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: this.value,
+          selected: t,
+          optionValue: e.value,
+          option: e,
+          selectedValues: this.selectedValues,
+          selectedOptions: this._selectedOptionsFor(this.selectedValues)
+        }
+      })
+    );
+  }
+  _selectedOptionsFor(e) {
+    return e.map((t) => this._options.find((i) => i.value === t) ?? {
+      value: t,
+      label: t
+    });
+  }
+}
+l([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "multiple");
+l([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "checkmark");
+l([
+  c({ attribute: "filter-strategy", reflect: !1 })
+], a.prototype, "filterStrategy");
+l([
+  n()
+], a.prototype, "_options");
+l([
+  n()
+], a.prototype, "_selectedValues");
+l([
+  n()
+], a.prototype, "_filterText");
+l([
+  n()
+], a.prototype, "_createLabel");
+export {
+  a as R
+};
+//# sourceMappingURL=rc-listbox-D1vHntE2.js.map

package/dist/rc-listbox-D1vHntE2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-listbox-D1vHntE2.js","sources":["../src/rc-listbox.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ActiveDescendantController } from '@rcarls/rc-common';\n\nexport interface ListboxOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n/**\n * Determines how `filterOptions()` matches option labels against the query string.\n *\n * - `'prefix'` — label must start with the query (default, matches native `<select>` type-ahead).\n * - `'contains'` — label must contain the query anywhere.\n * - `function` — custom predicate; receives lowercased label and query, return `true` to show the option.\n */\nexport type FilterStrategy =\n  | 'prefix'\n  | 'contains'\n  | ((label: string, query: string) => boolean);\n\nexport interface RCListboxChangeEvent {\n  /** Canonical selected value for single mode, or selected values for multi mode. */\n  value: string | string[];\n  /** Whether the option was selected (false means it was deselected). */\n  selected: boolean;\n  /** The option value that was activated. `'__create__'` for the create option. */\n  optionValue: string;\n  /** The option that was activated. */\n  option: ListboxOption | null;\n  /** Selected values as a consistently-array-shaped convenience value. */\n  selectedValues: string[];\n  /** Selected option objects. */\n  selectedOptions: ListboxOption[];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-listbox': RCListbox;\n  }\n}\n\nlet _uid = 0;\n\n/**\n * A headless listbox popup component following the WAI-ARIA listbox pattern.\n *\n * Renders into its own light DOM (no shadow root) so that when placed inside\n * another component's shadow root, option element IDs resolve within that same\n * shadow root — enabling `aria-activedescendant` and `aria-controls` IDREFs to\n * work correctly from the parent trigger.\n *\n * Consumers drive this component via its JS API:\n *   - Set `options` to populate the list\n *   - Set `value` / `defaultValue` to manage selection\n *   - Call `toggleOption()` for internal keyboard/pointer activation\n *   - Call `filterOptions()` to filter visible options\n *   - Read `navigableItems` to feed `ActiveDescendantController`\n *\n * @slot — No slots; options are rendered programmatically from the `options` property.\n * @fires rc-listbox-change - Fired when an option is activated (clicked or Enter/Space)\n * @csspart option - Individual option elements\n * @csspart option-checkmark - The checkmark indicator inside each option\n * @csspart option-label - The label text span inside each option\n * @csspart create-option - The \"Create\" option when allow-create is active\n */\nexport class RCListbox extends LitElement {\n  /** Renders into the host element — no shadow root — so option IDs resolve in the parent shadow root. */\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** Allow multiple selection. Reflected as `aria-multiselectable` on the host. */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Render a checkmark indicator inside each option element.\n   * Hidden by default; enable for combobox / select patterns where the\n   * consumer's CSS shows it conditionally via `[aria-selected='true']`.\n   */\n  @property({ type: Boolean, reflect: true })\n  checkmark = false;\n\n  /**\n   * How option labels are matched against the active filter text.\n   * Defaults to `'contains'` (substring). Set to `'prefix'` for starts-with\n   * matching, or pass a custom predicate for full control.\n   * Function values are JS-only; string values may be set via the\n   * `filter-strategy` attribute.\n   */\n  @property({ attribute: 'filter-strategy', reflect: false })\n  filterStrategy: FilterStrategy = 'contains';\n\n  @state() private _options: ListboxOption[] = [];\n  @state() private _selectedValues: Set<string> = new Set();\n  @state() private _filterText = '';\n  @state() private _createLabel: string | null = null;\n  private _defaultValue: string | string[] | undefined;\n  private _value: string | string[] | undefined;\n  private _selectionInitialized = false;\n\n  private readonly _uid = `rc-lb-${++_uid}`;\n\n  private readonly _adc = new ActiveDescendantController(this, {\n    host: () => this,\n    items: () => this.navigableItems,\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'listbox');\n    this.addEventListener('keydown', this._onKeydown);\n    this.addEventListener('blur', this._onBlur);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._onKeydown);\n    this.removeEventListener('blur', this._onBlur);\n  }\n\n  override updated() {\n    if (this.multiple) {\n      this.setAttribute('aria-multiselectable', 'true');\n    } else {\n      this.removeAttribute('aria-multiselectable');\n    }\n  }\n\n  // ── Options ─────────────────────────────────────────────────────────────────\n\n  /** All options regardless of filter state. */\n  get allOptions(): readonly ListboxOption[] {\n    return this._options;\n  }\n\n  /** Options currently passing the active filter. */\n  get filteredOptions(): readonly ListboxOption[] {\n    return this._options.filter((o) => this._isVisible(o));\n  }\n\n  /** Replace the full options list. Triggers a re-render. */\n  get options(): ListboxOption[] {\n    return [...this._options];\n  }\n\n  /** Replace the full options list. Triggers a re-render. */\n  set options(opts: ListboxOption[]) {\n    this._options = [...opts];\n    this._applySelectionFromSource();\n  }\n\n  /** Append a single option without replacing the list. */\n  appendOption(opt: ListboxOption): void {\n    this._options = [...this._options, opt];\n  }\n\n  // ── Selection ────────────────────────────────────────────────────────────────\n\n  get selectedValues(): string[] {\n    return [...this._selectedValues];\n  }\n\n  /** Current selection. Host writes update silently. */\n  get value(): string | string[] {\n    return this.multiple\n      ? this.selectedValues\n      : (this.selectedValues[0] ?? '');\n  }\n\n  /** Current selection. Host writes update silently. */\n  set value(value: string | string[] | undefined) {\n    const oldValue = this._value;\n\n    this._value = value;\n\n    if (value === undefined) {\n      this.requestUpdate('value', oldValue);\n      return;\n    }\n\n    this._selectionInitialized = true;\n    this._applySelection(this._normalizeValue(value));\n    this.requestUpdate('value', oldValue);\n  }\n\n  /** Initial uncontrolled selection. */\n  get defaultValue(): string | string[] | undefined {\n    return this._defaultValue;\n  }\n\n  /** Initial uncontrolled selection. */\n  set defaultValue(value: string | string[] | undefined) {\n    const oldValue = this._defaultValue;\n\n    this._defaultValue = value;\n\n    if (!this._selectionInitialized && this._value === undefined && value !== undefined) {\n      this._applySelection(this._normalizeValue(value));\n    }\n\n    this.requestUpdate('defaultValue', oldValue);\n  }\n\n  /** Replace the selection set without firing `rc-listbox-change`. */\n  setSelectedValues(values: string[]): void {\n    this._applySelection(values);\n  }\n\n  /**\n   * Toggle the selected state of the option with `value`.\n   * In single-select mode, toggleing a selected item deselects it (and selects\n   * the new item). Fires `rc-listbox-change`.\n   */\n  toggleOption(value: string): void {\n    const opt = this._options.find((o) => o.value === value);\n    if (!opt || opt.disabled) return;\n\n    const wasSelected = this._selectedValues.has(value);\n\n    if (this.multiple) {\n      const next = new Set(this._selectedValues);\n      if (wasSelected) next.delete(value); else next.add(value);\n      this._selectedValues = next;\n    } else {\n      this._selectedValues = wasSelected ? new Set() : new Set([value]);\n    }\n\n    this._selectionInitialized = true;\n    this._dispatchChange(opt, !wasSelected);\n  }\n\n  clearSelection(): void {\n    this._applySelection([]);\n  }\n\n  // ── Filtering ────────────────────────────────────────────────────────────────\n\n  /** Filter visible options to those whose label starts with `text` (case-insensitive). */\n  filterOptions(text: string): void {\n    this._filterText = text;\n  }\n\n  clearFilter(): void {\n    this._filterText = '';\n  }\n\n  // ── Navigation target ────────────────────────────────────────────────────────\n\n  /**\n   * Ordered list of option elements currently navigable: visible and not disabled.\n   * Feed this to `ActiveDescendantController.items` in the parent component.\n   * Includes the create option element when one is set.\n   */\n  get navigableItems(): Element[] {\n    const results: Element[] = [];\n    for (let i = 0; i < this._options.length; i++) {\n      const opt = this._options[i];\n      if (opt.disabled || !this._isVisible(opt)) continue;\n      const el = this.querySelector<Element>(`#${this._optId(i)}`);\n      if (el) results.push(el);\n    }\n    if (this._createLabel !== null) {\n      const el = this.querySelector<Element>(`#${this._uid}-create`);\n      if (el) results.push(el);\n    }\n    return results;\n  }\n\n  // ── Allow-create ─────────────────────────────────────────────────────────────\n\n  /**\n   * Show or hide the \"Create\" option at the end of the list.\n   * Pass `null` to hide it, or a non-empty string to show \"Create '{label}'\".\n   * Fires `rc-listbox-change` with `value: '__create__'` when activated.\n   */\n  setCreateOption(label: string | null): void {\n    this._createLabel = label;\n  }\n\n  // ── Rendering ────────────────────────────────────────────────────────────────\n\n  protected override render() {\n    return html`\n      ${this._options.map(\n        (opt, i) => html`\n          <div\n            id=${this._optId(i)}\n            part=\"option\"\n            role=\"option\"\n            aria-selected=${this._selectedValues.has(opt.value) ? 'true' : 'false'}\n            aria-disabled=${opt.disabled ? 'true' : 'false'}\n            data-value=${opt.value}\n            ?hidden=${!this._isVisible(opt)}\n            @pointerdown=${(e: PointerEvent) => {\n              e.preventDefault();\n              this.toggleOption(opt.value);\n            }}\n          >${this.checkmark ? html`<span part=\"option-checkmark\" aria-hidden=\"true\">&#x2713;</span>` : nothing}<span part=\"option-label\">${opt.label}</span></div>\n        `,\n      )}\n      ${this._createLabel !== null\n        ? html`\n            <div\n              id=${`${this._uid}-create`}\n              part=\"option create-option\"\n              role=\"option\"\n              aria-selected=\"false\"\n              data-value=\"__create__\"\n              @pointerdown=${(e: PointerEvent) => {\n                e.preventDefault();\n                this.dispatchEvent(\n                  new CustomEvent<RCListboxChangeEvent>('rc-listbox-change', {\n                    bubbles: true,\n                    composed: true,\n                    detail: {\n                      value: this.value,\n                      selected: true,\n                      optionValue: '__create__',\n                      option: null,\n                      selectedValues: this.selectedValues,\n                      selectedOptions: this._selectedOptionsFor(this.selectedValues),\n                    },\n                  }),\n                );\n              }}\n            >${this.checkmark ? html`<span part=\"option-checkmark\" aria-hidden=\"true\">&#x2713;</span>` : nothing}<span part=\"option-label\">Create \"${this._createLabel}\"</span></div>\n          `\n        : nothing}\n    `;\n  }\n\n  private _onBlur = (): void => {\n    this._adc.clear();\n  };\n\n  private _onKeydown = (e: KeyboardEvent): void => {\n    // Pass modifier-key combos to parent handlers (e.g. Alt+Arrow in rc-transfer-list).\n    if (e.altKey || e.ctrlKey || e.metaKey) return;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (this._adc.activeItem) this._adc.navigate(1);\n        else this._adc.navigateToFirst();\n        if (!this.multiple) this._selectActiveItem();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (this._adc.activeItem) this._adc.navigate(-1);\n        else this._adc.navigateToLast();\n        if (!this.multiple) this._selectActiveItem();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        this._adc.navigateToFirst();\n        if (!this.multiple) this._selectActiveItem();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        this._adc.navigateToLast();\n        if (!this.multiple) this._selectActiveItem();\n        break;\n      }\n      case ' ':\n      case 'Enter': {\n        e.preventDefault();\n        const value = this._adc.activeItem?.getAttribute('data-value');\n        if (value == null) break;\n        if (this.multiple) {\n          this.toggleOption(value);\n        } else {\n          this._selectActiveItem();\n        }\n        break;\n      }\n    }\n  };\n\n  /**\n   * Selects the active-descendant item without toggling (single-select safe).\n   * Used by arrow-key navigation so the item under the cursor is always selected.\n   */\n  private _selectActiveItem(): void {\n    const value = this._adc.activeItem?.getAttribute('data-value');\n    if (value == null) return;\n\n    const opt = this._options.find((o) => o.value === value);\n    if (!opt || opt.disabled) return;\n\n    if (this._selectedValues.has(value) && this._selectedValues.size === 1) return;\n\n    this._selectedValues = new Set([value]);\n    this._selectionInitialized = true;\n    this._dispatchChange(opt, true);\n  }\n\n  private _optId(index: number): string {\n    return `${this._uid}-${index}`;\n  }\n\n  private _isVisible(opt: ListboxOption): boolean {\n    if (!this._filterText) return true;\n\n    const label = opt.label.toLowerCase();\n    const query = this._filterText.toLowerCase();\n\n    if (typeof this.filterStrategy === 'function') return this.filterStrategy(label, query);\n    if (this.filterStrategy === 'contains') return label.includes(query);\n\n    return label.startsWith(query); // 'prefix' default\n  }\n\n  private _applySelection(values: string[]): void {\n    this._selectedValues = new Set(this.multiple ? values : values.slice(0, 1));\n  }\n\n  private _applySelectionFromSource(): void {\n    if (this._value !== undefined) {\n      this._applySelection(this._normalizeValue(this._value));\n      return;\n    }\n\n    if (!this._selectionInitialized && this._defaultValue !== undefined) {\n      this._selectionInitialized = true;\n      this._applySelection(this._normalizeValue(this._defaultValue));\n    }\n  }\n\n  private _normalizeValue(value: string | string[]): string[] {\n    return Array.isArray(value) ? value : value ? [value] : [];\n  }\n\n  private _dispatchChange(option: ListboxOption, selected: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent<RCListboxChangeEvent>('rc-listbox-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          value: this.value,\n          selected,\n          optionValue: option.value,\n          option,\n          selectedValues: this.selectedValues,\n          selectedOptions: this._selectedOptionsFor(this.selectedValues),\n        },\n      }),\n    );\n  }\n\n  private _selectedOptionsFor(values: string[]): ListboxOption[] {\n    return values.map((value) => {\n      return (\n        this._options.find((opt) => opt.value === value) ?? {\n          value,\n          label: value,\n        }\n      );\n    });\n  }\n}\n\nexport default RCListbox;\n"],"names":["_uid","RCListbox","LitElement","ActiveDescendantController","value","o","opts","opt","oldValue","values","wasSelected","next","text","results","i","el","label","html","e","nothing","index","query","option","selected","__decorateClass","property","state"],"mappings":"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"}

package/dist/rc-listbox-define.js

@@ -0,0 +1,6 @@
+import { R as t } from "./rc-listbox-D1vHntE2.js";
+customElements.get("rc-listbox") || customElements.define("rc-listbox", t);
+export {
+  t as RCListbox
+};
+//# sourceMappingURL=rc-listbox-define.js.map

package/dist/rc-listbox-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-listbox-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCListbox } from './index.js';\n\ncustomElements.get('rc-listbox') || customElements.define('rc-listbox', RCListbox);\n\nexport * from './index.js';\n"],"names":["RCListbox"],"mappings":";AAEA,eAAe,IAAI,YAAY,KAAK,eAAe,OAAO,cAAcA,CAAS;"}

package/dist/rc-listbox.js

@@ -0,0 +1,5 @@
+import { R as s } from "./rc-listbox-D1vHntE2.js";
+export {
+  s as RCListbox
+};
+//# sourceMappingURL=rc-listbox.js.map

package/dist/rc-listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-listbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-listbox/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-listbox/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-listbox';

package/dist/types/packages/rc-listbox/src/rc-listbox.d.ts

@@ -0,0 +1,146 @@
+import { LitElement } from 'lit';
+export interface ListboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * Determines how `filterOptions()` matches option labels against the query string.
+ *
+ * - `'prefix'` — label must start with the query (default, matches native `<select>` type-ahead).
+ * - `'contains'` — label must contain the query anywhere.
+ * - `function` — custom predicate; receives lowercased label and query, return `true` to show the option.
+ */
+export type FilterStrategy = 'prefix' | 'contains' | ((label: string, query: string) => boolean);
+export interface RCListboxChangeEvent {
+    /** Canonical selected value for single mode, or selected values for multi mode. */
+    value: string | string[];
+    /** Whether the option was selected (false means it was deselected). */
+    selected: boolean;
+    /** The option value that was activated. `'__create__'` for the create option. */
+    optionValue: string;
+    /** The option that was activated. */
+    option: ListboxOption | null;
+    /** Selected values as a consistently-array-shaped convenience value. */
+    selectedValues: string[];
+    /** Selected option objects. */
+    selectedOptions: ListboxOption[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-listbox': RCListbox;
+    }
+}
+/**
+ * A headless listbox popup component following the WAI-ARIA listbox pattern.
+ *
+ * Renders into its own light DOM (no shadow root) so that when placed inside
+ * another component's shadow root, option element IDs resolve within that same
+ * shadow root — enabling `aria-activedescendant` and `aria-controls` IDREFs to
+ * work correctly from the parent trigger.
+ *
+ * Consumers drive this component via its JS API:
+ *   - Set `options` to populate the list
+ *   - Set `value` / `defaultValue` to manage selection
+ *   - Call `toggleOption()` for internal keyboard/pointer activation
+ *   - Call `filterOptions()` to filter visible options
+ *   - Read `navigableItems` to feed `ActiveDescendantController`
+ *
+ * @slot — No slots; options are rendered programmatically from the `options` property.
+ * @fires rc-listbox-change - Fired when an option is activated (clicked or Enter/Space)
+ * @csspart option - Individual option elements
+ * @csspart option-checkmark - The checkmark indicator inside each option
+ * @csspart option-label - The label text span inside each option
+ * @csspart create-option - The "Create" option when allow-create is active
+ */
+export declare class RCListbox extends LitElement {
+    /** Renders into the host element — no shadow root — so option IDs resolve in the parent shadow root. */
+    createRenderRoot(): this;
+    /** Allow multiple selection. Reflected as `aria-multiselectable` on the host. */
+    multiple: boolean;
+    /**
+     * Render a checkmark indicator inside each option element.
+     * Hidden by default; enable for combobox / select patterns where the
+     * consumer's CSS shows it conditionally via `[aria-selected='true']`.
+     */
+    checkmark: boolean;
+    /**
+     * How option labels are matched against the active filter text.
+     * Defaults to `'contains'` (substring). Set to `'prefix'` for starts-with
+     * matching, or pass a custom predicate for full control.
+     * Function values are JS-only; string values may be set via the
+     * `filter-strategy` attribute.
+     */
+    filterStrategy: FilterStrategy;
+    private _options;
+    private _selectedValues;
+    private _filterText;
+    private _createLabel;
+    private _defaultValue;
+    private _value;
+    private _selectionInitialized;
+    private readonly _uid;
+    private readonly _adc;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    /** All options regardless of filter state. */
+    get allOptions(): readonly ListboxOption[];
+    /** Options currently passing the active filter. */
+    get filteredOptions(): readonly ListboxOption[];
+    /** Replace the full options list. Triggers a re-render. */
+    get options(): ListboxOption[];
+    /** Replace the full options list. Triggers a re-render. */
+    set options(opts: ListboxOption[]);
+    /** Append a single option without replacing the list. */
+    appendOption(opt: ListboxOption): void;
+    get selectedValues(): string[];
+    /** Current selection. Host writes update silently. */
+    get value(): string | string[];
+    /** Current selection. Host writes update silently. */
+    set value(value: string | string[] | undefined);
+    /** Initial uncontrolled selection. */
+    get defaultValue(): string | string[] | undefined;
+    /** Initial uncontrolled selection. */
+    set defaultValue(value: string | string[] | undefined);
+    /** Replace the selection set without firing `rc-listbox-change`. */
+    setSelectedValues(values: string[]): void;
+    /**
+     * Toggle the selected state of the option with `value`.
+     * In single-select mode, toggleing a selected item deselects it (and selects
+     * the new item). Fires `rc-listbox-change`.
+     */
+    toggleOption(value: string): void;
+    clearSelection(): void;
+    /** Filter visible options to those whose label starts with `text` (case-insensitive). */
+    filterOptions(text: string): void;
+    clearFilter(): void;
+    /**
+     * Ordered list of option elements currently navigable: visible and not disabled.
+     * Feed this to `ActiveDescendantController.items` in the parent component.
+     * Includes the create option element when one is set.
+     */
+    get navigableItems(): Element[];
+    /**
+     * Show or hide the "Create" option at the end of the list.
+     * Pass `null` to hide it, or a non-empty string to show "Create '{label}'".
+     * Fires `rc-listbox-change` with `value: '__create__'` when activated.
+     */
+    setCreateOption(label: string | null): void;
+    protected render(): import('lit').TemplateResult<1>;
+    private _onBlur;
+    private _onKeydown;
+    /**
+     * Selects the active-descendant item without toggling (single-select safe).
+     * Used by arrow-key navigation so the item under the cursor is always selected.
+     */
+    private _selectActiveItem;
+    private _optId;
+    private _isVisible;
+    private _applySelection;
+    private _applySelectionFromSource;
+    private _normalizeValue;
+    private _dispatchChange;
+    private _selectedOptionsFor;
+}
+export default RCListbox;