@threadlabs/looma 0.1.25 → 0.1.26

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 (54) hide show
  1. package/dist/{chunk-UY423IKN.js → chunk-XRJRF3MM.js} +33 -33
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/looma.cjs.js +1 -1
  4. package/dist/cjs/ui-multi-combobox.cjs.entry.js +35 -3
  5. package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js +53 -3
  6. package/dist/components/ui-multi-combobox.js +1 -1
  7. package/dist/esm/loader.js +1 -1
  8. package/dist/esm/looma.js +1 -1
  9. package/dist/esm/ui-multi-combobox.entry.js +35 -3
  10. package/dist/index.cjs +33 -4
  11. package/dist/index.js +2 -2
  12. package/dist/looma/looma.esm.js +1 -1
  13. package/dist/looma/p-05592219.entry.js +1 -0
  14. package/dist/types/components/ui-multi-combobox/ui-multi-combobox.d.ts +4 -0
  15. package/dist/types/components.d.ts +10 -0
  16. package/dist/{ui-affordance-scope.entry-VSSP52ZP.js → ui-affordance-scope.entry-6N4ZQ5FM.js} +1 -1
  17. package/dist/{ui-avatar-group.entry-JMCLL6FW.js → ui-avatar-group.entry-FTZVEFGI.js} +1 -1
  18. package/dist/{ui-avatar.entry-X2YQ3QPG.js → ui-avatar.entry-SST735OH.js} +1 -1
  19. package/dist/{ui-badge.entry-OJ6FJJKL.js → ui-badge.entry-DZGS7MUT.js} +1 -1
  20. package/dist/{ui-button.entry-ZN6JLND7.js → ui-button.entry-5WX56ARJ.js} +1 -1
  21. package/dist/{ui-callout.entry-7K6NXQ7U.js → ui-callout.entry-OI5RNRXV.js} +1 -1
  22. package/dist/{ui-checkbox.entry-GUYRVU6O.js → ui-checkbox.entry-HCGIQPSE.js} +1 -1
  23. package/dist/{ui-chip_2.entry-M2DOTIGY.js → ui-chip_2.entry-G2IGWJTL.js} +1 -1
  24. package/dist/{ui-context-menu.entry-BM7FHOUJ.js → ui-context-menu.entry-K2LRT2WV.js} +1 -1
  25. package/dist/{ui-dialog.entry-AZAD37CG.js → ui-dialog.entry-4W2T27R6.js} +1 -1
  26. package/dist/{ui-disclosure.entry-XDPGKMBK.js → ui-disclosure.entry-ONYMXRKR.js} +1 -1
  27. package/dist/{ui-editable.entry-S3TE6KFT.js → ui-editable.entry-4ZHXIOER.js} +1 -1
  28. package/dist/{ui-floating-action-button.entry-U7HGA3CS.js → ui-floating-action-button.entry-XU4JO2ZV.js} +1 -1
  29. package/dist/{ui-form-field.entry-C2ZSP3TM.js → ui-form-field.entry-BZSEWR4A.js} +1 -1
  30. package/dist/{ui-icon-button.entry-P6H2LY7D.js → ui-icon-button.entry-MHJKL5OZ.js} +1 -1
  31. package/dist/{ui-input.entry-GTNQJCQ2.js → ui-input.entry-BL6EX3GC.js} +1 -1
  32. package/dist/{ui-menu-item.entry-2HWOGUO5.js → ui-menu-item.entry-LERF3A4G.js} +1 -1
  33. package/dist/{ui-menu.entry-NZ7ER54K.js → ui-menu.entry-WXDYGFJE.js} +1 -1
  34. package/dist/{ui-multi-combobox.entry-DZ5LLSVQ.js → ui-multi-combobox.entry-WSNWVRXE.js} +33 -4
  35. package/dist/{ui-popover.entry-ZOEQMUWG.js → ui-popover.entry-P6STTQVS.js} +1 -1
  36. package/dist/{ui-radio-group.entry-QCQ46EK5.js → ui-radio-group.entry-GZLHOY2M.js} +1 -1
  37. package/dist/{ui-radio.entry-QAATWUYT.js → ui-radio.entry-4PXIRDKT.js} +1 -1
  38. package/dist/{ui-search-result-row.entry-2I3DH2OT.js → ui-search-result-row.entry-LHNOT7MK.js} +1 -1
  39. package/dist/{ui-search-shell.entry-7RS55ORF.js → ui-search-shell.entry-GQCMEU2Z.js} +1 -1
  40. package/dist/{ui-select.entry-6O4KD4G7.js → ui-select.entry-TZU7XX4U.js} +1 -1
  41. package/dist/{ui-switch.entry-DY5PSHCQ.js → ui-switch.entry-QFH3YDYP.js} +1 -1
  42. package/dist/{ui-tabs.entry-6X56UOUE.js → ui-tabs.entry-A57JVDT2.js} +1 -1
  43. package/dist/{ui-textarea.entry-RDYP6O77.js → ui-textarea.entry-L3RLZIGO.js} +1 -1
  44. package/dist/{ui-toast-region.entry-EBY42KS5.js → ui-toast-region.entry-XKKEY4K7.js} +1 -1
  45. package/dist/{ui-tooltip.entry-PLXMPOKV.js → ui-tooltip.entry-5WQTX7XF.js} +1 -1
  46. package/dist/{ui-top-bar.entry-QKE2DLVD.js → ui-top-bar.entry-KMJEFYOM.js} +1 -1
  47. package/dist/{ui-tree-item.entry-TC6YWIC6.js → ui-tree-item.entry-TUBC57FI.js} +1 -1
  48. package/dist/{ui-tree.entry-UL6UHCUT.js → ui-tree.entry-Y75CRURL.js} +1 -1
  49. package/package.json +1 -1
  50. package/vue/{chunk-GXQY27K2.js → chunk-2DDIBSFD.js} +4 -1
  51. package/vue/editor/index.js +1 -1
  52. package/vue/index.d.ts +9 -0
  53. package/vue/index.js +1 -1
  54. package/dist/looma/p-b6c776fb.entry.js +0 -1
