@rcarls/rc-combobox 0.3.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +4 -2
  2. package/dist/custom-elements.json +34 -1
  3. package/dist/{rc-combobox-C51Lb-OH.js → rc-combobox-BfEg1DVi.js} +2 -2
  4. package/dist/rc-combobox-BfEg1DVi.js.map +1 -0
  5. package/dist/rc-combobox-define.js +1 -1
  6. package/dist/rc-combobox.js +1 -1
  7. package/dist/types/packages/rc-combobox/src/rc-combobox.d.ts +11 -1
  8. package/package.json +1 -1
  9. package/dist/rc-combobox-C51Lb-OH.js.map +0 -1
package/README.md CHANGED
@@ -127,8 +127,10 @@ form.addEventListener('submit', (event) => {
127
127
 
128
128
  ## Controlled vs Uncontrolled
129
129
 
130
- **Uncontrolled (default):** set `<option selected>` or `default-value` for the initial value;
131
- the component owns selection thereafter. Listen to `rc-select-change` to observe changes.
130
+ **Uncontrolled (default):** set `<option selected>` or the `defaultValue` property for the
131
+ initial value; the component owns selection thereafter. Listen to `rc-select-change` to observe
132
+ changes. `defaultValue` accepts `string | string[]` and has no HTML attribute form — set it as a
133
+ JS property.
132
134
 
133
135
  **Controlled:** write `el.value` (the property) to drive selection programmatically. Writes are
134
136
  silent — no `rc-select-change` is dispatched. Update `el.value` in response to `rc-select-change`
package/dist/custom-elements.json CHANGED
@@ -89,6 +89,16 @@
89
89
  "name": "--rc-combobox-listbox-radius",
90
90
  "default": "var(--rc-control-radius)"
91
91
  },
92
+ {
93
+ "description": "Popup listbox border.",
94
+ "name": "--rc-combobox-listbox-border",
95
+ "default": "var(--rc-border)"
96
+ },
97
+ {
98
+ "description": "Popup listbox box shadow.",
99
+ "name": "--rc-combobox-shadow",
100
+ "default": "var(--rc-shadow)"
101
+ },
92
102
  {
93
103
  "description": "Popup listbox block padding.",
94
104
  "name": "--rc-combobox-listbox-padding-block",
@@ -108,6 +118,21 @@
108
118
  "description": "Multi-select chip inline-axis padding.",
109
119
  "name": "--rc-combobox-chip-padding-inline",
110
120
  "default": "0.3em"
121
+ },
122
+ {
123
+ "description": "Gap between chip label and remove icon.",
124
+ "name": "--rc-combobox-chip-gap",
125
+ "default": "calc(var(--rc-control-gap, 0.25em) * 0.8)"
126
+ },
127
+ {
128
+ "description": "Multi-select chip border.",
129
+ "name": "--rc-combobox-chip-border",
130
+ "default": "var(--rc-border)"
131
+ },
132
+ {
133
+ "description": "Inline size of the toggle button's icon area.",
134
+ "name": "--rc-combobox-toggle-size",
135
+ "default": "1.1em"
111
136
  }
112
137
  ],
113
138
  "cssParts": [
@@ -115,6 +140,10 @@
115
140
  "description": "Outer container (includes chips + input + toggle).",
116
141
  "name": "anchor"
117
142
  },
143
+ {
144
+ "description": "The chip group container (multiple mode).",
145
+ "name": "chips"
146
+ },
118
147
  {
119
148
  "description": "Individual chip (multiple mode).",
120
149
  "name": "chip"
@@ -134,6 +163,10 @@
134
163
  {
135
164
  "description": "The chevron toggle button.",
136
165
  "name": "toggle"
166
+ },
167
+ {
168
+ "description": "The `<rc-listbox>` popup element.",
169
+ "name": "listbox"
137
170
  }
138
171
  ],
139
172
  "slots": [
@@ -348,12 +381,12 @@
348
381
  "fieldName": "allowCreate"
349
382
  },
