@rcarls/rc-combobox 0.1.0

package/README.md

@@ -0,0 +1,72 @@
+# `@rcarls/rc-combobox`
+
+An editable ARIA combobox built with Lit 3. It extends `rc-select` with a text
+input, live filtering, keyboard navigation, and optional allow-create behavior
+while still preserving a native slotted `<select>` for form submission.
+
+## Installation
+
+PowerShell:
+
+```powershell
+yarn.cmd add @rcarls/rc-combobox
+```
+
+Bash/zsh:
+
+```bash
+yarn add @rcarls/rc-combobox
+```
+
+## Import
+
+```ts
+import '@rcarls/rc-combobox/define';
+```
+
+## Basic Usage
+
+```html
+<label>
+  Fruit
+  <rc-combobox placeholder="Search fruit">
+    <select slot="select" name="fruit">
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="cherry">Cherry</option>
+    </select>
+  </rc-combobox>
+</label>
+```
+
+## Allow Create
+
+```html
+<rc-combobox allowcreate placeholder="Add tag">
+  <select slot="select" name="tags" multiple></select>
+</rc-combobox>
+```
+
+Cancel `rc-combobox-create` to validate or replace the default insertion.
+
+## API
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `allowCreate` | `boolean` | Shows a create option for unmatched input. |
+| `filterStrategy` | `'prefix' \| 'contains' \| function` | Controls option filtering. |
+| `multiple` | `boolean` | Inherited from `rc-select`; supports chip rendering. |
+| `placeholder` | `string` | Input placeholder when no value is selected. |
+
+## Events
+
+| Event | Detail | Description |
+| --- | --- | --- |
+| `rc-combobox-create` | `{ text: string }` | Cancelable event fired before a new option is inserted. |
+| `rc-select-change` | `{ value: string \| string[] }` | Inherited selection-change event. |
+
+## Accessibility
+
+- Input uses `role="combobox"` with `aria-autocomplete="list"`.
+- Popup navigation uses `aria-activedescendant`.
+- The slotted native `<select>` remains the form value source.

package/dist/custom-elements.json