@@ -2,7 +2,7 @@ import {
2
2
  Host,
3
3
  h,
4
4
  registerInstance
5
- } from "./chunk-UY423IKN.js";
5
+ } from "./chunk-XRJRF3MM.js";
6
6
 
7
7
  // dist/esm/ui-menu-item.entry.js
8
8
  var uiMenuItemCss = () => `:host{display:block;width:100%}.menu-item__surface{display:block;box-sizing:border-box;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease)}:host(:hover:not([aria-disabled='true']):not([disabled])) .menu-item__surface{background:var(--ui-surface-subtle)}:host([aria-disabled='true']) .menu-item__surface,:host([disabled]) .menu-item__surface{opacity:0.6;cursor:not-allowed}`;
@@ -19,7 +19,7 @@ import {
19
19
  getElement,
20
20
  h,
21
21
  registerInstance
22
- } from "./chunk-UY423IKN.js";
22
+ } from "./chunk-XRJRF3MM.js";
23
23
 
24
24
  // dist/esm/ui-menu.entry.js
25
25
  var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.menu__surface{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}`;
@@ -4,7 +4,7 @@ import {
4
4
  getElement,
5
5
  h,
6
6
  registerInstance
7
- } from "./chunk-UY423IKN.js";
7
+ } from "./chunk-XRJRF3MM.js";
8
8
 
9
9
  // dist/esm/ui-multi-combobox.entry.js
10
10
  var uiMultiComboboxCss = () => `:host{display:block;min-inline-size:0;color:var(--ui-text-primary);font:inherit}ui-combobox::part(field){flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}ui-combobox::part(input){flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;max-inline-size:100%;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}`;
@@ -26,6 +26,8 @@ var UIMultiCombobox = class {
26
26
  config = {};
27
27
  query;
28
28
  defaultQuery = "";
29
+ /** Characters that commit the current query and leave the input ready for the next item. */
30
+ tokenSeparators = [];
29
31
  disabled = false;
30
32
  readOnly = false;
31
33
  required = false;
@@ -71,6 +73,11 @@ var UIMultiCombobox = class {
71
73
  this.raw = query;
72
74
  this.queryChange.emit({ query, display: query, trigger });
73
75
  }
76
+ clearCommittedQuery(input, trigger) {
77
+ input.value = "";
78
+ this.raw = "";
79
+ this.setQuery("", trigger);
80
+ }
74
81
  onQueryChange = (event) => {
75
82
  event.stopPropagation();
76
83
  this.setQuery(event.detail.query, event.detail.trigger);
@@ -96,6 +103,20 @@ var UIMultiCombobox = class {
96
103
  this.setQuery("", event.detail.trigger);
97
104
  this.createItem.emit({ query, trigger: event.detail.trigger });
98
105
  };
106
+ commitQuery(input, trigger) {
107
+ const query = this.raw.trim();
108
+ if (!query)
109
+ return;
110
+ const normalizedQuery = query.toLocaleLowerCase();
111
+ const option = this.rows.find((row) => row.label.trim().toLocaleLowerCase() === normalizedQuery);
112
+ if (option) {
113
+ this.clearCommittedQuery(input, trigger);
114
+ this.addItem.emit({ item: option, index: this.items.length, trigger });
115
+ } else if (this.config.allowCreate) {
116
+ this.clearCommittedQuery(input, trigger);
117
+ this.createItem.emit({ query, trigger });
118
+ }
119
+ }
99
120
  remove(index, trigger) {
100
121
  const item = this.items[index];
101
122
  if (!item || item.disabled || this.disabled || this.readOnly)
@@ -134,10 +155,18 @@ var UIMultiCombobox = class {
134
155
  }
135
156
  };
136
157
  onKeyDown = (event) => {
137
- if (event.defaultPrevented || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
158
+ if (event.defaultPrevented || event.isComposing || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
138
159
  return;
139
160
  const input = event.composedPath().find((node) => node instanceof HTMLInputElement);
140
- if (!input || this.raw || (input.selectionStart ?? 0) > 0)
161
+ if (!input)
162
+ return;
163
+ if (this.tokenSeparators.includes(event.key)) {
164
+ event.preventDefault();
165
+ event.stopPropagation();
166
+ this.commitQuery(input, "keyboard");
167
+ return;
168
+ }
169
+ if (this.raw || (input.selectionStart ?? 0) > 0)
141
170
  return;
142
171
  if (event.key === "ArrowLeft" && this.items.length) {
143
172
  event.preventDefault();
@@ -151,7 +180,7 @@ var UIMultiCombobox = class {
151
180
  await this.combobox?.focusInput();
152
181
  }
153
182
  render() {
154
- return h(Host, { key: "bdb03a28ea25b22340dc56381fa45031f0c47c27", onKeyDown: this.onKeyDown }, h("ui-combobox", { key: "51ba1ab747af9f216223bd71f524db79ef57b8a9", ref: (element) => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: "ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba", slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: (event) => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map((option) => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: "99cd9848130de37e52a4f735c95e3754dbc64691", slot: "create" }, h("slot", { key: "84cc7c14716819bd968bdfcb9213fe3887a5c2b9", name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: "1660eb03425dea4d36797e416d91b051531a470d", slot: "loading" }, h("slot", { key: "10c979403e89331e8bdf69ff2db3f5bc272b2685", name: "loading" }, "Loading suggestions\u2026")), h("span", { key: "1c862b6c5906aa3ec5fc874de5a5119e13ef9422", slot: "empty" }, h("slot", { key: "1c70a1beb7321d3b2be888b3826a1dba2f6fcc70", name: "empty" }, "No suggestions.")), h("span", { key: "4b4da5cb8b22543b90ff9230191bbb2e81d16408", slot: "error" }, h("slot", { key: "a371a5ce50895562ebc6e55227e4a4834af37f3d", name: "error" }, "Unable to load suggestions.")), h("div", { key: "f82e38165d90bdbfa8413c0a561abf7ab5da0183", slot: "footer" }, h("slot", { key: "6c0bd2b89428832f4cb485f5d2e30a792859ba9e", name: "footer" }))));
183
+ return h(Host, { key: "c1acc758a2856e5bd022e076030798c9d63ff416", onKeyDown: this.onKeyDown }, h("ui-combobox", { key: "8f77d28aa1d228dd809f86695429328decaf7468", ref: (element) => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: "f4f0849c145d9bcc4d47103d3dc4fdce8009aeab", slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: (event) => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map((option) => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: "3cf42f492bd946ca130321a2c3fcf976602c6566", slot: "create" }, h("slot", { key: "6f158cb1d96c0d0401fe5302cabffd052498f651", name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: "0f436aca38aecf9485963d6588c27ab3288ced55", slot: "loading" }, h("slot", { key: "6c079ac5bbf6fff57aa7fa6f0022a939c96a5cd0", name: "loading" }, "Loading suggestions\u2026")), h("span", { key: "a7893e0ff0a1922a404e7c072338858d9e7fdf12", slot: "empty" }, h("slot", { key: "d6831db76cc1252aa942ccdcfba36c8cf4c60d22", name: "empty" }, "No suggestions.")), h("span", { key: "a096a393a167256cff11f77110ae29ac58a33779", slot: "error" }, h("slot", { key: "1bf52c85e911d9965b9b691d6ebf0b89bbea2d58", name: "error" }, "Unable to load suggestions.")), h("div", { key: "b7d88c9b427305da8b986eb993b49e5c581c1445", slot: "footer" }, h("slot", { key: "f84fdf78c3e373f4735ed88574af06f1ca3cc1b5", name: "footer" }))));
155
184
  }
156
185
  static get watchers() {
157
186
  return {
@@ -18,7 +18,7 @@ import {
18
18
  getElement,
19
19
  h,
20
20
  registerInstance
21
- } from "./chunk-UY423IKN.js";
21
+ } from "./chunk-XRJRF3MM.js";
22
22
 
23
23
  // dist/esm/ui-popover.entry.js
24
24
  var uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);box-sizing:border-box;max-inline-size:min( 20rem, calc(100vw - (var(--ui-popover-viewport-gap) * 2)) );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.popover__surface{box-sizing:border-box;padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
@@ -7,7 +7,7 @@ import {
7
7
  getElement,
8
8
  h,
9
9
  registerInstance
10
- } from "./chunk-UY423IKN.js";
10
+ } from "./chunk-XRJRF3MM.js";
11
11
 
12
12
  // dist/esm/ui-radio-group.entry.js
13
13
  var uiRadioGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2)}:host([data-orientation='vertical']){display:inline-grid;justify-items:start}`;
