rei-kit 2.12.0 → 2.13.0

package/README.md

@@ -124,7 +124,7 @@ Each claim here is enforced by something that fails, not by a promise.
 
 ## Status
 
-**v2.12.0 — three consumers.**
+**v2.13.0 — three consumers.**
 
 |              |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

package/dist/{BaseSkeleton-DnqwogzV.js → BaseListbox-BnaHlmMN.js}

@@ -39,6 +39,43 @@ function useMediaQuery(query) {
 	return matches;
 }
 //#endregion
+//#region src/components/BaseSkeleton.vue
+var BaseSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseSkeleton",
+	props: {
+		width: { default: "100%" },
+		height: { default: "1rem" },
+		shape: { default: "block" }
+	},
+	setup(__props) {
+		/**
+		* One grey box standing in for content that has not arrived.
+		*
+		* `SkeletonList` is rows of these for a list; this is the primitive, for the
+		* shapes a list does not cover — an avatar, a heading, a chart.
+		*
+		* A height is a CSS length, never a class: `h-4` inside a component the app
+		* does not control would render at zero the day that utility is not in the
+		* app's stylesheet, which is exactly how every skeleton in one app came out
+		* invisible.
+		*
+		* It is hidden from assistive tech. The thing that is loading says so —
+		* through `aria-busy`, or a status message — and a screen reader reading
+		* "blank, blank, blank" helps nobody.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["rk-skeleton", `is-${__props.shape}`]),
+				style: normalizeStyle({
+					width: __props.shape === "circle" ? __props.height : __props.width,
+					height: __props.height
+				}),
+				"aria-hidden": "true"
+			}, null, 6);
+		};
+	}
+}), [["__scopeId", "data-v-37327de6"]]);
+//#endregion
 //#region src/components/BaseListbox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -166,43 +203,6 @@ var BaseListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 	}
 }), [["__scopeId", "data-v-7f8cd788"]]);
 //#endregion
-//#region src/components/BaseSkeleton.vue
-var BaseSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-	__name: "BaseSkeleton",
-	props: {
-		width: { default: "100%" },
-		height: { default: "1rem" },
-		shape: { default: "block" }
-	},
-	setup(__props) {
-		/**
-		* One grey box standing in for content that has not arrived.
-		*
-		* `SkeletonList` is rows of these for a list; this is the primitive, for the
-		* shapes a list does not cover — an avatar, a heading, a chart.
-		*
-		* A height is a CSS length, never a class: `h-4` inside a component the app
-		* does not control would render at zero the day that utility is not in the
-		* app's stylesheet, which is exactly how every skeleton in one app came out
-		* invisible.
-		*
-		* It is hidden from assistive tech. The thing that is loading says so —
-		* through `aria-busy`, or a status message — and a screen reader reading
-		* "blank, blank, blank" helps nobody.
-		*/
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", {
-				class: normalizeClass(["rk-skeleton", `is-${__props.shape}`]),
-				style: normalizeStyle({
-					width: __props.shape === "circle" ? __props.height : __props.width,
-					height: __props.height
-				}),
-				"aria-hidden": "true"
-			}, null, 6);
-		};
-	}
-}), [["__scopeId", "data-v-37327de6"]]);
-//#endregion
-export { BaseListbox_default as n, useMediaQuery as r, BaseSkeleton_default as t };
+export { BaseSkeleton_default as n, useMediaQuery as r, BaseListbox_default as t };
 
-//# sourceMappingURL=BaseSkeleton-DnqwogzV.js.map
+//# sourceMappingURL=BaseListbox-BnaHlmMN.js.map

