@k2b/ui 0.7.0 → 0.9.0

package/dist/browser/inputs/MultiSelectInput.js

@@ -5,10 +5,10 @@ import { addEventListener as _$addEventListener } from "solid-js/web";
 import { style as _$style } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -16,30 +16,31 @@ import { use as _$use } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-multi-select-trigger__values>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<button type=button class="k2b-choice-control__clear k2b-input-clear-action"><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-choice-search><i class="ti ti-search"aria-hidden=true></i><input type=search>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-choice-toolbar>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-choice-status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><span>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-choice-control><div class=k2b-multi-select-trigger role=combobox aria-haspopup=listbox><!$><!/><!$><!/></div><!$><!/><div popover=manual class=k2b-choice-popover role=group><!$><!/><!$><!/><div class=k2b-choice-options role=listbox aria-multiselectable=true><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<span class=k2b-choice-trigger__value data-placeholder=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-choice-pill><!$><!/><button type=button tabindex=-1><i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-choice-pill__content>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-choice-status data-tone=danger><span></span><button type=button>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-choice-status>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<button type=button class=k2b-choice-option role=option><span class=k2b-choice-option__checkbox aria-hidden=true><i class="ti ti-check"></i></span><!$><!/><span class=k2b-choice-option__content>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-choice-dot aria-hidden=true>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<strong>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<small>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<input type=hidden>`);
-import { createMemo, createSignal, For, Show } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-multi-select-trigger__more><span aria-hidden=true>+<!$><!/></span><span class=k2b-sr-only>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-multi-select-trigger__values><!$><!/><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<button type=button class="k2b-choice-control__clear k2b-input-clear-action"><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-choice-search><i class="ti ti-search"aria-hidden=true></i><input type=search>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-choice-toolbar>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-choice-status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i><span>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-choice-control><div class=k2b-multi-select-trigger role=combobox aria-haspopup=listbox><!$><!/><!$><!/></div><!$><!/><div popover=manual class=k2b-choice-popover role=group><!$><!/><!$><!/><div class=k2b-choice-options role=listbox aria-multiselectable=true><!$><!/><!$><!/><!$><!/></div></div><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-choice-trigger__value data-placeholder=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<span class=k2b-choice-pill><!$><!/><button type=button tabindex=-1><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-choice-pill__content>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-choice-status data-tone=danger><span></span><button type=button>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-choice-status>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<button type=button class=k2b-choice-option role=option><span class=k2b-choice-option__checkbox aria-hidden=true><i class="ti ti-check"></i></span><!$><!/><span class=k2b-choice-option__content>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<span class=k2b-choice-dot aria-hidden=true>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<strong>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<input type=hidden>`);
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { colorTintStyle, normalizeHexColor } from "../internal/color";
 import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
 import { useUiMessages } from "../intl/messages";
 import { ChoiceGroups } from "./ChoiceGroups";