@@ -11,7 +11,7 @@ import {
11
11
  getElement,
12
12
  h,
13
13
  registerInstance
14
- } from "./chunk-UY423IKN.js";
14
+ } from "./chunk-XRJRF3MM.js";
15
15
 
16
16
  // dist/esm/ui-radio.entry.js
17
17
  var uiRadioCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([data-disabled='true']),:host([aria-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='radio']){accent-color:var(--ui-accent-solid);cursor:pointer}::slotted(input[type='radio']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
@@ -2,7 +2,7 @@ import {
2
2
  Host,
3
3
  h,
4
4
  registerInstance
5
- } from "./chunk-UY423IKN.js";
5
+ } from "./chunk-XRJRF3MM.js";
6
6
 
7
7
  // dist/esm/ui-search-result-row.entry.js
8
8
  var uiSearchResultRowCss = () => `:host{display:block}.search-result-row{appearance:none;inline-size:100%;min-block-size:var(--ui-search-result-row-min-height, 56px);margin:0;padding-block:var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));padding-inline:var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));display:flex;align-items:flex-start;gap:var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));background:var(--ui-search-result-row-bg, transparent);border:none;border-block-end:1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));color:inherit;cursor:pointer;text-align:left;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}:host(:last-child) .search-result-row{border-block-end:none}.search-result-row:hover:enabled{background:var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))}:host([selected]) .search-result-row{background:var( --ui-search-result-row-selected-bg, var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%)) )}.search-result-row:focus-visible{outline:2px solid var(--ui-focus-ring, #2563eb);outline-offset:-2px}.search-result-row:disabled,:host([disabled]) .search-result-row{opacity:0.6;cursor:not-allowed}.search-result-row__leading,.search-result-row__trailing{display:inline-flex;align-items:flex-start;flex-shrink:0}.search-result-row__content{min-inline-size:0;flex:1;display:flex;flex-direction:column}.search-result-row__title,.search-result-row__meta,.search-result-row__excerpt{display:block;min-inline-size:0}[hidden]{display:none}::slotted([slot='title']),::slotted([slot='meta']),::slotted([slot='excerpt']){display:block;margin:0}`;
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  h,
3
3
  registerInstance
