rei-kit 2.9.0 → 2.10.0

package/README.md

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

package/dist/{BaseSkeleton-BWTNXVwP.js → BaseSkeleton-BlhlEskx.js}

@@ -127,7 +127,7 @@ var BaseListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}), 128)), __props.options.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_6)) : createCommentVNode("", true)], 44, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-95e230a5"]]);
+}), [["__scopeId", "data-v-31727bd7"]]);
 //#endregion
 //#region src/components/BaseSkeleton.vue
 var BaseSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -168,4 +168,4 @@ var BaseSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 //#endregion
 export { BaseListbox_default as n, BaseSkeleton_default as t };
 
-//# sourceMappingURL=BaseSkeleton-BWTNXVwP.js.map
+//# sourceMappingURL=BaseSkeleton-BlhlEskx.js.map

package/dist/BaseSkeleton-BlhlEskx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSkeleton-BlhlEskx.js","names":[],"sources":["../src/components/BaseListbox.vue","../src/components/BaseListbox.vue","../src/components/BaseSkeleton.vue","../src/components/BaseSkeleton.vue"],"sourcesContent":["<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    <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\"\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    <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\"\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\">\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"],"mappings":"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"}

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

@@ -6,6 +6,10 @@
  * are before the field rather than beside it, so the caret is always at the
  * end of the line the way it is in a mail client.
  *
+ * A pasted "vue, html, css" becomes three tags rather than one: whatever is
+ * pasted is split on commas and line breaks, which is the shape every list
+ * copied from somewhere else arrives in.
+ *
  * `removeLabel` builds each chip's remove button name from the tag, so a
  * screen reader hears "Remove: design" rather than five buttons called "×".
  */

package/dist/index.js

@@ -6,7 +6,7 @@ import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-
 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";
-import { n as BaseListbox_default, t as BaseSkeleton_default } from "./BaseSkeleton-BWTNXVwP.js";
+import { n as BaseListbox_default, t as BaseSkeleton_default } from "./BaseSkeleton-BlhlEskx.js";
 import { Fragment, Teleport, Transition, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, isRef, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, useTemplateRef, vModelRadio, vModelSelect, vModelText, vShow, watch, watchEffect, withCtx, withDirectives, withModifiers } from "vue";
 import { ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, Info, Minus, Paperclip, Plus, Star, TriangleAlert, Upload, X, XCircle } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
@@ -2761,13 +2761,29 @@ var TagsInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		/** The tags, with `v-model`. */
 		const model = useModel(__props, "modelValue");
 		const draft = ref("");
+		/** Commits one or many: "vue, html" is two tags however it arrived. */
+		function commit(text) {
+			const parts = text.split(/[\n,]/).map((part) => part.trim()).filter(Boolean);
+			if (parts.length === 0) return;
+			const next = [...model.value];
+			for (const value of parts) {
+				if (__props.max !== void 0 && next.length >= __props.max) break;
+				if (!__props.allowDuplicates && next.includes(value)) continue;
+				next.push(value);
+			}
+			if (next.length !== model.value.length) model.value = next;
+		}
 		function add() {
-			const value = draft.value.trim();
+			const text = draft.value;
+			draft.value = "";
+			commit(text);
+		}
+		function onPaste(event) {
+			const text = event.clipboardData?.getData("text") ?? "";
+			if (!/[\n,]/.test(text)) return;
+			event.preventDefault();
+			commit(`${draft.value}${text}`);
 			draft.value = "";
-			if (!value) return;
-			if (__props.max !== void 0 && model.value.length >= __props.max) return;
-			if (!__props.allowDuplicates && model.value.includes(value)) return;
-			model.value = [...model.value, value];
 		}
 		function remove(index) {
 			model.value = model.value.filter((_, at) => at !== index);
@@ -2821,6 +2837,7 @@ var TagsInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-invalid": invalid,
 					disabled: __props.disabled || __props.max !== void 0 && model.value.length >= __props.max,
 					onKeydown,
+					onPaste,
 					onBlur: add
 				}, null, 40, _hoisted_1$7), [[vModelText, draft.value]])], 2)]),
 				_: 1
@@ -2833,7 +2850,7 @@ var TagsInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-b372ae7b"]]);
+}), [["__scopeId", "data-v-1fd08921"]]);
 //#endregion
 //#region src/components/BasePopover.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$6 = ["id", "aria-label"];
@@ -3802,7 +3819,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "2.9.0";
+var VERSION = "2.10.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, 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, 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, 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 };