@witchcraft/ui 0.0.1

package/src/runtime/components/LibTable/LibTable.stories.ts

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import LibTable from "./LibTable.vue"
+
+// todo
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibTable> = {
+	component: LibTable,
+	title: "Components/Table",
+}
+
+export default meta
+type Story = StoryObj<typeof LibTable>
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+				<div class="overflow-x-scroll scrollbar-hidden">
+					<lib-table
+						v-bind="args"
+					>
+					</lib-table>
+				</div>
+		`,
+	}),
+	args: {
+		cols: ["prop1", "prop2", "prop3"],
+		values: [
+			{ prop1: "Item1 Prop 1", prop2: "Item1 Prop 2", prop3: "Item1 Prop 3" },
+			{ prop1: "Item2 Prop 1", prop2: "Item2 Prop 2", prop3: "Item2 Prop 3" },
+			{ prop1: "Item3 Prop 1", prop2: "Item3 Prop 2", prop3: "Item3 Prop 3" },
+		],
+		colConfig: { prop1: { name: "Header 1" }, prop2: { name: "Header 2" } },
+		itemKey: "prop1",
+	},
+}
+
+export const NoCellBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		cellBorder: false,
+	},
+}
+export const NoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		border: false,
+	},
+}
+export const NoCellBordersNoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		cellBorder: false,
+		border: false,
+	},
+}
+
+export const SquareBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		rounded: false,
+	},
+}
+export const NoHeader: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false,
+	},
+}
+export const NoHeaderNoBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false,
+		border: false,
+	},
+}
+export const NoHeaderNoCellBorders: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		header: false,
+		cellBorder: false,
+	},
+}
+export const FitWidthFalse: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		resizable: {
+			fitWidth: false,
+		},
+	},
+}
+
+export const ThreeColSomeColsNotResizable: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+			<lib-table
+				v-bind="args"
+			>
+			</lib-table>
+			<br>
+			<lib-table
+			v-bind="{...args, colConfig:args.colConfig2}"
+			>
+			</lib-table>
+			<br>
+			<lib-table
+				v-bind="{...args, colConfig:args.colConfig3}"
+			>
+			</lib-table>
+		`,
+	}),
+	args: {
+		cols: ["prop1", "prop2", "prop3"],
+		itemKey: "prop1",
+		values: [
+			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3" },
+		],
+		colConfig: { prop1: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false } },
+		colConfig3: { prop3: { name: "No Resize", resizable: false } },
+	} as any,
+}
+export const FourColSomeColsNotResizable: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+				<lib-table
+					v-bind="args"
+				>
+				</lib-table>
+				<br>
+				<lib-table
+				v-bind="{...args, colConfig:args.colConfig2}"
+				>
+			</lib-table>
+			<br>
+				<lib-table
+					v-bind="{...args, colConfig:args.colConfig3}"
+				>
+				</lib-table>
+		`,
+	}),
+	args: {
+		cols: ["prop1", "prop2", "prop3", "prop4"],
+		values: [
+			{ prop1: "Prop 1", prop2: "Prop 2", prop3: "Prop 3", prop4: "Prop 4" },
+		],
+		itemKey: "prop1",
+		colConfig: { prop1: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig2: { prop2: { name: "No Resize", resizable: false }, prop3: { name: "No Resize", resizable: false } },
+		colConfig3: { prop1: { name: "No Resize", resizable: false }, prop4: { name: "No Resize", resizable: false } },
+	} as any,
+}
+

package/src/runtime/components/LibTable/LibTable.vue

@@ -0,0 +1,177 @@
+<template>
+<!-- Assumes no scrollbars on children -->
+<table :class="twMerge(`table
+		table-fixed
+		border-separate
+		border-spacing-0
+		overflow-x-scroll
+		scrollbar-hidden
+		[&_.grip]:w-[5px]
+		relative
+		w-full
+		box-content
+		[&_thead]:font-bold
+		[&_td]:p-1
+		[&_td]:overflow-x-hidden
+		[&.resizable-cols-error]:cursor-not-allowed
+		[&.resizable-cols-error]:user-select-none
+		`,
+	cellBorder && `
+			[&_td]:border-neutral-500
+			[&_td:not(.last-row)]:border-b
+			[&_td:not(.first-col)]:border-l
+		`,
+	border && `
+			[&_thead_td]:bg-neutral-200
+			[&_td]:border-neutral-500
+			dark:[&_thead_td]:bg-neutral-800
+			dark:[&_td]:border-neutral-500
+			[&_td.first-row]:border-t
+			[&_td.last-row]:border-b
+			[&_td.last-col]:border-r
+			[&_td.first-col]:border-l
+		`,
+	rounded &&`
+			[&_td.br]:rounded-br-sm
+			[&_td.bl]:rounded-bl-sm
+			[&_td.tr]:rounded-tr-sm
+			[&_td.tl]:rounded-tl-sm
+		`
+	, ($attrs as any).class)"
+	v-resizable-cols="resizableOptions"
+>
+	<thead v-if="header">
+		<tr>
+			<template v-for="col,i of cols" :key="col">
+				<slot :name="`header-${col.toString()}`"
+					:class="[
+						extraClasses[`-1-${i}`],
+						'cell',
+						(colConfig as any)[col]?.resizable === false
+							? 'no-resize'
+							: ''
+					].join(' ')"
+					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
+					:col-key="col"
+				>
+					<td :class="[
+							extraClasses[`-1-${i}`] ,
+							'cell',
+							(colConfig as any)[col]?.resizable === false
+								? 'no-resize'
+								: ''
+						].join(' ')"
+						:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
+					>
+						{{ (colConfig as any)[col]?.name ?? col }}
+					</td>
+				</slot>
+			</template>
+		</tr>
+	</thead>
+	<tbody>
+		<template v-for="item, i of values" :key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]">
+			<tr>
+				<template v-for="col, j of cols" :key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()">
+					<slot
+						:name="col"
+						:item="item"
+						:value="item[col]"
+						:class="extraClasses[`${i}-${j}`] + ' cell'"
+					>
+						<td :class="extraClasses[`${i}-${j}`] + ' cell'">
+							{{ item[col] }}
+						</td>
+					</slot>
+				</template>
+			</tr>
+		</template>
+	</tbody>
+</table>
+</template>
+
+<!-- generic="T extends Record<string, any> -->"
+<script setup lang="ts" generic="T">
+import type { MakeRequired } from "@alanscodelog/utils"
+import { keys } from "@alanscodelog/utils/keys.js"
+import { computed, type PropType, ref, type TableHTMLAttributes } from "vue"
+
+import { vResizableCols } from "../../directives/vResizableCols.js"
+import type { ResizableOptions, TableColConfig } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import type { TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-table",
+})
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	resizable: () => ({}),
+	values: () => [] as T[],
+	itemKey: "",
+	cols: () => [] as (keyof T)[],
+	rounded: true,
+	border: true,
+	cellBorder: true,
+	header: true,
+	colConfig: () => ({}) ,
+})
+
+const widths = ref([])
+const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
+	colCount: props.cols.length,
+	widths,
+	selector: ".cell",
+	...props.resizable,
+}))
+
+/* props.values.length instead of `props.values.length - 1` because we're creating an artificial first row for the header */
+const getExtraClasses = (row: number, col: number, isHeader: boolean): string[] => {
+	const res = {
+		bl: !isHeader && row === props.values.length - 1 && col === 0,
+		br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
+		tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
+		tl: (isHeader || !props.header) && row === 0 && col === 0,
+		"first-row": (isHeader || !props.header) && row === 0,
+		"last-row": row === props.values.length - 1,
+		"first-col": col === 0,
+		"last-col": col === props.cols.length - 1,
+	}
+	return keys(res).filter(key => res[key])
+}
+
+const extraClasses = computed(() => Object.fromEntries([...Array(props.values.length + 1).keys()]
+	.map(row => [...Array(props.cols.length).keys()]
+		.map(col =>
+			[
+				`${row - 1}-${col}`,
+				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" "),
+			]))
+	.flat(),
+))
+
+</script>
+<script lang="ts">
+// generic isn't working here :/
+type T = any
+	
+type RealProps = {
+	resizable?: Partial<ResizableOptions>
+	values?: T[]
+	itemKey?: keyof T | ((item: T) => string)
+	/** Let's the table know the shape of the data since values might be empty. */
+	cols?: (keyof T)[]
+	rounded?: boolean
+	border?: boolean
+	cellBorder?: boolean
+	header?: boolean
+	colConfig?: TableColConfig<T>
+}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<TableHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
+	RealProps { }
+</script>

package/src/runtime/components/Template/NAME.vue

@@ -0,0 +1,49 @@
+<!-- eslint-disable -->
+<template>
+<div :class="twMerge(`
+
+	`, ($attrs as any).class)"
+	v-bind="{...$attrs, class:undefined}"
+>
+	<slot/>
+</div>
+</template>
+<script setup  lang="ts">
+ 
+import { computed, getCurrentInstance, type HTMLAttributes, onBeforeUnmount, onMounted, type PropType, reactive, type Ref, ref, watch } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+import { baseInteractiveProps, type TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-name", /* todo */
+	inheritAttrs: false,
+})
+
+
+// const props = defineProps<{}>({ })
+
+const el = ref<null | HTMLElement>(null)
+
+const modelValue = defineModel<string>({ required: true })
+
+
+</script>
+
+<script lang="ts">
+export default {
+	name: "lib-name",
+}
+
+type RealProps = {
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes, "class">
+		& TailwindClassProp
+		& RealProps
+	> { }
+</script>

package/src/runtime/components/Template/TemplateStory.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck remove when copying
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import NAME from "./NAME.vue"
+
+// todo, maybe don't do this for perf reasons
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof NAME> = {
+	component: NAME,
+	args: {
+
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof NAME>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+			<NAME v-bind="{...args}">{{args.value}}</NAME>
+		`,
+	}),
+}
+export const Secondary: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+	},
+}
+