package/dist/BaseListbox-BnaHlmMN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseListbox-BnaHlmMN.js","names":[],"sources":["../src/composables/use-media-query.ts","../src/components/BaseSkeleton.vue","../src/components/BaseSkeleton.vue","../src/components/BaseListbox.vue","../src/components/BaseListbox.vue"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref } from 'vue'\n\n/**\n * Whether a media query matches, kept up to date.\n *\n * Starts false and resolves on mount, which is deliberate: this is the one\n * place a component is tempted to branch on viewport during render, and doing\n * that under prerendering produces HTML built for a screen the server does not\n * have. Hydration then swaps it and the page jumps. False first, correct a\n * frame later, no jump — and a layout that reads badly at `false` is a layout\n * with a mobile-first bug worth knowing about.\n *\n * Guarded for the server for the same reason the rest of the kit is: this\n * package has to be importable in Node, and `matchMedia` does not exist there.\n *\n * @example\n * ```ts\n * const wide = useMediaQuery('(min-width: 64rem)')\n * ```\n */\nexport function useMediaQuery(query: string) {\n  const matches = ref(false)\n\n  let list: MediaQueryList | undefined\n\n  function update(event: MediaQueryList | MediaQueryListEvent) {\n    matches.value = event.matches\n  }\n\n  onMounted(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n\n    list = window.matchMedia(query)\n    update(list)\n    list.addEventListener('change', update)\n  })\n\n  onBeforeUnmount(() => {\n    list?.removeEventListener('change', update)\n  })\n\n  return matches\n}\n","<script setup lang=\"ts\">\n/**\n * One grey box standing in for content that has not arrived.\n *\n * `SkeletonList` is rows of these for a list; this is the primitive, for the\n * shapes a list does not cover — an avatar, a heading, a chart.\n *\n * A height is a CSS length, never a class: `h-4` inside a component the app\n * does not control would render at zero the day that utility is not in the\n * app's stylesheet, which is exactly how every skeleton in one app came out\n * invisible.\n *\n * It is hidden from assistive tech. The thing that is loading says so —\n * through `aria-busy`, or a status message — and a screen reader reading\n * \"blank, blank, blank\" helps nobody.\n */\nconst {\n  width = '100%',\n  height = '1rem',\n  shape = 'block',\n} = defineProps<{\n  /** Any CSS length: `12rem`, `60%`, `8ch`. */\n  width?: string | undefined\n  height?: string | undefined\n  /** `circle` makes a round one and squares the width to the height. */\n  shape?: 'block' | 'text' | 'circle' | undefined\n}>()\n</script>\n\n<template>\n  <span\n    class=\"rk-skeleton\"\n    :class=\"`is-${shape}`\"\n    :style=\"{ width: shape === 'circle' ? height : width, height }\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style scoped>\n.rk-skeleton {\n  display: block;\n  flex-shrink: 0;\n  background: var(--color-muted);\n  animation: rk-skeleton-pulse 1.6s ease-in-out infinite;\n}\n\n.rk-skeleton.is-block {\n  border-radius: var(--radius-cell);\n}\n\n/* A line of text, rounded like one and a little short of its box. */\n.rk-skeleton.is-text {\n  border-radius: 9999px;\n}\n\n.rk-skeleton.is-circle {\n  border-radius: 9999px;\n}\n\n@keyframes rk-skeleton-pulse {\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-skeleton {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * One grey box standing in for content that has not arrived.\n *\n * `SkeletonList` is rows of these for a list; this is the primitive, for the\n * shapes a list does not cover — an avatar, a heading, a chart.\n *\n * A height is a CSS length, never a class: `h-4` inside a component the app\n * does not control would render at zero the day that utility is not in the\n * app's stylesheet, which is exactly how every skeleton in one app came out\n * invisible.\n *\n * It is hidden from assistive tech. The thing that is loading says so —\n * through `aria-busy`, or a status message — and a screen reader reading\n * \"blank, blank, blank\" helps nobody.\n */\nconst {\n  width = '100%',\n  height = '1rem',\n  shape = 'block',\n} = defineProps<{\n  /** Any CSS length: `12rem`, `60%`, `8ch`. */\n  width?: string | undefined\n  height?: string | undefined\n  /** `circle` makes a round one and squares the width to the height. */\n  shape?: 'block' | 'text' | 'circle' | undefined\n}>()\n</script>\n\n<template>\n  <span\n    class=\"rk-skeleton\"\n    :class=\"`is-${shape}`\"\n    :style=\"{ width: shape === 'circle' ? height : width, height }\"\n    aria-hidden=\"true\"\n  />\n</template>\n\n<style scoped>\n.rk-skeleton {\n  display: block;\n  flex-shrink: 0;\n  background: var(--color-muted);\n  animation: rk-skeleton-pulse 1.6s ease-in-out infinite;\n}\n\n.rk-skeleton.is-block {\n  border-radius: var(--radius-cell);\n}\n\n/* A line of text, rounded like one and a little short of its box. */\n.rk-skeleton.is-text {\n  border-radius: 9999px;\n}\n\n.rk-skeleton.is-circle {\n  border-radius: 9999px;\n}\n\n@keyframes rk-skeleton-pulse {\n  50% {\n    opacity: 0.55;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .rk-skeleton {\n    animation: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { Check } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\nexport interface ListboxOption<V extends string> {\n  value: V\n  /** Already translated. */\n  label: string\n  /** A line under the label. */\n  description?: string | undefined\n  disabled?: boolean | undefined\n}\n\n/**\n * A list you choose from, open on the page.\n *\n * Between `BaseRadioGroup` and `BaseSelect`: a radio group is a handful of\n * options that are all visible and all equal; a select opens the platform's\n * own picker; this is a scrollable list of many, choosing one or several,\n * that stays on screen — a list of accounts, of tags, of files to act on.\n *\n * One Tab stop. The list itself takes focus and `aria-activedescendant`\n * says which option is current, so the arrows move without thirty stops in\n * the tab order. Typing a letter jumps to the next option that starts with\n * it, which is how every native list has always worked and the first thing\n * people try.\n *\n * In `single` mode the selection follows the arrows, because that is what a\n * listbox does; in `multiple` mode Space and Enter toggle the current one.\n */\nconst {\n  modelValue = undefined,\n  options,\n  label,\n  mode = 'single' as M,\n  height = '14rem',\n} = defineProps<{\n  /** The chosen option, or options, with `v-model`. */\n  modelValue?: Value | undefined\n  options: readonly ListboxOption<V>[]\n  /** The list's accessible name. */\n  label: string\n  /** One option, or any number of them. */\n  mode?: M | undefined\n  /** How tall before it scrolls. Any CSS length. */\n  height?: string | undefined\n}>()\n\n/* Multiple always hands back an array — toggling one produces a list, never\n   nothing — so only the single value can be undefined. */\ntype Value = M extends 'multiple' ? V[] : V | undefined\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n   `undefined` and promise never to emit it. See `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: Value] }>()\nconst model = useBoundValue<Value>(\n  () => modelValue as Value | undefined,\n  (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst active = ref(0)\n\nlet typed = ''\nlet typedAt = 0\n\nconst chosen = computed(() => {\n  const value = model.value\n  if (Array.isArray(value)) return new Set<V>(value)\n\n  return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction select(option: ListboxOption<V>) {\n  if (option.disabled) return\n\n  if (mode === 'multiple') {\n    const next = new Set(chosen.value)\n    if (next.has(option.value)) next.delete(option.value)\n    else next.add(option.value)\n\n    // In the order of the options, so the value reads the same however the\n    // reader got there.\n    model.value = options\n      .map((one) => one.value)\n      .filter((value) => next.has(value)) as typeof model.value\n    return\n  }\n\n  model.value = option.value as typeof model.value\n}\n\nfunction moveTo(index: number) {\n  if (options.length === 0) return\n\n  active.value = Math.max(0, Math.min(options.length - 1, index))\n  const option = options[active.value]\n\n  // Single: the selection follows the focus, which is what a listbox does.\n  if (mode === 'single' && option && !option.disabled) select(option)\n\n  document.getElementById(`${id}-${active.value}`)?.scrollIntoView?.({ block: 'nearest' })\n}\n\n/** The next option after the current one that starts with what was typed. */\nfunction jumpTo(letter: string) {\n  const now = Date.now()\n  typed = now - typedAt > 700 ? letter : typed + letter\n  typedAt = now\n\n  const from = typed.length === 1 ? active.value + 1 : active.value\n  const order = [...options.slice(from), ...options.slice(0, from)]\n  const found = order.find(\n    (option) => !option.disabled && option.label.toLowerCase().startsWith(typed.toLowerCase()),\n  )\n\n  if (found) moveTo(options.indexOf(found))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const moves: Record<string, number> = {\n    ArrowDown: active.value + 1,\n    ArrowUp: active.value - 1,\n    Home: 0,\n    End: options.length - 1,\n  }\n\n  if (event.key in moves) {\n    event.preventDefault()\n    moveTo(moves[event.key]!)\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    const option = options[active.value]\n    if (!option) return\n    event.preventDefault()\n    select(option)\n    return\n  }\n\n  // A single printable character: the typeahead every native list has.\n  if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n    jumpTo(event.key)\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"rk-listbox control\"\n    :style=\"{ maxHeight: height }\"\n    role=\"listbox\"\n    tabindex=\"0\"\n    :aria-label=\"label\"\n    :aria-multiselectable=\"mode === 'multiple' ? true : undefined\"\n    :aria-activedescendant=\"options.length ? `${id}-${active}` : undefined\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- `aria-disabled` is omitted rather than `false`: an option that can be\n         chosen says nothing about being disabled. -->\n    <div\n      v-for=\"(option, index) in options\"\n      :id=\"`${id}-${index}`\"\n      :key=\"option.value\"\n      class=\"rk-listbox-option\"\n      :class=\"{\n        'is-active': index === active,\n        'is-chosen': chosen.has(option.value),\n        'is-disabled': option.disabled,\n      }\"\n      role=\"option\"\n      :aria-selected=\"chosen.has(option.value)\"\n      :aria-disabled=\"option.disabled || undefined\"\n      @click=\"((active = index), select(option))\"\n    >\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"rk-listbox-label\">{{ option.label }}</span>\n        <span v-if=\"option.description\" class=\"rk-listbox-description\">{{\n          option.description\n        }}</span>\n      </span>\n\n      <Check v-if=\"chosen.has(option.value)\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <p v-if=\"options.length === 0\" class=\"rk-listbox-empty\" />\n  </div>\n</template>\n\n<style scoped>\n.rk-listbox {\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  padding: 0.25rem;\n}\n\n.rk-listbox:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 1px;\n}\n\n.rk-listbox-option {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.625rem;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.625rem;\n  font-size: 0.875rem;\n  color: var(--color-ink);\n}\n\n/* The current row shows only while the list has focus. A list that is not\n   being used has no \"current\" row, and a highlight left behind on one reads\n   as a selection — which is exactly what it is not. */\n.rk-listbox:focus-within .rk-listbox-option.is-active {\n  background: var(--color-muted);\n}\n\n.rk-listbox-option.is-chosen {\n  color: var(--color-primary);\n  font-weight: 500;\n}\n\n/* Chosen is the tick and the tint, and it holds whether the list is in use\n   or not: the current option and the chosen one are different things. */\n.rk-listbox-option.is-chosen {\n  background: color-mix(in oklab, var(--color-primary) 10%, transparent);\n}\n\n.rk-listbox:focus-within .rk-listbox-option.is-chosen.is-active {\n  background: color-mix(in oklab, var(--color-primary) 20%, transparent);\n}\n\n.rk-listbox-option.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.rk-listbox-label {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rk-listbox-description {\n  display: block;\n  font-size: 0.75rem;\n  color: var(--color-ink-soft);\n}\n\n.rk-listbox-empty {\n  padding: 1rem;\n}\n</style>\n","<script setup lang=\"ts\" generic=\"V extends string, M extends 'single' | 'multiple' = 'single'\">\nimport { Check } from 'lucide-vue-next'\nimport { computed, ref, useId } from 'vue'\n\nimport { useBoundValue } from '../composables/use-bound-value'\n\nexport interface ListboxOption<V extends string> {\n  value: V\n  /** Already translated. */\n  label: string\n  /** A line under the label. */\n  description?: string | undefined\n  disabled?: boolean | undefined\n}\n\n/**\n * A list you choose from, open on the page.\n *\n * Between `BaseRadioGroup` and `BaseSelect`: a radio group is a handful of\n * options that are all visible and all equal; a select opens the platform's\n * own picker; this is a scrollable list of many, choosing one or several,\n * that stays on screen — a list of accounts, of tags, of files to act on.\n *\n * One Tab stop. The list itself takes focus and `aria-activedescendant`\n * says which option is current, so the arrows move without thirty stops in\n * the tab order. Typing a letter jumps to the next option that starts with\n * it, which is how every native list has always worked and the first thing\n * people try.\n *\n * In `single` mode the selection follows the arrows, because that is what a\n * listbox does; in `multiple` mode Space and Enter toggle the current one.\n */\nconst {\n  modelValue = undefined,\n  options,\n  label,\n  mode = 'single' as M,\n  height = '14rem',\n} = defineProps<{\n  /** The chosen option, or options, with `v-model`. */\n  modelValue?: Value | undefined\n  options: readonly ListboxOption<V>[]\n  /** The list's accessible name. */\n  label: string\n  /** One option, or any number of them. */\n  mode?: M | undefined\n  /** How tall before it scrolls. Any CSS length. */\n  height?: string | undefined\n}>()\n\n/* Multiple always hands back an array — toggling one produces a list, never\n   nothing — so only the single value can be undefined. */\ntype Value = M extends 'multiple' ? V[] : V | undefined\n\n/* Declared by hand rather than with defineModel, which cannot both accept\n   `undefined` and promise never to emit it. See `use-bound-value.ts`. */\nconst emit = defineEmits<{ 'update:modelValue': [value: Value] }>()\nconst model = useBoundValue<Value>(\n  () => modelValue as Value | undefined,\n  (value) => emit('update:modelValue', value),\n)\n\nconst id = useId()\nconst active = ref(0)\n\nlet typed = ''\nlet typedAt = 0\n\nconst chosen = computed(() => {\n  const value = model.value\n  if (Array.isArray(value)) return new Set<V>(value)\n\n  return new Set<V>(value === undefined ? [] : [value as V])\n})\n\nfunction select(option: ListboxOption<V>) {\n  if (option.disabled) return\n\n  if (mode === 'multiple') {\n    const next = new Set(chosen.value)\n    if (next.has(option.value)) next.delete(option.value)\n    else next.add(option.value)\n\n    // In the order of the options, so the value reads the same however the\n    // reader got there.\n    model.value = options\n      .map((one) => one.value)\n      .filter((value) => next.has(value)) as typeof model.value\n    return\n  }\n\n  model.value = option.value as typeof model.value\n}\n\nfunction moveTo(index: number) {\n  if (options.length === 0) return\n\n  active.value = Math.max(0, Math.min(options.length - 1, index))\n  const option = options[active.value]\n\n  // Single: the selection follows the focus, which is what a listbox does.\n  if (mode === 'single' && option && !option.disabled) select(option)\n\n  document.getElementById(`${id}-${active.value}`)?.scrollIntoView?.({ block: 'nearest' })\n}\n\n/** The next option after the current one that starts with what was typed. */\nfunction jumpTo(letter: string) {\n  const now = Date.now()\n  typed = now - typedAt > 700 ? letter : typed + letter\n  typedAt = now\n\n  const from = typed.length === 1 ? active.value + 1 : active.value\n  const order = [...options.slice(from), ...options.slice(0, from)]\n  const found = order.find(\n    (option) => !option.disabled && option.label.toLowerCase().startsWith(typed.toLowerCase()),\n  )\n\n  if (found) moveTo(options.indexOf(found))\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const moves: Record<string, number> = {\n    ArrowDown: active.value + 1,\n    ArrowUp: active.value - 1,\n    Home: 0,\n    End: options.length - 1,\n  }\n\n  if (event.key in moves) {\n    event.preventDefault()\n    moveTo(moves[event.key]!)\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    const option = options[active.value]\n    if (!option) return\n    event.preventDefault()\n    select(option)\n    return\n  }\n\n  // A single printable character: the typeahead every native list has.\n  if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {\n    jumpTo(event.key)\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"rk-listbox control\"\n    :style=\"{ maxHeight: height }\"\n    role=\"listbox\"\n    tabindex=\"0\"\n    :aria-label=\"label\"\n    :aria-multiselectable=\"mode === 'multiple' ? true : undefined\"\n    :aria-activedescendant=\"options.length ? `${id}-${active}` : undefined\"\n    @keydown=\"onKeydown\"\n  >\n    <!-- `aria-disabled` is omitted rather than `false`: an option that can be\n         chosen says nothing about being disabled. -->\n    <div\n      v-for=\"(option, index) in options\"\n      :id=\"`${id}-${index}`\"\n      :key=\"option.value\"\n      class=\"rk-listbox-option\"\n      :class=\"{\n        'is-active': index === active,\n        'is-chosen': chosen.has(option.value),\n        'is-disabled': option.disabled,\n      }\"\n      role=\"option\"\n      :aria-selected=\"chosen.has(option.value)\"\n      :aria-disabled=\"option.disabled || undefined\"\n      @click=\"((active = index), select(option))\"\n    >\n      <span class=\"min-w-0 flex-1\">\n        <span class=\"rk-listbox-label\">{{ option.label }}</span>\n        <span v-if=\"option.description\" class=\"rk-listbox-description\">{{\n          option.description\n        }}</span>\n      </span>\n\n      <Check v-if=\"chosen.has(option.value)\" class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <p v-if=\"options.length === 0\" class=\"rk-listbox-empty\" />\n  </div>\n</template>\n\n<style scoped>\n.rk-listbox {\n  overflow-y: auto;\n  border-radius: var(--radius-card);\n  padding: 0.25rem;\n}\n\n.rk-listbox:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 1px;\n}\n\n.rk-listbox-option {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  gap: 0.625rem;\n  border-radius: var(--radius-cell);\n  padding: 0.5rem 0.625rem;\n  font-size: 0.875rem;\n  color: var(--color-ink);\n}\n\n/* The current row shows only while the list has focus. A list that is not\n   being used has no \"current\" row, and a highlight left behind on one reads\n   as a selection — which is exactly what it is not. */\n.rk-listbox:focus-within .rk-listbox-option.is-active {\n  background: var(--color-muted);\n}\n\n.rk-listbox-option.is-chosen {\n  color: var(--color-primary);\n  font-weight: 500;\n}\n\n/* Chosen is the tick and the tint, and it holds whether the list is in use\n   or not: the current option and the chosen one are different things. */\n.rk-listbox-option.is-chosen {\n  background: color-mix(in oklab, var(--color-primary) 10%, transparent);\n}\n\n.rk-listbox:focus-within .rk-listbox-option.is-chosen.is-active {\n  background: color-mix(in oklab, var(--color-primary) 20%, transparent);\n}\n\n.rk-listbox-option.is-disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n}\n\n.rk-listbox-label {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.rk-listbox-description {\n  display: block;\n  font-size: 0.75rem;\n  color: var(--color-ink-soft);\n}\n\n.rk-listbox-empty {\n  padding: 1rem;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,cAAc,OAAe;CAC3C,MAAM,UAAU,IAAI,KAAK;CAEzB,IAAI;CAEJ,SAAS,OAAO,OAA6C;EAC3D,QAAQ,QAAQ,MAAM;CACxB;CAEA,gBAAgB;EACd,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAAY;EAE9E,OAAO,OAAO,WAAW,KAAK;EAC9B,OAAO,IAAI;EACX,KAAK,iBAAiB,UAAU,MAAM;CACxC,CAAC;CAED,sBAAsB;EACpB,MAAM,oBAAoB,UAAU,MAAM;CAC5C,CAAC;CAED,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;GCZE,OAAA,UAAA,GAAA,mBAKE,QAAA;IAJA,OAAK,eAAA,CAAC,eAAa,MACL,QAAA,OAAK,CAAA;IAClB,OAAK,eAAA;KAAA,OAAW,QAAA,UAAK,WAAgB,QAAA,SAAS,QAAA;KAAK,QAAE,QAAA;IAAM,CAAA;IAC5D,eAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEsBhB,MAAM,OAAO;EACb,MAAM,QAAQ,oBACN,QAAA,aACL,UAAU,KAAK,qBAAqB,KAAK,CAC5C;EAEA,MAAM,KAAK,MAAM;EACjB,MAAM,SAAS,IAAI,CAAC;EAEpB,IAAI,QAAQ;EACZ,IAAI,UAAU;EAEd,MAAM,SAAS,eAAe;GAC5B,MAAM,QAAQ,MAAM;GACpB,IAAI,MAAM,QAAQ,KAAK,GAAG,OAAO,IAAI,IAAO,KAAK;GAEjD,OAAO,IAAI,IAAO,UAAU,KAAA,IAAY,CAAC,IAAI,CAAC,KAAU,CAAC;EAC3D,CAAC;EAED,SAAS,OAAO,QAA0B;GACxC,IAAI,OAAO,UAAU;GAErB,IAAI,QAAA,SAAS,YAAY;IACvB,MAAM,OAAO,IAAI,IAAI,OAAO,KAAK;IACjC,IAAI,KAAK,IAAI,OAAO,KAAK,GAAG,KAAK,OAAO,OAAO,KAAK;SAC/C,KAAK,IAAI,OAAO,KAAK;IAI1B,MAAM,QAAQ,QAAA,QACX,KAAK,QAAQ,IAAI,KAAK,CAAA,CACtB,QAAQ,UAAU,KAAK,IAAI,KAAK,CAAC;IACpC;GACF;GAEA,MAAM,QAAQ,OAAO;EACvB;EAEA,SAAS,OAAO,OAAe;GAC7B,IAAI,QAAA,QAAQ,WAAW,GAAG;GAE1B,OAAO,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,QAAA,QAAQ,SAAS,GAAG,KAAK,CAAC;GAC9D,MAAM,SAAS,QAAA,QAAQ,OAAO;GAG9B,IAAI,QAAA,SAAS,YAAY,UAAU,CAAC,OAAO,UAAU,OAAO,MAAM;GAElE,SAAS,eAAe,GAAG,GAAG,GAAG,OAAO,OAAO,CAAC,EAAE,iBAAiB,EAAE,OAAO,UAAU,CAAC;EACzF;;EAGA,SAAS,OAAO,QAAgB;GAC9B,MAAM,MAAM,KAAK,IAAI;GACrB,QAAQ,MAAM,UAAU,MAAM,SAAS,QAAQ;GAC/C,UAAU;GAEV,MAAM,OAAO,MAAM,WAAW,IAAI,OAAO,QAAQ,IAAI,OAAO;GAE5D,MAAM,QAAQ,CADC,GAAG,QAAA,QAAQ,MAAM,IAAI,GAAG,GAAG,QAAA,QAAQ,MAAM,GAAG,IAAI,CACjD,CAAA,CAAM,MACjB,WAAW,CAAC,OAAO,YAAY,OAAO,MAAM,YAAY,CAAC,CAAC,WAAW,MAAM,YAAY,CAAC,CAC3F;GAEA,IAAI,OAAO,OAAO,QAAA,QAAQ,QAAQ,KAAK,CAAC;EAC1C;EAEA,SAAS,UAAU,OAAsB;GACvC,MAAM,QAAgC;IACpC,WAAW,OAAO,QAAQ;IAC1B,SAAS,OAAO,QAAQ;IACxB,MAAM;IACN,KAAK,QAAA,QAAQ,SAAS;GACxB;GAEA,IAAI,MAAM,OAAO,OAAO;IACtB,MAAM,eAAe;IACrB,OAAO,MAAM,MAAM,IAAK;IACxB;GACF;GAEA,IAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;IAC9C,MAAM,SAAS,QAAA,QAAQ,OAAO;IAC9B,IAAI,CAAC,QAAQ;IACb,MAAM,eAAe;IACrB,OAAO,MAAM;IACb;GACF;GAGA,IAAI,MAAM,IAAI,WAAW,KAAK,CAAC,MAAM,WAAW,CAAC,MAAM,WAAW,CAAC,MAAM,QACvE,OAAO,MAAM,GAAG;EAEpB;;GAIE,OAAA,UAAA,GAAA,mBAsCM,OAAA;IArCJ,OAAM;IACL,OAAK,eAAA,EAAA,WAAe,QAAA,OAAM,CAAA;IAC3B,MAAK;IACL,UAAS;IACR,cAAY,QAAA;IACZ,wBAAsB,QAAA,SAAI,aAAA,OAAyB,KAAA;IACnD,yBAAuB,QAAA,QAAQ,SAAM,GAAM,MAAA,EAAA,EAAE,GAAI,OAAA,UAAW,KAAA;IACnD;GAIV,GAAA,EAAA,UAAA,IAAA,GAAA,mBAuBM,UAAA,MAAA,WAtBsB,QAAA,UAAlB,QAAQ,UAAK;IADvB,OAAA,UAAA,GAAA,mBAuBM,OAAA;KArBH,IAAE,GAAK,MAAA,EAAA,EAAE,GAAI;KACb,KAAK,OAAO;KACb,OAAK,eAAA,CAAC,qBAAmB;MACM,aAAA,UAAU,OAAA;MAA6B,aAAA,OAAA,MAAO,IAAI,OAAO,KAAK;MAA0B,eAAA,OAAO;;KAK9H,MAAK;KACJ,iBAAe,OAAA,MAAO,IAAI,OAAO,KAAK;KACtC,iBAAe,OAAO,YAAY,KAAA;KAClC,UAAK,YAAI,OAAA,QAAS,OAAQ,OAAO,MAAM;IAExC,GAAA,CAAA,mBAKO,QALP,YAKO,CAJL,mBAAwD,QAAxD,YAAwD,gBAAtB,OAAO,KAAK,GAAA,CAAA,GAClC,OAAO,eAAnB,UAAA,GAAA,mBAES,QAFT,YAES,gBADP,OAAO,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAIT,OAAA,MAAO,IAAI,OAAO,KAAK,KAApC,UAAA,GAAA,YAAoF,MAAA,KAAA,GAAA;;KAA7C,OAAM;KAAkB,eAAY;;GAGpE,CAAA,GAAA,GAAA,IAAA,QAAA,QAAQ,WAAM,KAAvB,UAAA,GAAA,mBAA0D,KAA1D,UAA0D,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/BaseCombobox.vue.d.ts

