@k2b/ui 0.30.0 → 0.32.0

package/dist/ssr/inputs/RichSelect.js

@@ -0,0 +1,950 @@
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-rich-select__visual\">", "</span>"],
+  _tmpl$2 = ["<span class=\"k2b-rich-select__visual\" aria-hidden=\"true\"><span class=\"k2b-rich-select__dot\" style=\"", "\"></span></span>"],
+  _tmpl$3 = ["<span class=\"k2b-rich-select__visual\" aria-hidden=\"true\"><i", "></i></span>"],
+  _tmpl$4 = ["<span class=\"k2b-rich-select__text\"><span", " class=\"k2b-rich-select__label\">", "</span>", "</span>"],
+  _tmpl$5 = ["<span", " class=\"k2b-rich-select__line\"", ">", "</span>"],
+  _tmpl$6 = "<span class=\"k2b-rich-select__placeholder-visual\"></span>",
+  _tmpl$7 = ["<div class=\"k2b-rich-select__placeholder\"", " aria-hidden=\"true\">", "<span class=\"k2b-rich-select__placeholder-lines\"><span style=\"", "\"></span><span style=\"", "\"></span></span></div>"],
+  _tmpl$8 = ["<div class=\"k2b-rich-select__state-text\">", "</div>"],
+  _tmpl$9 = ["<div class=\"k2b-rich-select__state\"", "><span class=\"k2b-rich-select__state-icon\" aria-hidden=\"true\"><i", "></i></span>", "</div>"],
+  _tmpl$0 = "<i class=\"ti ti-refresh\" aria-hidden=\"true\"></i>",
+  _tmpl$1 = ["<div", "><h3 class=\"k2b-rich-select__preview-title\">", "<span>", "</span></h3>", "</div>"],
+  _tmpl$10 = ["<ul class=\"k2b-rich-select__facts\">", "</ul>"],
+  _tmpl$11 = ["<li", "><i", " aria-hidden=\"true\"></i><span>", "</span></li>"],
+  _tmpl$12 = ["<div class=\"k2b-rich-select__footer\">", "</div>"],
+  _tmpl$13 = ["<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\">", "</span></button>"],
+  _tmpl$14 = ["<div class=\"k2b-rich-select__create\"><input class=\"k2b-rich-select__create-input\"", " autocomplete=\"off\">", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-rich-select__title\" aria-hidden=\"true\">", "</div>"],
+  _tmpl$16 = ["<div", " role=\"listbox\"", "></div>"],
+  _tmpl$17 = ["<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\"></div>"],
+  _tmpl$18 = ["<span class=\"k2b-sr-only\">", "</span>"],
+  _tmpl$19 = ["<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>", "</div>"],
+  _tmpl$20 = ["<div class=\"k2b-choice-control k2b-rich-select\"", ">", "", "<div popover=\"manual\" class=\"k2b-choice-popover k2b-rich-select__popover\" role=\"group\"", " style=\"", "\">", "", "</div></div>"],
+  _tmpl$21 = ["<span class=\"k2b-choice-trigger__value\"", ">", "</span>"],
+  _tmpl$22 = "<i class=\"ti ti-selector k2b-choice-trigger__chevron\" aria-hidden=\"true\"></i>",
+  _tmpl$23 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$24 = ["<input type=\"hidden\"", ">"],
+  _tmpl$25 = ["<div class=\"k2b-rich-select__no-results\">", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-rich-select__heading\" role=\"presentation\">", "</div>"],
+  _tmpl$27 = ["<div", " class=\"k2b-rich-select__option\" role=\"option\"", " aria-labelledby=\"", "\"", ">", "", "<i class=\"ti ti-check k2b-rich-select__check\" aria-hidden=\"true\"></i></div>"],
+  _tmpl$28 = "<span class=\"k2b-rich-select__visual\"></span>",
+  _tmpl$29 = ["<div class=\"k2b-rich-select__preview-placeholder\" aria-hidden=\"true\"><span></span><span style=\"", "\"></span><span style=\"", "\"></span><span style=\"", "\"></span></div>"],
+  _tmpl$30 = ["<div class=\"k2b-rich-select__preview\" data-choice-scroll>", "", "</div>"],
+  _tmpl$31 = ["<button type=\"button\" class=\"k2b-dialog__close\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$32 = ["<header class=\"k2b-rich-select__sheet-header\">", "<h2>", "</h2><button type=\"button\" class=\"k2b-dialog__close\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button></header>"],
+  _tmpl$33 = ["<div class=\"k2b-choice-search k2b-rich-select__search\"><i class=\"ti ti-search\" aria-hidden=\"true\"></i><input type=\"search\"", " autocomplete=\"off\"></div>"],
+  _tmpl$34 = ["<div class=\"k2b-rich-select__list\" role=\"list\"", ">", "", "</div>"],
+  _tmpl$35 = ["<button id=\"", "\" type=\"button\" class=\"k2b-rich-select__info\"", "><i class=\"ti ti-info-circle\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$36 = ["<div class=\"k2b-rich-select__sheet-row\" role=\"listitem\"", "><button", " type=\"button\" class=\"k2b-rich-select__option\"", " aria-labelledby=\"", "\"", ">", "", "<i class=\"ti ti-check k2b-rich-select__check\" aria-hidden=\"true\"></i></button>", "</div>"],
+  _tmpl$37 = ["<div class=\"k2b-rich-select__heading\">", "</div>"],
+  _tmpl$38 = ["<div class=\"k2b-rich-select__preview\" data-level=\"detail\">", "</div>"],
+  _tmpl$39 = "<i class=\"ti ti-check\" aria-hidden=\"true\"></i>";
+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 => _$ssr(_tmpl$, _$escape(visual()()))
+      }), _$createComponent(Match, {
+        get when() {
+          return props.item.color;
+        },
+        children: color => _$ssr(_tmpl$2, _$ssrStyleProperty("background-color:", _$escape(color(), true)))
+      }), _$createComponent(Match, {
+        get when() {
+          return props.item.icon;
+        },
+        children: icon => _$ssr(_tmpl$3, _$ssrAttribute("class", _$escape(icon(), true), false))
+      })];
+    }
+  });
+}
+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 _$ssr(_tmpl$4, _$ssrAttribute("id", _$escape(props.labelId, true), false), _$escape(props.item.label), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.item.disabledReason ?? props.item.description;
+    },
+    children: line => _$ssr(_tmpl$5, _$ssrAttribute("id", _$escape(props.lineId, true), false), _$ssrAttribute("data-reason", props.item.disabledReason ? "true" : _$escape(undefined, true), false), _$escape(line()))
+  })));
+}
+function RichSelectPlaceholders(props) {
+  return _$createComponent(For, {
+    get each() {
+      return Array.from({
+        length: PLACEHOLDER_ROWS
+      }, (_, index) => index);
+    },
+    children: index => _$ssr(_tmpl$7, _$ssrAttribute("data-visual", props.visual ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.visual;
+      },
+      get children() {
+        return _$ssr(_tmpl$6);
+      }
+    })), _$ssrStyleProperty("width:", `${_$escape([58, 46, 66, 50][index % 4], true)}%`), _$ssrStyleProperty("width:", `${_$escape([34, 28, 40, 30][index % 4], true)}%`))
+  });
+}
+function RichSelectState(props) {
+  let retryButton;
+  onCleanup(() => {
+    if (retryButton && document.activeElement === retryButton) queueMicrotask(() => props.restoreFocus?.());
+  });
+  return _$ssr(_tmpl$9, _$ssrAttribute("data-status", _$escape(props.status, true), false) + _$ssrAttribute("role", props.status === "error" ? "alert" : "status", false), _$ssrAttribute("class", props.status === "error" ? "ti ti-alert-triangle" : "ti ti-list-search", false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.status === "error";
+    },
+    get fallback() {
+      return _$ssr(_tmpl$8, _$escape(props.empty ?? props.messages.noOptions));
+    },
+    get children() {
+      return [_$ssr(_tmpl$8, _$escape(props.messages.couldNotLoad)), _$createComponent(Show, {
+        get when() {
+          return props.onRetry;
+        },
+        children: retry => _$createComponent(Button, {
+          variant: "secondary",
+          size: "sm",
+          onClick: () => retry()(),
+          get children() {
+            return [_$ssr(_tmpl$0), props.messages.retry];
+          }
+        })
+      })];
+    }
+  })));
+}
+function RichSelectPreview(props) {
+  return _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(props.id, true), false), _$escape(_$createComponent(RichSelectVisual, {
+    get item() {
+      return props.item;
+    }
+  })), _$escape(props.item.label), _$escape(props.render(props.item)));
+}
+
+/** Up to three short facts for a preview, each with an icon; warnings in the warning tone. */
+export function RichSelectFacts(props) {
+  return _$ssr(_tmpl$10, _$escape(_$createComponent(For, {
+    get each() {
+      return props.facts.slice(0, 3);
+    },
+    children: fact => _$ssr(_tmpl$11, _$ssrAttribute("data-tone", fact.tone === "warning" ? "warning" : _$escape(undefined, true), false), _$ssrAttribute("class", _$escape(fact.icon, true), false), _$escape(fact.text))
+  })));
+}
+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 _$ssr(_tmpl$12, _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!(creating() && "create" in props.footer))() ? props.footer.create : undefined;
+    },
+    get fallback() {
+      return _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(props.footer.icon ?? "ti ti-plus", true), false), _$escape(props.footer.label));
+    },
+    children: create_ => _$ssr(_tmpl$14, _$ssrAttribute("value", _$escape(name(), true), false) + _$ssrAttribute("placeholder", _$escape(create_().placeholder, true), false) + _$ssrAttribute("aria-label", _$escape(props.footer.label, true), false), _$escape(_$createComponent(Button, {
+      type: "button",
+      variant: "primary",
+      size: "sm",
+      get disabled() {
+        return !name().trim();
+      },
+      onClick: create,
+      get children() {
+        return props.messages.create;
+      }
+    })))
+  })));
+}
+
+/**
+ * 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() {
+      return _$ssr(_tmpl$20, _$ssrAttribute("data-appearance", _$escape(props.appearance ?? "field", true), false) + _$ssrAttribute("data-invalid", error() ? "true" : _$escape(undefined, true), false), _$ssrElement("button", _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        type: "button",
+        "class": "k2b-choice-trigger k2b-rich-select__trigger",
+        role: "combobox",
+        get ["aria-haspopup"]() {
+          return sheetOpen() || !popover.open() && phone() ? "dialog" : "listbox";
+        },
+        get ["aria-expanded"]() {
+          return expanded();
+        },
+        get ["aria-controls"]() {
+          return sheetOpen() ? sheetId() : popover.open() ? listboxId : undefined;
+        },
+        get ["aria-activedescendant"]() {
+          return 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;
+        }
+      }), _$escape(_$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 => _$ssr(_tmpl$23, _$ssrAttribute("class", _$escape(icon(), true), false))
+              });
+            },
+            children: item => _$createComponent(RichSelectVisual, {
+              get item() {
+                return item();
+              }
+            })
+          }), _$ssr(_tmpl$21, _$ssrAttribute("data-placeholder", selected() || props.triggerLabel ? _$escape(undefined, true) : "true", false), _$escape(triggerText())), _$ssr(_tmpl$22)];
+        },
+        children: render => render()(selected())
+      })), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.name;
+        },
+        children: name => _$ssr(_tmpl$24, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(value() ?? "", true), false))
+      })), _$ssrAttribute("aria-label", _$escape(title(), true), false) + _$ssrAttribute("data-preview", withPreview() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-status", _$escape(status(), true), false), _$ssrStyleProperty("width:", _$escape(props.size?.width, true)) + _$ssrStyleProperty(";height:", _$escape(height(), true)), _$escape(_$createComponent(Show, {
+        get when() {
+          return !withPreview();
+        },
+        get children() {
+          return _$ssr(_tmpl$15, _$escape(title()));
+        }
+      })), _$escape(_$createComponent(Switch, {
+        get children() {
+          return [_$createComponent(Match, {
+            get when() {
+              return status() === "error";
+            },
+            get children() {
+              return [_$ssr(_tmpl$16, _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(title(), true), false)), _$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 [_$ssr(_tmpl$16, _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(title(), true), false)), _$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() {
+              return _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+                get when() {
+                  return searchable();
+                },
+                get children() {
+                  return _$ssr(_tmpl$17, _$ssrAttribute("aria-expanded", _$escape(popover.open(), true), false), _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-label", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-controls", _$escape(listboxId, true), false) + _$ssrAttribute("aria-activedescendant", activeItem() ? _$escape(optionId(active()), true) : _$escape(undefined, true), false));
+                }
+              })), _$ssrAttribute("id", _$escape(listboxId, true), false), _$ssrAttribute("aria-label", _$escape(title(), true), false) + _$ssrAttribute("aria-busy", status() === "loading" ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-visual", anyVisual() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+                get when() {
+                  return status() === "loading";
+                },
+                get children() {
+                  return [_$ssr(_tmpl$18, _$escape(messages().loading)), _$createComponent(RichSelectPlaceholders, {
+                    get visual() {
+                      return anyVisual() || props.items.length === 0;
+                    }
+                  })];
+                }
+              })), _$escape(_$createComponent(Show, {
+                get when() {
+                  return status() === "ready";
+                },
+                get children() {
+                  return _$createComponent(For, {
+                    get each() {
+                      return rows();
+                    },
+                    get fallback() {
+                      return _$ssr(_tmpl$25, _$escape(messages().noResults));
+                    },
+                    children: row => row.kind === "heading" ? _$ssr(_tmpl$26, _$escape(row.label)) : // biome-ignore lint/a11y/useKeyWithClickEvents: the trigger or search field handles the keys through aria-activedescendant.
+                    _$ssr(_tmpl$27, _$ssrAttribute("id", _$escape(optionId(row.index), true), false), _$ssrAttribute("aria-selected", _$escape(row.item.value, true) === _$escape(value(), true), false) + _$ssrAttribute("aria-disabled", row.item.disabledReason ? "true" : _$escape(undefined, true), false), `${_$escape(optionId(row.index), true)}-label`, _$ssrAttribute("aria-describedby", _$escape([row.item.disabledReason || row.item.description ? `${optionId(row.index)}-line` : "", withPreview() && row.index === active() ? previewId : ""].filter(Boolean).join(" ") || undefined, true), false) + _$ssrAttribute("data-active", row.index === active() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+                      get when() {
+                        return anyVisual();
+                      },
+                      get children() {
+                        return _$createComponent(Show, {
+                          get when() {
+                            return hasVisual(row.item);
+                          },
+                          get fallback() {
+                            return _$ssr(_tmpl$28);
+                          },
+                          get children() {
+                            return _$createComponent(RichSelectVisual, {
+                              get item() {
+                                return row.item;
+                              }
+                            });
+                          }
+                        });
+                      }
+                    })), _$escape(_$createComponent(RichSelectRowText, {
+                      get item() {
+                        return row.item;
+                      },
+                      get labelId() {
+                        return `${optionId(row.index)}-label`;
+                      },
+                      get lineId() {
+                        return `${optionId(row.index)}-line`;
+                      }
+                    })))
+                  });
+                }
+              })), _$escape(_$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
+                  });
+                }
+              })), _$escape(_$createComponent(Show, {
+                get when() {
+                  return props.renderPreview;
+                },
+                children: render => _$ssr(_tmpl$30, _$escape(_$createComponent(Show, {
+                  get when() {
+                    return status() === "loading";
+                  },
+                  get children() {
+                    return _$ssr(_tmpl$29, _$ssrStyleProperty("width:", "86%"), _$ssrStyleProperty("width:", "72%"), _$ssrStyleProperty("width:", "80%"));
+                  }
+                })), _$escape(_$createComponent(Show, {
+                  get when() {
+                    return activeItem();
+                  },
+                  children: item => _$createComponent(RichSelectPreview, {
+                    id: previewId,
+                    get item() {
+                      return item();
+                    },
+                    get render() {
+                      return render();
+                    }
+                  })
+                })))
+              })));
+            }
+          })];
+        }
+      })));
+    }
+  });
+}
+
+/**
+ * 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 [_$ssr(_tmpl$32, _$escape(_$createComponent(Show, {
+    get when() {
+      return detail();
+    },
+    get children() {
+      return _$ssr(_tmpl$31, _$ssrAttribute("aria-label", _$escape(messages().back, true), false));
+    }
+  })), _$escape(detail()?.label ?? sheet.title), _$ssrAttribute("aria-label", _$escape(messages().close, true), false)), _$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() {
+                      return _$ssr(_tmpl$33, _$ssrAttribute("value", _$escape(query(), true), false) + _$ssrAttribute("placeholder", _$escape(props.searchPlaceholder ?? messages().search, true), false) + _$ssrAttribute("aria-label", _$escape(props.searchPlaceholder ?? messages().search, true), false));
+                    }
+                  }), _$ssr(_tmpl$34, _$ssrAttribute("aria-label", _$escape(sheet.title, true), false) + _$ssrAttribute("aria-busy", status() === "loading" ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-visual", anyVisual() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+                    get when() {
+                      return status() === "loading";
+                    },
+                    get children() {
+                      return [_$ssr(_tmpl$18, _$escape(messages().loading)), _$createComponent(RichSelectPlaceholders, {
+                        get visual() {
+                          return anyVisual() || props.items.length === 0;
+                        }
+                      })];
+                    }
+                  })), _$escape(_$createComponent(Show, {
+                    get when() {
+                      return status() === "ready";
+                    },
+                    get children() {
+                      return _$createComponent(For, {
+                        get each() {
+                          return visible();
+                        },
+                        get fallback() {
+                          return _$ssr(_tmpl$25, _$escape(messages().noResults));
+                        },
+                        children: (item, index) => [_$createComponent(Show, {
+                          get when() {
+                            return headingBefore(index());
+                          },
+                          children: label => _$ssr(_tmpl$37, _$escape(label()))
+                        }), _$ssr(_tmpl$36, _$ssrAttribute("data-info", props.renderPreview ? "true" : _$escape(undefined, true), false), _$ssrAttribute("id", _$escape(rowId(index()), true), false), _$ssrAttribute("aria-current", item.value === sheet.value() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-disabled", item.disabledReason ? "true" : _$escape(undefined, true), false), `${_$escape(rowId(index()), true)}-label`, _$ssrAttribute("aria-describedby", item.disabledReason || item.description ? `${_$escape(rowId(index()), true)}-line` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+                          get when() {
+                            return anyVisual();
+                          },
+                          get children() {
+                            return _$createComponent(Show, {
+                              get when() {
+                                return hasVisual(item);
+                              },
+                              get fallback() {
+                                return _$ssr(_tmpl$28);
+                              },
+                              get children() {
+                                return _$createComponent(RichSelectVisual, {
+                                  item: item
+                                });
+                              }
+                            });
+                          }
+                        })), _$escape(_$createComponent(RichSelectRowText, {
+                          item: item,
+                          get labelId() {
+                            return `${rowId(index())}-label`;
+                          },
+                          get lineId() {
+                            return `${rowId(index())}-line`;
+                          }
+                        })), _$escape(_$createComponent(Show, {
+                          get when() {
+                            return props.renderPreview;
+                          },
+                          get children() {
+                            return _$ssr(_tmpl$35, `${_$escape(rowId(index()), true)}-info`, _$ssrAttribute("aria-label", _$escape(messages().detailsFor({
+                              name: item.label
+                            }), true), false));
+                          }
+                        })))]
+                      });
+                    }
+                  }))), _$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() {
+        return _$ssr(_tmpl$38, _$escape(_$createComponent(RichSelectPreview, {
+          get item() {
+            return item();
+          },
+          get render() {
+            return props.renderPreview;
+          }
+        })));
+      }
+    }), _$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 [_$ssr(_tmpl$39), messages().choose];
+          }
+        });
+      }
+    })]
+  })];
+}
+export default RichSelect;
+//# sourceMappingURL=RichSelect.js.map