package/src/runtime/components/TestControls/TestControls.vue

@@ -0,0 +1,19 @@
+<template>
+<!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
+<div class="flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
+	<div class="flex-grow"/>
+	<div class="outline-indicator">{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}</div>
+	<lib-dark-mode-switcher/>
+</div>
+</template>
+
+<script setup lang="ts">
+import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
+
+defineOptions({ name: "test-controls" })
+defineProps< {
+	showOutline: boolean
+}>()
+
+</script>
+

package/src/runtime/components/index.ts

@@ -0,0 +1,22 @@
+export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue"
+/* Manually Generated Index */
+
+export { default as aria } from "./Aria/Aria.vue"
+export { default as LibButton } from "./LibButton/LibButton.vue"
+export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue"
+export { default as LibDebug } from "./LibDebug/LibDebug.vue"
+export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
+export { default as LibInput } from "./LibInput/LibInput.vue"
+export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue"
+export { default as LibPagination } from "./LibPagination/LibPagination.vue"
+export { default as LibTable } from "./LibTable/LibTable.vue"
+export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue"
+export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue"
+export { default as LibPopup } from "./LibPopup/LibPopup.vue"
+export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue"
+export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue"
+export { default as LibLabel } from "./LibLabel/LibLabel.vue"
+export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue"
+export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue"
+export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue"
+