4
- } from "./chunk-UY423IKN.js";
4
+ } from "./chunk-XRJRF3MM.js";
5
5
 
6
6
  // dist/esm/ui-search-shell.entry.js
7
7
  var uiSearchShellCss = () => `:host{position:fixed;inset:0;z-index:var(--ui-search-shell-z-index, 400);display:block}.search-shell{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-block-start:var(--ui-search-shell-padding-top, 10vh)}.search-shell__panel{position:relative;inline-size:min( calc(100% - (var(--ui-search-shell-margin-inline, var(--ui-space-4, 1rem)) * 2)), var(--ui-search-shell-max-width, 640px) );max-block-size:var(--ui-search-shell-max-height, 80vh);display:flex;flex-direction:column;overflow:hidden;background:var(--ui-search-shell-bg, var(--ui-surface, #ffffff));border:1px solid var(--ui-search-shell-border, var(--ui-border, #e5e7eb));border-radius:var(--ui-search-shell-radius, var(--ui-radius-xl, 1rem));box-shadow:var(--ui-search-shell-shadow, var(--ui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)))}.search-shell__search,.search-shell__status,.search-shell__footer{flex-shrink:0}.search-shell__body{flex:1;min-block-size:0}[hidden]{display:none}@media (max-width: 767px){.search-shell{padding-block-start:0;align-items:stretch}.search-shell__panel{inline-size:100%;block-size:100vh;block-size:100dvh;max-block-size:none;border-radius:0;border-inline:none;border-block-start:none}}`;
@@ -7,7 +7,7 @@ import {
7
7
  getElement,
8
8
  h,
9
9
  registerInstance
10
- } from "./chunk-UY423IKN.js";
10
+ } from "./chunk-XRJRF3MM.js";
11
11
 
