@witchcraft/ui 0.0.1 → 0.1.0

package/src/runtime/components/{LibInput/LibInput.stories.ts → LibInputDeprecated/LibInputDeprecated.stories.ts}

@@ -2,7 +2,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref, watchEffect } from "vue"
 
-import LibInput from "./LibInput.vue"
+import LibInputDeprecated from "./LibInputDeprecated.vue"
 
 import IconFaChevronLeft from "~icons/fa6-solid/chevron-left"
 import IconFaChevronRight from "~icons/fa6-solid/chevron-right"
@@ -25,19 +25,22 @@ import {
 } from "../shared/storyHelpers/playSuggestions.js"
 
 const meta = {
-	component: LibInput as any,
-	title: "Components/Input",
+	component: LibInputDeprecated as any,
+	title: "Components/Combobox",
 	args: {
 		border: true,
 		label: "Some Label",
+		...{
+			_template: undefined,
+		} as any
 	},
-} satisfies Meta<typeof LibInput> & Meta<{ custom: string }>
+} satisfies Meta<typeof LibInputDeprecated> & Meta<{ custom: string }>
 
 export default meta
-type Story = StoryObj<typeof LibInput> // & StoryObj<typeof extraArgs>
+type Story = StoryObj<typeof LibInputDeprecated> // & StoryObj<typeof extraArgs>
 const allComponents = {
 	...components,
-	LibInput,
+	LibInputDeprecated,
 	Icon,
 	IconFaChevronRight,
 	IconFaChevronLeft,
@@ -54,6 +57,7 @@ const playAutosuggestSelectLike = async (context: { canvasElement: HTMLElement,
 
 const setupModelValue = (args: any) => ({
 	modelValue: ref(args.modelValue ?? ""),
+	inputValue: ref(args.inputValue ?? ""),
 })
 
 const setupModelValues = (args: any) => ({
@@ -64,6 +68,7 @@ const Base: Story = {
 	render: args => ({
 		components: allComponents,
 		setup: () => ({
+			
 			...setupModelValue(args),
 			...setupModelValues(args),
 			args: {
@@ -72,15 +77,16 @@ const Base: Story = {
 			},
 		}),
 
-		template: `
+		template: (args as any)._template ?? `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model:values="values"
+				v-model:inputValue="inputValue"
 				v-model="modelValue"
 				@submit="modelValue = $event"
 			>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`,
 	}),
 }
@@ -144,6 +150,15 @@ export const WithAutosuggest = {
 	},
 	play: playAutosuggestSelectLike
 }
+
+export const WithAutosuggestNoLabel = {
+	...Base,
+	args: {
+		label: undefined,
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+	},
+	play: playAutosuggestSelectLike
+}
 export const WithInstantAutosuggest = {
 	...Base,
 	args: {
@@ -158,6 +173,27 @@ export const AutosuggestRestricted = {
 	},
 	play: playAutosuggestSelectLike
 }
+export const AutosuggestRestrictedWithClearOnClick = {
+	...WithAutosuggest,
+	args: {
+		...WithAutosuggest.args,
+		restrictToSuggestions: true,
+		_template: `
+				Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
+				Temp Value: <span class="inline-block" data-testid="temp-value">{{inputValue}}</span>\n
+				<lib-simple-input-deprecated
+					v-bind="args"
+					v-model:values="values"
+					v-model:inputValue="inputValue"
+					v-model="modelValue"
+					@submit="modelValue = $event"
+					@click="inputValue = ''"
+				>
+				</lib-simple-input-deprecated>
+			`
+	},
+	play: null,
+}
 export const AutosuggestSelectLikeShowAllUnrestricted = {
 	...WithAutosuggest,
 	args: {
@@ -198,7 +234,7 @@ export const Slots: Story = {
 		template: `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
 
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model="modelValue"
 				v-model:values="values"
@@ -216,7 +252,7 @@ export const Slots: Story = {
 						<icon><icon-fa-chevron-right/></icon>
 					</lib-button>
 				</template>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`,
 	}),
 }
@@ -234,17 +270,17 @@ const MultipleValuesBase: Story = {
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>\n
 			<br/>
 			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model="modelValue"
 				v-model:values="values"
 			>
 				<template #left>
-					<lib-button class="px-0" :border="false">
+					<lib-button class="px-0" :border="false" :disabled="args.disabled || args.readonly">
 						<icon><icon-fa-solid-tags/></icon>
 					</lib-button>
 				</template>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`,
 	}),
 	args: {
@@ -266,6 +302,15 @@ export const WithMultipleValuesWithSuggestions = {
 	},
 	play: playAutosuggestSelectLike
 }
+export const WithMultipleValuesWithSuggestionsNoSelected = {
+	...MultipleValuesBase,
+	args: {
+		...MultipleValuesBase.args,
+		suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"],
+		showSelectedValues: false,
+	},
+	play: playAutosuggestSelectLike
+}
 export const WithMultipleValuesDisabled = {
 	...MultipleValuesBase,
 	args: {
@@ -311,7 +356,7 @@ export const InputSlotReplacement: Story = {
 			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>\n
 			<br/>
 			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>\n
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model="modelValue"
 				v-model:values="values"
@@ -332,7 +377,7 @@ export const InputSlotReplacement: Story = {
 				<template #left>
 					<icon><icon-fa-solid-keyboard/></icon>
 				</template>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`,
 	}),
 	args: {
@@ -352,13 +397,13 @@ export const NextToButton: Story = {
 
 		template: `
 		<div class="flex gap-2 items-center">
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model:values="values"
 				v-model="modelValue"
-:label="undefined"
+				:label="undefined"
 			>
-			</lib-input>
+			</lib-simple-input-deprecated>
 			<lib-button>Button</lib-button>
 		</div>
 		`,

package/{dist/runtime/components/LibInput/LibInput.vue → src/runtime/components/LibInputDeprecated/LibInputDeprecated.vue}

@@ -1,12 +1,13 @@
 <template>
 <div
-	:class="twMerge(`input wrapper
+	:class="twMerge(`input--outer-wrapper
 			grow
 			flex
 			flex-wrap
 			`,
 		disabled && `
 			text-neutral-400
+			dark:text-neutral-600
 		`,
 		($.wrapperAttrs as any)?.class,
 	)"
@@ -20,13 +21,14 @@
 			:disabled="disabled"
 			:readonly="readonly"
 			:valid="valid"
+			class="input--label"
 		>
 			<slot v-bind="slotProps">
 				{{ label }}
 			</slot>
 		</lib-label>
 		<!-- Allow blurring when clicking the blank part of a label. -->
-		<div class="flex-1"/>
+		<div class="input--label-spacer flex-1"/>
 	</slot>
 	<!-- These are mostly copies of the classes on LibSimpleInput except made to work with disabled/readonly/etc manually since a div cannot have these states. -->
 	<div
@@ -36,7 +38,7 @@
 		:data-read-only="readonly"
 		:data-is-open="isOpen"
 		v-bind="{...$['inner-wrapperAttrs'], class:undefined}"
-		:class="twMerge(`inner-wrapper
+		:class="twMerge(`input--inner-wrapper
 				relative
 				flex
 				flex-1
@@ -55,7 +57,7 @@
 			isOpen && `rounded-b-none`,
 			!valid && `
 				border-danger-700
-				outlined:!ring-danger-700
+				outlined:!outline-danger-700
 				text-danger-800
 				dark:text-danger-400
 				dark:border-danger-600
@@ -79,7 +81,7 @@
 		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
 			<lib-simple-input
 				:class="twMerge(
-					`p-0`,
+					`input--input p-0`,
 					!$slots.left && `-ml-2 pl-2`,
 					!$slots.right && (!$values || $values.length === 0) && !suggestions && `-mr-2 -pr-2`,
 					($.attrs as any)?.class,
@@ -88,12 +90,11 @@
 			/>
 		</slot>
 		<slot name="indicator" v-bind="{isOpen, suggestionsIndicatorClickHandler }">
+			<!-- todo, convert to button for accessibility ? -->
 			<div
 				v-if="suggestions"
 				:data-is-open="isOpen"
-				:class="twMerge(
-					`indicator flex flex-col justify-center`,
-				)"
+				:class="twMerge(`input--indicator flex flex-col justify-center`)"
 				@click="suggestionsIndicatorClickHandler"
 			>
 				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
@@ -106,13 +107,12 @@
 			<template v-if="$values && $values.length > 0">
 				<lib-multi-values
 					:class="twMerge(`
+							input--multivalues
 							grow-[9000]
 							justify-space-between
 							py-1
 						`,
-						!$slots.right && `
-							-mr-1
-						`,
+						!$slots.right && `-mr-1`,
 						($.multivaluesAttrs as any)?.class,
 					)"
 					v-bind="multivaluesProps"
@@ -125,6 +125,7 @@
 			<!-- todo 1px needs to be abstracted to var -->
 			<lib-suggestions
 				:class="twMerge(`
+						input--suggestions
 						absolute
 						-inset-x-px
 						z-10
@@ -151,32 +152,31 @@
 </template>
 <script setup lang="ts">
 import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { isObject } from "@alanscodelog/utils/isObject.js"
 import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn.js"
-import type { MakeRequired } from "@alanscodelog/utils/types"
-import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, type PropType, ref, toRef, useSlots, watch } from "vue"
+import { computed,type HTMLAttributes,type InputHTMLAttributes, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue"
 import type { ComponentExposed } from "vue-component-type-helpers"
 
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
 import { useSuggestionsInputAria } from "../../composables/useSuggestions.js"
-import { hasModifiers } from "../../helpers/hasModifiers.js"
 import { twMerge } from "../../utils/twMerge.js"
 import Icon from "../Icon/Icon.vue"
 import LibLabel from "../LibLabel/LibLabel.vue"
 import LibMultiValues from "../LibMultiValues/LibMultiValues.vue"
 import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
 import LibSuggestions from "../LibSuggestions/LibSuggestions.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type MultiValueProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 /* #region base */
 defineOptions({
-	name: "lib-input",
+	name: "lib-simple-input-deprecated",
 	inheritAttrs: false,
 })
 const $slots = useSlots()
 const emit = defineEmits<{
-	(e: "submit", val: string, suggestion?: any): void
 	(e: "input", val: InputEvent): void
+	(e: "submit", val: string, suggestion?: any): void
 	(e: "keydown", val: KeyboardEvent): void
 	(e: "blur", val: FocusEvent): void
 	(e: "focus", val: FocusEvent): void
@@ -224,9 +224,17 @@ const suggestionsIndicatorClickHandler = (e: MouseEvent) => {
 
 const handleKeydown = (e: KeyboardEvent) => {
 	if (props.suggestions) {
-		(suggestionsComponent.value as any)?.inputKeydownHandler?.(e)
+		if (e.key === "Enter" && activeSuggestion.value === -1 && $values.value) {
+			pushIfNotIn($values.value, [$inputValue.value])
+			$inputValue.value = ""
+			$modelValue.value = ""
+		} else {
+			(suggestionsComponent.value as any)?.inputKeydownHandler?.(e)
+			if ($values.value) {
+				$modelValue.value = ""
+			}
+		}
 	}
-	
 	emit("keydown", e)
 }
 const handleBlur = (e: FocusEvent) => {
@@ -245,9 +253,7 @@ const handleFocus = (e: FocusEvent) => {
 function addValue(val: string) {
 	if ($values.value === undefined) return
 	if (isBlank(val)) return
-	props.preventDuplicateValues
-		? pushIfNotIn($values.value, [val])
-		: $values.value.push(val)
+	pushIfNotIn($values.value, [val])
 	$inputValue.value = ""
 	$modelValue.value = ""
 }
@@ -276,7 +282,7 @@ const inputProps = computed(() => ({
 	},
 	onSubmit: (e: string) => {
 		if (!props.suggestions) {
-			$modelValue.value = e
+			$modelValue.value = $values.value ? "" : e
 			emit("submit", e)
 			if ($values.value) {
 				addValue(e)
@@ -289,7 +295,7 @@ const inputProps = computed(() => ({
 	class: undefined,
 }))
 
-function slotSubmit(val: any): void {
+function slotSubmit(val: any, _wasRemoved: boolean): void {
 	emit("submit", val)
 }
 const slotProps = computed(() => ({
@@ -301,6 +307,7 @@ const slotProps = computed(() => ({
 	emitSubmit: slotSubmit
 }))
 
+
 const suggestionProps = computed(() => ({
 	id: fullId.value,
 	suggestions: props.suggestions,
@@ -308,16 +315,16 @@ const suggestionProps = computed(() => ({
 	restrictToSuggestions: props.restrictToSuggestions,
 	suggestionLabel: props.suggestionLabel,
 	suggestionsFilter: props.suggestionsFilter,
-	modelValue: $modelValue.value.toString(),
+	modelValue: $values.value ?? $modelValue.value.toString(),
 	inputValue: $inputValue.value,
 	isValid: props.isValid,
 	"onUpdate:inputValue": (e: string) => $inputValue.value = e,
-	onSubmit: (e: string, suggestion: any) => {
-		$modelValue.value = e
+	onSubmit: (e: string, suggestion?: any, wasRemoved?: boolean) => {
+		$modelValue.value = wasRemoved ? "" : e
 		emit("submit", e, suggestion)
-		if ($values.value) {
-			addValue(e)
-		}
+	},
+	"onUpdate:modelValue": (e: string | string[]) => {
+		$values.value &&= e as string[]
 	},
 	"onUpdate:isOpen": (e: boolean) => { isOpen.value = e },
 	"onUpdate:activeSuggestion": (e: number) => activeSuggestion.value = e,
@@ -331,8 +338,8 @@ const multivaluesProps = computed(() => ({
 	border: props.border,
 	disabled: props.disabled,
 	readonly: props.readonly,
-	values: $values.value,
-	"onUpdate:values": (e: string[]) => $values.value = e,
+	modelValue: $values.value,
+	"onUpdate:modelValue": (e: string[]) => $values.value = e,
 	...$.value.multivaluesAttrs,
 	class: undefined,
 }))
@@ -342,6 +349,7 @@ defineExpose({
 	suggestionsComponent,
 	el: inputWrapperEl,
 })
+
 </script>
 <script lang="ts">
 
@@ -355,7 +363,6 @@ type RealProps =
 	& LinkableByIdProps
 	& LabelProps
 	& BaseInteractiveProps
-	& MultiValueProps
 & {
 	suggestions?: SuggestionsProps["suggestions"]
 	valid?: boolean

package/src/runtime/components/LibLabel/LibLabel.vue

@@ -32,7 +32,7 @@ defineOptions({
 
 const fallbackId = getFallbackId()
 
- 
+// eslint-disable-next-line no-undef
 withDefaults(defineProps<Props>(), {
 	id: "",
 	unstyled: undefined,
@@ -58,7 +58,7 @@ interface Props
 	/** @vue-ignore */
 	Partial<Omit<LabelHTMLAttributes,"class"> & TailwindClassProp>,
 	RealProps
-{}
+	{ }
 </script>
 
 <script lang="ts">

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

@@ -12,7 +12,7 @@ const meta = {
 	component: LibMultiValues as any,
 	title: "Components/MultiValues",
 	args: {
-		values: ["A", "B", "C"],
+		modelValue: ["A", "B", "C"],
 		border: true,
 	},
 	tags: ["!test"],
@@ -36,7 +36,7 @@ export const Primary: Story = {
 			const inputValue = ref("B")
 			const multiValueEl = ref<typeof LibMultiValues | null>(null)
 			const onKeydownEnter = (e: KeyboardEvent): void => {
-				if (e.key === "Enter") (args.values!).push(inputValue.value)
+				if (e.key === "Enter") (args.modelValue!).push(inputValue.value)
 			}
 			return ({
 				args,
@@ -49,7 +49,8 @@ export const Primary: Story = {
 
 		template: `
 			<p>Simple Input connected to multi-value.</p>
-			<p> Press enter to add value:</p>
+			<p>Note: You will be able to add values, including duplicates, even to the disabled/readonly version in this test, see the Input component for a properly connected approach.</p>
+			<p> Press enter to add value :</p>
 			<lib-simple-input
 				v-model="inputValue"
 				@keydown="onKeydownEnter"
@@ -60,7 +61,7 @@ export const Primary: Story = {
 				<lib-multi-values
 					ref="multiValueEl"
 					v-bind="args"
-					v-model:values="args.values"
+					v-model="args.modelValue"
 				/>
 			</div>
 		`,

package/src/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -1,8 +1,8 @@
 <template>
 <div
-	v-if="$values && $values?.length > 0"
+	v-if="$modelValue && $modelValue?.length > 0"
 	:class="twMerge(`
-		values
+		multivalues
 		group
 		flex
 		flex-initial
@@ -12,18 +12,18 @@
 		overflow-x-scroll
 		scrollbar-hidden
 	`,
-		($ as any)?.class)
+		($.attrs as any)?.class)
 	"
 	:data-disabled="disabled"
 	:data-read-only="readonly"
 	:aria-label="`Values for ${label}`"
 	:tabindex="disabled ? -1 : 0"
-	v-bind="{...$, class:undefined}"
+	v-bind="{...$.attrs, class:undefined}"
 >
 	<div
 		:data-border="border"
 		:class="twMerge(`
-				value_wrapper
+				multivalues--item
 				flex-basis-0
 				min-w-2
 				flex
@@ -53,13 +53,13 @@
 			($.itemAttrs as any)?.class
 		)"
 		:tabindex="canEdit ? 0 : undefined"
-		v-for="(value) of $values"
+		v-for="(value) of $modelValue"
 		:key="value"
 		@keydown.ctrl.c.prevent="copy(value.toString())"
 	>
-		<span class="value_label truncate">{{ value }}</span>
+		<span class="multivalues--label truncate">{{ value }}</span>
 		<lib-button
-			class="!p-0 text-sm !leading-none"
+			class="multivalues--remove-button !p-0 text-sm !leading-none"
 			:aria-label="`Remove ${value}`"
 			:border="false"
 			:disabled="disabled || readonly"
@@ -80,7 +80,7 @@ import { copy } from "../../helpers/copy.js"
 import { twMerge } from "../../utils/twMerge.js"
 import Icon from "../Icon/Icon.vue"
 import LibButton from "../LibButton/LibButton.vue"
-import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type MultiValueProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
 
 
 defineOptions({
@@ -96,11 +96,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 
 const canEdit = computed(() => !props.disabled && !props.readonly)
-const $values = defineModel<T[]>("values", { default: () => []})
+const $modelValue = defineModel<T[]>({ default: () => []})
 
 const removeVal = (value: T) => {
 	if (!canEdit.value) return
-	removeIfIn($values.value, value)
+	removeIfIn($modelValue.value, value)
 }
 </script>
 
@@ -110,7 +110,6 @@ type WrapperTypes = Partial<WrapperProps<"item",HTMLAttributes>>
 type RealProps =
 	& LabelProps
 	& BaseInteractiveProps
-	& MultiValueProps
 	& {
 		border?: boolean
 	}

package/src/runtime/components/LibNotifications/LibNotification.vue

@@ -2,7 +2,7 @@
 <div :class="twMerge(`notification
 		max-w-700px
 		bg-neutral-50
-		dark:bg-neutral-950
+		dark:bg-neutral-900
 		text-fg
 		dark:text-bg
 		border
@@ -19,7 +19,7 @@
 	ref="notificationEl"
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
-	<div class="header flex-reverse flex justify-between">
+	<div class="notification--header flex-reverse flex justify-between">
 		<div v-if="notification.title"
 			tabindex="0"
 			class="title
@@ -30,35 +30,44 @@
 		>
 			{{ notification.title }}
 		</div>
-		<div class="flex-1"/>
+		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
 			<LibButton :border="false"
-				class="copy text-neutral-700"
+				class="notification--copy-button text-neutral-700"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
 				<icon><i-fa6-regular-copy/></icon>
 			</LibButton>
-			<lib-button v-if="notification.cancellable" :border="false" @click="NotificationHandler.dismiss(notification)">
+			<lib-button
+				v-if="notification.cancellable"
+				class="notification--cancel-button"
+				:border="false"
+				@click="NotificationHandler.dismiss(notification)"
+			>
 				<icon><i-fa6-solid-xmark/></icon>
 			</lib-button>
 		</div>
 	</div>
-	<div class="message whitespace-pre-wrap" tabindex="0">
+	<div class="notification--message whitespace-pre-wrap" tabindex="0">
 		{{ notification.message }}
 	</div>
-	<div class="bottom flex items-end justify-between">
+	<div class="notification--footer flex items-end justify-between">
 		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
 			Code: {{ notification.code }}
 		</div>
-		<div class="flex-1 py-1"/>
+		<div class="notification--footer-spacer flex-1 py-1"/>
 		<div v-if="notification.options"
-			class="options
+			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
 			<lib-button :label="option"
-				:class="buttonColors[i] == 'secondary' ? 'p-0': undefined"
+				:class="twMerge(`
+					notification--option-button
+				`,
+					buttonColors[i] == 'secondary' && 'p-0'
+				)"
 				:border="buttonColors[i] !== 'secondary'"
 				:color="buttonColors[i]"
 				v-for="option, i in notification.options"

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

@@ -100,7 +100,7 @@ export const Primary: Story = {
 		backgrounds: { disable: true },
 		// <lib-debug>{{args.handler}}</lib-debug>
 		template: `
-	<test-wrapper :outline="args.outline">
+	<lib-root :outline="args.outline">
 		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
 		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
 		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
@@ -117,7 +117,7 @@ export const Primary: Story = {
 				<br>
 			</template>
 		</lib-debug>
-	</test-wrapper>
+	</lib-root>
 	`,
 	}),
 }