package/src/runtime/components/reset.stories.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+const meta: Meta<{}> = {
+	title: "Other/Reset",
+	args: {
+
+	},
+}
+
+export default meta
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type Story = StoryObj<{}>
+
+
+export const Primary: Story = {
+	render: args => ({
+		setup: () => ({ args }),
+		template: `
+			<h1>h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h1>
+			<h2>h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h2>
+			<h3>h3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h3>
+			<h4>h4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h4>
+			<h5>h5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h5>
+			<h6>h6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h6>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</p>
+		`,
+	}),
+}
+

package/src/runtime/components/shared/props.ts

@@ -0,0 +1,142 @@
+import { type PropType,useId } from "vue"
+
+ 
+export interface LinkableByIdProps {
+	/**
+	 * The id for the input. Uses vue's useId if none provided.
+	 *
+	 * For components that are not inputs, the id passed to inputs should be shared with the corresponding label/suggestions/etc component to connect them.
+	 */
+
+	id?: string
+}
+
+export const getFallbackId = (): string => useId()
+
+ 
+export interface LabelProps {
+/** For the label. Note the component might or might not support an actual label element. If none is supported, this is used for the `aria-label`. */
+	label?: string
+}
+
+export type SuggestionsProps<T = any> = {
+	/**
+	 * A list of autocomplete suggestions. Can be a simple list of strings, or more complicated, like a list of objects. In the case of objects, you'll want to specify `suggestionsLabel`.
+	 *
+	 * Each item is passed to the suggestion slot via the `items` prop. You can access it like:
+	 * ```
+	 * <div #item={item}>
+	 * 	{{item}}
+	 * </div>
+	 * ```
+	 */
+	suggestions?: T[]
+	/** A function that specifies how to extract the label from a suggestion when it's an object, e.g. `(item) => item.label`. By default, if none is passed, it's assumed suggestions is a list of strings. */
+	suggestionLabel?: (item: T) => string
+	/**
+	 * Whether to restrict the value to the suggestions list or merely use it to suggest values. Default is false.
+	 *
+	 * This stops v-modeling of what the user is typing when there is a value that does not match any values in the suggestions list. `update:modelValue` will only be emitted when they type/select/click a valid option.
+	 *
+	 * When the input is partially valid (it partially matches an option in the suggestions list), if the user presses enter or focuses away, the last selected suggestion is set as the value.
+	 *
+	 * When the input is completely invalid, the `errored` class is added to the component and the input goes red. If the user focuses away or tries to press enter anyways, the value is reset to the last valid value.
+	 *
+	 * Additionally when the input is invalid, the user can open the dropdown menu (it won't auto open) to view all the suggestions.
+	 */
+	restrictToSuggestions?: boolean
+	/**
+	 * Usually when using autosuggest, we only want to update the modelValue when the user submits the input.
+	 * This happens by default if using `restrictToSuggestions`, but not if not restricting them.
+	 *
+	 * This can be worked around by listening a bit differently to events, but this is a common use case so there's now an option that automatically does this.
+	 *
+	 * By default it's false.
+	 */
+	updateOnlyOnSubmit?: boolean
+	/** A function to filter the suggestions based on the current input. If none is given, will attempt to filter by the label using a basic case insensitive `includes` search. */
+	suggestionsFilter?: (input: string | number, items: T[]) => any[]
+	/** Allows opening the input dropdown when it's empty. Default is true. */
+	allowOpenEmpty?: boolean
+	/** Whether the suggestions dropdown can be opened. Default is true. */
+	canOpen?: boolean
+	/** Whether the input is valid. Default is true. */
+	isValid?: boolean
+	/**
+	 * A function to determine which selection to auto select. By default, the start of the string must match and the longest match is used. If the input is 0 length, the first element is selected.
+	 *
+	 * You can implement custom behavior here like fuzzy matching. Note that an exactly matching selection is always picked (the function will not be called).
+	 */
+	suggestionSelector?: (suggestions: T[], input: string) => number
+}
+export type SuggestionsOptions<T> = SuggestionsProps<T> & MultiValueProps
+ 
+export interface SuggestionsEmits {
+	(e: "submit", val: string, suggestion?: any): void
+	(e: "update:isOpen", val: boolean): void
+	(e: "update:activeSuggestion", val: number): void
+}
+
+
+export const baseInteractiveProps = {
+	unstyle: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
+	disabled: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
+	readonly: { type: Boolean as Function as PropType<boolean>, required: false, default: false },
+	border: { type: Boolean as Function as PropType<boolean>, required: false, default: true },
+} as const
+
+export type BaseInteractiveProps = {
+	/** Default is false. */
+	disabled?: boolean
+	/** Default is false. */
+	readonly?: boolean
+	/** Default is true. */
+	border?: boolean
+	/** Removes styles from the component. Default is false. */
+	unstyle?: boolean
+}
+export const baseInteractivePropsDefaults = {
+	disabled: false,
+	readonly: false,
+	border: true,
+	unstyle: false,
+}
+
+
+export type MultiValueProps = {
+	/**
+	 * If values is used, for components that handle multiple values, prevents adding of duplicate values.
+	 *
+	 * For other components, it prevents suggesting values that have already been added.
+	 *
+	 * Default is true.
+	 */
+	preventDuplicateValues?: boolean
+	/** The selected values.*/
+	values?: string[]
+}
+
+/**
+	* @internal
+	*  For easily typing attributes created by useDivideAttrs. See readme.
+	*
+	* By default overrides the `class` prop to only take a string (to pass to tailwing).
+	*/
+export type WrapperProps<TPrefix extends string, T, TOverrides extends Record<string, any> | never = TailwindClassProp> = {
+	[P in keyof T as P extends keyof TOverrides
+		? never
+		: P extends string
+		? `${TPrefix}${Capitalize<P>}`
+		: never
+	]: T[P];
+} & {
+	[P in keyof TOverrides as P extends string
+		? `${TPrefix}${Capitalize<P>}`
+		: never
+	]: TOverrides[P];
+}
+
+export type TailwindClassProp = {
+	/** Tailwind classes. */
+	class?: string | false
+}