350
383
  {
384
+ "description": "How option labels are matched against typed input.\n\n- Forwarded to the internal `rc-listbox`.\n- Defaults to `'contains'` (substring).\n- Set to `'prefix'` for starts-with matching, or\n- Pass a custom `(label, query) => boolean` predicate.\n\nFunction values are JS-only; string values may be set via the `filter-strategy` attribute.",
351
385
  "name": "filter-strategy",
352
386
  "type": {
353
387
  "text": "FilterStrategy"
354
388
  },
355
389
  "default": "'contains'",
356
- "description": "How option labels are matched against typed input.\n\n- Forwarded to the internal `rc-listbox`.\n- Defaults to `'contains'` (substring).\n- Set to `'prefix'` for starts-with matching, or\n- Pass a custom `(label, query) => boolean` predicate.\n\nFunction values are JS-only; string values may be set via the `filter-strategy` attribute.",
357
390
  "fieldName": "filterStrategy"
358
391
  }
359
392
  ],
package/dist/{rc-combobox-C51Lb-OH.js → rc-combobox-BfEg1DVi.js} RENAMED
@@ -102,7 +102,7 @@ const f = p`
102
102
  display: inline-flex;
103
103
  align-items: center;
104
104
  justify-content: center;
105
- inline-size: var(--rc-select-toggle-indicator-size, 1.1em);
105
+ inline-size: var(--rc-combobox-toggle-size, 1.1em);
106
106
  border: none;
107
107
  background: transparent;
108
108
  color: inherit;
@@ -395,4 +395,4 @@ o([
395
395
  export {
396
396
  r as R
397
397
  };
398
- //# sourceMappingURL=rc-combobox-C51Lb-OH.js.map
398
+ //# sourceMappingURL=rc-combobox-BfEg1DVi.js.map
package/dist/rc-combobox-BfEg1DVi.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"rc-combobox-BfEg1DVi.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 padding: var(--rc-combobox-padding-block, var(--rc-control-padding-block, 1px))\n var(--rc-combobox-padding-inline, var(--rc-control-padding-inline, 4px));\n min-width: 8em;\n cursor: text;\n border: var(\n --rc-combobox-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\n border-radius: var(\n --rc-combobox-radius,\n var(--rc-control-radius, var(--rc-radius-sm, 0.125em))\n );\n background: var(--rc-field, Field);\n color: var(--rc-field-text, FieldText);\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 /* Focus ring — anchor shows the ring when the internal input is focused */\n outline: none;\n &:focus-within {\n outline: var(--rc-focus-ring, auto);\n outline-offset: var(--rc-focus-ring-offset, 0);\n }\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(\n --rc-combobox-chip-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\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: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n padding: 0;\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 inline-size: var(--rc-combobox-toggle-size, 1.1em);\n border: none;\n background: transparent;\n color: inherit;\n cursor: default;\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 /* Hide the default slot — visually suppresses the slotted native <select> */\n slot:not([name]) {\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(\n --rc-combobox-listbox-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\n border-radius: var(--rc-combobox-listbox-radius, var(--rc-control-radius, 0));\n box-shadow: var(\n --rc-combobox-shadow,\n var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n );\n color: var(--rc-field-text, FieldText);\n padding-block: var(\n --rc-combobox-listbox-padding-block,\n var(--rc-control-padding-block, 0.25em)\n );\n --rc-listbox-option-gap: var(--rc-item-gap, 0.4em);\n --rc-listbox-option-padding-block: var(--rc-item-padding-block, 0.3em);\n --rc-listbox-option-padding-inline: var(--rc-item-padding-inline, 0.75em);\n --rc-listbox-hover-bg: var(--rc-highlight, Highlight);\n --rc-listbox-hover-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-active-bg: var(--rc-highlight, Highlight);\n --rc-listbox-active-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-selected-bg: var(--rc-highlight, Highlight);\n --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-disabled-opacity: var(--rc-disabled-opacity, 0.5);\n\n &:not(:popover-open) {\n display: none;\n }\n }\n\n rc-listbox [part~='option'][hidden] {\n display: none;\n }\n\n rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {\n outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));\n outline-offset: -2px;\n }\n\n rc-listbox [part~='option'][aria-disabled='true'] {\n cursor: not-allowed;\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';\n\nimport { RCSelect } from '@rcarls/rc-select';\nimport type { FilterStrategy, RCListboxChangeEvent } from '@rcarls/rc-listbox';\n\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 * Editable combobox with filtering and optional allow-create behavior, configured from\n * native option data and following the WAI-ARIA Combobox pattern.\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 * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-combobox rc-combobox docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ WAI-ARIA Combobox pattern}\n *\n * @slot - 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 chips - The chip group container (multiple mode).\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 * @csspart listbox - The `<rc-listbox>` popup element.\n *\n * @attr allow-create - When present, shows a \"Create 'X'\" option for unmatched input.\n * @attr filter-strategy - How option labels are matched against typed input: `'contains'`\n * (default), `'prefix'`, or a custom predicate set via the `filterStrategy` JS property.\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-border=var(--rc-border)] - Popup listbox border.\n * @cssprop [--rc-combobox-shadow=var(--rc-shadow)] - Popup listbox box shadow.\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 * @cssprop [--rc-combobox-chip-gap=calc(var(--rc-control-gap, 0.25em) * 0.8)] - Gap between chip\n * label and remove icon.\n * @cssprop [--rc-combobox-chip-border=var(--rc-border)] - Multi-select chip border.\n * @cssprop [--rc-combobox-toggle-size=1.1em] - Inline size of the toggle button's icon area.\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: 'allow-create' })\n allowCreate = false;\n\n /**\n * How option labels are matched against typed input.\n *\n * - Forwarded to the internal `rc-listbox`.\n * - Defaults to `'contains'` (substring).\n * - Set to `'prefix'` for starts-with matching, or\n * - Pass a custom `(label, query) => boolean` predicate.\n *\n * Function values are JS-only; string values may be set via the `filter-strategy` attribute.\n */\n @property({ attribute: 'filter-strategy', reflect: false })\n filterStrategy: FilterStrategy = 'contains';\n\n @query('#trigger')\n protected override _$trigger!: HTMLInputElement;\n\n @state()\n private _filterText = '';\n\n // Guard against _handleInputFocus re-opening the popup immediately after close.\n private _closingPopup = false;\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\n super.closePopup(false);\n\n // Deferred past any native focus-return from hidePopover() in Firefox\n setTimeout(() => {\n this._closingPopup = false;\n }, 0);\n }\n\n private _handleInput(e: InputEvent) {\n this._filterText = (e.target as HTMLInputElement).value;\n\n if (!this.open && this._filterText) {\n this.openPopup();\n }\n\n this._$listbox?.filterOptions(this._filterText);\n this._updateCreateOption();\n\n if (this._$listbox?.navigableItems.length) {\n this._activeDescendantCtrl.navigateToFirst();\n } else {\n this._activeDescendantCtrl.clear();\n }\n }\n\n private _handleInputFocus() {\n if (!this.open && !this._closingPopup) {\n this.openPopup();\n }\n }\n\n private _handleToggleClick(e: MouseEvent) {\n e.stopPropagation();\n\n if (this.open) {\n 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\n if (\n $target.closest('[part~=\"chip\"]') ||\n ($target as HTMLElement & { id?: string }).id === 'toggle'\n ) {\n return;\n }\n\n this._$trigger?.focus();\n }\n\n private _updateCreateOption() {\n if (!this.allowCreate || !this._filterText.trim()) {\n this._$listbox?.setCreateOption(null);\n\n return;\n }\n\n const trimmed = this._filterText.trim().toLowerCase();\n const hasExact =\n this._$listbox?.allOptions.some((o) => o.label.toLowerCase() === trimmed) ?? false;\n\n this._$listbox?.setCreateOption(hasExact ? null : this._filterText.trim());\n }\n\n protected override _handleListboxChange(e: CustomEvent) {\n const detail = e.detail as RCListboxChangeEvent;\n\n if (detail.reason === 'action' && detail.action === 'create') {\n e.stopPropagation();\n void this._activateCreate(this._filterText.trim());\n\n return;\n }\n\n super._handleListboxChange(e);\n\n if (!this.multiple) {\n this._syncInputToSelection();\n } else {\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this._$listbox?.clearFilter();\n this._updateCreateOption();\n }\n }\n\n private async _activateCreate(text: string) {\n if (!text) {\n return;\n }\n\n const createEvent = new CustomEvent<RCComboboxCreateEvent>('rc-combobox-create', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: { text },\n });\n\n if (!this.dispatchEvent(createEvent)) {\n return;\n }\n\n this._addOption({ value: text, label: text });\n\n if (this.multiple) {\n this._$listbox?.toggleOption(text);\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this._$listbox?.clearFilter();\n this._$listbox?.setCreateOption(null);\n\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) {\n return;\n }\n\n const value = this.selectedValues[0];\n const label = value ? this._labelFor(value) : '';\n\n this._filterText = label;\n\n if (this._$trigger) {\n this._$trigger.value = label;\n }\n }\n\n private _handleInputKeyDown(e: KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n\n if (!this.open) {\n this.openPopup();\n this._activeDescendantCtrl.navigateToFirst();\n } else {\n this._activeDescendantCtrl.navigate(1);\n }\n\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n\n if (this.open) {\n this._activeDescendantCtrl.navigate(-1);\n }\n\n break;\n\n case 'Home':\n if (this.open) {\n e.preventDefault();\n\n this._activeDescendantCtrl.navigateToFirst();\n }\n break;\n\n case 'End':\n if (this.open) {\n e.preventDefault();\n\n this._activeDescendantCtrl.navigateToLast();\n }\n break;\n\n case 'Enter': {\n e.preventDefault();\n const active = this._activeDescendantCtrl.activeItem;\n\n if (active) {\n active.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n } else if (this.open && this._$listbox?.navigableItems.length) {\n const $first = this._$listbox.navigableItems[0];\n\n $first?.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n }\n\n break;\n }\n\n case 'Tab':\n if (this.open) {\n const $first = this._$listbox?.navigableItems[0];\n\n if ($first) {\n $first.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n }\n\n this.closePopup(false);\n }\n\n break;\n\n case 'Escape':\n e.preventDefault();\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this.closePopup();\n break;\n\n case 'Backspace':\n if (this._filterText === '' && this.multiple && this._selectedValues.size > 0) {\n e.preventDefault();\n this._focusLastChipRemove();\n }\n\n break;\n\n case 'ArrowLeft':\n if (\n (e.target as HTMLInputElement).selectionStart === 0 &&\n this.multiple &&\n this._selectedValues.size > 0\n ) {\n e.preventDefault();\n this._focusLastChipRemove();\n }\n\n break;\n }\n }\n\n private _focusLastChipRemove() {\n const $buttons = Array.from(\n this.renderRoot.querySelectorAll<HTMLButtonElement>('button[part~=\"chip\"]'),\n );\n\n $buttons[$buttons.length - 1]?.focus();\n }\n\n private get _inputPlaceholder(): string {\n if (this.multiple && this._selectedValues.size > 0) {\n return '';\n }\n\n return this.placeholder;\n }\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\">\n <svg\n width=\"10\"\n height=\"6\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1,1 5,5 9,1\" />\n </svg>\n </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 @slotchange=${this._handleSelectSlotChange}></slot>\n `;\n }\n}\n\nexport default RCCombobox;\n"],"names":["comboboxStyles","css","_RCCombobox","RCSelect","_returnFocus","e","$target","trimmed","hasExact","o","detail","text","createEvent","value","label","active","$first","$buttons","showChips","html","nothing","RCCombobox","__decorateClass","property","query","state"],"mappings":"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"}
package/dist/rc-combobox-define.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "@rcarls/rc-listbox/define";
2
- import { R as o } from "./rc-combobox-C51Lb-OH.js";
2
+ import { R as o } from "./rc-combobox-BfEg1DVi.js";
3
3
  customElements.get("rc-combobox") || customElements.define("rc-combobox", o);