12
12
  // dist/esm/ui-select.entry.js
13
13
  var uiSelectCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(select){width:100%;appearance:none;min-block-size:var(--ui-control-min-block-size, 2.75rem);border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background-color:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding-block:var(--ui-select-padding-block, var(--ui-space-2));padding-inline-start:var(--ui-select-padding-inline-start, var(--ui-space-3));padding-inline-end:var(--ui-select-padding-inline-end, calc(var(--ui-space-6) + var(--ui-space-3)));margin:0;background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);background-position:calc(100% - 1rem) calc(50% - 2px), calc(100% - 0.7rem) calc(50% - 2px);background-size:0.35rem 0.35rem, 0.35rem 0.35rem;background-repeat:no-repeat;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(select:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(select:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(select),::slotted(select[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(select:disabled){background-color:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(select:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(select[multiple]),::slotted(select[size]:not([size='1'])){background-image:none;padding-inline-end:var(--ui-select-padding-inline-start, var(--ui-space-3))}`;
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-UY423IKN.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-switch.entry.js
16
16
  var uiSwitchCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}:host([role='switch']){cursor:pointer}:host input[type='checkbox']{appearance:none;-webkit-appearance:none;display:block;position:relative;width:2.25rem;height:1.25rem;padding:0;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host input[type='checkbox']::after{content:'';position:absolute;top:2px;left:2px;width:0.875rem;height:0.875rem;border-radius:999px;background:var(--ui-surface-default);border:1px solid var(--ui-border-default);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}:host input[type='checkbox']:checked{background:var(--ui-accent-solid);border-color:var(--ui-accent-solid)}:host input[type='checkbox']:checked::after{transform:translateX(calc(2.25rem - 0.875rem - 4px));background:var(--ui-text-on-accent);border-color:var(--ui-text-on-accent)}:host input[type='checkbox']:focus-visible{outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
@@ -11,7 +11,7 @@ import {
11
11
  getElement,
12
12
  h,
13
13
  registerInstance
14
- } from "./chunk-UY423IKN.js";
14
+ } from "./chunk-XRJRF3MM.js";
15
15
 
16
16
  // dist/esm/ui-tabs.entry.js
17
17
  var uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
@@ -7,7 +7,7 @@ import {
7
7
  getElement,
8
8
  h,
9
9
  registerInstance
10
- } from "./chunk-UY423IKN.js";
10
+ } from "./chunk-XRJRF3MM.js";
11
11
 
12
12
  // dist/esm/ui-textarea.entry.js
13
13
  var uiTextareaCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(textarea:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-UY423IKN.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-toast-region.entry.js
16
16
  var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
@@ -18,7 +18,7 @@ import {
18
18
  getElement,
19
19
  h,
20
20
  registerInstance
21
- } from "./chunk-UY423IKN.js";
21
+ } from "./chunk-XRJRF3MM.js";
22
22
 
23
23
  // dist/esm/ui-tooltip.entry.js
24
24
  var uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease), transform var(--ui-motion-fast) var(--ui-motion-ease), display var(--ui-motion-fast) allow-discrete, overlay var(--ui-motion-fast) allow-discrete}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
@@ -3,7 +3,7 @@ import {
3
3
  getElement,
4
4
  h,
5
5
  registerInstance
6
- } from "./chunk-UY423IKN.js";
6
+ } from "./chunk-XRJRF3MM.js";
7
7
 
8
8
  // dist/esm/ui-top-bar.entry.js
9
9
  var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left) );padding-inline-end:max( var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right) );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
@@ -10,7 +10,7 @@ import {
10
10
  getElement,
11
11
  h,
12
12
  registerInstance
13
- } from "./chunk-UY423IKN.js";
13
+ } from "./chunk-XRJRF3MM.js";
14
14
 
15
15
  // dist/esm/ui-tree-item.entry.js
16
16
  var uiTreeItemCss = () => `:host{--ui-tree-indent:16px;--ui-tree-row-min-height:32px;--ui-tree-drop-color:var(--ui-accent-solid);position:relative;display:block;min-inline-size:0;margin-inline-start:calc(var(--ui-tree-item-depth, 0) * var(--ui-tree-indent))}.row{position:relative;display:grid;grid-template-columns:20px auto minmax(0, 1fr) auto;align-items:center;min-block-size:var(--ui-tree-row-min-height);min-inline-size:0;font-size:var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));border-radius:var(--ui-radius-md);color:var(--ui-text-secondary);transition:background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease), opacity var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease), min-block-size var(--ui-motion-base) var(--ui-motion-ease)}.row:hover,:host([data-selected]) .row,.row:focus-within{color:var(--ui-text-primary);background:var(--ui-surface-muted)}:host([data-disabled]) .row{opacity:0.55}:host([data-dragging]) .row{opacity:0.42}:host(:focus){outline:none}:host(:focus-visible) .row{box-shadow:0 0 0 2px var(--ui-focus-ring)}:host([data-drop-position='inside']) .row{background:var(--ui-accent-subtle);box-shadow:inset 0 0 0 1px var(--ui-tree-drop-color)}.disclosure,.disclosure-spacer{grid-column:1;grid-row:1;inline-size:20px;block-size:28px}.disclosure{display:grid;place-items:center;padding:0;color:var(--ui-text-muted);background:transparent;border:0;border-radius:var(--ui-radius-sm);cursor:pointer}.disclosure:hover{color:var(--ui-text-primary);background:var(--ui-surface-elevated)}.disclosure-icon{display:block;inline-size:14px;block-size:14px;transform:rotate(-90deg);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}.disclosure-icon--expanded{transform:rotate(0deg)}.disclosure-icon :is(svg),.drag-handle :is(svg){display:block;inline-size:100%;block-size:100%}.leading{display:none}.leading:has(*){display:inline-grid;place-items:center;grid-column:2;grid-row:1;inline-size:16px;block-size:16px;margin-inline-start:var(--ui-space-1)}.label{grid-column:3;grid-row:1;min-inline-size:0;padding:var(--ui-space-1) var(--ui-space-2)}.actions{grid-column:4;grid-row:1;display:inline-flex;align-items:center;min-inline-size:0}.drag-handle{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:-22px;inline-size:20px;block-size:32px;display:grid;place-items:center;padding:7px 3px;color:var(--ui-text-muted);background:var(--ui-surface-elevated);border:1px solid transparent;border-radius:var(--ui-radius-sm);cursor:grab;opacity:0;pointer-events:none;transform:translateY(-50%);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease)}.row:hover .drag-handle,.drag-handle:focus-visible,:host([data-dragging]) .drag-handle{opacity:1;pointer-events:auto}.drag-handle:active{cursor:grabbing}.drop-indicator{position:absolute;z-index:3;inset-inline:1px;display:none;block-size:2px;border-radius:999px;background:var(--ui-tree-drop-color);pointer-events:none}.drop-indicator::before,.drop-indicator::after{content:'';position:absolute;inset-block-start:50%;inline-size:7px;block-size:7px;border:2px solid var(--ui-tree-drop-color);border-radius:999px;background:var(--ui-surface-elevated);transform:translateY(-50%)}.drop-indicator::before{inset-inline-start:-1px}.drop-indicator::after{inset-inline-end:-1px}:host([data-drop-position='before']) .row-drop-indicator{display:block;inset-block-start:-1px}:host([data-drop-position='after']) .subtree-drop-indicator{display:block;inset-block-end:-1px}.children[hidden]{display:none}:host-context(html[data-ui-input-modality='touch']){--ui-tree-row-min-height:44px}:host-context(html[data-ui-input-modality='touch']) .drag-handle{display:none}@media (prefers-reduced-motion: reduce){.row,.disclosure-icon,.drag-handle{transition:none}}`;
@@ -6,7 +6,7 @@ import {
6
6
  getElement,
7
7
  h,
8
8
  registerInstance
9
- } from "./chunk-UY423IKN.js";
9
+ } from "./chunk-XRJRF3MM.js";
10
10
 
11
11
  // dist/esm/ui-tree.entry.js
12
12
  function classifyDropPosition(rect, clientY, acceptsChildren) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.1.25",
3
+ "version": "0.1.26",
4
4
  "type": "module",
5
5
  "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
6
6
  "license": "MIT",
@@ -187,6 +187,7 @@ var MultiCombobox = defineComponent3({
187
187
  config: { type: Object, default: () => ({}) },
188
188
  query: { type: String, default: void 0 },
189
189
  defaultQuery: String,
190
+ tokenSeparators: { type: Array, default: () => [] },
190
191
  placeholder: String,
191
192
  name: String,
192
193
  disabled: Boolean,
@@ -214,14 +215,16 @@ var MultiCombobox = defineComponent3({
214
215
  element.value.items = props.items;
215
216
  element.value.config = props.config;
216
217
  element.value.query = props.query;
218
+ element.value.tokenSeparators = props.tokenSeparators;
217
219
  });
218
220
  expose({ focusInput: () => element.value.focusInput() });
219
221
  return () => h3("ui-multi-combobox", {
220
222
  ...attrs,
221
- ...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query"].includes(key))),
223
+ ...Object.fromEntries(Object.entries(props).filter(([key]) => !["items", "config", "query", "tokenSeparators"].includes(key))),
222
224
  items: props.items,
223
225
  config: props.config,
224
226
  query: props.query,
227
+ tokenSeparators: props.tokenSeparators,
225
228
  "data-allow-mismatch": "class",
226
229
  ref: element,
227
230
  class: [attrs.class, element.value?.shadowRoot && "hydrated"],
@@ -3,7 +3,7 @@ import {
3
3
  Popover,
4
4
  createAdapterComponent,
5
5
  toHTMLElement
6
- } from "../chunk-GXQY27K2.js";
6
+ } from "../chunk-2DDIBSFD.js";
7
7
 
8
8
  // src/editor/index.ts
9
9
  import "@threadlabs/looma/editor";
package/vue/index.d.ts CHANGED
@@ -488,6 +488,10 @@ declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
488
488
  default: undefined;
489
489
  };
490
490
  defaultQuery: StringConstructor;
491
+ tokenSeparators: {
492
+ type: vue.PropType<readonly string[]>;
493
+ default: () => never[];
494
+ };
491
495
  placeholder: StringConstructor;
492
496
  name: StringConstructor;
493
497
  disabled: BooleanConstructor;
@@ -524,6 +528,10 @@ declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
524
528
  default: undefined;
525
529
  };
526
530
  defaultQuery: StringConstructor;
531
+ tokenSeparators: {
532
+ type: vue.PropType<readonly string[]>;
533
+ default: () => never[];
534
+ };
527
535
  placeholder: StringConstructor;
528
536
  name: StringConstructor;
529
537
  disabled: BooleanConstructor;
@@ -547,6 +555,7 @@ declare const MultiCombobox: vue.DefineComponent<vue.ExtractPropTypes<{
547
555
  query: string;
548
556
  config: _threadlabs_looma_core.ComboboxConfig;
549
557
  items: readonly _threadlabs_looma_core.MultiComboboxItem[];
558
+ tokenSeparators: readonly string[];
550
559
  }, vue.SlotsType<{
551
560
  item: {
552
561
  item: _threadlabs_looma_core.MultiComboboxItem;
package/vue/index.js CHANGED
@@ -44,7 +44,7 @@ import {
44
44
  Tree,
45
45
  TreeItem,
46
46
  VUE_ADAPTER_NOTE
47
- } from "./chunk-GXQY27K2.js";
47
+ } from "./chunk-2DDIBSFD.js";
48
48
  export {
49
49
  ADAPTER_COMPONENT_TAG_MAP,
50
50
  AffordanceScope,
@@ -1 +0,0 @@
1
- import{r as e,c as t,g as i,h as s,H as a}from"./p-8BGiMGQ0.js";const o=class{constructor(i){e(this,i),this.queryChange=t(this,"query-change"),this.addItem=t(this,"add-item"),this.removeItem=t(this,"remove-item"),this.createItem=t(this,"create-item"),this.optionsChange=t(this,"options-change")}get host(){return i(this)}label="";placeholder="";items=[];config={};query;defaultQuery="";disabled=!1;readOnly=!1;required=!1;name="";queryChange;addItem;removeItem;createItem;optionsChange;raw="";rows=[];combobox;filteredConfig;filteredConfigSource;filteredSelection="";componentWillLoad(){this.raw=this.query??this.defaultQuery}syncQuery(){void 0!==this.query&&(this.raw=this.query)}get selectedValues(){return new Set(this.items.map((e=>e.value)))}get comboboxConfig(){const e=this.items.map((e=>e.value)).join("\0");if(this.filteredConfig&&this.filteredConfigSource===this.config&&this.filteredSelection===e)return this.filteredConfig;const t=this.config.filter,i=this.selectedValues;return this.filteredConfigSource=this.config,this.filteredSelection=e,this.filteredConfig={...this.config,filter:(e,s,a)=>!i.has(e.value)&&(t?t(e,s,a):e.label.toLocaleLowerCase().includes(s.toLocaleLowerCase()))},this.filteredConfig}setQuery(e,t){void 0===this.query&&(this.raw=e),this.queryChange.emit({query:e,display:e,trigger:t})}onQueryChange=e=>{e.stopPropagation(),this.setQuery(e.detail.query,e.detail.trigger)};onOptionsChange=e=>{e.stopPropagation(),this.rows=e.detail,this.optionsChange.emit(e.detail)};onValueChange=e=>{e.stopPropagation(),"selection"===e.detail.kind&&e.detail.option&&(this.addItem.emit({item:e.detail.option,index:this.items.length,trigger:e.detail.trigger}),queueMicrotask((()=>this.setQuery("",e.detail.trigger))))};onCreateEntry=e=>{e.stopPropagation();const t=e.detail.query.trim();t&&(this.setQuery("",e.detail.trigger),this.createItem.emit({query:t,trigger:e.detail.trigger}))};remove(e,t){const i=this.items[e];!i||i.disabled||this.disabled||this.readOnly||(this.removeItem.emit({item:i,index:e,trigger:t}),requestAnimationFrame((()=>{const t=this.host.shadowRoot?.querySelectorAll('[part="item"]')??[],s=t[Math.min(e,t.length-1)]??t[e-1];s&&s.dataset.value!==i.value?s.focus():this.focusInput()})))}focusItem(e){this.host.shadowRoot?.querySelectorAll('[part="item"]')[e]?.focus()}onItemKeyDown=(e,t)=>{e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||("ArrowLeft"===e.key?(e.preventDefault(),e.stopPropagation(),this.focusItem(Math.max(0,t-1))):"ArrowRight"===e.key?(e.preventDefault(),e.stopPropagation(),t===this.items.length-1?this.focusInput():this.focusItem(t+1)):"Backspace"!==e.key&&"Delete"!==e.key||(e.preventDefault(),e.stopPropagation(),this.remove(t,"keyboard")))};onKeyDown=e=>{if(e.defaultPrevented||this.disabled||this.readOnly||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;const t=e.composedPath().find((e=>e instanceof HTMLInputElement));!t||this.raw||(t.selectionStart??0)>0||("ArrowLeft"===e.key&&this.items.length?(e.preventDefault(),this.focusItem(this.items.length-1)):"Backspace"===e.key&&this.items.length&&(e.preventDefault(),this.remove(this.items.length-1,"keyboard")))};async focusInput(){await(this.combobox?.focusInput())}render(){return s(a,{key:"bdb03a28ea25b22340dc56381fa45031f0c47c27",onKeyDown:this.onKeyDown},s("ui-combobox",{key:"51ba1ab747af9f216223bd71f524db79ef57b8a9",ref:e=>this.combobox=e,label:this.label,"label-visibility":"sr-only",placeholder:this.placeholder,name:this.name,value:null,query:this.raw,config:this.comboboxConfig,size:"sm",disabled:this.disabled,readOnly:this.readOnly,required:this.required,"onQuery-change":this.onQueryChange,"onValue-change":this.onValueChange,"onCreate-entry":this.onCreateEntry,"onOptions-change":this.onOptionsChange},s("div",{key:"ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba",slot:"start",class:"items",role:"group","aria-label":`Selected ${this.label}`},this.items.map(((e,t)=>s("button",{type:"button",part:"item",class:"item","data-value":e.value,tabIndex:-1,disabled:this.disabled||this.readOnly||e.disabled,"aria-label":`${e.label}, press Delete or Backspace to remove`,onKeyDown:e=>this.onItemKeyDown(e,t)},s("slot",{name:`item-${e.id}`},s("ui-chip",{appearance:"pill"},e.label)))))),this.rows.map((e=>s("span",{slot:`option-${e.id}`},s("slot",{name:`option-${e.id}`},e.label)))),s("span",{key:"99cd9848130de37e52a4f735c95e3754dbc64691",slot:"create"},s("slot",{key:"84cc7c14716819bd968bdfcb9213fe3887a5c2b9",name:"create"},"Create “",this.raw,"”")),s("span",{key:"1660eb03425dea4d36797e416d91b051531a470d",slot:"loading"},s("slot",{key:"10c979403e89331e8bdf69ff2db3f5bc272b2685",name:"loading"},"Loading suggestions…")),s("span",{key:"1c862b6c5906aa3ec5fc874de5a5119e13ef9422",slot:"empty"},s("slot",{key:"1c70a1beb7321d3b2be888b3826a1dba2f6fcc70",name:"empty"},"No suggestions.")),s("span",{key:"4b4da5cb8b22543b90ff9230191bbb2e81d16408",slot:"error"},s("slot",{key:"a371a5ce50895562ebc6e55227e4a4834af37f3d",name:"error"},"Unable to load suggestions.")),s("div",{key:"f82e38165d90bdbfa8413c0a561abf7ab5da0183",slot:"footer"},s("slot",{key:"6c0bd2b89428832f4cb485f5d2e30a792859ba9e",name:"footer"}))))}static get watchers(){return{query:[{syncQuery:0}]}}};o.style=":host{display:block;min-inline-size:0;color:var(--ui-text-primary);font:inherit}ui-combobox::part(field){flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}ui-combobox::part(input){flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;max-inline-size:100%;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}";export{o as ui_multi_combobox}