-import { createChoiceLoader, createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from "./choice";
+import { createChoiceLoader, createChoicePopover, filterChoiceOptions, fitChoicePills, nextEnabledChoiceIndex } from "./choice";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 /** Cloud tints the option icon with the option color instead of adding a dot. */
 const iconColor = color => {
@@ -101,6 +102,41 @@ export function MultiSelectInput(props) {
   const selectedValues = createMemo(() => new Set(values()));
   const popover = createChoicePopover(() => Boolean(props.disabled));
   const focusedOption = () => visibleOptions()[focusedIndex()];
+
+  // Pills that do not fit the trigger collapse into a "+N" summary. Until the
+  // browser measures them (server HTML, hidden containers) every pill stays.
+  let valuesRef;
+  let moreRef;
+  const [visibleCount, setVisibleCount] = createSignal(Number.POSITIVE_INFINITY);
+  const hiddenOptions = createMemo(() => selected().slice(visibleCount()));
+  // While every pill fits, the invisible summary carries the largest count it
+  // could show, so measuring it reserves enough room for the real one.
+  const moreCount = () => hiddenOptions().length || selected().length - 1;
+  const fitValues = () => {
+    const values = valuesRef;
+    if (!values?.isConnected) return;
+    // Measuring releases a truncated first pill to its natural width; the
+    // browser paints only the final state.
+    values.dataset.measuring = "true";
+    const pills = Array.from(values.querySelectorAll(":scope > .k2b-choice-pill"), pill => pill.getBoundingClientRect().width);
+    const fit = fitChoicePills(values.getBoundingClientRect().width, pills, Number.parseFloat(getComputedStyle(values).columnGap) || 0, moreRef?.isConnected ? moreRef.getBoundingClientRect().width : 0);
+    delete values.dataset.measuring;
+    // Hidden pills leave the flow. While any are hidden the strip keeps the
+    // whole row as its preferred width, so a container sized by its content
+    // does not shrink with the collapse and grows back once it has room. The
+    // strip still flexes to the trigger's width.
+    values.style.width = fit.visible < pills.length ? `${fit.rowWidth}px` : "";
+    setVisibleCount(fit.visible);
+  };
+  const resizeObserver = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => fitValues());
+  onCleanup(() => resizeObserver?.disconnect());
+  createEffect(() => {
+    selected();
+    fitValues();
+  });
+  onMount(() => {
+    if ("fonts" in document) void document.fonts.ready.then(fitValues);
+  });
   const emit = next => {
     const unique = [...new Set(next)];
     commitFieldValue(props, unique);
@@ -195,30 +231,32 @@ export function MultiSelectInput(props) {
       return props.disabled;
     },
     get children() {
-      var _el$ = _$getNextElement(_tmpl$7),
+      var _el$ = _$getNextElement(_tmpl$8),
         _el$2 = _el$.firstChild,
-        _el$5 = _el$2.firstChild,
-        [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
-        _el$7 = _el$6.nextSibling,
-        [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
-        _el$27 = _el$2.nextSibling,
-        [_el$28, _co$8] = _$getNextMarker(_el$27.nextSibling),
-        _el$0 = _el$28.nextSibling,
-        _el$23 = _el$0.firstChild,
-        [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
-        _el$25 = _el$24.nextSibling,
-        [_el$26, _co$7] = _$getNextMarker(_el$25.nextSibling),
-        _el$13 = _el$26.nextSibling,
-        _el$17 = _el$13.firstChild,
-        [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
-        _el$19 = _el$18.nextSibling,
-        [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling),
-        _el$21 = _el$20.nextSibling,
-        [_el$22, _co$5] = _$getNextMarker(_el$21.nextSibling),
-        _el$29 = _el$0.nextSibling,
-        [_el$30, _co$9] = _$getNextMarker(_el$29.nextSibling);
-      var _ref$ = popover.setTrigger;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$2) : popover.setTrigger = _el$2;
+        _el$13 = _el$2.firstChild,
+        [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling),
+        _el$15 = _el$14.nextSibling,
+        [_el$16, _co$5] = _$getNextMarker(_el$15.nextSibling),
+        _el$37 = _el$2.nextSibling,
+        [_el$38, _co$1] = _$getNextMarker(_el$37.nextSibling),
+        _el$18 = _el$38.nextSibling,
+        _el$33 = _el$18.firstChild,
+        [_el$34, _co$9] = _$getNextMarker(_el$33.nextSibling),
+        _el$35 = _el$34.nextSibling,
+        [_el$36, _co$0] = _$getNextMarker(_el$35.nextSibling),
+        _el$23 = _el$36.nextSibling,
+        _el$27 = _el$23.firstChild,
+        [_el$28, _co$6] = _$getNextMarker(_el$27.nextSibling),
+        _el$29 = _el$28.nextSibling,
+        [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling),
+        _el$31 = _el$30.nextSibling,
+        [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling),
+        _el$39 = _el$18.nextSibling,
+        [_el$40, _co$10] = _$getNextMarker(_el$39.nextSibling);
+      _$use(element => {
+        popover.setTrigger(element);
+        resizeObserver?.observe(element);
+      }, _el$2);
       _$setAttribute(_el$2, "aria-controls", listboxId);
       _$spread(_el$2, _$mergeProps({
         get id() {
@@ -249,23 +287,29 @@ export function MultiSelectInput(props) {
         },
         get fallback() {
           return (() => {
-            var _el$31 = _$getNextElement(_tmpl$8);
-            _$insert(_el$31, () => props.placeholder ?? messages().select);
-            return _el$31;
+            var _el$41 = _$getNextElement(_tmpl$9);
+            _$insert(_el$41, () => props.placeholder ?? messages().select);
+            return _el$41;
           })();
         },
         get children() {
-          var _el$3 = _$getNextElement(_tmpl$);
+          var _el$3 = _$getNextElement(_tmpl$2),
+            _el$0 = _el$3.firstChild,
+            [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
+            _el$10 = _el$1.nextSibling,
+            [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
+          var _ref$ = valuesRef;
+          typeof _ref$ === "function" ? _$use(_ref$, _el$3) : valuesRef = _el$3;
           _$insert(_el$3, _$createComponent(For, {
             get each() {
               return selected();
             },
-            children: option => (() => {
-              var _el$32 = _$getNextElement(_tmpl$9),
-                _el$34 = _el$32.firstChild,
-                [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling),
-                _el$33 = _el$35.nextSibling;
-              _$insert(_el$32, _$createComponent(Show, {
+            children: (option, index) => (() => {
+              var _el$42 = _$getNextElement(_tmpl$0),
+                _el$44 = _el$42.firstChild,
+                [_el$45, _co$11] = _$getNextMarker(_el$44.nextSibling),
+                _el$43 = _el$45.nextSibling;
+              _$insert(_el$42, _$createComponent(Show, {
                 get when() {
                   return props.renderValue;
                 },
@@ -275,119 +319,159 @@ export function MultiSelectInput(props) {
                       return option.icon;
                     },
                     children: icon => (() => {
-                      var _el$37 = _$getNextElement(_tmpl$2);
-                      _$effect(() => _$className(_el$37, icon()));
-                      return _el$37;
+                      var _el$47 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$47, icon()));
+                      return _el$47;
                     })()
                   }), (() => {
-                    var _el$36 = _$getNextElement(_tmpl$0);
-                    _$insert(_el$36, () => option.label);
-                    return _el$36;
+                    var _el$46 = _$getNextElement(_tmpl$1);
+                    _$insert(_el$46, () => option.label);
+                    return _el$46;
                   })()];
                 },
                 children: render => (() => {
-                  var _el$38 = _$getNextElement(_tmpl$1);
-                  _$insert(_el$38, () => render()(option));
-                  return _el$38;
+                  var _el$48 = _$getNextElement(_tmpl$10);
+                  _$insert(_el$48, () => render()(option));
+                  return _el$48;
                 })()
-              }), _el$35, _co$0);
-              _el$33.$$click = event => {
+              }), _el$45, _co$11);
+              _el$43.$$click = event => {
                 event.stopPropagation();
                 remove(option.value);
               };
               _$effect(_p$ => {
-                var _v$6 = colorTintStyle(option.color),
-                  _v$7 = messages().removeNamed({
+                var _v$8 = colorTintStyle(option.color),
+                  _v$9 = option.label,
+                  _v$0 = index() >= visibleCount() ? "true" : undefined,
+                  _v$1 = messages().removeNamed({
                     name: option.label
                   }),
-                  _v$8 = props.disabled;
-                _p$.e = _$style(_el$32, _v$6, _p$.e);
-                _v$7 !== _p$.t && _$setAttribute(_el$33, "aria-label", _p$.t = _v$7);
-                _v$8 !== _p$.a && _$setProperty(_el$33, "disabled", _p$.a = _v$8);
+                  _v$10 = props.disabled;
+                _p$.e = _$style(_el$42, _v$8, _p$.e);
+                _v$9 !== _p$.t && _$setAttribute(_el$42, "title", _p$.t = _v$9);
+                _v$0 !== _p$.a && _$setAttribute(_el$42, "data-hidden", _p$.a = _v$0);
+                _v$1 !== _p$.o && _$setAttribute(_el$43, "aria-label", _p$.o = _v$1);
+                _v$10 !== _p$.i && _$setProperty(_el$43, "disabled", _p$.i = _v$10);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined,
-                a: undefined
+                a: undefined,
+                o: undefined,
+                i: undefined
               });
               _$runHydrationEvents();
-              return _el$32;
+              return _el$42;
             })()
-          }));
+          }), _el$1, _co$2);
+          _$insert(_el$3, _$createComponent(Show, {
+            get when() {
+              return selected().length > 1;
+            },
+            get children() {
+              var _el$4 = _$getNextElement(_tmpl$),
+                _el$5 = _el$4.firstChild,
+                _el$6 = _el$5.firstChild,
+                _el$7 = _el$6.nextSibling,
+                [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
+                _el$9 = _el$5.nextSibling;
+              _$use(element => {
+                moreRef = element;
+                resizeObserver?.observe(element);
+                onCleanup(() => resizeObserver?.unobserve(element));
+              }, _el$4);
+              _$insert(_el$5, moreCount, _el$8, _co$);
+              _$insert(_el$9, () => messages().moreSelected({
+                count: moreCount()
+              }));
+              _$effect(_p$ => {
+                var _v$ = hiddenOptions().map(option => option.label).join(", ") || undefined,
+                  _v$2 = hiddenOptions().length === 0 ? "true" : undefined;
+                _v$ !== _p$.e && _$setAttribute(_el$4, "title", _p$.e = _v$);
+                _v$2 !== _p$.t && _$setAttribute(_el$4, "data-hidden", _p$.t = _v$2);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$4;
+            }
+          }), _el$11, _co$3);
+          _$effect(() => _$setAttribute(_el$3, "data-overflowing", hiddenOptions().length > 0 ? "true" : undefined));
           return _el$3;
         }
-      }), _el$6, _co$);
+      }), _el$14, _co$4);
       _$insert(_el$2, _$createComponent(Show, {
         get when() {
           return !hasClearAction();
         },
         get children() {
-          var _el$4 = _$getNextElement(_tmpl$2);
-          _$effect(() => _$className(_el$4, `${popover.open() ? props.activeIcon ?? "ti ti-chevron-up" : props.icon ?? "ti ti-chevron-down"} k2b-multi-select-trigger__chevron`));
-          return _el$4;
+          var _el$12 = _$getNextElement(_tmpl$3);
+          _$effect(() => _$className(_el$12, `${popover.open() ? props.activeIcon ?? "ti ti-chevron-up" : props.icon ?? "ti ti-chevron-down"} k2b-multi-select-trigger__chevron`));
+          return _el$12;
         }
-      }), _el$8, _co$2);
+      }), _el$16, _co$5);
       _$insert(_el$, _$createComponent(Show, {
         get when() {
           return hasClearAction();
         },
         get children() {
-          var _el$9 = _$getNextElement(_tmpl$3);
-          _el$9.$$click = event => {
+          var _el$17 = _$getNextElement(_tmpl$4);
+          _el$17.$$click = event => {
             event.stopPropagation();
             emit([]);
             popover.trigger()?.focus();
           };
-          _$effect(() => _$setAttribute(_el$9, "aria-label", props.clearLabel ?? messages().clearSelection));
+          _$effect(() => _$setAttribute(_el$17, "aria-label", props.clearLabel ?? messages().clearSelection));
           _$runHydrationEvents();
-          return _el$9;
+          return _el$17;
         }
-      }), _el$28, _co$8);
-      _el$0.$$keydown = handleKeyDown;
+      }), _el$38, _co$1);
+      _el$18.$$keydown = handleKeyDown;
       var _ref$2 = popover.setPopover;
-      typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : popover.setPopover = _el$0;
-      _$insert(_el$0, _$createComponent(Show, {
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$18) : popover.setPopover = _el$18;
+      _$insert(_el$18, _$createComponent(Show, {
         get when() {
           return searchable();
         },
         get children() {
-          var _el$1 = _$getNextElement(_tmpl$4),
-            _el$10 = _el$1.firstChild,
-            _el$11 = _el$10.nextSibling;
-          _el$11.$$input = event => {
+          var _el$19 = _$getNextElement(_tmpl$5),
+            _el$20 = _el$19.firstChild,
+            _el$21 = _el$20.nextSibling;
+          _el$21.$$input = event => {
             const next = event.currentTarget.value;
             setQuery(next);
             if (isAsync()) asyncOptions.load(next);
             focusFirst();
           };
           var _ref$3 = searchRef;
-          typeof _ref$3 === "function" ? _$use(_ref$3, _el$11) : searchRef = _el$11;
-          _$setAttribute(_el$11, "aria-controls", listboxId);
+          typeof _ref$3 === "function" ? _$use(_ref$3, _el$21) : searchRef = _el$21;
+          _$setAttribute(_el$21, "aria-controls", listboxId);
           _$effect(_p$ => {
-            var _v$ = props.searchPlaceholder ?? messages().search,
-              _v$2 = props.searchPlaceholder ?? messages().searchOptions,
-              _v$3 = focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined;
-            _v$ !== _p$.e && _$setAttribute(_el$11, "placeholder", _p$.e = _v$);
-            _v$2 !== _p$.t && _$setAttribute(_el$11, "aria-label", _p$.t = _v$2);
-            _v$3 !== _p$.a && _$setAttribute(_el$11, "aria-activedescendant", _p$.a = _v$3);
+            var _v$3 = props.searchPlaceholder ?? messages().search,
+              _v$4 = props.searchPlaceholder ?? messages().searchOptions,
+              _v$5 = focusedOption() ? `${listboxId}-${focusedIndex()}` : undefined;
+            _v$3 !== _p$.e && _$setAttribute(_el$21, "placeholder", _p$.e = _v$3);
+            _v$4 !== _p$.t && _$setAttribute(_el$21, "aria-label", _p$.t = _v$4);
+            _v$5 !== _p$.a && _$setAttribute(_el$21, "aria-activedescendant", _p$.a = _v$5);
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined
           });
-          _$effect(() => _$setProperty(_el$11, "value", query()));
+          _$effect(() => _$setProperty(_el$21, "value", query()));
           _$runHydrationEvents();
-          return _el$1;
+          return _el$19;
         }
-      }), _el$24, _co$6);
-      _$insert(_el$0, _$createComponent(Show, {
+      }), _el$34, _co$9);
+      _$insert(_el$18, _$createComponent(Show, {
         get when() {
           return (props.groups?.length ?? 0) > 0;
         },
         get children() {
-          var _el$12 = _$getNextElement(_tmpl$5);
-          _$insert(_el$12, _$createComponent(ChoiceGroups, {
+          var _el$22 = _$getNextElement(_tmpl$6);
+          _$insert(_el$22, _$createComponent(ChoiceGroups, {
             get choices() {
               return groupChoices();
             },
@@ -400,38 +484,38 @@ export function MultiSelectInput(props) {
             },
             controls: listboxId
           }));
-          return _el$12;
+          return _el$22;
         }
-      }), _el$26, _co$7);
-      _$setAttribute(_el$13, "id", listboxId);
-      _$insert(_el$13, _$createComponent(Show, {
+      }), _el$36, _co$0);
+      _$setAttribute(_el$23, "id", listboxId);
+      _$insert(_el$23, _$createComponent(Show, {
         get when() {
           return asyncOptions.error();
         },
         children: message => (() => {
-          var _el$39 = _$getNextElement(_tmpl$10),
-            _el$40 = _el$39.firstChild,
-            _el$41 = _el$40.nextSibling;
-          _$insert(_el$40, message);
-          _$addEventListener(_el$41, "click", asyncOptions.retry, true);
-          _$insert(_el$41, () => props.retryLabel ?? messages().retry);
+          var _el$49 = _$getNextElement(_tmpl$11),
+            _el$50 = _el$49.firstChild,
+            _el$51 = _el$50.nextSibling;
+          _$insert(_el$50, message);
+          _$addEventListener(_el$51, "click", asyncOptions.retry, true);
+          _$insert(_el$51, () => props.retryLabel ?? messages().retry);
           _$runHydrationEvents();
-          return _el$39;
+          return _el$49;
         })()
-      }), _el$18, _co$3);
-      _$insert(_el$13, _$createComponent(Show, {
+      }), _el$28, _co$6);
+      _$insert(_el$23, _$createComponent(Show, {
         get when() {
           return _$memo(() => !!asyncOptions.loading())() && visibleOptions().length === 0;
         },
         get children() {
-          var _el$14 = _$getNextElement(_tmpl$6),
-            _el$15 = _el$14.firstChild,
-            _el$16 = _el$15.nextSibling;
-          _$insert(_el$16, () => props.loadingLabel ?? messages().loading);
-          return _el$14;
+          var _el$24 = _$getNextElement(_tmpl$7),
+            _el$25 = _el$24.firstChild,
+            _el$26 = _el$25.nextSibling;
+          _$insert(_el$26, () => props.loadingLabel ?? messages().loading);
+          return _el$24;
         }
-      }), _el$20, _co$4);
-      _$insert(_el$13, _$createComponent(For, {
+      }), _el$30, _co$7);
+      _$insert(_el$23, _$createComponent(For, {
         get each() {
           return _$memo(() => !!asyncOptions.error())() ? [] : visibleOptions();
         },
@@ -441,24 +525,24 @@ export function MultiSelectInput(props) {
               return _$memo(() => !!!asyncOptions.loading())() && !asyncOptions.error();
             },
             get children() {
-              var _el$42 = _$getNextElement(_tmpl$11);
-              _$insert(_el$42, (() => {
+              var _el$52 = _$getNextElement(_tmpl$12);
+              _$insert(_el$52, (() => {
                 var _c$ = _$memo(() => !!(isAsync() || query()));
                 return () => _c$() ? props.noResultsLabel ?? messages().noResults : props.emptyLabel ?? messages().noOptions;
               })());
-              return _el$42;
+              return _el$52;
             }
           });
         },
         children: (option, index) => (() => {
-          var _el$43 = _$getNextElement(_tmpl$12),
-            _el$44 = _el$43.firstChild,
-            _el$46 = _el$44.nextSibling,
-            [_el$47, _co$1] = _$getNextMarker(_el$46.nextSibling),
-            _el$45 = _el$47.nextSibling;
-          _el$43.$$click = () => toggleOption(option);
-          _el$43.$$pointermove = () => !option.disabled && setFocusedIndex(index());
-          _$insert(_el$43, _$createComponent(Show, {
+          var _el$53 = _$getNextElement(_tmpl$13),
+            _el$54 = _el$53.firstChild,
+            _el$56 = _el$54.nextSibling,
+            [_el$57, _co$12] = _$getNextMarker(_el$56.nextSibling),
+            _el$55 = _el$57.nextSibling;
+          _el$53.$$click = () => toggleOption(option);
+          _el$53.$$pointermove = () => !option.disabled && setFocusedIndex(index());
+          _$insert(_el$53, _$createComponent(Show, {
             get when() {
               return option.icon;
             },
@@ -468,60 +552,60 @@ export function MultiSelectInput(props) {
                   return normalizeHexColor(option.color);
                 },
                 children: color => (() => {
-                  var _el$48 = _$getNextElement(_tmpl$13);
-                  _$effect(_$p => _$setStyleProperty(_el$48, "background", color()));
-                  return _el$48;
+                  var _el$58 = _$getNextElement(_tmpl$14);
+                  _$effect(_$p => _$setStyleProperty(_el$58, "background", color()));
+                  return _el$58;
                 })()
               });
             },
             children: icon => (() => {
-              var _el$49 = _$getNextElement(_tmpl$2);
+              var _el$59 = _$getNextElement(_tmpl$3);
               _$effect(_p$ => {
-                var _v$12 = icon(),
-                  _v$13 = iconColor(option.color);
-                _v$12 !== _p$.e && _$className(_el$49, _p$.e = _v$12);
-                _p$.t = _$style(_el$49, _v$13, _p$.t);
+                var _v$16 = icon(),
+                  _v$17 = iconColor(option.color);
+                _v$16 !== _p$.e && _$className(_el$59, _p$.e = _v$16);
+                _p$.t = _$style(_el$59, _v$17, _p$.t);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
-              return _el$49;
+              return _el$59;
             })()
-          }), _el$47, _co$1);
-          _$insert(_el$45, _$createComponent(Show, {
+          }), _el$57, _co$12);
+          _$insert(_el$55, _$createComponent(Show, {
             get when() {
               return props.renderOption;
             },
             get fallback() {
               return [(() => {
-                var _el$50 = _$getNextElement(_tmpl$14);
-                _$insert(_el$50, () => option.label);
-                return _el$50;
+                var _el$60 = _$getNextElement(_tmpl$15);
+                _$insert(_el$60, () => option.label);
+                return _el$60;
               })(), _$createComponent(Show, {
                 get when() {
                   return option.description;
                 },
                 children: description => (() => {
-                  var _el$51 = _$getNextElement(_tmpl$15);
-                  _$insert(_el$51, description);
-                  return _el$51;
+                  var _el$61 = _$getNextElement(_tmpl$16);
+                  _$insert(_el$61, description);
+                  return _el$61;
                 })()
               })];
             },
             children: render => render()(option)
           }));
           _$effect(_p$ => {
-            var _v$9 = `${listboxId}-${index()}`,
-              _v$0 = option.label,
-              _v$1 = isSelected(option.value),
-              _v$10 = index() === focusedIndex() ? "true" : undefined,
-              _v$11 = option.disabled;
-            _v$9 !== _p$.e && _$setAttribute(_el$43, "id", _p$.e = _v$9);
-            _v$0 !== _p$.t && _$setAttribute(_el$43, "aria-label", _p$.t = _v$0);
-            _v$1 !== _p$.a && _$setAttribute(_el$43, "aria-selected", _p$.a = _v$1);
-            _v$10 !== _p$.o && _$setAttribute(_el$43, "data-focused", _p$.o = _v$10);
-            _v$11 !== _p$.i && _$setProperty(_el$43, "disabled", _p$.i = _v$11);
+            var _v$11 = `${listboxId}-${index()}`,
+              _v$12 = option.label,
+              _v$13 = isSelected(option.value),
+              _v$14 = index() === focusedIndex() ? "true" : undefined,
+              _v$15 = option.disabled;
+            _v$11 !== _p$.e && _$setAttribute(_el$53, "id", _p$.e = _v$11);
+            _v$12 !== _p$.t && _$setAttribute(_el$53, "aria-label", _p$.t = _v$12);
+            _v$13 !== _p$.a && _$setAttribute(_el$53, "aria-selected", _p$.a = _v$13);
+            _v$14 !== _p$.o && _$setAttribute(_el$53, "data-focused", _p$.o = _v$14);
+            _v$15 !== _p$.i && _$setProperty(_el$53, "disabled", _p$.i = _v$15);
             return _p$;
           }, {
             e: undefined,
@@ -531,25 +615,25 @@ export function MultiSelectInput(props) {
             i: undefined
           });
           _$runHydrationEvents();
-          return _el$43;
+          return _el$53;
         })()
-      }), _el$22, _co$5);
+      }), _el$32, _co$8);
       _$insert(_el$, _$createComponent(Show, {
         get when() {
           return props.name;
         },
         children: name => (() => {
-          var _el$52 = _$getNextElement(_tmpl$16);
-          _$effect(() => _$setAttribute(_el$52, "name", name()));
-          _$effect(() => _$setProperty(_el$52, "value", values().join(",")));
-          return _el$52;
+          var _el$62 = _$getNextElement(_tmpl$17);
+          _$effect(() => _$setAttribute(_el$62, "name", name()));
+          _$effect(() => _$setProperty(_el$62, "value", values().join(",")));
+          return _el$62;
         })()
-      }), _el$30, _co$9);
+      }), _el$40, _co$10);
       _$effect(_p$ => {
-        var _v$4 = error() ? "true" : undefined,
-          _v$5 = typeof props.label === "string" ? props.label : props["aria-label"] ?? messages().options;
-        _v$4 !== _p$.e && _$setAttribute(_el$, "data-invalid", _p$.e = _v$4);
-        _v$5 !== _p$.t && _$setAttribute(_el$0, "aria-label", _p$.t = _v$5);
+        var _v$6 = error() ? "true" : undefined,
+          _v$7 = typeof props.label === "string" ? props.label : props["aria-label"] ?? messages().options;
+        _v$6 !== _p$.e && _$setAttribute(_el$, "data-invalid", _p$.e = _v$6);
+        _v$7 !== _p$.t && _$setAttribute(_el$18, "aria-label", _p$.t = _v$7);
         return _p$;
       }, {
         e: undefined,