4
4
  export {
5
5
  o as RCCombobox
package/dist/rc-combobox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { R as m } from "./rc-combobox-C51Lb-OH.js";
1
+ import { R as m } from "./rc-combobox-BfEg1DVi.js";
2
2
  export {
3
3
  m as RCCombobox
4
4
  };
package/dist/types/packages/rc-combobox/src/rc-combobox.d.ts CHANGED
@@ -29,13 +29,17 @@ declare global {
29
29
  * the default insertion of the new option.
30
30
  *
31
31
  * @csspart anchor - Outer container (includes chips + input + toggle).
32
+ * @csspart chips - The chip group container (multiple mode).
32
33
  * @csspart chip - Individual chip (multiple mode).
33
34
  * @csspart chip-label - Text label inside a chip.
34
35
  * @csspart chip-remove - Remove button inside a chip.
35
36
  * @csspart input - The text input element.
36
37
  * @csspart toggle - The chevron toggle button.
38
+ * @csspart listbox - The `<rc-listbox>` popup element.
37
39
  *
38
- * @attr [allow-create] - When present, shows a "Create 'X'" option for unmatched input.
40
+ * @attr allow-create - When present, shows a "Create 'X'" option for unmatched input.
41
+ * @attr filter-strategy - How option labels are matched against typed input: `'contains'`
42
+ * (default), `'prefix'`, or a custom predicate set via the `filterStrategy` JS property.
39
43
  *
40
44
  * @cssprop [--rc-combobox-max-height=20em] - Maximum popup height.
41
45
  * @cssprop [--rc-combobox-control-block-size=var(--rc-control-block-size)] - Anchor block size.
@@ -45,10 +49,16 @@ declare global {
45
49
  * @cssprop [--rc-combobox-radius=var(--rc-control-radius)] - Anchor border radius.
46
50
  * @cssprop [--rc-combobox-border=var(--rc-border)] - Anchor border.
47
51
  * @cssprop [--rc-combobox-listbox-radius=var(--rc-control-radius)] - Popup listbox border radius.
52
+ * @cssprop [--rc-combobox-listbox-border=var(--rc-border)] - Popup listbox border.
53
+ * @cssprop [--rc-combobox-shadow=var(--rc-shadow)] - Popup listbox box shadow.
48
54
  * @cssprop [--rc-combobox-listbox-padding-block=var(--rc-control-padding-block)] - Popup listbox block padding.
49
55
  * @cssprop [--rc-combobox-chip-radius=var(--rc-radius-md)] - Multi-select chip border radius.
50
56
  * @cssprop [--rc-combobox-chip-padding-block=0.1em] - Multi-select chip block-axis padding.
51
57
  * @cssprop [--rc-combobox-chip-padding-inline=0.3em] - Multi-select chip inline-axis padding.
58
+ * @cssprop [--rc-combobox-chip-gap=calc(var(--rc-control-gap, 0.25em) * 0.8)] - Gap between chip
59
+ * label and remove icon.
60
+ * @cssprop [--rc-combobox-chip-border=var(--rc-border)] - Multi-select chip border.
61
+ * @cssprop [--rc-combobox-toggle-size=1.1em] - Inline size of the toggle button's icon area.
52
62
  */
53
63
  export declare class RCCombobox extends RCSelect {
54
64
  static styles: import('lit').CSSResult;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "0.3.1",
6
+ "version": "0.4.0",
7
7
  "description": "Editable combobox with filtering and optional allow-create behavior, configured from native option data.",
8
8
  "repository": {
9
9
  "type": "git",
package/dist/rc-combobox-C51Lb-OH.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"rc-combobox-C51Lb-OH.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 padding: var(--rc-combobox-padding-block, var(--rc-control-padding-block, 1px))\n var(--rc-combobox-padding-inline, var(--rc-control-padding-inline, 4px));\n min-width: 8em;\n cursor: text;\n border: var(\n --rc-combobox-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\n border-radius: var(\n --rc-combobox-radius,\n var(--rc-control-radius, var(--rc-radius-sm, 0.125em))\n );\n background: var(--rc-field, Field);\n color: var(--rc-field-text, FieldText);\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 /* Focus ring — anchor shows the ring when the internal input is focused */\n outline: none;\n &:focus-within {\n outline: var(--rc-focus-ring, auto);\n outline-offset: var(--rc-focus-ring-offset, 0);\n }\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(\n --rc-combobox-chip-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\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: 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n padding: 0;\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 inline-size: var(--rc-select-toggle-indicator-size, 1.1em);\n border: none;\n background: transparent;\n color: inherit;\n cursor: default;\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 /* Hide the default slot — visually suppresses the slotted native <select> */\n slot:not([name]) {\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(\n --rc-combobox-listbox-border,\n var(--rc-border, 1px solid var(--rc-border-color, ButtonBorder))\n );\n border-radius: var(--rc-combobox-listbox-radius, var(--rc-control-radius, 0));\n box-shadow: var(\n --rc-combobox-shadow,\n var(--rc-shadow, 0 2px 8px color-mix(in srgb, CanvasText 15%, transparent))\n );\n color: var(--rc-field-text, FieldText);\n padding-block: var(\n --rc-combobox-listbox-padding-block,\n var(--rc-control-padding-block, 0.25em)\n );\n --rc-listbox-option-gap: var(--rc-item-gap, 0.4em);\n --rc-listbox-option-padding-block: var(--rc-item-padding-block, 0.3em);\n --rc-listbox-option-padding-inline: var(--rc-item-padding-inline, 0.75em);\n --rc-listbox-hover-bg: var(--rc-highlight, Highlight);\n --rc-listbox-hover-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-active-bg: var(--rc-highlight, Highlight);\n --rc-listbox-active-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-selected-bg: var(--rc-highlight, Highlight);\n --rc-listbox-selected-color: var(--rc-highlight-text, HighlightText);\n --rc-listbox-disabled-opacity: var(--rc-disabled-opacity, 0.5);\n\n &:not(:popover-open) {\n display: none;\n }\n }\n\n rc-listbox [part~='option'][hidden] {\n display: none;\n }\n\n rc-listbox [part~='option'][data-active]:not([aria-disabled='true']) {\n outline: var(--rc-focus-ring, 2px solid var(--rc-accent, Highlight));\n outline-offset: -2px;\n }\n\n rc-listbox [part~='option'][aria-disabled='true'] {\n cursor: not-allowed;\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';\n\nimport { RCSelect } from '@rcarls/rc-select';\nimport type { FilterStrategy, RCListboxChangeEvent } from '@rcarls/rc-listbox';\n\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 * Editable combobox with filtering and optional allow-create behavior, configured from\n * native option data and following the WAI-ARIA Combobox pattern.\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 * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-combobox rc-combobox docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ WAI-ARIA Combobox pattern}\n *\n * @slot - 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 * @attr [allow-create] - When present, shows a \"Create 'X'\" option for unmatched input.\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 */\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: 'allow-create' })\n allowCreate = false;\n\n /**\n * How option labels are matched against typed input.\n *\n * - Forwarded to the internal `rc-listbox`.\n * - Defaults to `'contains'` (substring).\n * - Set to `'prefix'` for starts-with matching, or\n * - Pass a custom `(label, query) => boolean` predicate.\n *\n * Function values are JS-only; string values may be set via the `filter-strategy` attribute.\n */\n @property({ attribute: 'filter-strategy', reflect: false })\n filterStrategy: FilterStrategy = 'contains';\n\n @query('#trigger')\n protected override _$trigger!: HTMLInputElement;\n\n @state()\n private _filterText = '';\n\n // Guard against _handleInputFocus re-opening the popup immediately after close.\n private _closingPopup = false;\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\n super.closePopup(false);\n\n // Deferred past any native focus-return from hidePopover() in Firefox\n setTimeout(() => {\n this._closingPopup = false;\n }, 0);\n }\n\n private _handleInput(e: InputEvent) {\n this._filterText = (e.target as HTMLInputElement).value;\n\n if (!this.open && this._filterText) {\n this.openPopup();\n }\n\n this._$listbox?.filterOptions(this._filterText);\n this._updateCreateOption();\n\n if (this._$listbox?.navigableItems.length) {\n this._activeDescendantCtrl.navigateToFirst();\n } else {\n this._activeDescendantCtrl.clear();\n }\n }\n\n private _handleInputFocus() {\n if (!this.open && !this._closingPopup) {\n this.openPopup();\n }\n }\n\n private _handleToggleClick(e: MouseEvent) {\n e.stopPropagation();\n\n if (this.open) {\n 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\n if (\n $target.closest('[part~=\"chip\"]') ||\n ($target as HTMLElement & { id?: string }).id === 'toggle'\n ) {\n return;\n }\n\n this._$trigger?.focus();\n }\n\n private _updateCreateOption() {\n if (!this.allowCreate || !this._filterText.trim()) {\n this._$listbox?.setCreateOption(null);\n\n return;\n }\n\n const trimmed = this._filterText.trim().toLowerCase();\n const hasExact =\n this._$listbox?.allOptions.some((o) => o.label.toLowerCase() === trimmed) ?? false;\n\n this._$listbox?.setCreateOption(hasExact ? null : this._filterText.trim());\n }\n\n protected override _handleListboxChange(e: CustomEvent) {\n const detail = e.detail as RCListboxChangeEvent;\n\n if (detail.reason === 'action' && detail.action === 'create') {\n e.stopPropagation();\n void this._activateCreate(this._filterText.trim());\n\n return;\n }\n\n super._handleListboxChange(e);\n\n if (!this.multiple) {\n this._syncInputToSelection();\n } else {\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this._$listbox?.clearFilter();\n this._updateCreateOption();\n }\n }\n\n private async _activateCreate(text: string) {\n if (!text) {\n return;\n }\n\n const createEvent = new CustomEvent<RCComboboxCreateEvent>('rc-combobox-create', {\n bubbles: true,\n composed: true,\n cancelable: true,\n detail: { text },\n });\n\n if (!this.dispatchEvent(createEvent)) {\n return;\n }\n\n this._addOption({ value: text, label: text });\n\n if (this.multiple) {\n this._$listbox?.toggleOption(text);\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this._$listbox?.clearFilter();\n this._$listbox?.setCreateOption(null);\n\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) {\n return;\n }\n\n const value = this.selectedValues[0];\n const label = value ? this._labelFor(value) : '';\n\n this._filterText = label;\n\n if (this._$trigger) {\n this._$trigger.value = label;\n }\n }\n\n private _handleInputKeyDown(e: KeyboardEvent) {\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n\n if (!this.open) {\n this.openPopup();\n this._activeDescendantCtrl.navigateToFirst();\n } else {\n this._activeDescendantCtrl.navigate(1);\n }\n\n break;\n\n case 'ArrowUp':\n e.preventDefault();\n\n if (this.open) {\n this._activeDescendantCtrl.navigate(-1);\n }\n\n break;\n\n case 'Home':\n if (this.open) {\n e.preventDefault();\n\n this._activeDescendantCtrl.navigateToFirst();\n }\n break;\n\n case 'End':\n if (this.open) {\n e.preventDefault();\n\n this._activeDescendantCtrl.navigateToLast();\n }\n break;\n\n case 'Enter': {\n e.preventDefault();\n const active = this._activeDescendantCtrl.activeItem;\n\n if (active) {\n active.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n } else if (this.open && this._$listbox?.navigableItems.length) {\n const $first = this._$listbox.navigableItems[0];\n\n $first?.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n }\n\n break;\n }\n\n case 'Tab':\n if (this.open) {\n const $first = this._$listbox?.navigableItems[0];\n\n if ($first) {\n $first.dispatchEvent(\n new PointerEvent('pointerdown', { bubbles: true, cancelable: true }),\n );\n }\n\n this.closePopup(false);\n }\n\n break;\n\n case 'Escape':\n e.preventDefault();\n this._filterText = '';\n\n if (this._$trigger) {\n this._$trigger.value = '';\n }\n\n this.closePopup();\n break;\n\n case 'Backspace':\n if (this._filterText === '' && this.multiple && this._selectedValues.size > 0) {\n e.preventDefault();\n this._focusLastChipRemove();\n }\n\n break;\n\n case 'ArrowLeft':\n if (\n (e.target as HTMLInputElement).selectionStart === 0 &&\n this.multiple &&\n this._selectedValues.size > 0\n ) {\n e.preventDefault();\n this._focusLastChipRemove();\n }\n\n break;\n }\n }\n\n private _focusLastChipRemove() {\n const $buttons = Array.from(\n this.renderRoot.querySelectorAll<HTMLButtonElement>('button[part~=\"chip\"]'),\n );\n\n $buttons[$buttons.length - 1]?.focus();\n }\n\n private get _inputPlaceholder(): string {\n if (this.multiple && this._selectedValues.size > 0) {\n return '';\n }\n\n return this.placeholder;\n }\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\">\n <svg\n width=\"10\"\n height=\"6\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"1,1 5,5 9,1\" />\n </svg>\n </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 @slotchange=${this._handleSelectSlotChange}></slot>\n `;\n }\n}\n\nexport default RCCombobox;\n"],"names":["comboboxStyles","css","_RCCombobox","RCSelect","_returnFocus","e","$target","trimmed","hasExact","o","detail","text","createEvent","value","label","active","$first","$buttons","showChips","html","nothing","RCCombobox","__decorateClass","property","query","state"],"mappings":"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"}