@k2b/ui 0.31.0 → 0.32.0

package/dist/browser/inputs/RichSelect.js

@@ -0,0 +1,1474 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-rich-select__visual>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-rich-select__visual aria-hidden=true><span class=k2b-rich-select__dot>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-rich-select__visual aria-hidden=true><i>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-rich-select__text><span class=k2b-rich-select__label></span><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-rich-select__line>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-rich-select__placeholder-visual>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__placeholder aria-hidden=true><!$><!/><span class=k2b-rich-select__placeholder-lines><span></span><span>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__state-text>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__state><span class=k2b-rich-select__state-icon aria-hidden=true><i></i></span><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-refresh"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div><h3 class=k2b-rich-select__preview-title><!$><!/><span></span></h3><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<ul class=k2b-rich-select__facts>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<li><i aria-hidden=true></i><span>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__footer>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<button type=button class=k2b-rich-select__footer-action><span class=k2b-rich-select__visual aria-hidden=true><i></i></span><span class=k2b-rich-select__label>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__create><input class=k2b-rich-select__create-input autocomplete=off><!$><!/>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__title aria-hidden=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<div role=listbox>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class="k2b-choice-search k2b-rich-select__search"><i class="ti ti-search"aria-hidden=true></i><input type=search role=combobox aria-autocomplete=list autocomplete=off>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__body><div class=k2b-rich-select__column><!$><!/><div class=k2b-rich-select__list role=listbox data-choice-scroll><!$><!/><!$><!/></div><!$><!/></div><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class="k2b-choice-control k2b-rich-select"><button type=button class="k2b-choice-trigger k2b-rich-select__trigger"role=combobox></button><!$><!/><div popover=manual class="k2b-choice-popover k2b-rich-select__popover"role=group><!$><!/><!$><!/>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-choice-trigger__value>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<i class="ti ti-selector k2b-choice-trigger__chevron"aria-hidden=true>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<input type=hidden>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__no-results>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__heading role=presentation>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__option role=option><!$><!/><!$><!/><i class="ti ti-check k2b-rich-select__check"aria-hidden=true>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__preview-placeholder aria-hidden=true><span></span><span style=width:86%></span><span style=width:72%></span><span style=width:80%>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__preview data-choice-scroll><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<button type=button class=k2b-dialog__close><i class="ti ti-chevron-left"aria-hidden=true>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<header class=k2b-rich-select__sheet-header><!$><!/><h2></h2><button type=button class=k2b-dialog__close><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<div class="k2b-choice-search k2b-rich-select__search"><i class="ti ti-search"aria-hidden=true></i><input type=search autocomplete=off>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__list role=list><!$><!/><!$><!/>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<button type=button class=k2b-rich-select__info><i class="ti ti-info-circle"aria-hidden=true>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__sheet-row role=listitem><button type=button class=k2b-rich-select__option><!$><!/><!$><!/><i class="ti ti-check k2b-rich-select__check"aria-hidden=true></i></button><!$><!/>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__heading>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-rich-select__preview data-level=detail>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<i class="ti ti-check"aria-hidden=true>`);
+import { createEffect, createMemo, createSignal, createUniqueId, For, Match, onCleanup, onMount, Show, Switch, untrack } from "solid-js";
+import { Button } from "../actions/Button";
+import { dialogCore } from "../feedback/dialog-core";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { LocaleProvider, useLocale } from "../intl/locale";
+import BottomSheet, { bottomSheetOptions } from "../layout/BottomSheet";
+import { createChoicePopover, filterChoiceOptions, nextEnabledChoiceIndex } from "./choice";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+import { useRichSelectMessages } from "./rich-select-messages";
+
+/** One option: a name plus at most one short line. */
+
+/** Search and section headings appear from this many options. */
+export const RICH_SELECT_SEARCH_FROM = 8;
+const PHONE_QUERY = "(max-width: 47.999rem)";
+const PLACEHOLDER_ROWS = 4;
+const isPhone = () => typeof matchMedia === "function" && matchMedia(PHONE_QUERY).matches;
+function RichSelectVisual(props) {
+  return _$createComponent(Switch, {
+    get children() {
+      return [_$createComponent(Match, {
+        get when() {
+          return props.item.visual;
+        },
+        children: visual => (() => {
+          var _el$ = _$getNextElement(_tmpl$);
+          _$insert(_el$, () => visual()());
+          return _el$;
+        })()
+      }), _$createComponent(Match, {
+        get when() {
+          return props.item.color;
+        },
+        children: color => (() => {
+          var _el$2 = _$getNextElement(_tmpl$2),
+            _el$3 = _el$2.firstChild;
+          _$effect(_$p => _$setStyleProperty(_el$3, "background-color", color()));
+          return _el$2;
+        })()
+      }), _$createComponent(Match, {
+        get when() {
+          return props.item.icon;
+        },
+        children: icon => (() => {
+          var _el$4 = _$getNextElement(_tmpl$3),
+            _el$5 = _el$4.firstChild;
+          _$effect(() => _$className(_el$5, icon()));
+          return _el$4;
+        })()
+      })];
+    }
+  });
+}
+const hasVisual = item => Boolean(item.visual || item.color || item.icon);
+
+/** Name and second line. The reason of an unavailable row replaces the description. */
+function RichSelectRowText(props) {
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$4),
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$7.nextSibling,
+      [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling);
+    _$insert(_el$7, () => props.item.label);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return props.item.disabledReason ?? props.item.description;
+      },
+      children: line => (() => {
+        var _el$0 = _$getNextElement(_tmpl$5);
+        _$insert(_el$0, line);
+        _$effect(_p$ => {
+          var _v$ = props.lineId,
+            _v$2 = props.item.disabledReason ? "true" : undefined;
+          _v$ !== _p$.e && _$setAttribute(_el$0, "id", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$0, "data-reason", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$0;
+      })()
+    }), _el$9, _co$);
+    _$effect(() => _$setAttribute(_el$7, "id", props.labelId));
+    return _el$6;
+  })();
+}
+function RichSelectPlaceholders(props) {
+  return _$createComponent(For, {
+    get each() {
+      return Array.from({
+        length: PLACEHOLDER_ROWS
+      }, (_, index) => index);
+    },
+    children: index => (() => {
+      var _el$1 = _$getNextElement(_tmpl$7),
+        _el$14 = _el$1.firstChild,
+        [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling),
+        _el$11 = _el$15.nextSibling,
+        _el$12 = _el$11.firstChild,
+        _el$13 = _el$12.nextSibling;
+      _$insert(_el$1, _$createComponent(Show, {
+        get when() {
+          return props.visual;
+        },
+        get children() {
+          return _$getNextElement(_tmpl$6);
+        }
+      }), _el$15, _co$2);
+      _$effect(_p$ => {
+        var _v$3 = props.visual ? "true" : undefined,
+          _v$4 = `${[58, 46, 66, 50][index % 4]}%`,
+          _v$5 = `${[34, 28, 40, 30][index % 4]}%`;
+        _v$3 !== _p$.e && _$setAttribute(_el$1, "data-visual", _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setStyleProperty(_el$12, "width", _p$.t = _v$4);
+        _v$5 !== _p$.a && _$setStyleProperty(_el$13, "width", _p$.a = _v$5);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined
+      });
+      return _el$1;
+    })()
+  });
+}
+function RichSelectState(props) {
+  let retryButton;
+  onCleanup(() => {
+    if (retryButton && document.activeElement === retryButton) queueMicrotask(() => props.restoreFocus?.());
+  });
+  return (() => {
+    var _el$16 = _$getNextElement(_tmpl$9),
+      _el$17 = _el$16.firstChild,
+      _el$18 = _el$17.firstChild,
+      _el$20 = _el$17.nextSibling,
+      [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling);
+    _$insert(_el$16, _$createComponent(Show, {
+      get when() {
+        return props.status === "error";
+      },
+      get fallback() {
+        return (() => {
+          var _el$22 = _$getNextElement(_tmpl$8);
+          _$insert(_el$22, () => props.empty ?? props.messages.noOptions);
+          return _el$22;
+        })();
+      },
+      get children() {
+        return [(() => {
+          var _el$19 = _$getNextElement(_tmpl$8);
+          _$insert(_el$19, () => props.messages.couldNotLoad);
+          return _el$19;
+        })(), _$createComponent(Show, {
+          get when() {
+            return props.onRetry;
+          },
+          children: retry => _$createComponent(Button, {
+            ref(r$) {
+              var _ref$ = retryButton;
+              typeof _ref$ === "function" ? _ref$(r$) : retryButton = r$;
+            },
+            variant: "secondary",
+            size: "sm",
+            onClick: () => retry()(),
+            get children() {
+              return [_$getNextElement(_tmpl$0), _$memo(() => props.messages.retry)];
+            }
+          })
+        })];
+      }
+    }), _el$21, _co$3);
+    _$effect(_p$ => {
+      var _v$6 = props.status,
+        _v$7 = props.status === "error" ? "alert" : "status",
+        _v$8 = props.status === "error" ? "ti ti-alert-triangle" : "ti ti-list-search";
+      _v$6 !== _p$.e && _$setAttribute(_el$16, "data-status", _p$.e = _v$6);
+      _v$7 !== _p$.t && _$setAttribute(_el$16, "role", _p$.t = _v$7);
+      _v$8 !== _p$.a && _$className(_el$18, _p$.a = _v$8);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$16;
+  })();
+}
+function RichSelectPreview(props) {
+  return (() => {
+    var _el$24 = _$getNextElement(_tmpl$1),
+      _el$25 = _el$24.firstChild,
+      _el$27 = _el$25.firstChild,
+      [_el$28, _co$4] = _$getNextMarker(_el$27.nextSibling),
+      _el$26 = _el$28.nextSibling,
+      _el$29 = _el$25.nextSibling,
+      [_el$30, _co$5] = _$getNextMarker(_el$29.nextSibling);
+    _$insert(_el$25, _$createComponent(RichSelectVisual, {
+      get item() {
+        return props.item;
+      }
+    }), _el$28, _co$4);
+    _$insert(_el$26, () => props.item.label);
+    _$insert(_el$24, () => props.render(props.item), _el$30, _co$5);
+    _$effect(() => _$setAttribute(_el$24, "id", props.id));
+    return _el$24;
+  })();
+}
+
+/** Up to three short facts for a preview, each with an icon; warnings in the warning tone. */
+export function RichSelectFacts(props) {
+  return (() => {
+    var _el$31 = _$getNextElement(_tmpl$10);
+    _$insert(_el$31, _$createComponent(For, {
+      get each() {
+        return props.facts.slice(0, 3);
+      },
+      children: fact => (() => {
+        var _el$32 = _$getNextElement(_tmpl$11),
+          _el$33 = _el$32.firstChild,
+          _el$34 = _el$33.nextSibling;
+        _$insert(_el$34, () => fact.text);
+        _$effect(_p$ => {
+          var _v$9 = fact.tone === "warning" ? "warning" : undefined,
+            _v$0 = fact.icon;
+          _v$9 !== _p$.e && _$setAttribute(_el$32, "data-tone", _p$.e = _v$9);
+          _v$0 !== _p$.t && _$className(_el$33, _p$.t = _v$0);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$32;
+      })()
+    }));
+    return _el$31;
+  })();
+}
+function RichSelectFooterControl(props) {
+  const [creating, setCreating] = createSignal(false);
+  const [name, setName] = createSignal("");
+  let input;
+  let start;
+  let controls;
+  onCleanup(() => {
+    if (controls?.contains(document.activeElement)) queueMicrotask(props.restoreFocus);
+  });
+  const create = () => {
+    const footer = props.footer;
+    const value = name().trim();
+    if (!("create" in footer) || !value) return;
+    props.done(() => footer.create.onCreate(value));
+  };
+  return (() => {
+    var _el$35 = _$getNextElement(_tmpl$12);
+    var _ref$2 = controls;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$35) : controls = _el$35;
+    _$insert(_el$35, _$createComponent(Show, {
+      get when() {
+        return _$memo(() => !!(creating() && "create" in props.footer))() ? props.footer.create : undefined;
+      },
+      get fallback() {
+        return (() => {
+          var _el$36 = _$getNextElement(_tmpl$13),
+            _el$37 = _el$36.firstChild,
+            _el$38 = _el$37.firstChild,
+            _el$39 = _el$37.nextSibling;
+          _el$36.$$click = () => {
+            const footer = props.footer;
+            if ("create" in footer) {
+              setName(props.initialName());
+              setCreating(true);
+              queueMicrotask(() => input?.focus());
+            } else props.done(footer.onActivate);
+          };
+          var _ref$3 = start;
+          typeof _ref$3 === "function" ? _$use(_ref$3, _el$36) : start = _el$36;
+          _$insert(_el$39, () => props.footer.label);
+          _$effect(() => _$className(_el$38, props.footer.icon ?? "ti ti-plus"));
+          _$runHydrationEvents();
+          return _el$36;
+        })();
+      },
+      children: create_ => (() => {
+        var _el$40 = _$getNextElement(_tmpl$14),
+          _el$41 = _el$40.firstChild,
+          _el$42 = _el$41.nextSibling,
+          [_el$43, _co$6] = _$getNextMarker(_el$42.nextSibling);
+        _el$41.$$keydown = event => {
+          event.stopPropagation();
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setCreating(false);
+            queueMicrotask(() => start?.focus());
+          } else if (event.key === "Enter" && !event.isComposing) {
+            event.preventDefault();
+            create();
+          }
+        };
+        _el$41.$$input = event => setName(event.currentTarget.value);
+        var _ref$4 = input;
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$41) : input = _el$41;
+        _$insert(_el$40, _$createComponent(Button, {
+          type: "button",
+          variant: "primary",
+          size: "sm",
+          get disabled() {
+            return !name().trim();
+          },
+          onClick: create,
+          get children() {
+            return props.messages.create;
+          }
+        }), _el$43, _co$6);
+        _$effect(_p$ => {
+          var _v$1 = create_().placeholder,
+            _v$10 = props.footer.label;
+          _v$1 !== _p$.e && _$setAttribute(_el$41, "placeholder", _p$.e = _v$1);
+          _v$10 !== _p$.t && _$setAttribute(_el$41, "aria-label", _p$.t = _v$10);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        _$effect(() => _$setProperty(_el$41, "value", name()));
+        _$runHydrationEvents();
+        return _el$40;
+      })()
+    }));
+    return _el$35;
+  })();
+}
+
+/**
+ * A dropdown whose rows explain each choice: a name plus one short line, an
+ * unavailable row with its reason, and an optional preview of what a choice
+ * changes. Desktop opens a popover beside the trigger; a phone opens a bottom
+ * sheet whose info buttons show the preview as a second level.
+ */
+export function RichSelect(props) {
+  const messages = useRichSelectMessages();
+  const locale = useLocale();
+  const meta = createFieldMeta(props.id);
+  const listboxId = `${meta.controlId}-listbox`;
+  const previewId = `${meta.controlId}-preview`;
+  const [query, setQuery] = createSignal("");
+  const [active, setActive] = createSignal(-1);
+  const [height, setHeight] = createSignal();
+  const [sheetOpen, setSheetOpen] = createSignal(false);
+  const [phone, setPhone] = createSignal(false);
+  const [sheetId, setSheetId] = createSignal();
+  onMount(() => {
+    const media = window.matchMedia(PHONE_QUERY);
+    setPhone(media.matches);
+    const update = () => setPhone(media.matches);
+    media.addEventListener("change", update);
+    onCleanup(() => media.removeEventListener("change", update));
+  });
+  let searchRef;
+  let closeSheet;
+  const value = () => resolveMaybeAccessor(props.value) ?? null;
+  const error = () => resolveMaybeAccessor(props.error);
+  const status = () => props.status ?? "ready";
+  const withPreview = () => Boolean(props.renderPreview);
+  const title = () => props.title ?? (typeof props.label === "string" ? props.label : props["aria-label"] ?? props.placeholder ?? messages().chooseOption);
+  const searchable = () => status() === "ready" && props.items.length >= RICH_SELECT_SEARCH_FROM;
+  const visible = createMemo(() => searchable() ? filterChoiceOptions(props.items, query()) : props.items);
+  const anyVisual = createMemo(() => props.items.some(hasVisual));
+  const rows = createMemo(() => {
+    const headings = props.items.length >= RICH_SELECT_SEARCH_FROM && props.sections ? props.sections : undefined;
+    const result = [];
+    let section;
+    visible().forEach((item, index) => {
+      if (headings && item.section && item.section !== section) {
+        const heading = headings.find(candidate => candidate.id === item.section);
+        if (heading) result.push({
+          kind: "heading",
+          id: heading.id,
+          label: heading.label
+        });
+      }
+      section = item.section;
+      result.push({
+        kind: "item",
+        item,
+        index
+      });
+    });
+    return result;
+  });
+  const selected = createMemo(() => {
+    const current = value();
+    return current === null ? undefined : props.items.find(item => item.value === current);
+  });
+  const activeItem = () => status() === "ready" ? visible()[active()] : undefined;
+  const optionId = index => `${listboxId}-${index}`;
+  const popover = createChoicePopover(() => Boolean(props.disabled), () => ({
+    width: "own",
+    side: props.placement === "top-start" ? "above" : "below"
+  }));
+  const expanded = () => popover.open() || sheetOpen();
+  const restorePopoverFocus = () => {
+    if (popover.open()) (searchable() ? searchRef : popover.trigger())?.focus();
+  };
+  createEffect(() => {
+    if (props.disabled) {
+      popover.hide();
+      closeSheet?.();
+    }
+  });
+  createEffect(() => {
+    const count = visible().length;
+    if (!popover.open() || status() !== "ready") return;
+    const current = untrack(active);
+    if (current < 0 || current >= count) setActive(startIndex());
+  });
+  const scrollToActive = () => {
+    const element = document.getElementById(optionId(active()));
+    element?.scrollIntoView({
+      block: "nearest"
+    });
+  };
+  const move = next => {
+    if (next < 0) return;
+    setActive(next);
+    queueMicrotask(scrollToActive);
+  };
+  const startIndex = () => {
+    const index = visible().findIndex(item => item.value === value());
+    return index >= 0 ? index : visible().length > 0 ? 0 : -1;
+  };
+  const openPopover = () => {
+    setQuery("");
+    setActive(startIndex());
+    // The preview popover keeps one height while it is open, so moving
+    // through rows, filtering, or the end of loading never resizes it.
+    const rowsTall = status() === "ready" ? props.items.length : PLACEHOLDER_ROWS;
+    const rem = Math.min(27.5, Math.max(18.75, rowsTall * 3.625 + 1.5));
+    setHeight(props.size?.height ?? (withPreview() ? `${rem}rem` : undefined));
+    popover.show();
+    if (searchable()) queueMicrotask(() => searchRef?.focus());
+    queueMicrotask(scrollToActive);
+  };
+  const open = () => {
+    if (props.disabled || expanded()) return;
+    if (isPhone()) openSheet();else openPopover();
+  };
+  const close = (restoreFocus = false) => {
+    popover.hide(restoreFocus);
+    setQuery("");
+    setActive(-1);
+  };
+  const choose = item => {
+    if (props.disabled || status() !== "ready" || !item || item.disabledReason) return;
+    // Hide first: the old list must never stay visible with the next value.
+    close(true);
+    commitFieldValue(props, item.value);
+  };
+  const runFooter = run => {
+    close(true);
+    run();
+  };
+  const onKeyDown = event => {
+    if (event.isComposing) return;
+    const target = event.target;
+    if (event.key !== "Escape" && target instanceof Element && target !== popover.trigger() && target !== searchRef && target.closest("input, button, textarea, a, [contenteditable]")) return;
+    const isOpen = popover.open();
+    const count = visible().length;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!isOpen) open();else if (status() === "ready") move(nextEnabledChoiceIndex(visible(), active(), event.key === "ArrowDown" ? 1 : -1));
+    } else if ((event.key === "Home" || event.key === "End") && isOpen) {
+      event.preventDefault();
+      if (status() === "ready" && count > 0) move(event.key === "Home" ? 0 : count - 1);
+    } else if ((event.key === "Enter" || event.key === " ") && !isOpen && event.target === popover.trigger()) {
+      event.preventDefault();
+      open();
+    } else if (event.key === "Enter" && isOpen) {
+      // Enter on an unavailable row does nothing; the list stays open.
+      event.preventDefault();
+      choose(activeItem());
+    } else if (event.key === "Escape" && isOpen) {
+      // A closed picker lets Escape reach an enclosing dialog.
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    } else if (isOpen && searchable() && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.target !== searchRef) {
+      // Typing anywhere in the open picker goes to the search field.
+      event.preventDefault();
+      setQuery(query() + event.key);
+      setActive(visible().length > 0 ? 0 : -1);
+      searchRef?.focus();
+    }
+  };
+  const onFocusOut = event => {
+    const next = event.relatedTarget;
+    if (!popover.open() || !(next instanceof Node)) return;
+    if (popover.trigger()?.contains(next) || popoverElement?.contains(next)) return;
+    close();
+  };
+  let popoverElement;
+  const openSheet = () => {
+    const current = locale();
+    const lifetime = new AbortController();
+    // dialogCore can wait for a previous sheet's history traversal. Disabling
+    // or unmounting the field must also cancel an opening that is still queued.
+    closeSheet = () => lifetime.abort();
+    let after;
+    setSheetOpen(true);
+    void dialogCore.open((closeDialog, context) => {
+      context.dialog.id ||= `${meta.controlId}-sheet`;
+      setSheetId(context.dialog.id);
+      return _$createComponent(LocaleProvider, {
+        locale: current,
+        get children() {
+          return _$createComponent(BottomSheet, {
+            get onDismiss() {
+              return context.requestDismiss;
+            },
+            get children() {
+              return _$createComponent(RichSelectSheet, {
+                props: props,
+                get title() {
+                  return title();
+                },
+                value: value,
+                get dialog() {
+                  return context.dialog;
+                },
+                close: () => closeDialog(),
+                done: run => {
+                  after = run;
+                  closeDialog();
+                }
+              });
+            }
+          });
+        }
+      });
+    }, {
+      ...bottomSheetOptions,
+      history: true,
+      signal: lifetime.signal,
+      // A phone keyboard must not cover the list as it opens: focus starts on the sheet.
+      initialFocus: dialog => {
+        dialog.tabIndex = -1;
+        return dialog;
+      }
+    }).then(() => {
+      if (!lifetime.signal.aborted) after?.();
+    }).finally(() => {
+      closeSheet = undefined;
+      setSheetOpen(false);
+    });
+  };
+  onCleanup(() => closeSheet?.());
+  const triggerText = () => props.triggerLabel ?? selected()?.label ?? props.placeholder ?? messages().chooseOption;
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return error();
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      var _el$44 = _$getNextElement(_tmpl$20),
+        _el$45 = _el$44.firstChild,
+        _el$71 = _el$45.nextSibling,
+        [_el$72, _co$12] = _$getNextMarker(_el$71.nextSibling),
+        _el$46 = _el$72.nextSibling,
+        _el$67 = _el$46.firstChild,
+        [_el$68, _co$10] = _$getNextMarker(_el$67.nextSibling),
+        _el$69 = _el$68.nextSibling,
+        [_el$70, _co$11] = _$getNextMarker(_el$69.nextSibling);
+      _el$44.$$focusout = onFocusOut;
+      var _ref$5 = popover.setTrigger;
+      typeof _ref$5 === "function" ? _$use(_ref$5, _el$45) : popover.setTrigger = _el$45;
+      _$spread(_el$45, _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get ["aria-haspopup"]() {
+          return sheetOpen() || !popover.open() && phone() ? "dialog" : "listbox";
+        },
+        get ["aria-expanded"]() {
+          return expanded();
+        },
+        get ["aria-controls"]() {
+          return _$memo(() => !!sheetOpen())() ? sheetId() : popover.open() ? listboxId : undefined;
+        },
+        get ["aria-activedescendant"]() {
+          return _$memo(() => !!(popover.open() && activeItem()))() ? optionId(active()) : undefined;
+        },
+        get ["data-tone"]() {
+          return props.tone === "warning" ? "warning" : undefined;
+        }
+      }, () => fieldControlAria(meta, {
+        ...props,
+        "aria-label": props["aria-label"] ?? (typeof props.label === "string" ? undefined : title())
+      }), {
+        get disabled() {
+          return props.disabled;
+        },
+        "onClick": () => popover.open() ? close() : open(),
+        "onKeyDown": onKeyDown
+      }), false, true);
+      _$insert(_el$45, _$createComponent(Show, {
+        get when() {
+          return props.renderTrigger;
+        },
+        get fallback() {
+          return [_$createComponent(Show, {
+            get when() {
+              return _$memo(() => !!(selected() && hasVisual(selected())))() ? selected() : undefined;
+            },
+            get fallback() {
+              return _$createComponent(Show, {
+                get when() {
+                  return props.icon;
+                },
+                children: icon => (() => {
+                  var _el$75 = _$getNextElement(_tmpl$23);
+                  _$effect(() => _$className(_el$75, icon()));
+                  return _el$75;
+                })()
+              });
+            },
+            children: item => _$createComponent(RichSelectVisual, {
+              get item() {
+                return item();
+              }
+            })
+          }), (() => {
+            var _el$73 = _$getNextElement(_tmpl$21);
+            _$insert(_el$73, triggerText);
+            _$effect(() => _$setAttribute(_el$73, "data-placeholder", selected() || props.triggerLabel ? undefined : "true"));
+            return _el$73;
+          })(), _$getNextElement(_tmpl$22)];
+        },
+        children: render => render()(selected())
+      }));
+      _$insert(_el$44, _$createComponent(Show, {
+        get when() {
+          return props.name;
+        },
+        children: name => (() => {
+          var _el$76 = _$getNextElement(_tmpl$24);
+          _$effect(() => _$setAttribute(_el$76, "name", name()));
+          _$effect(() => _$setProperty(_el$76, "value", value() ?? ""));
+          return _el$76;
+        })()
+      }), _el$72, _co$12);
+      _el$46.$$pointerdown = event => {
+        // Keep focus on the trigger or search field, so the keys keep working after a click on the preview.
+        if (!event.target.closest("input, button, textarea, a")) event.preventDefault();
+      };
+      _el$46.$$keydown = onKeyDown;
+      _$use(element => {
+        popoverElement = element;
+        popover.setPopover(element);
+      }, _el$46);
+      _$insert(_el$46, _$createComponent(Show, {
+        get when() {
+          return !withPreview();
+        },
+        get children() {
+          var _el$47 = _$getNextElement(_tmpl$15);
+          _$insert(_el$47, title);
+          return _el$47;
+        }
+      }), _el$68, _co$10);
+      _$insert(_el$46, _$createComponent(Switch, {
+        get children() {
+          return [_$createComponent(Match, {
+            get when() {
+              return status() === "error";
+            },
+            get children() {
+              return [(() => {
+                var _el$48 = _$getNextElement(_tmpl$16);
+                _$setAttribute(_el$48, "id", listboxId);
+                _$effect(() => _$setAttribute(_el$48, "aria-label", title()));
+                return _el$48;
+              })(), _$createComponent(RichSelectState, {
+                status: "error",
+                get messages() {
+                  return messages();
+                },
+                get onRetry() {
+                  return props.onRetry;
+                },
+                restoreFocus: restorePopoverFocus
+              })];
+            }
+          }), _$createComponent(Match, {
+            get when() {
+              return _$memo(() => status() === "ready")() && props.items.length === 0;
+            },
+            get children() {
+              return [(() => {
+                var _el$49 = _$getNextElement(_tmpl$16);
+                _$setAttribute(_el$49, "id", listboxId);
+                _$effect(() => _$setAttribute(_el$49, "aria-label", title()));
+                return _el$49;
+              })(), _$createComponent(RichSelectState, {
+                status: "empty",
+                get messages() {
+                  return messages();
+                },
+                get empty() {
+                  return props.empty;
+                }
+              }), _$createComponent(Show, {
+                get when() {
+                  return props.footer;
+                },
+                children: footer => _$createComponent(RichSelectFooterControl, {
+                  get footer() {
+                    return footer();
+                  },
+                  initialName: query,
+                  get messages() {
+                    return messages();
+                  },
+                  done: runFooter,
+                  restoreFocus: restorePopoverFocus
+                })
+              })];
+            }
+          }), _$createComponent(Match, {
+            when: true,
+            get children() {
+              var _el$50 = _$getNextElement(_tmpl$19),
+                _el$51 = _el$50.firstChild,
+                _el$61 = _el$51.firstChild,
+                [_el$62, _co$9] = _$getNextMarker(_el$61.nextSibling),
+                _el$55 = _el$62.nextSibling,
+                _el$57 = _el$55.firstChild,
+                [_el$58, _co$7] = _$getNextMarker(_el$57.nextSibling),
+                _el$59 = _el$58.nextSibling,
+                [_el$60, _co$8] = _$getNextMarker(_el$59.nextSibling),
+                _el$63 = _el$55.nextSibling,
+                [_el$64, _co$0] = _$getNextMarker(_el$63.nextSibling),
+                _el$65 = _el$51.nextSibling,
+                [_el$66, _co$1] = _$getNextMarker(_el$65.nextSibling);
+              _$insert(_el$51, _$createComponent(Show, {
+                get when() {
+                  return searchable();
+                },
+                get children() {
+                  var _el$52 = _$getNextElement(_tmpl$17),
+                    _el$53 = _el$52.firstChild,
+                    _el$54 = _el$53.nextSibling;
+                  _el$54.$$input = event => {
+                    setQuery(event.currentTarget.value);
+                    setActive(visible().length > 0 ? 0 : -1);
+                  };
+                  _$use(input => {
+                    searchRef = input;
+                    onCleanup(() => {
+                      if (document.activeElement === input) queueMicrotask(() => {
+                        if (popover.open()) popover.trigger()?.focus();
+                      });
+                    });
+                  }, _el$54);
+                  _$setAttribute(_el$54, "aria-controls", listboxId);
+                  _$effect(_p$ => {
+                    var _v$11 = popover.open(),
+                      _v$12 = props.searchPlaceholder ?? messages().search,
+                      _v$13 = props.searchPlaceholder ?? messages().search,
+                      _v$14 = activeItem() ? optionId(active()) : undefined;
+                    _v$11 !== _p$.e && _$setAttribute(_el$54, "aria-expanded", _p$.e = _v$11);
+                    _v$12 !== _p$.t && _$setAttribute(_el$54, "placeholder", _p$.t = _v$12);
+                    _v$13 !== _p$.a && _$setAttribute(_el$54, "aria-label", _p$.a = _v$13);
+                    _v$14 !== _p$.o && _$setAttribute(_el$54, "aria-activedescendant", _p$.o = _v$14);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined,
+                    o: undefined
+                  });
+                  _$effect(() => _$setProperty(_el$54, "value", query()));
+                  _$runHydrationEvents();
+                  return _el$52;
+                }
+              }), _el$62, _co$9);
+              _$setAttribute(_el$55, "id", listboxId);
+              _$insert(_el$55, _$createComponent(Show, {
+                get when() {
+                  return status() === "loading";
+                },
+                get children() {
+                  return [(() => {
+                    var _el$56 = _$getNextElement(_tmpl$18);
+                    _$insert(_el$56, () => messages().loading);
+                    return _el$56;
+                  })(), _$createComponent(RichSelectPlaceholders, {
+                    get visual() {
+                      return anyVisual() || props.items.length === 0;
+                    }
+                  })];
+                }
+              }), _el$58, _co$7);
+              _$insert(_el$55, _$createComponent(Show, {
+                get when() {
+                  return status() === "ready";
+                },
+                get children() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return rows();
+                    },
+                    get fallback() {
+                      return (() => {
+                        var _el$77 = _$getNextElement(_tmpl$25);
+                        _$insert(_el$77, () => messages().noResults);
+                        return _el$77;
+                      })();
+                    },
+                    children: row => row.kind === "heading" ? (() => {
+                      var _el$78 = _$getNextElement(_tmpl$26);
+                      _$insert(_el$78, () => row.label);
+                      return _el$78;
+                    })() : // biome-ignore lint/a11y/useKeyWithClickEvents: the trigger or search field handles the keys through aria-activedescendant.
+                    (() => {
+                      var _el$79 = _$getNextElement(_tmpl$27),
+                        _el$81 = _el$79.firstChild,
+                        [_el$82, _co$13] = _$getNextMarker(_el$81.nextSibling),
+                        _el$83 = _el$82.nextSibling,
+                        [_el$84, _co$14] = _$getNextMarker(_el$83.nextSibling),
+                        _el$80 = _el$84.nextSibling;
+                      _el$79.$$click = () => choose(row.item);
+                      _el$79.$$pointermove = () => {
+                        if (active() !== row.index) setActive(row.index);
+                      };
+                      _$insert(_el$79, _$createComponent(Show, {
+                        get when() {
+                          return anyVisual();
+                        },
+                        get children() {
+                          return _$createComponent(Show, {
+                            get when() {
+                              return hasVisual(row.item);
+                            },
+                            get fallback() {
+                              return _$getNextElement(_tmpl$);
+                            },
+                            get children() {
+                              return _$createComponent(RichSelectVisual, {
+                                get item() {
+                                  return row.item;
+                                }
+                              });
+                            }
+                          });
+                        }
+                      }), _el$82, _co$13);
+                      _$insert(_el$79, _$createComponent(RichSelectRowText, {
+                        get item() {
+                          return row.item;
+                        },
+                        get labelId() {
+                          return `${optionId(row.index)}-label`;
+                        },
+                        get lineId() {
+                          return `${optionId(row.index)}-line`;
+                        }
+                      }), _el$84, _co$14);
+                      _$effect(_p$ => {
+                        var _v$25 = optionId(row.index),
+                          _v$26 = row.item.value === value(),
+                          _v$27 = row.item.disabledReason ? "true" : undefined,
+                          _v$28 = `${optionId(row.index)}-label`,
+                          _v$29 = [row.item.disabledReason || row.item.description ? `${optionId(row.index)}-line` : "", withPreview() && row.index === active() ? previewId : ""].filter(Boolean).join(" ") || undefined,
+                          _v$30 = row.index === active() ? "true" : undefined;
+                        _v$25 !== _p$.e && _$setAttribute(_el$79, "id", _p$.e = _v$25);
+                        _v$26 !== _p$.t && _$setAttribute(_el$79, "aria-selected", _p$.t = _v$26);
+                        _v$27 !== _p$.a && _$setAttribute(_el$79, "aria-disabled", _p$.a = _v$27);
+                        _v$28 !== _p$.o && _$setAttribute(_el$79, "aria-labelledby", _p$.o = _v$28);
+                        _v$29 !== _p$.i && _$setAttribute(_el$79, "aria-describedby", _p$.i = _v$29);
+                        _v$30 !== _p$.n && _$setAttribute(_el$79, "data-active", _p$.n = _v$30);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined,
+                        a: undefined,
+                        o: undefined,
+                        i: undefined,
+                        n: undefined
+                      });
+                      _$runHydrationEvents();
+                      return _el$79;
+                    })()
+                  });
+                }
+              }), _el$60, _co$8);
+              _$insert(_el$51, _$createComponent(Show, {
+                get when() {
+                  return _$memo(() => !!props.footer)() && status() === "ready";
+                },
+                get children() {
+                  return _$createComponent(RichSelectFooterControl, {
+                    get footer() {
+                      return props.footer;
+                    },
+                    initialName: query,
+                    get messages() {
+                      return messages();
+                    },
+                    done: runFooter,
+                    restoreFocus: restorePopoverFocus
+                  });
+                }
+              }), _el$64, _co$0);
+              _$insert(_el$50, _$createComponent(Show, {
+                get when() {
+                  return props.renderPreview;
+                },
+                children: render => (() => {
+                  var _el$86 = _$getNextElement(_tmpl$29),
+                    _el$92 = _el$86.firstChild,
+                    [_el$93, _co$15] = _$getNextMarker(_el$92.nextSibling),
+                    _el$94 = _el$93.nextSibling,
+                    [_el$95, _co$16] = _$getNextMarker(_el$94.nextSibling);
+                  _$insert(_el$86, _$createComponent(Show, {
+                    get when() {
+                      return status() === "loading";
+                    },
+                    get children() {
+                      var _el$87 = _$getNextElement(_tmpl$28),
+                        _el$88 = _el$87.firstChild,
+                        _el$89 = _el$88.nextSibling,
+                        _el$90 = _el$89.nextSibling,
+                        _el$91 = _el$90.nextSibling;
+                      return _el$87;
+                    }
+                  }), _el$93, _co$15);
+                  _$insert(_el$86, _$createComponent(Show, {
+                    get when() {
+                      return activeItem();
+                    },
+                    children: item => _$createComponent(RichSelectPreview, {
+                      id: previewId,
+                      get item() {
+                        return item();
+                      },
+                      get render() {
+                        return render();
+                      }
+                    })
+                  }), _el$95, _co$16);
+                  return _el$86;
+                })()
+              }), _el$66, _co$1);
+              _$effect(_p$ => {
+                var _v$15 = title(),
+                  _v$16 = status() === "loading" ? "true" : undefined,
+                  _v$17 = anyVisual() ? "true" : undefined;
+                _v$15 !== _p$.e && _$setAttribute(_el$55, "aria-label", _p$.e = _v$15);
+                _v$16 !== _p$.t && _$setAttribute(_el$55, "aria-busy", _p$.t = _v$16);
+                _v$17 !== _p$.a && _$setAttribute(_el$55, "data-visual", _p$.a = _v$17);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined,
+                a: undefined
+              });
+              return _el$50;
+            }
+          })];
+        }
+      }), _el$70, _co$11);
+      _$effect(_p$ => {
+        var _v$18 = props.appearance ?? "field",
+          _v$19 = error() ? "true" : undefined,
+          _v$20 = title(),
+          _v$21 = withPreview() ? "true" : undefined,
+          _v$22 = status(),
+          _v$23 = props.size?.width,
+          _v$24 = height();
+        _v$18 !== _p$.e && _$setAttribute(_el$44, "data-appearance", _p$.e = _v$18);
+        _v$19 !== _p$.t && _$setAttribute(_el$44, "data-invalid", _p$.t = _v$19);
+        _v$20 !== _p$.a && _$setAttribute(_el$46, "aria-label", _p$.a = _v$20);
+        _v$21 !== _p$.o && _$setAttribute(_el$46, "data-preview", _p$.o = _v$21);
+        _v$22 !== _p$.i && _$setAttribute(_el$46, "data-status", _p$.i = _v$22);
+        _v$23 !== _p$.n && _$setStyleProperty(_el$46, "width", _p$.n = _v$23);
+        _v$24 !== _p$.s && _$setStyleProperty(_el$46, "height", _p$.s = _v$24);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined
+      });
+      _$runHydrationEvents();
+      return _el$44;
+    }
+  });
+}
+
+/**
+ * The phone presentation: a bottom sheet with the list. With a preview, an
+ * info button beside each row, unavailable rows included, opens the preview as
+ * a second level with Back and Choose.
+ */
+function RichSelectSheet(sheet) {
+  const messages = useRichSelectMessages();
+  const props = sheet.props;
+  const uid = createUniqueId();
+  const [query, setQuery] = createSignal("");
+  const [detailValue, setDetailValue] = createSignal();
+  // Resolve from the current snapshot: access and availability can change while
+  // the detail level is open.
+  const detail = createMemo(() => props.items.find(item => item.value === detailValue()));
+  let back;
+  let returnValue;
+  const status = () => props.status ?? "ready";
+  const searchable = () => status() === "ready" && props.items.length >= RICH_SELECT_SEARCH_FROM;
+  const visible = createMemo(() => searchable() ? filterChoiceOptions(props.items, query()) : props.items);
+  const anyVisual = createMemo(() => props.items.some(hasVisual));
+  const headings = () => props.items.length >= RICH_SELECT_SEARCH_FROM && props.sections ? props.sections : undefined;
+  const restoreSheetFocus = () => {
+    if (sheet.dialog.open) sheet.dialog.focus();
+  };
+  const headingBefore = index => {
+    const item = visible()[index];
+    const list = headings();
+    if (!list || !item?.section || visible()[index - 1]?.section === item.section) return undefined;
+    return list.find(candidate => candidate.id === item.section)?.label;
+  };
+  const choose = item => {
+    if (props.disabled || status() !== "ready" || item.disabledReason) return;
+    sheet.done(() => {
+      const current = props.items.find(candidate => candidate.value === item.value);
+      if (!props.disabled && status() === "ready" && current && !current.disabledReason) commitFieldValue(props, current.value);
+    });
+  };
+  const rowId = index => `k2b-rich-select-sheet-${uid}-${index}`;
+  const showDetail = item => {
+    returnValue = item.value;
+    // The second level keeps the sheet's height, so Back and Choose stay where they are.
+    sheet.dialog.style.minHeight = `${sheet.dialog.getBoundingClientRect().height}px`;
+    setDetailValue(item.value);
+    queueMicrotask(() => back?.focus());
+  };
+  const leaveDetail = () => {
+    sheet.dialog.style.minHeight = "";
+    setDetailValue(undefined);
+    const value = returnValue;
+    queueMicrotask(() => {
+      const index = visible().findIndex(item => item.value === value);
+      const original = index >= 0 ? document.getElementById(`${rowId(index)}-info`) : undefined;
+      const fallback = sheet.dialog.querySelector(".k2b-rich-select__sheet-row > button");
+      (original ?? fallback ?? sheet.dialog).focus();
+    });
+  };
+  createEffect(() => {
+    if (detailValue() !== undefined && (!detail() || status() !== "ready")) leaveDetail();
+  });
+  // Escape on the second level goes back to the list instead of closing the sheet.
+  const onEscape = event => {
+    if (event.key !== "Escape" || !detail()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    leaveDetail();
+  };
+  onMount(() => {
+    sheet.dialog.addEventListener("keydown", onEscape, true);
+    onCleanup(() => {
+      sheet.dialog.removeEventListener("keydown", onEscape, true);
+      // dialogCore may reuse the dialog element for the next dialog.
+      sheet.dialog.style.minHeight = "";
+    });
+  });
+  return [(() => {
+    var _el$96 = _$getNextElement(_tmpl$31),
+      _el$100 = _el$96.firstChild,
+      [_el$101, _co$17] = _$getNextMarker(_el$100.nextSibling),
+      _el$98 = _el$101.nextSibling,
+      _el$99 = _el$98.nextSibling;
+    _$insert(_el$96, _$createComponent(Show, {
+      get when() {
+        return detail();
+      },
+      get children() {
+        var _el$97 = _$getNextElement(_tmpl$30);
+        _el$97.$$click = leaveDetail;
+        var _ref$6 = back;
+        typeof _ref$6 === "function" ? _$use(_ref$6, _el$97) : back = _el$97;
+        _$effect(() => _$setAttribute(_el$97, "aria-label", messages().back));
+        _$runHydrationEvents();
+        return _el$97;
+      }
+    }), _el$101, _co$17);
+    _$insert(_el$98, () => detail()?.label ?? sheet.title);
+    _$addEventListener(_el$99, "click", sheet.close, true);
+    _$effect(() => _$setAttribute(_el$99, "aria-label", messages().close));
+    _$runHydrationEvents();
+    return _el$96;
+  })(), _$createComponent(Show, {
+    get when() {
+      return detail();
+    },
+    get fallback() {
+      return _$createComponent(BottomSheet.Body, {
+        get children() {
+          return _$createComponent(Switch, {
+            get children() {
+              return [_$createComponent(Match, {
+                get when() {
+                  return status() === "error";
+                },
+                get children() {
+                  return _$createComponent(RichSelectState, {
+                    status: "error",
+                    get messages() {
+                      return messages();
+                    },
+                    get onRetry() {
+                      return props.onRetry;
+                    },
+                    restoreFocus: restoreSheetFocus
+                  });
+                }
+              }), _$createComponent(Match, {
+                get when() {
+                  return _$memo(() => status() === "ready")() && props.items.length === 0;
+                },
+                get children() {
+                  return [_$createComponent(RichSelectState, {
+                    status: "empty",
+                    get messages() {
+                      return messages();
+                    },
+                    get empty() {
+                      return props.empty;
+                    }
+                  }), _$createComponent(Show, {
+                    get when() {
+                      return props.footer;
+                    },
+                    children: footer => _$createComponent(RichSelectFooterControl, {
+                      get footer() {
+                        return footer();
+                      },
+                      initialName: query,
+                      get messages() {
+                        return messages();
+                      },
+                      get done() {
+                        return sheet.done;
+                      },
+                      restoreFocus: restoreSheetFocus
+                    })
+                  })];
+                }
+              }), _$createComponent(Match, {
+                when: true,
+                get children() {
+                  return [_$createComponent(Show, {
+                    get when() {
+                      return searchable();
+                    },
+                    get children() {
+                      var _el$102 = _$getNextElement(_tmpl$32),
+                        _el$103 = _el$102.firstChild,
+                        _el$104 = _el$103.nextSibling;
+                      _el$104.$$input = event => setQuery(event.currentTarget.value);
+                      _$use(input => {
+                        onCleanup(() => {
+                          if (document.activeElement === input) queueMicrotask(restoreSheetFocus);
+                        });
+                      }, _el$104);
+                      _$effect(_p$ => {
+                        var _v$31 = props.searchPlaceholder ?? messages().search,
+                          _v$32 = props.searchPlaceholder ?? messages().search;
+                        _v$31 !== _p$.e && _$setAttribute(_el$104, "placeholder", _p$.e = _v$31);
+                        _v$32 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$32);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      _$effect(() => _$setProperty(_el$104, "value", query()));
+                      _$runHydrationEvents();
+                      return _el$102;
+                    }
+                  }), (() => {
+                    var _el$105 = _$getNextElement(_tmpl$33),
+                      _el$107 = _el$105.firstChild,
+                      [_el$108, _co$18] = _$getNextMarker(_el$107.nextSibling),
+                      _el$109 = _el$108.nextSibling,
+                      [_el$110, _co$19] = _$getNextMarker(_el$109.nextSibling);
+                    _$insert(_el$105, _$createComponent(Show, {
+                      get when() {
+                        return status() === "loading";
+                      },
+                      get children() {
+                        return [(() => {
+                          var _el$106 = _$getNextElement(_tmpl$18);
+                          _$insert(_el$106, () => messages().loading);
+                          return _el$106;
+                        })(), _$createComponent(RichSelectPlaceholders, {
+                          get visual() {
+                            return anyVisual() || props.items.length === 0;
+                          }
+                        })];
+                      }
+                    }), _el$108, _co$18);
+                    _$insert(_el$105, _$createComponent(Show, {
+                      get when() {
+                        return status() === "ready";
+                      },
+                      get children() {
+                        return _$createComponent(For, {
+                          get each() {
+                            return visible();
+                          },
+                          get fallback() {
+                            return (() => {
+                              var _el$111 = _$getNextElement(_tmpl$25);
+                              _$insert(_el$111, () => messages().noResults);
+                              return _el$111;
+                            })();
+                          },
+                          children: (item, index) => [_$createComponent(Show, {
+                            get when() {
+                              return headingBefore(index());
+                            },
+                            children: label => (() => {
+                              var _el$122 = _$getNextElement(_tmpl$36);
+                              _$insert(_el$122, label);
+                              return _el$122;
+                            })()
+                          }), (() => {
+                            var _el$112 = _$getNextElement(_tmpl$35),
+                              _el$113 = _el$112.firstChild,
+                              _el$115 = _el$113.firstChild,
+                              [_el$116, _co$20] = _$getNextMarker(_el$115.nextSibling),
+                              _el$117 = _el$116.nextSibling,
+                              [_el$118, _co$21] = _$getNextMarker(_el$117.nextSibling),
+                              _el$114 = _el$118.nextSibling,
+                              _el$120 = _el$113.nextSibling,
+                              [_el$121, _co$22] = _$getNextMarker(_el$120.nextSibling);
+                            _el$113.$$click = () => choose(item);
+                            _$insert(_el$113, _$createComponent(Show, {
+                              get when() {
+                                return anyVisual();
+                              },
+                              get children() {
+                                return _$createComponent(Show, {
+                                  get when() {
+                                    return hasVisual(item);
+                                  },
+                                  get fallback() {
+                                    return _$getNextElement(_tmpl$);
+                                  },
+                                  get children() {
+                                    return _$createComponent(RichSelectVisual, {
+                                      item: item
+                                    });
+                                  }
+                                });
+                              }
+                            }), _el$116, _co$20);
+                            _$insert(_el$113, _$createComponent(RichSelectRowText, {
+                              item: item,
+                              get labelId() {
+                                return `${rowId(index())}-label`;
+                              },
+                              get lineId() {
+                                return `${rowId(index())}-line`;
+                              }
+                            }), _el$118, _co$21);
+                            _$insert(_el$112, _$createComponent(Show, {
+                              get when() {
+                                return props.renderPreview;
+                              },
+                              get children() {
+                                var _el$119 = _$getNextElement(_tmpl$34);
+                                _el$119.$$click = () => showDetail(item);
+                                _$effect(_p$ => {
+                                  var _v$36 = `${rowId(index())}-info`,
+                                    _v$37 = messages().detailsFor({
+                                      name: item.label
+                                    });
+                                  _v$36 !== _p$.e && _$setAttribute(_el$119, "id", _p$.e = _v$36);
+                                  _v$37 !== _p$.t && _$setAttribute(_el$119, "aria-label", _p$.t = _v$37);
+                                  return _p$;
+                                }, {
+                                  e: undefined,
+                                  t: undefined
+                                });
+                                _$runHydrationEvents();
+                                return _el$119;
+                              }
+                            }), _el$121, _co$22);
+                            _$effect(_p$ => {
+                              var _v$38 = props.renderPreview ? "true" : undefined,
+                                _v$39 = rowId(index()),
+                                _v$40 = item.value === sheet.value() ? "true" : undefined,
+                                _v$41 = item.disabledReason ? "true" : undefined,
+                                _v$42 = `${rowId(index())}-label`,
+                                _v$43 = item.disabledReason || item.description ? `${rowId(index())}-line` : undefined;
+                              _v$38 !== _p$.e && _$setAttribute(_el$112, "data-info", _p$.e = _v$38);
+                              _v$39 !== _p$.t && _$setAttribute(_el$113, "id", _p$.t = _v$39);
+                              _v$40 !== _p$.a && _$setAttribute(_el$113, "aria-current", _p$.a = _v$40);
+                              _v$41 !== _p$.o && _$setAttribute(_el$113, "aria-disabled", _p$.o = _v$41);
+                              _v$42 !== _p$.i && _$setAttribute(_el$113, "aria-labelledby", _p$.i = _v$42);
+                              _v$43 !== _p$.n && _$setAttribute(_el$113, "aria-describedby", _p$.n = _v$43);
+                              return _p$;
+                            }, {
+                              e: undefined,
+                              t: undefined,
+                              a: undefined,
+                              o: undefined,
+                              i: undefined,
+                              n: undefined
+                            });
+                            _$runHydrationEvents();
+                            return _el$112;
+                          })()]
+                        });
+                      }
+                    }), _el$110, _co$19);
+                    _$effect(_p$ => {
+                      var _v$33 = sheet.title,
+                        _v$34 = status() === "loading" ? "true" : undefined,
+                        _v$35 = anyVisual() ? "true" : undefined;
+                      _v$33 !== _p$.e && _$setAttribute(_el$105, "aria-label", _p$.e = _v$33);
+                      _v$34 !== _p$.t && _$setAttribute(_el$105, "aria-busy", _p$.t = _v$34);
+                      _v$35 !== _p$.a && _$setAttribute(_el$105, "data-visual", _p$.a = _v$35);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined
+                    });
+                    return _el$105;
+                  })(), _$createComponent(Show, {
+                    get when() {
+                      return _$memo(() => !!props.footer)() && status() === "ready";
+                    },
+                    get children() {
+                      return _$createComponent(RichSelectFooterControl, {
+                        get footer() {
+                          return props.footer;
+                        },
+                        initialName: query,
+                        get messages() {
+                          return messages();
+                        },
+                        get done() {
+                          return sheet.done;
+                        },
+                        restoreFocus: restoreSheetFocus
+                      });
+                    }
+                  })];
+                }
+              })];
+            }
+          });
+        }
+      });
+    },
+    children: item => [_$createComponent(BottomSheet.Body, {
+      get children() {
+        var _el$124 = _$getNextElement(_tmpl$37);
+        _$insert(_el$124, _$createComponent(RichSelectPreview, {
+          get item() {
+            return item();
+          },
+          get render() {
+            return props.renderPreview;
+          }
+        }));
+        return _el$124;
+      }
+    }), _$createComponent(BottomSheet.Footer, {
+      get children() {
+        return _$createComponent(Button, {
+          variant: "primary",
+          size: "lg",
+          "class": "k2b-rich-select__choose",
+          get disabled() {
+            return Boolean(item().disabledReason);
+          },
+          onClick: () => choose(item()),
+          get children() {
+            return [_$getNextElement(_tmpl$38), _$memo(() => messages().choose)];
+          }
+        });
+      }
+    })]
+  })];
+}
+export default RichSelect;
+_$delegateEvents(["click", "input", "keydown", "focusout", "pointerdown", "pointermove"]);
+//# sourceMappingURL=RichSelect.js.map