@@ -3,8 +3,10 @@ export interface ComboboxOption<V extends string> {
     /** Already translated. */
     label: string;
 }
-declare const __VLS_export: <V extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<({
+declare const __VLS_export: <V extends string, M extends "single" | "multiple" = "single">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
+        /** The chosen value, or values in `multiple` mode, with `v-model`. */
+        modelValue?: (M extends "multiple" ? V[] : "" | V) | undefined;
         label: string;
         options: readonly ComboboxOption<V>[];
         placeholder?: string | undefined;
@@ -13,17 +15,32 @@ declare const __VLS_export: <V extends string>(__VLS_props: NonNullable<Awaited<
         disabled?: boolean | undefined;
         /** Shown when nothing matches. Already translated. */
         emptyLabel: string;
+        /** `multiple` keeps the chosen ones as chips in the field. */
+        mode?: M | undefined;
+        /** Names a chip's remove button. Without it, chips carry no button. */
+        removeLabel?: ((label: string) => string) | undefined;
+        /** Marks the list busy while an answer is on its way. */
+        loading?: boolean | undefined;
+        /** Read while `loading`. Already translated. */
+        loadingLabel?: string | undefined;
+        /** `none` when the server has already narrowed the list. */
+        filter?: "local" | "none" | undefined;
+        /** How long typing settles before `search`, in milliseconds. */
+        debounce?: number | undefined;
+        /** Past this many options, only the rows near the viewport are rendered. */
+        virtualizeAfter?: number | undefined;
+        /** A row's height in pixels; the virtual window is measured in these. */
+        rowHeight?: number | undefined;
     } & {
-        modelValue?: V | "";
-    }) & {
-        "onUpdate:modelValue"?: (value: "" | V) => any;
+        onSearch?: (query: string) => any;
+        "onUpdate:modelValue"?: (value: M extends "multiple" ? V[] : "" | V) => any;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (event: "update:modelValue", value: "" | V) => void;
+    emit: ((evt: "search", query: string) => void) & ((evt: "update:modelValue", value: M extends "multiple" ? V[] : "" | V) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/index.js

@@ -3,7 +3,7 @@ import { n as formatNumber, r as setFormatLocale, t as formatDate } from "./form
 import { a as SHEET_ROOT_ID, i as useVisualViewport, o as ensureSheetRoot, r as useBoundValue, t as BaseSheet_default } from "./BaseSheet-B7401rS7.js";
 import { a as BaseAlert_default, c as applyTheme, d as setThemeStorageKey, f as useTheme, h as toRedirectPath, i as FormField_default, l as isThemePreference, m as safeRedirect, n as BaseCheckbox_default, o as useToast, p as tapFeedback, r as BaseInput_default, s as useOnline, t as GoogleButton_default, u as readStoredTheme } from "./GoogleButton-mCqGbrXm.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
-import { n as BaseListbox_default, r as useMediaQuery, t as BaseSkeleton_default } from "./BaseSkeleton-DnqwogzV.js";
+import { n as BaseSkeleton_default, r as useMediaQuery, t as BaseListbox_default } from "./BaseListbox-BnaHlmMN.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { t as SettingsRow_default } from "./SettingsRow-Ct1p2C9Q.js";
@@ -621,7 +621,11 @@ var BaseCard_default = /* @__PURE__ */ defineComponent({
 //#endregion
 //#region src/components/BaseCombobox.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$38 = ["for"];
-var _hoisted_2$32 = { class: "rk-combo-field" };
+var _hoisted_2$32 = [
+	"aria-label",
+	"disabled",
+	"onClick"
+];
 var _hoisted_3$21 = [
 	"id",
 	"placeholder",
@@ -632,22 +636,38 @@ var _hoisted_3$21 = [
 	"aria-describedby"
 ];
 var _hoisted_4$16 = ["disabled"];
-var _hoisted_5$9 = ["aria-label"];
+var _hoisted_5$9 = [
+	"aria-label",
+	"aria-multiselectable",
+	"aria-busy"
+];
 var _hoisted_6$5 = [
 	"id",
 	"aria-selected",
+	"aria-setsize",
+	"aria-posinset",
 	"onPointerdown",
 	"onPointermove"
 ];
 var _hoisted_7$4 = {
-	key: 0,
+	key: 2,
+	class: "rk-combo-status"
+};
+var _hoisted_8$3 = { key: 0 };
+var _hoisted_9$3 = {
+	class: "rk-combo-status-rows",
+	"aria-hidden": "true"
+};
+var _hoisted_10$3 = {
+	key: 3,
 	class: "rk-combo-empty"
 };
 //#endregion
 //#region src/components/BaseCombobox.vue
 var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "BaseCombobox",
-	props: /*@__PURE__*/ mergeModels({
+	props: {
+		modelValue: { default: () => void 0 },
 		label: {},
 		options: {},
 		placeholder: { default: "" },
@@ -657,14 +677,38 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: Boolean,
 			default: false
 		},
-		emptyLabel: {}
-	}, {
-		"modelValue": { default: "" },
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const model = useModel(__props, "modelValue");
+		emptyLabel: {},
+		mode: { default: "single" },
+		removeLabel: {
+			type: Function,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingLabel: { default: "" },
+		filter: { default: "local" },
+		debounce: { default: 200 },
+		virtualizeAfter: { default: 150 },
+		rowHeight: { default: 36 }
+	},
+	emits: ["update:modelValue", "search"],
+	setup(__props, { emit: __emit }) {
+		/** Multiple always hands back an array; a single choice is the value or ''. */
+		const emit = __emit;
+		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
+		const multiple = computed(() => __props.mode === "multiple");
+		/** The chosen values, however many there are, as a plain array. */
+		const chosen = computed(() => {
+			const value = model.value;
+			if (Array.isArray(value)) return value;
+			return value === void 0 || value === "" ? [] : [value];
+		});
+		const chosenOptions = computed(() => chosen.value.map((value) => __props.options.find((option) => option.value === value) ?? {
+			value,
+			label: value
+		}));
 		const id = useId();
 		const listId = `${id}-list`;
 		const hintId = `${id}-hint`;
@@ -675,31 +719,79 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const highlighted = ref(0);
 		const root = ref(null);
 		const list = ref(null);
-		const selected = computed(() => __props.options.find((option) => option.value === model.value));
-		/** What the input shows: the query while typing, the chosen label otherwise. */
+		const single = computed(() => multiple.value ? void 0 : chosenOptions.value[0]);
+		/**
+		* What the input shows.
+		*
+		* In multiple mode it is always the query: the answers are the chips beside
+		* it, and writing one of them into the field would mean deleting it to search
+		* for the next.
+		*/
 		const text = computed({
-			get: () => open.value ? query.value : selected.value?.label ?? "",
+			get: () => multiple.value || open.value ? query.value : single.value?.label ?? "",
 			set: (value) => {
 				query.value = value;
 				open.value = true;
 				highlighted.value = 0;
+				announce(value);
 			}
 		});
 		const matches = computed(() => {
 			const needle = query.value.trim().toLowerCase();
-			if (!open.value || needle === "") return __props.options;
+			if (__props.filter === "none" || !open.value || needle === "") return __props.options;
 			return __props.options.filter((option) => option.label.toLowerCase().includes(needle));
 		});
 		const describedBy = computed(() => {
 			if (__props.error) return errorId;
 			if (__props.hint) return hintId;
 		});
+		let timer;
+		function announce(value) {
+			if (timer) clearTimeout(timer);
+			timer = setTimeout(() => emit("search", value.trim()), __props.debounce);
+		}
+		const virtual = computed(() => matches.value.length > __props.virtualizeAfter);
+		const scrollTop = ref(0);
+		/** How tall the list box is; read once it is open, never guessed. */
+		const viewport = ref(224);
+		const window_ = computed(() => {
+			if (!virtual.value) return {
+				start: 0,
+				end: matches.value.length
+			};
+			const first = Math.max(0, Math.floor(scrollTop.value / __props.rowHeight) - 3);
+			const count = Math.ceil(viewport.value / __props.rowHeight) + 6;
+			return {
+				start: first,
+				end: Math.min(matches.value.length, first + count)
+			};
+		});
+		const rows = computed(() => matches.value.slice(window_.value.start, window_.value.end).map((option, index) => ({
+			option,
+			/** The row's place in the whole list, not in the window. */
+			index: window_.value.start + index
+		})));
+		const padTop = computed(() => virtual.value ? window_.value.start * __props.rowHeight : 0);
+		const padBottom = computed(() => virtual.value ? (matches.value.length - window_.value.end) * __props.rowHeight : 0);
+		function onScroll(event) {
+			scrollTop.value = event.target.scrollTop;
+		}
 		function choose(option) {
 			if (!option) return;
+			if (multiple.value) {
+				const next = chosen.value.includes(option.value) ? chosen.value.filter((one) => one !== option.value) : [...chosen.value, option.value];
+				model.value = next;
+				query.value = "";
+				return;
+			}
 			model.value = option.value;
 			query.value = "";
 			open.value = false;
 		}
+		function remove(value) {
+			if (!multiple.value) return;
+			model.value = chosen.value.filter((one) => one !== value);
+		}
 		function move(delta) {
 			const count = matches.value.length;
 			if (count === 0) return;
@@ -709,6 +801,13 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		}
 		async function scrollHighlightIntoView() {
 			await nextTick();
+			if (virtual.value && list.value) {
+				const top = highlighted.value * __props.rowHeight;
+				const bottom = top + __props.rowHeight;
+				if (top < list.value.scrollTop) list.value.scrollTop = top;
+				else if (bottom > list.value.scrollTop + viewport.value) list.value.scrollTop = bottom - viewport.value;
+				return;
+			}
 			(list.value?.children[highlighted.value])?.scrollIntoView?.({ block: "nearest" });
 		}
 		function onKeydown(event) {
@@ -726,12 +825,18 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					event.preventDefault();
 					choose(matches.value[highlighted.value]);
 					break;
+				case "Backspace":
+					if (multiple.value && query.value === "" && chosen.value.length > 0) {
+						event.preventDefault();
+						remove(chosen.value[chosen.value.length - 1]);
+					}
+					break;
 				case "Escape":
 					event.preventDefault();
 					if (open.value) {
 						open.value = false;
 						query.value = "";
-					} else model.value = "";
+					} else if (!multiple.value) model.value = "";
 					break;
 				case "Tab": open.value = false;
 			}
@@ -742,12 +847,19 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				query.value = "";
 			}
 		}
-		watch(open, (isOpen) => {
+		watch(open, async (isOpen) => {
 			if (typeof document === "undefined") return;
-			if (isOpen) document.addEventListener("pointerdown", onDocumentPointer);
-			else document.removeEventListener("pointerdown", onDocumentPointer);
+			if (isOpen) {
+				document.addEventListener("pointerdown", onDocumentPointer);
+				await nextTick();
+				if (list.value) viewport.value = list.value.clientHeight || viewport.value;
+			} else document.removeEventListener("pointerdown", onDocumentPointer);
 		}, { immediate: true });
+		watch(matches, () => {
+			if (highlighted.value >= matches.value.length) highlighted.value = 0;
+		});
 		onBeforeUnmount(() => {
+			if (timer) clearTimeout(timer);
 			if (typeof document !== "undefined") document.removeEventListener("pointerdown", onDocumentPointer);
 		});
 		return (_ctx, _cache) => {
@@ -760,52 +872,93 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					for: unref(id),
 					class: "rk-combo-label"
 				}, toDisplayString(__props.label), 9, _hoisted_1$38),
-				createElementVNode("div", _hoisted_2$32, [withDirectives(createElementVNode("input", {
-					id: unref(id),
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
-					type: "text",
-					role: "combobox",
-					class: "rk-combo-input control",
-					autocomplete: "off",
-					placeholder: __props.placeholder,
-					disabled: __props.disabled,
-					"aria-expanded": open.value,
-					"aria-controls": listId,
-					"aria-autocomplete": "list",
-					"aria-activedescendant": open.value ? optionId(highlighted.value) : void 0,
-					"aria-invalid": Boolean(__props.error),
-					"aria-describedby": describedBy.value,
-					onKeydown,
-					onFocus: _cache[1] || (_cache[1] = ($event) => open.value = true)
-				}, null, 40, _hoisted_3$21), [[vModelText, text.value]]), createElementVNode("button", {
-					type: "button",
-					class: "rk-combo-toggle",
-					tabindex: "-1",
-					"aria-hidden": "true",
-					disabled: __props.disabled,
-					onClick: _cache[2] || (_cache[2] = ($event) => open.value = !open.value)
-				}, " ▾ ", 8, _hoisted_4$16)]),
+				createElementVNode("div", { class: normalizeClass(["rk-combo-field", multiple.value ? "is-multiple control" : ""]) }, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(multiple.value ? chosenOptions.value : [], (option) => {
+						return openBlock(), createElementBlock("span", {
+							key: option.value,
+							class: "rk-combo-chip"
+						}, [createElementVNode("span", null, toDisplayString(option.label), 1), __props.removeLabel ? (openBlock(), createElementBlock("button", {
+							key: 0,
+							type: "button",
+							class: "rk-combo-chip-x focus-ring",
+							"aria-label": __props.removeLabel(option.label),
+							disabled: __props.disabled,
+							onClick: ($event) => remove(option.value)
+						}, " × ", 8, _hoisted_2$32)) : createCommentVNode("", true)]);
+					}), 128)),
+					withDirectives(createElementVNode("input", {
+						id: unref(id),
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => text.value = $event),
+						type: "text",
+						role: "combobox",
+						class: normalizeClass(["rk-combo-input", { control: !multiple.value }]),
+						autocomplete: "off",
+						placeholder: __props.placeholder,
+						disabled: __props.disabled,
+						"aria-expanded": open.value,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": open.value ? optionId(highlighted.value) : void 0,
+						"aria-invalid": Boolean(__props.error),
+						"aria-describedby": describedBy.value,
+						onKeydown,
+						onFocus: _cache[1] || (_cache[1] = ($event) => open.value = true)
+					}, null, 42, _hoisted_3$21), [[vModelText, text.value]]),
+					createElementVNode("button", {
+						type: "button",
+						class: "rk-combo-toggle",
+						tabindex: "-1",
+						"aria-hidden": "true",
+						disabled: __props.disabled,
+						onClick: _cache[2] || (_cache[2] = ($event) => open.value = !open.value)
+					}, " ▾ ", 8, _hoisted_4$16)
+				], 2),
 				withDirectives(createElementVNode("ul", {
 					id: listId,
 					ref_key: "list",
 					ref: list,
 					role: "listbox",
 					class: "rk-combo-list surface-overlay",
-					"aria-label": __props.label
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(matches.value, (option, index) => {
-					return openBlock(), createElementBlock("li", {
-						id: optionId(index),
-						key: option.value,
-						role: "option",
-						class: normalizeClass(["rk-combo-option", {
-							"is-highlighted": index === highlighted.value,
-							"is-selected": option.value === model.value
-						}]),
-						"aria-selected": option.value === model.value,
-						onPointerdown: withModifiers(($event) => choose(option), ["prevent"]),
-						onPointermove: ($event) => highlighted.value = index
-					}, toDisplayString(option.label), 43, _hoisted_6$5);
-				}), 128)), matches.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_7$4, toDisplayString(__props.emptyLabel), 1)) : createCommentVNode("", true)], 8, _hoisted_5$9), [[vShow, open.value]]),
+					"aria-label": __props.label,
+					"aria-multiselectable": multiple.value ? true : void 0,
+					"aria-busy": __props.loading ? true : void 0,
+					onScroll
+				}, [
+					padTop.value > 0 ? (openBlock(), createElementBlock("li", {
+						key: 0,
+						style: normalizeStyle({ height: `${padTop.value}px` }),
+						"aria-hidden": "true"
+					}, null, 4)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+						return openBlock(), createElementBlock("li", {
+							id: optionId(row.index),
+							key: row.option.value,
+							role: "option",
+							class: normalizeClass(["rk-combo-option", {
+								"is-highlighted": row.index === highlighted.value,
+								"is-selected": chosen.value.includes(row.option.value)
+							}]),
+							style: normalizeStyle(virtual.value ? { height: `${__props.rowHeight}px` } : void 0),
+							"aria-selected": chosen.value.includes(row.option.value),
+							"aria-setsize": matches.value.length,
+							"aria-posinset": row.index + 1,
+							onPointerdown: withModifiers(($event) => choose(row.option), ["prevent"]),
+							onPointermove: ($event) => highlighted.value = row.index
+						}, toDisplayString(row.option.label), 47, _hoisted_6$5);
+					}), 128)),
+					padBottom.value > 0 ? (openBlock(), createElementBlock("li", {
+						key: 1,
+						style: normalizeStyle({ height: `${padBottom.value}px` }),
+						"aria-hidden": "true"
+					}, null, 4)) : createCommentVNode("", true),
+					__props.loading ? (openBlock(), createElementBlock("li", _hoisted_7$4, [__props.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_8$3, toDisplayString(__props.loadingLabel), 1)) : createCommentVNode("", true), createElementVNode("span", _hoisted_9$3, [(openBlock(), createElementBlock(Fragment, null, renderList(3, (n) => {
+						return createVNode(BaseSkeleton_default, {
+							key: n,
+							shape: "text",
+							height: "0.75rem"
+						});
+					}), 64))])])) : matches.value.length === 0 ? (openBlock(), createElementBlock("li", _hoisted_10$3, toDisplayString(__props.emptyLabel), 1)) : createCommentVNode("", true)
+				], 40, _hoisted_5$9), [[vShow, open.value]]),
 				__props.error ? (openBlock(), createElementBlock("p", {
 					key: 0,
 					id: errorId,
@@ -818,7 +971,7 @@ var BaseCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 512);
 		};
 	}
