@witchcraft/ui 0.0.1 → 0.1.0

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

@@ -1,15 +1,12 @@
 import type { StoryObj } from "@storybook/vue3";
-import LibInput from "./LibInput.vue.js";
+import LibInputDeprecated from "./LibInputDeprecated.vue.js";
 declare const meta: {
     component: any;
     title: string;
-    args: {
-        border: boolean;
-        label: string;
-    };
+    args: any;
 };
 export default meta;
-type Story = StoryObj<typeof LibInput>;
+type Story = StoryObj<typeof LibInputDeprecated>;
 export declare const Primary: Story;
 export declare const Disabled: Story;
 export declare const Readonly: Story;
@@ -19,14 +16,17 @@ export declare const AttrsDate: Story;
 export declare const AttrsNumber: Story;
 export declare const Borderless: any;
 export declare const WithAutosuggest: any;
+export declare const WithAutosuggestNoLabel: any;
 export declare const WithInstantAutosuggest: any;
 export declare const AutosuggestRestricted: any;
+export declare const AutosuggestRestrictedWithClearOnClick: any;
 export declare const AutosuggestSelectLikeShowAllUnrestricted: any;
 export declare const AutosuggestObjectOptions: any;
 export declare const Slots: Story;
 /** Press enter to add a value. */
 export declare const WithMultipleValues: Story;
 export declare const WithMultipleValuesWithSuggestions: any;
+export declare const WithMultipleValuesWithSuggestionsNoSelected: any;
 export declare const WithMultipleValuesDisabled: any;
 export declare const WithMultipleValuesReadonly: any;
 export declare const InputSlotReplacement: Story;

package/dist/runtime/components/{LibInput/LibInput.stories.js → LibInputDeprecated/LibInputDeprecated.stories.js}

@@ -1,5 +1,5 @@
 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";
 import IconFaSolidKeyboard from "~icons/fa6-solid/keyboard";
@@ -18,17 +18,20 @@ import {
   playBasicSelect
 } from "../shared/storyHelpers/playSuggestions.js";
 const meta = {
-  component: LibInput,
-  title: "Components/Input",
+  component: LibInputDeprecated,
+  title: "Components/Combobox",
   args: {
     border: true,
-    label: "Some Label"
+    label: "Some Label",
+    ...{
+      _template: void 0
+    }
   }
 };
 export default meta;
 const allComponents = {
   ...components,
-  LibInput,
+  LibInputDeprecated,
   Icon,
   IconFaChevronRight,
   IconFaChevronLeft,
@@ -41,7 +44,8 @@ const playAutosuggestSelectLike = async (context) => {
   await playBasicClickSelect(context);
 };
 const setupModelValue = (args) => ({
-  modelValue: ref(args.modelValue ?? "")
+  modelValue: ref(args.modelValue ?? ""),
+  inputValue: ref(args.inputValue ?? "")
 });
 const setupModelValues = (args) => ({
   values: ref(args.values ?? void 0)
@@ -57,16 +61,17 @@ const Base = {
         updateOnlyOnSubmit: args.suggestions !== void 0
       }
     }),
-    template: `
+    template: args._template ?? `
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
 
-			<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>
 		`
   })
 };
@@ -124,6 +129,14 @@ export const WithAutosuggest = {
   },
   play: playAutosuggestSelectLike
 };
+export const WithAutosuggestNoLabel = {
+  ...Base,
+  args: {
+    label: void 0,
+    suggestions: ["A", "AB", "ABC", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
+  },
+  play: playAutosuggestSelectLike
+};
 export const WithInstantAutosuggest = {
   ...Base,
   args: {
@@ -138,6 +151,29 @@ 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>
+
+				Temp Value: <span class="inline-block" data-testid="temp-value">{{inputValue}}</span>
+
+				<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: {
@@ -177,7 +213,7 @@ export const Slots = {
 			Model Value: <span class="inline-block" data-testid="model-value">{{modelValue}}</span>
 
 
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model="modelValue"
 				v-model:values="values"
@@ -195,7 +231,7 @@ export const Slots = {
 						<icon><icon-fa-chevron-right/></icon>
 					</lib-button>
 				</template>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`
   })
 };
@@ -213,17 +249,17 @@ const MultipleValuesBase = {
 			<br/>
 			Values: <span class="inline-block" data-testid="values">{{values.join(", ")}}</span>
 
-			<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: {
@@ -242,6 +278,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: {
@@ -287,7 +332,7 @@ export const InputSlotReplacement = {
 			<br/>
 			Recording: <span class="inline-block" data-testid="recording">{{recording}}</span>
 
-			<lib-input
+			<lib-simple-input-deprecated
 				v-bind="args"
 				v-model="modelValue"
 				v-model:values="values"
@@ -308,7 +353,7 @@ export const InputSlotReplacement = {
 				<template #left>
 					<icon><icon-fa-solid-keyboard/></icon>
 				</template>
-			</lib-input>
+			</lib-simple-input-deprecated>
 		`
   }),
   args: {
@@ -325,13 +370,13 @@ export const NextToButton = {
     }),
     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/{src/runtime/components/LibInput/LibInput.vue → dist/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/dist/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/dist/runtime/components/LibMultiValues/LibMultiValues.stories.d.ts

@@ -4,7 +4,7 @@ declare const meta: {
     component: any;
     title: string;
     args: {
-        values: string[];
+        modelValue: string[];
         border: boolean;
     };
     tags: string[];

package/dist/runtime/components/LibMultiValues/LibMultiValues.stories.js

@@ -5,7 +5,7 @@ const meta = {
   component: LibMultiValues,
   title: "Components/MultiValues",
   args: {
-    values: ["A", "B", "C"],
+    modelValue: ["A", "B", "C"],
     border: true
   },
   tags: ["!test"]
@@ -18,7 +18,7 @@ export const Primary = {
       const inputValue = ref("B");
       const multiValueEl = ref(null);
       const onKeydownEnter = (e) => {
-        if (e.key === "Enter") args.values.push(inputValue.value);
+        if (e.key === "Enter") args.modelValue.push(inputValue.value);
       };
       return {
         args,
@@ -29,7 +29,8 @@ export const Primary = {
     },
     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"
@@ -40,7 +41,7 @@ export const Primary = {
 				<lib-multi-values
 					ref="multiValueEl"
 					v-bind="args"
-					v-model:values="args.values"
+					v-model="args.modelValue"
 				/>
 			</div>
 		`

package/dist/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/dist/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"