@@ -0,0 +1,388 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-combobox",
+          "declaration": {
+            "name": "RCCombobox",
+            "module": "/src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/rc-combobox.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-combobox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An editable combobox with autocomplete filtering and optional allow-create.\n\nExtends `rc-select` by replacing the trigger `<div>` with a text `<input>`\nand adding: live filtering of the listbox, keyboard navigation from input,\nand an optional \"Create '{text}'\" option for new entries.",
+          "name": "RCCombobox",
+          "cssProperties": [
+            {
+              "description": "Maximum popup height.",
+              "name": "--rc-combobox-max-height",
+              "default": "20em"
+            },
+            {
+              "description": "Anchor block size.",
+              "name": "--rc-combobox-control-block-size",
+              "default": "var(--rc-control-block-size)"
+            },
+            {
+              "description": "Anchor block-axis padding.",
+              "name": "--rc-combobox-padding-block",
+              "default": "calc(var(--rc-control-padding-block) / 2)"
+            },
+            {
+              "description": "Anchor inline-axis padding.",
+              "name": "--rc-combobox-padding-inline",
+              "default": "calc(var(--rc-control-padding-inline) / 2)"
+            },
+            {
+              "description": "Gap between chips, input, and toggle.",
+              "name": "--rc-combobox-gap",
+              "default": "var(--rc-control-gap)"
+            },
+            {
+              "description": "Anchor border radius.",
+              "name": "--rc-combobox-radius",
+              "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Anchor border.",
+              "name": "--rc-combobox-border",
+              "default": "var(--rc-border)"
+            },
+            {
+              "description": "Popup listbox border radius.",
+              "name": "--rc-combobox-listbox-radius",
+              "default": "var(--rc-control-radius)"
+            },
+            {
+              "description": "Popup listbox block padding.",
+              "name": "--rc-combobox-listbox-padding-block",
+              "default": "var(--rc-control-padding-block)"
+            },
+            {
+              "description": "Multi-select chip border radius.",
+              "name": "--rc-combobox-chip-radius",
+              "default": "var(--rc-radius-md)"
+            },
+            {
+              "description": "Multi-select chip block-axis padding.",
+              "name": "--rc-combobox-chip-padding-block",
+              "default": "0.1em"
+            },
+            {
+              "description": "Multi-select chip inline-axis padding.",
+              "name": "--rc-combobox-chip-padding-inline",
+              "default": "0.3em"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Outer container (includes chips + input + toggle).",
+              "name": "anchor"
+            },
+            {
+              "description": "Individual chip (multiple mode).",
+              "name": "chip"
+            },
+            {
+              "description": "Text label inside a chip.",
+              "name": "chip-label"
+            },
+            {
+              "description": "Remove button inside a chip.",
+              "name": "chip-remove"
+            },
+            {
+              "description": "The text input element.",
+              "name": "input"
+            },
+            {
+              "description": "The chevron toggle button.",
+              "name": "toggle"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Required. A native `<select>` element for form submission.",
+              "name": "select"
+            },
+            {
+              "description": "Optional. Replaces the default chevron icon.",
+              "name": "toggle-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "allowCreate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set, shows a \"Create '{text}'\" option for text that has no exact match.",
+              "attribute": "allowcreate"
+            },
+            {
+              "kind": "field",
+              "name": "filterStrategy",
+              "type": {
+                "text": "FilterStrategy"
+              },
+              "default": "'contains'",
+              "description": "How option labels are matched against typed input. Forwarded to the internal `rc-listbox`.\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with matching,\nor pass a custom `(label, query) => boolean` predicate.\nFunction values are JS-only; string values may be set via the `filter-strategy` attribute.",
+              "attribute": "filter-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "_$trigger",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_filterText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_closingPopup",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "openPopup"
+            },
+            {
+              "kind": "method",
+              "name": "closePopup",
+              "parameters": [
+                {
+                  "name": "_returnFocus",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleInputFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleToggleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleAnchorClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateCreateOption",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleListboxChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_activateCreate",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncInputToSelection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleInputKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_focusLastChipRemove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_inputPlaceholder",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "events": [
+            {
+              "description": "Inherited selection change event.",
+              "name": "rc-select-change"
+            },
+            {
+              "description": "When the \"Create\" option is activated. `detail: { text: string }`. Cancelable — call `preventDefault()` to stop the default insertion of the new option.",
+              "name": "rc-combobox-create"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "When set, shows a \"Create '{text}'\" option for text that has no exact match.",
+              "name": "allowcreate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "allowCreate"
+            },
+            {
+              "name": "filter-strategy",
+              "type": {
+                "text": "FilterStrategy"
+              },
+              "default": "'contains'",
+              "description": "How option labels are matched against typed input. Forwarded to the internal `rc-listbox`.\nDefaults to `'contains'` (substring). Set to `'prefix'` for starts-with matching,\nor pass a custom `(label, query) => boolean` predicate.\nFunction values are JS-only; string values may be set via the `filter-strategy` attribute.",
+              "fieldName": "filterStrategy"
+            }
+          ],
+          "superclass": {
+            "name": "RCSelect",
+            "package": "@rcarls/rc-select"
+          },
+          "tagName": "rc-combobox",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCCombobox",
+          "declaration": {
+            "name": "RCCombobox",
+            "module": "src/rc-combobox.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCCombobox",
+            "module": "src/rc-combobox.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

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-combobox-D6aALkDz.js

@@ -0,0 +1,365 @@
+import { css as h, nothing as d, html as u } from "lit";
+import { property as p, query as b, state as g } from "lit/decorators.js";
+import { RCSelect as v } from "@rcarls/rc-select";
+const f = h`
+  :host {
+    display: inline-block;
+  }
+
+  #anchor {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--rc-combobox-gap, var(--rc-control-gap, 0.25em));
+    min-block-size: var(--rc-combobox-control-block-size, var(--rc-control-block-size, auto));
+    border: var(--rc-combobox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-combobox-radius, var(--rc-control-radius, var(--rc-radius-sm, 0.125em)));
+    background: var(--rc-field, Field);
+    color: var(--rc-field-text, FieldText);
+    padding: var(--rc-combobox-padding-block, calc(var(--rc-control-padding-block, 0.25em) / 2))
+      var(--rc-combobox-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));
+    cursor: text;
+    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);
+  }
+
+  /* Chips — the whole chip is the remove button for a larger touch target */
+  [part='chip'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--rc-combobox-chip-gap, calc(var(--rc-control-gap, 0.25em) * 0.8));
+    padding: var(--rc-combobox-chip-padding-block, 0.1em)
+      var(--rc-combobox-chip-padding-inline, 0.3em);
+    border: var(--rc-combobox-chip-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-combobox-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;
+  }
+
+  #trigger {
+    flex: 1;
+    min-width: 6em;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+    padding: var(--rc-combobox-input-padding-block, var(--rc-control-padding-block, 0.25em))
+      var(--rc-combobox-input-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));
+    cursor: text;
+  }
+
+  #trigger::placeholder {
+    color: var(--rc-text-disabled, GrayText);
+  }
+
+  #toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rc-combobox-toggle-padding, var(--rc-control-padding-block, 0.25em));
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: default;
+    font-size: 0.75em;
+    font: inherit;
+
+    &:focus-visible {
+      outline: var(--rc-focus-ring, auto);
+      outline-offset: var(--rc-focus-ring-offset, 0);
+    }
+  }
+
+  /* Hidden native select slot */
+  slot[name='select'] {
+    display: none;
+  }
+
+  /* Listbox popup — positioned by AnchorController via adoptedStyleSheets */
+  rc-listbox {
+    max-height: var(--rc-combobox-max-height, 20em);
+    overflow-y: auto;
+    background: var(--rc-surface, Canvas);
+    border: var(--rc-combobox-listbox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));
+    border-radius: var(--rc-combobox-listbox-radius, var(--rc-control-radius, 0));
+    box-shadow: var(--rc-combobox-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));
+    color: var(--rc-field-text, FieldText);
+    padding-block: var(--rc-combobox-listbox-padding-block, var(--rc-control-padding-block, 0.25em));
+
+    &:not(:popover-open) {
+      display: none;
+    }
+  }
+
+  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;
+    }
+  }
+
+  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 m = Object.defineProperty, a = (n, t, e, i) => {
+  for (var r = void 0, s = n.length - 1, c; s >= 0; s--)
+    (c = n[s]) && (r = c(t, e, r) || r);
+  return r && m(t, e, r), r;
+};
+const l = class l extends v {
+  constructor() {
+    super(...arguments), this.allowCreate = !1, this.filterStrategy = "contains", this._filterText = "", this._closingPopup = !1;
+  }
+  // ── Override popup lifecycle ──────────────────────────────────────────────────
+  openPopup() {
+    super.openPopup(), this._$listbox?.filterOptions(this._filterText);
+  }
+  closePopup(t = !0) {
+    this._filterText = "", this._$listbox?.clearFilter(), this._$listbox?.setCreateOption(null), this._closingPopup = !0, super.closePopup(!1), setTimeout(() => {
+      this._closingPopup = !1;
+    }, 0);
+  }
+  // ── Input events ──────────────────────────────────────────────────────────────
+  _handleInput(t) {
+    this._filterText = t.target.value, !this.open && this._filterText && this.openPopup(), this._$listbox?.filterOptions(this._filterText), this._updateCreateOption(), this._$listbox?.navigableItems.length ? this._adc.navigateToFirst() : this._adc.clear();
+  }
+  _handleInputFocus() {
+    !this.open && !this._closingPopup && this.openPopup();
+  }
+  _handleToggleClick(t) {
+    t.stopPropagation(), this.open ? this.closePopup() : (this.openPopup(), this._$trigger?.focus());
+  }
+  _handleAnchorClick(t) {
+    const e = t.target;
+    e.closest('[part~="chip"]') || e.id === "toggle" || this._$trigger?.focus();
+  }
+  // ── Create option ─────────────────────────────────────────────────────────────
+  _updateCreateOption() {
+    if (!this.allowCreate || !this._filterText.trim()) {
+      this._$listbox?.setCreateOption(null);
+      return;
+    }
+    const t = this._filterText.trim().toLowerCase(), e = this._$listbox?.allOptions.some(
+      (i) => i.label.toLowerCase() === t
+    ) ?? !1;
+    this._$listbox?.setCreateOption(e ? null : this._filterText.trim());
+  }
+  _handleListboxChange(t) {
+    const { optionValue: e, value: i } = t.detail;
+    if ((e ?? (Array.isArray(i) ? i.at(-1) : i)) === "__create__") {
+      t.stopPropagation(), this._activateCreate(this._filterText.trim());
+      return;
+    }
+    super._handleListboxChange(t), this.multiple ? (this._filterText = "", this._$trigger && (this._$trigger.value = ""), this._$listbox?.clearFilter(), this._updateCreateOption()) : this._syncInputToSelection();
+  }
+  async _activateCreate(t) {
+    if (!t) return;
+    const e = new CustomEvent("rc-combobox-create", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      detail: { text: t }
+    });
+    if (this.dispatchEvent(e)) {
+      if (this._addOption({ value: t, label: t }), this.multiple) {
+        this._$listbox?.toggleOption(t), this._filterText = "", this._$trigger && (this._$trigger.value = ""), this._$listbox?.clearFilter(), this._$listbox?.setCreateOption(null);
+        return;
+      }
+      this._applySelection([t]), this._syncInputToSelection(), this.closePopup(!0), this._dispatchChange();
+    }
+  }
+  set value(t) {
+    super.value = t, this._syncInputToSelection();
+  }
+  get value() {
+    return super.value;
+  }
+  _syncInputToSelection() {
+    if (this.multiple) return;
+    const t = this.selectedValues[0], e = t ? this._labelFor(t) : "";
+    this._filterText = e, this._$trigger && (this._$trigger.value = e);
+  }
+  // ── Keyboard ──────────────────────────────────────────────────────────────────
+  _handleInputKeyDown(t) {
+    switch (t.key) {
+      case "ArrowDown":
+        t.preventDefault(), this.open ? this._adc.navigate(1) : (this.openPopup(), this._adc.navigateToFirst());
+        break;
+      case "ArrowUp":
+        t.preventDefault(), this.open && this._adc.navigate(-1);
+        break;
+      case "Home":
+        this.open && (t.preventDefault(), this._adc.navigateToFirst());
+        break;
+      case "End":
+        this.open && (t.preventDefault(), this._adc.navigateToLast());
+        break;
+      case "Enter": {
+        t.preventDefault();
+        const e = this._adc.activeItem;
+        e ? e.dispatchEvent(new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 })) : this.open && this._$listbox?.navigableItems.length && this._$listbox.navigableItems[0]?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 }));
+        break;
+      }
+      case "Tab":
+        if (this.open) {
+          const e = this._$listbox?.navigableItems[0];
+          e && e.dispatchEvent(new PointerEvent("pointerdown", { bubbles: !0, cancelable: !0 })), this.closePopup(!1);
+        }
+        break;
+      case "Escape":
+        t.preventDefault(), this._filterText = "", this._$trigger && (this._$trigger.value = ""), this.closePopup();
+        break;
+      case "Backspace":
+        this._filterText === "" && this.multiple && this._selectedValues.size > 0 && (t.preventDefault(), this._focusLastChipRemove());
+        break;
+      case "ArrowLeft":
+        t.target.selectionStart === 0 && this.multiple && this._selectedValues.size > 0 && (t.preventDefault(), this._focusLastChipRemove());
+        break;
+    }
+  }
+  _focusLastChipRemove() {
+    const t = Array.from(
+      this.renderRoot.querySelectorAll('button[part~="chip"]')
+    );
+    t[t.length - 1]?.focus();
+  }
+  get _inputPlaceholder() {
+    return this.multiple && this._selectedValues.size > 0 ? "" : this.placeholder;
+  }
+  // ── Render ────────────────────────────────────────────────────────────────────
+  render() {
+    const t = this.multiple && this._selectedValues.size > 0;
+    return u`
+      <div id="anchor" part="anchor" @click=${this._handleAnchorClick}>
+        ${t ? this._renderChips() : d}
+
+        <input
+          id="trigger"
+          part="input"
+          type="text"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="listbox"
+          aria-autocomplete="list"
+          ?disabled=${this.disabled}
+          placeholder=${this._inputPlaceholder}
+          .value=${this._filterText}
+          autocomplete="off"
+          spellcheck="false"
+          @input=${this._handleInput}
+          @keydown=${this._handleInputKeyDown}
+          @focus=${this._handleInputFocus}
+        >
+
+        <button
+          id="toggle"
+          type="button"
+          part="toggle"
+          aria-hidden="true"
+          tabindex="-1"
+          @click=${this._handleToggleClick}
+        >
+          <slot name="toggle-icon">&#9660;</slot>
+        </button>
+      </div>
+
+      <rc-listbox
+        id="listbox"
+        part="listbox"
+        popover="manual"
+        ?multiple=${this.multiple}
+        checkmark
+        .filterStrategy=${this.filterStrategy}
+        @rc-listbox-change=${this._handleListboxChange}
+      ></rc-listbox>
+
+      <slot name="select" @slotchange=${this._handleSelectSlotChange}></slot>
+    `;
+  }
+};
+l.styles = f;
+let o = l;
+a([
+  p({ type: Boolean, attribute: "allowcreate" })
+], o.prototype, "allowCreate");
+a([
+  p({ attribute: "filter-strategy", reflect: !1 })
+], o.prototype, "filterStrategy");
+a([
+  b("#trigger")
+], o.prototype, "_$trigger");
+a([
+  g()
+], o.prototype, "_filterText");
+export {
+  o as R
+};
+//# sourceMappingURL=rc-combobox-D6aALkDz.js.map

package/dist/rc-combobox-D6aALkDz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-combobox-D6aALkDz.js","sources":["../src/rc-combobox.styles.ts","../src/rc-combobox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const comboboxStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  #anchor {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--rc-combobox-gap, var(--rc-control-gap, 0.25em));\n    min-block-size: var(--rc-combobox-control-block-size, var(--rc-control-block-size, auto));\n    border: var(--rc-combobox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));\n    border-radius: var(--rc-combobox-radius, var(--rc-control-radius, var(--rc-radius-sm, 0.125em)));\n    background: var(--rc-field, Field);\n    color: var(--rc-field-text, FieldText);\n    padding: var(--rc-combobox-padding-block, calc(var(--rc-control-padding-block, 0.25em) / 2))\n      var(--rc-combobox-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));\n    cursor: text;\n    font-family: var(--rc-font-family, inherit);\n    font-size: var(--rc-font-size, inherit);\n    line-height: var(--rc-line-height, normal);\n    transition:\n      background-color var(--rc-motion-duration, 120ms),\n      border-color var(--rc-motion-duration, 120ms),\n      box-shadow var(--rc-motion-duration, 120ms);\n  }\n\n  /* Chips — the whole chip is the remove button for a larger touch target */\n  [part='chip'] {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--rc-combobox-chip-gap, calc(var(--rc-control-gap, 0.25em) * 0.8));\n    padding: var(--rc-combobox-chip-padding-block, 0.1em)\n      var(--rc-combobox-chip-padding-inline, 0.3em);\n    border: var(--rc-combobox-chip-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));\n    border-radius: var(--rc-combobox-chip-radius, var(--rc-radius-md, 0.25em));\n    background: var(--rc-button-bg, ButtonFace);\n    color: var(--rc-button-text, ButtonText);\n    font: inherit;\n    font-size: 0.875em;\n    cursor: pointer;\n\n    &:hover {\n      background: var(--rc-highlight, Highlight);\n      color: var(--rc-highlight-text, HighlightText);\n    }\n\n    &:focus-visible {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  /* Decorative × icon inside the chip — no interaction, aria-hidden */\n  [part='chip-remove'] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    font-size: 0.85em;\n    pointer-events: none;\n  }\n\n  #trigger {\n    flex: 1;\n    min-width: 6em;\n    border: none;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n    padding: var(--rc-combobox-input-padding-block, var(--rc-control-padding-block, 0.25em))\n      var(--rc-combobox-input-padding-inline, calc(var(--rc-control-padding-inline, 0.5em) / 2));\n    cursor: text;\n  }\n\n  #trigger::placeholder {\n    color: var(--rc-text-disabled, GrayText);\n  }\n\n  #toggle {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--rc-combobox-toggle-padding, var(--rc-control-padding-block, 0.25em));\n    border: none;\n    background: transparent;\n    color: inherit;\n    cursor: default;\n    font-size: 0.75em;\n    font: inherit;\n\n    &:focus-visible {\n      outline: var(--rc-focus-ring, auto);\n      outline-offset: var(--rc-focus-ring-offset, 0);\n    }\n  }\n\n  /* Hidden native select slot */\n  slot[name='select'] {\n    display: none;\n  }\n\n  /* Listbox popup — positioned by AnchorController via adoptedStyleSheets */\n  rc-listbox {\n    max-height: var(--rc-combobox-max-height, 20em);\n    overflow-y: auto;\n    background: var(--rc-surface, Canvas);\n    border: var(--rc-combobox-listbox-border, var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder)));\n    border-radius: var(--rc-combobox-listbox-radius, var(--rc-control-radius, 0));\n    box-shadow: var(--rc-combobox-shadow, var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent)));\n    color: var(--rc-field-text, FieldText);\n    padding-block: var(--rc-combobox-listbox-padding-block, var(--rc-control-padding-block, 0.25em));\n\n    &:not(:popover-open) {\n      display: none;\n    }\n  }\n\n  rc-listbox [part~='option'] {\n    display: flex;\n    align-items: center;\n    gap: var(--rc-item-gap, 0.4em);\n    padding: var(--rc-item-padding-block, 0.3em) var(--rc-item-padding-inline, 0.75em);\n    cursor: default;\n\n    /* display: flex overrides [hidden]'s browser-default display:none — restore it explicitly */\n    &[hidden] { display: none; }\n\n    &:not([hidden]):not([aria-disabled='true']):hover {\n      background: var(--rc-highlight, Highlight);\n      color: var(--rc-highlight-text, HighlightText);\n    }\n\n    &[data-active]:not([aria-disabled='true']) {\n      background: var(--rc-highlight, Highlight);\n      color: var(--rc-highlight-text, HighlightText);\n      outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));\n      outline-offset: -2px;\n    }\n\n    &[aria-disabled='true'] {\n      opacity: var(--rc-disabled-opacity, 0.5);\n      cursor: not-allowed;\n    }\n  }\n\n  rc-listbox [part~='option-checkmark'] {\n    flex-shrink: 0;\n    width: 1em;\n    text-align: center;\n    font-size: 0.85em;\n    visibility: hidden;\n  }\n\n  rc-listbox [part~='option'][aria-selected='true'] [part~='option-checkmark'] {\n    visibility: visible;\n  }\n\n  rc-listbox [part~='create-option'] {\n    font-style: italic;\n    border-top: 1px solid var(--rc-border-color, ButtonBorder);\n    margin-top: 0.25em;\n    padding-top: 0.3em;\n  }\n`;\n\nexport default comboboxStyles;\n","import { html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { RCSelect } from '@rcarls/rc-select';\nimport type { FilterStrategy } from '@rcarls/rc-listbox';\nimport { comboboxStyles } from './rc-combobox.styles.js';\n\nexport interface RCComboboxCreateEvent {\n  /** The text typed by the user that didn't match any existing option. */\n  text: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-combobox': RCCombobox;\n  }\n}\n\n/**\n * An editable combobox with autocomplete filtering and optional allow-create.\n *\n * Extends `rc-select` by replacing the trigger `<div>` with a text `<input>`\n * and adding: live filtering of the listbox, keyboard navigation from input,\n * and an optional \"Create '{text}'\" option for new entries.\n *\n * @slot select - Required. A native `<select>` element for form submission.\n * @slot toggle-icon - Optional. Replaces the default chevron icon.\n *\n * @fires rc-select-change - Inherited selection change event.\n * @fires rc-combobox-create - When the \"Create\" option is activated.\n *   `detail: { text: string }`. Cancelable — call `preventDefault()` to stop\n *   the default insertion of the new option.\n *\n * @csspart anchor - Outer container (includes chips + input + toggle).\n * @csspart chip - Individual chip (multiple mode).\n * @csspart chip-label - Text label inside a chip.\n * @csspart chip-remove - Remove button inside a chip.\n * @csspart input - The text input element.\n * @csspart toggle - The chevron toggle button.\n *\n * @cssprop [--rc-combobox-max-height=20em] - Maximum popup height.\n * @cssprop [--rc-combobox-control-block-size=var(--rc-control-block-size)] - Anchor block size.\n * @cssprop [--rc-combobox-padding-block=calc(var(--rc-control-padding-block) / 2)] - Anchor block-axis padding.\n * @cssprop [--rc-combobox-padding-inline=calc(var(--rc-control-padding-inline) / 2)] - Anchor inline-axis padding.\n * @cssprop [--rc-combobox-gap=var(--rc-control-gap)] - Gap between chips, input, and toggle.\n * @cssprop [--rc-combobox-radius=var(--rc-control-radius)] - Anchor border radius.\n * @cssprop [--rc-combobox-border=var(--rc-border)] - Anchor border.\n * @cssprop [--rc-combobox-listbox-radius=var(--rc-control-radius)] - Popup listbox border radius.\n * @cssprop [--rc-combobox-listbox-padding-block=var(--rc-control-padding-block)] - Popup listbox block padding.\n * @cssprop [--rc-combobox-chip-radius=var(--rc-radius-md)] - Multi-select chip border radius.\n * @cssprop [--rc-combobox-chip-padding-block=0.1em] - Multi-select chip block-axis padding.\n * @cssprop [--rc-combobox-chip-padding-inline=0.3em] - Multi-select chip inline-axis padding.\n * @attr [allowcreate] - When present, shows a \"Create 'X'\" option for unmatched input.\n */\nexport class RCCombobox extends RCSelect {\n  static override styles = comboboxStyles;\n\n  /** When set, shows a \"Create '{text}'\" option for text that has no exact match. */\n  @property({ type: Boolean, attribute: 'allowcreate' }) allowCreate = false;\n\n  /**\n   * How option labels are matched against typed input. Forwarded to the internal `rc-listbox`.\n   * Defaults to `'contains'` (substring). Set to `'prefix'` for starts-with matching,\n   * or pass a custom `(label, query) => boolean` predicate.\n   * Function values are JS-only; string values may be set via the `filter-strategy` attribute.\n   */\n  @property({ attribute: 'filter-strategy', reflect: false }) filterStrategy: FilterStrategy = 'contains';\n\n  @query('#trigger') protected override _$trigger!: HTMLInputElement;\n\n  @state() private _filterText = '';\n\n  // Guard against _handleInputFocus re-opening the popup immediately after close.\n  // hidePopover() can trigger a browser-native focus-return to the input in Firefox,\n  // so we use setTimeout(0) to defer the reset past any such focus events.\n  private _closingPopup = false;\n\n  // ── Override popup lifecycle ──────────────────────────────────────────────────\n\n  override openPopup() {\n    super.openPopup();\n    this._$listbox?.filterOptions(this._filterText);\n  }\n\n  override closePopup(_returnFocus = true) {\n    this._filterText = '';\n    this._$listbox?.clearFilter();\n    this._$listbox?.setCreateOption(null);\n    this._closingPopup = true;\n    super.closePopup(false);\n    // Reset after any native focus-return from hidePopover() fires\n    setTimeout(() => { this._closingPopup = false; }, 0);\n  }\n\n  // ── Input events ──────────────────────────────────────────────────────────────\n\n  private _handleInput(e: InputEvent) {\n    this._filterText = (e.target as HTMLInputElement).value;\n    if (!this.open && this._filterText) this.openPopup();\n    this._$listbox?.filterOptions(this._filterText);\n    this._updateCreateOption();\n    if (this._$listbox?.navigableItems.length) {\n      this._adc.navigateToFirst();\n    } else {\n      this._adc.clear();\n    }\n  }\n\n  private _handleInputFocus() {\n    if (!this.open && !this._closingPopup) this.openPopup();\n  }\n\n  private _handleToggleClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.open) this.closePopup();\n    else {\n      this.openPopup();\n      this._$trigger?.focus();\n    }\n  }\n\n  private _handleAnchorClick(e: MouseEvent) {\n    const target = e.target as HTMLElement;\n    if (target.closest('[part~=\"chip\"]') || (target as HTMLElement & { id?: string }).id === 'toggle') return;\n    this._$trigger?.focus();\n  }\n\n  // ── Create option ─────────────────────────────────────────────────────────────\n\n  private _updateCreateOption() {\n    if (!this.allowCreate || !this._filterText.trim()) {\n      this._$listbox?.setCreateOption(null);\n      return;\n    }\n    const trimmed = this._filterText.trim().toLowerCase();\n    const hasExact = this._$listbox?.allOptions.some(\n      (o) => o.label.toLowerCase() === trimmed\n    ) ?? false;\n    this._$listbox?.setCreateOption(hasExact ? null : this._filterText.trim());\n  }\n\n  protected override _handleListboxChange(e: CustomEvent) {\n    const { optionValue, value } = e.detail as {\n      optionValue?: string;\n      value: string | string[];\n      selected: boolean;\n    };\n    const activatedValue = optionValue ?? (Array.isArray(value) ? value.at(-1) : value);\n    if (activatedValue === '__create__') {\n      e.stopPropagation();\n      void this._activateCreate(this._filterText.trim());\n      return;\n    }\n    super._handleListboxChange(e);\n    if (!this.multiple) {\n      this._syncInputToSelection();\n    } else {\n      this._filterText = '';\n      if (this._$trigger) this._$trigger.value = '';\n      this._$listbox?.clearFilter();\n      this._updateCreateOption();\n    }\n  }\n\n  private async _activateCreate(text: string) {\n    if (!text) return;\n    const createEvent = new CustomEvent<RCComboboxCreateEvent>('rc-combobox-create', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { text },\n    });\n    if (!this.dispatchEvent(createEvent)) return;\n\n    this._addOption({ value: text, label: text });\n\n    if (this.multiple) {\n      this._$listbox?.toggleOption(text);\n      this._filterText = '';\n      if (this._$trigger) this._$trigger.value = '';\n      this._$listbox?.clearFilter();\n      this._$listbox?.setCreateOption(null);\n      return;\n    }\n\n    this._applySelection([text]);\n    this._syncInputToSelection();\n    this.closePopup(true);\n    this._dispatchChange();\n  }\n\n  override set value(value: string | string[] | undefined) {\n    super.value = value;\n    this._syncInputToSelection();\n  }\n\n  override get value(): string | string[] {\n    return super.value;\n  }\n\n  private _syncInputToSelection(): void {\n    if (this.multiple) return;\n\n    const value = this.selectedValues[0];\n    const label = value ? this._labelFor(value) : '';\n\n    this._filterText = label;\n    if (this._$trigger) this._$trigger.value = label;\n  }\n\n  // ── Keyboard ──────────────────────────────────────────────────────────────────\n\n  private _handleInputKeyDown(e: KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        if (!this.open) { this.openPopup(); this._adc.navigateToFirst(); }\n        else this._adc.navigate(1);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        if (this.open) this._adc.navigate(-1);\n        break;\n      case 'Home':\n        if (this.open) { e.preventDefault(); this._adc.navigateToFirst(); }\n        break;\n      case 'End':\n        if (this.open) { e.preventDefault(); this._adc.navigateToLast(); }\n        break;\n      case 'Enter': {\n        e.preventDefault();\n        const active = this._adc.activeItem;\n        if (active) {\n          active.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));\n        } else if (this.open && this._$listbox?.navigableItems.length) {\n          const first = this._$listbox.navigableItems[0];\n          first?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));\n        }\n        break;\n      }\n      case 'Tab':\n        if (this.open) {\n          const first = this._$listbox?.navigableItems[0];\n          if (first) {\n            first.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, cancelable: true }));\n          }\n          this.closePopup(false);\n        }\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this._filterText = '';\n        if (this._$trigger) this._$trigger.value = '';\n        this.closePopup();\n        break;\n      case 'Backspace':\n        if (this._filterText === '' && this.multiple && this._selectedValues.size > 0) {\n          e.preventDefault();\n          this._focusLastChipRemove();\n        }\n        break;\n      case 'ArrowLeft':\n        if ((e.target as HTMLInputElement).selectionStart === 0\n            && this.multiple && this._selectedValues.size > 0) {\n          e.preventDefault();\n          this._focusLastChipRemove();\n        }\n        break;\n    }\n  }\n\n  private _focusLastChipRemove() {\n    const buttons = Array.from(\n      this.renderRoot.querySelectorAll<HTMLButtonElement>('button[part~=\"chip\"]')\n    );\n    buttons[buttons.length - 1]?.focus();\n  }\n\n  private get _inputPlaceholder(): string {\n    if (this.multiple && this._selectedValues.size > 0) return '';\n    return this.placeholder;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────────\n\n  protected override render() {\n    const showChips = this.multiple && this._selectedValues.size > 0;\n\n    return html`\n      <div id=\"anchor\" part=\"anchor\" @click=${this._handleAnchorClick}>\n        ${showChips ? this._renderChips() : nothing}\n\n        <input\n          id=\"trigger\"\n          part=\"input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=\"listbox\"\n          aria-autocomplete=\"list\"\n          ?disabled=${this.disabled}\n          placeholder=${this._inputPlaceholder}\n          .value=${this._filterText}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          @input=${this._handleInput}\n          @keydown=${this._handleInputKeyDown}\n          @focus=${this._handleInputFocus}\n        >\n\n        <button\n          id=\"toggle\"\n          type=\"button\"\n          part=\"toggle\"\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n          @click=${this._handleToggleClick}\n        >\n          <slot name=\"toggle-icon\">&#9660;</slot>\n        </button>\n      </div>\n\n      <rc-listbox\n        id=\"listbox\"\n        part=\"listbox\"\n        popover=\"manual\"\n        ?multiple=${this.multiple}\n        checkmark\n        .filterStrategy=${this.filterStrategy}\n        @rc-listbox-change=${this._handleListboxChange}\n      ></rc-listbox>\n\n      <slot name=\"select\" @slotchange=${this._handleSelectSlotChange}></slot>\n    `;\n  }\n}\n\nexport default RCCombobox;\n"],"names":["comboboxStyles","css","_RCCombobox","RCSelect","_returnFocus","e","target","trimmed","hasExact","o","optionValue","value","text","createEvent","label","active","first","buttons","showChips","html","nothing","RCCombobox","__decorateClass","property","query","state"],"mappings":"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"}

package/dist/rc-combobox-define.js

@@ -0,0 +1,7 @@
+import "@rcarls/rc-listbox/define";
+import { R as o } from "./rc-combobox-D6aALkDz.js";
+customElements.get("rc-combobox") || customElements.define("rc-combobox", o);
+export {
+  o as RCCombobox
+};
+//# sourceMappingURL=rc-combobox-define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-combobox-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-listbox/define';\nimport { RCCombobox } from './index.js';\n\ncustomElements.get('rc-combobox') || customElements.define('rc-combobox', RCCombobox);\n\nexport * from './index.js';\n"],"names":["RCCombobox"],"mappings":";;AAGA,eAAe,IAAI,aAAa,KAAK,eAAe,OAAO,eAAeA,CAAU;"}

package/dist/rc-combobox.js

@@ -0,0 +1,5 @@
+import { R as m } from "./rc-combobox-D6aALkDz.js";
+export {
+  m as RCCombobox
+};
+//# sourceMappingURL=rc-combobox.js.map

package/dist/rc-combobox.js.map

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

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

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

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

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

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

@@ -0,0 +1,79 @@
+import { RCSelect } from '@rcarls/rc-select';
+import { FilterStrategy } from '@rcarls/rc-listbox';
+export interface RCComboboxCreateEvent {
+    /** The text typed by the user that didn't match any existing option. */
+    text: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-combobox': RCCombobox;
+    }
+}
+/**
+ * An editable combobox with autocomplete filtering and optional allow-create.
+ *
+ * Extends `rc-select` by replacing the trigger `<div>` with a text `<input>`
+ * and adding: live filtering of the listbox, keyboard navigation from input,
+ * and an optional "Create '{text}'" option for new entries.
+ *
+ * @slot select - Required. A native `<select>` element for form submission.
+ * @slot toggle-icon - Optional. Replaces the default chevron icon.
+ *
+ * @fires rc-select-change - Inherited selection change event.
+ * @fires rc-combobox-create - When the "Create" option is activated.
+ *   `detail: { text: string }`. Cancelable — call `preventDefault()` to stop
+ *   the default insertion of the new option.
+ *
+ * @csspart anchor - Outer container (includes chips + input + toggle).
+ * @csspart chip - Individual chip (multiple mode).
+ * @csspart chip-label - Text label inside a chip.
+ * @csspart chip-remove - Remove button inside a chip.
+ * @csspart input - The text input element.
+ * @csspart toggle - The chevron toggle button.
+ *
+ * @cssprop [--rc-combobox-max-height=20em] - Maximum popup height.
+ * @cssprop [--rc-combobox-control-block-size=var(--rc-control-block-size)] - Anchor block size.
+ * @cssprop [--rc-combobox-padding-block=calc(var(--rc-control-padding-block) / 2)] - Anchor block-axis padding.
+ * @cssprop [--rc-combobox-padding-inline=calc(var(--rc-control-padding-inline) / 2)] - Anchor inline-axis padding.
+ * @cssprop [--rc-combobox-gap=var(--rc-control-gap)] - Gap between chips, input, and toggle.
+ * @cssprop [--rc-combobox-radius=var(--rc-control-radius)] - Anchor border radius.
+ * @cssprop [--rc-combobox-border=var(--rc-border)] - Anchor border.
+ * @cssprop [--rc-combobox-listbox-radius=var(--rc-control-radius)] - Popup listbox border radius.
+ * @cssprop [--rc-combobox-listbox-padding-block=var(--rc-control-padding-block)] - Popup listbox block padding.
+ * @cssprop [--rc-combobox-chip-radius=var(--rc-radius-md)] - Multi-select chip border radius.
+ * @cssprop [--rc-combobox-chip-padding-block=0.1em] - Multi-select chip block-axis padding.
+ * @cssprop [--rc-combobox-chip-padding-inline=0.3em] - Multi-select chip inline-axis padding.
+ * @attr [allowcreate] - When present, shows a "Create 'X'" option for unmatched input.
+ */
+export declare class RCCombobox extends RCSelect {
+    static styles: import('lit').CSSResult;
+    /** When set, shows a "Create '{text}'" option for text that has no exact match. */
+    allowCreate: boolean;
+    /**
+     * How option labels are matched against typed input. Forwarded to the internal `rc-listbox`.
+     * Defaults to `'contains'` (substring). Set to `'prefix'` for starts-with matching,
+     * or pass a custom `(label, query) => boolean` predicate.
+     * Function values are JS-only; string values may be set via the `filter-strategy` attribute.
+     */
+    filterStrategy: FilterStrategy;
+    protected _$trigger: HTMLInputElement;
+    private _filterText;
+    private _closingPopup;
+    openPopup(): void;
+    closePopup(_returnFocus?: boolean): void;
+    private _handleInput;
+    private _handleInputFocus;
+    private _handleToggleClick;
+    private _handleAnchorClick;
+    private _updateCreateOption;
+    protected _handleListboxChange(e: CustomEvent): void;
+    private _activateCreate;
+    set value(value: string | string[] | undefined);
+    get value(): string | string[];
+    private _syncInputToSelection;
+    private _handleInputKeyDown;
+    private _focusLastChipRemove;
+    private get _inputPlaceholder();
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCCombobox;

package/dist/types/packages/rc-combobox/src/rc-combobox.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const comboboxStyles: import('lit').CSSResult;
+export default comboboxStyles;

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@rcarls/rc-combobox",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "description": "Headless editable combobox with filtering and allow-create, built with Lit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-combobox"
+  },
+  "homepage": "https://github.com/richardcarls/rc-webcomponents#readme",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-combobox.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-combobox/src/index.d.ts",
+        "default": "./dist/rc-combobox.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-combobox/src/define.d.ts",
+        "default": "./dist/rc-combobox-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-combobox/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-combobox-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest",
+    "test:browser:chrome": "vitest --project=chromium",
+    "test:browser:firefox": "vitest --project=firefox",
+    "yalc:publish": "yalc publish --push"
+  },
+  "dependencies": {
+    "@rcarls/rc-common": "workspace:^",
+    "@rcarls/rc-listbox": "workspace:^",
+    "@rcarls/rc-select": "workspace:^"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@guanghechen/rollup-plugin-copy": "^6.0.9",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-static-copy": "^4.1.0",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}