-}), [["__scopeId", "data-v-ce4c503f"]]);
+}), [["__scopeId", "data-v-aa2335fa"]]);
 //#endregion
 //#region src/components/BaseRadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$37 = ["aria-describedby"];
@@ -4021,7 +4174,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "2.12.0";
+var VERSION = "2.13.0";
 //#endregion
 export { AppError, AvatarStack_default as AvatarStack, BaseAlert_default as BaseAlert, BaseAvatar_default as BaseAvatar, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCalendar_default as BaseCalendar, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseChip_default as BaseChip, BaseCombobox_default as BaseCombobox, BaseDatePicker_default as BaseDatePicker, BaseInput_default as BaseInput, BaseKbd_default as BaseKbd, BaseLink_default as BaseLink, BaseListbox_default as BaseListbox, BaseMenu_default as BaseMenu, BasePopconfirm_default as BasePopconfirm, BasePopover_default as BasePopover, BaseRadioGroup_default as BaseRadioGroup, BaseRating_default as BaseRating, BaseSelect_default as BaseSelect, BaseSeparator_default as BaseSeparator, BaseSheet_default as BaseSheet, BaseSkeleton_default as BaseSkeleton, BaseSlider_default as BaseSlider, BaseSpinner_default as BaseSpinner, BaseStepper_default as BaseStepper, BaseSwitch_default as BaseSwitch, BaseTable_default as BaseTable, BaseTextarea_default as BaseTextarea, CircularProgress_default as CircularProgress, CopyButton_default as CopyButton, DescriptionList_default as DescriptionList, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FileDrop_default as FileDrop, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, MATERIALS, NumberInput_default as NumberInput, PALETTES, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PinInput_default as PinInput, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SHEET_ROOT_ID, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, TagsInput_default as TagsInput, TimePicker_default as TimePicker, ToastHost_default as ToastHost, ToggleGroup_default as ToggleGroup, ToneDot_default as ToneDot, VERSION, addDays, applyMaterial, applyPalette, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, ensureSheetRoot, formatDate, formatNumber, fromDateKey, isApplePortable, isInstalled, isMaterial, isPaletteName, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setMaterialStorageKey, setPaletteStorageKey, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, toRedirectPath, todayKey, useDebouncedCallback, useDragScroll, useMaterial, useMediaQuery, useOnline, usePalette, useTheme, useToast, useToday, useVisualViewport };