package/src/runtime/components/shared/storyHelpers/playInput.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect, userEvent, within } from "@storybook/test"
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const playBasicVModel = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
+	const canvas = within(canvasElement)
+	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
+	await userEvent.type(input, "A")
+	await expect(canvas.getByTestId("model-value").textContent).toBe("A")
+	await userEvent.clear(input)
+	await expect(canvas.getByTestId("model-value").textContent).toBe("")
+}
+export const playMultipleValues = async ({ canvasElement, args }: { canvasElement: HTMLElement, args: any }) => {
+	const initialValues = [...(args.values ?? [])]
+	const canvas = within(canvasElement)
+	const input = canvas.getByLabelText(args.label ?? "", { selector: "input" })
+	await userEvent.type(input, "A")
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("A")
+	await userEvent.keyboard("{Enter}")
+	await expect(canvas.getByTestId("values").textContent)
+		.toBe([...initialValues, "A"].join(", "))
+	// expect input to get cleared
+	await expect(canvas.getByTestId("model-value")).toBeEmptyDOMElement()
+
+	await userEvent.type(input, "B")
+	await expect(canvas.getByTestId("model-value")).toHaveTextContent("B")
+	await userEvent.keyboard("{Enter}")
+	await expect(canvas.getByTestId("values").textContent)
+		.toBe([ ...initialValues, "A", "B" ].join(", "))
+	// empty input does nothing
+	await userEvent.clear(input)
+	await userEvent.keyboard("{Enter}")
+	await expect(canvas.getByTestId("values").textContent)
+		.toBe([ ...initialValues, "A", "B" ].join(", "))
+}