@witchcraft/ui 0.3.24 → 0.3.25

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/animations.css

@@ -1 +1 @@
-@utility animate-from-*{--animate-from:--value([length,percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length,percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s ease-in-out linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}
+@utility animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * --value(integer))}@utility -animate-from-*{--animate-from:--value([length],[percentage]);--animate-from:calc(var(--spacing) * -1 * --value(integer))}@theme{--animate-blinkInf:blink 1s linear infinite;@keyframes blink{0%{opacity:0}25%{opacity:1}75%{opacity:1}to{opacity:0}}--animate-slideBgInf:slide-bg 10s ease-in-out linear-infinite;@keyframes slide{0%{background-position:0}to{background-position:100%}}--animate-hide:hide 500ms ease-in;@keyframes hide{0%{opacity:1}to{opacity:0}}--animate-slideInLeft:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInLeft{0%{opacity:0;transform:translateX(var(--animate-from,100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInRight:slideInLeft 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInRight{0%{opacity:0;transform:translateX(var(--animate-from,-100%))}to{opacity:1;transform:translateX(0)}}--animate-slideInUp:slideInUp 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInUp{0%{opacity:0;transform:translateY(var(--animate-from,100%))}to{opacity:1;transform:translateY(0)}}--animate-slideInDown:slideInDown 500ms cubic-bezier(0.16,1,0.3,1);@keyframes slideInDown{0%{opacity:0;transform:translateY(var(--animate-from,-100%))}to{opacity:1;transform:translateY(0)}}--animate-overlayShow:overlayShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes overlayShow{0%{opacity:0}to{opacity:1}}--animate-contentShow:contentShow 500ms cubic-bezier(0.16,1,0.3,1);@keyframes contentShow{0%{opacity:0;transform:translateY(-10%) scale(.96)}to{opacity:1;transform:scale(1)}}}

package/dist/runtime/components/LibColorInput/LibColorInput.d.vue.ts

@@ -36,16 +36,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: (() => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: string;

package/dist/runtime/components/LibColorInput/LibColorInput.vue.d.ts

@@ -36,16 +36,16 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: (() => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: (() => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: string;

package/dist/runtime/components/LibColorPicker/LibColorPicker.d.vue.ts

@@ -40,18 +40,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: ((val: RgbaColor) => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue.d.ts

@@ -40,18 +40,18 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onSave?: ((val: RgbaColor) => any) | undefined;
     "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
+    onSave?: ((val: RgbaColor) => any) | undefined;
 }>, {
     border: boolean;
-    valid: boolean;
     allowAlpha: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
+    valid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.d.vue.ts

@@ -112,8 +112,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     input: (val: InputEvent) => any;
     blur: (val: FocusEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    keydown: (val: KeyboardEvent) => any;
     focus: (val: FocusEvent) => any;
+    keydown: (val: KeyboardEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -124,10 +124,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     onBlur?: ((val: FocusEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue.d.ts

@@ -112,8 +112,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     input: (val: InputEvent) => any;
     blur: (val: FocusEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    keydown: (val: KeyboardEvent) => any;
     focus: (val: FocusEvent) => any;
+    keydown: (val: KeyboardEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -124,10 +124,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     onBlur?: ((val: FocusEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

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

@@ -1,8 +1,9 @@
 <template>
 <div
 	v-if="notification"
-	:class="twMerge(
-  `
+	:class="
+  twMerge(
+    `
 		notification
 		bg-neutral-50
 		dark:bg-neutral-900
@@ -21,9 +22,11 @@
 		focus:border-accent-500
 		focus-within:border-accent-500
 	`,
-  $attrs.class
-)"
-	v-bind="{ ...$attrs, class: void 0 }"
+    $attrs.class,
+    notification.notificationProps?.class
+  )
+"
+	v-bind="{ ...$attrs, ...notification?.notificationProps ?? {}, class: void 0 }"
 	tabindex="0"
 	:data-id="notification.id"
 	ref="notificationEl"

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -77,27 +77,25 @@
 				data-[state=open]:animate-contentShow
 				max-sm:data-[state=open]:animate-slideInUp
 				fixed
-				flex
-				max-h-[80dvh]
-				top-[50%]
-				left-[50%]
+				flex justify-center
+				top-1/2
+				left-1/2
+				w-full
 				sm:translate-x-[-50%]
 				sm:translate-y-[-50%]
-				max-w-[700px]
-				max-sm:bottom-2
+				p-2
+				max-sm:bottom-0
 				max-sm:top-[unset]
-				max-sm:left-2
-				max-sm:right-2
-				max-sm:w-[calc(100%-var(--spacing)*4)]
+				max-sm:left-0
 				z-100
 			"
+			@interact-outside="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 		>
 			<lib-notification
 				class="
 					w-full
 					sm:max-w-[700px]
-					max-w-full
-					max-h-full
+					max-h-[80dvh]
 					top-notification
 					text-md
 					gap-2

package/dist/runtime/components/LibPopup/LibPopup.d.vue.ts

@@ -24,12 +24,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
+    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

package/dist/runtime/components/LibPopup/LibPopup.vue.d.ts

@@ -24,12 +24,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
-    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
+    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -32,18 +32,36 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     options?: TOptions;
     /** @default false */
     requiresAction?: boolean;
+    /**
+     *  If true or a string (the cancel option) ensures the option exists and that is the "default" cancel action when a notification is dismissed in some manner that is not clicking one of the options (escaped, background click, etc.).
+     *
+     * This also enables cancelling via those secondary methods, otherwise the notification won't allow itself to be dismissed.
+     *
+     * @default undefined / false
+     */
     cancellable?: TCancellable;
     /** @default "Ok" */
     default?: TOptions[number];
     /** @default [] */
     dangerous?: TOptions[number][];
-    /** @default false if cancellable, otherwise the default timeout */
+    /**
+     * Overrides the default timeout, can be set to true to just enable it. An entry must be cancellable to have a timeout.
+     *
+     * @default global timeout / false if cancellable is false
+     */
     timeout?: number | boolean;
     icon?: string;
     message: string;
     component?: string | Component;
-    /** By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
+    /** Props for the custom component. By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
     componentProps?: Record<string, any>;
+    /**
+     * Props for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
+     *
+     * The most likely use is needing to adjust the width of fullscreen notifications, but fullscreen notifications have two widths (one for big screens and one for small ones (sm). You will usually want to do something like `{notificationProps: {class: 'sm:max-w-[90dvw]'}}` to change only the large one.
+     *
+     */
+    notificationProps?: Record<string, any>;
 };
 export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
     promise: NotificationPromise;

package/dist/runtime/helpers/NotificationHandler.js

@@ -85,7 +85,6 @@ export class NotificationHandler {
       requiresAction: false,
       options: ["Ok", "Cancel"],
       default: "Ok",
-      cancellable: rawEntry.cancellable,
       ...rawEntry,
       component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : void 0,
       dangerous: rawEntry.dangerous ?? [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -50,9 +50,9 @@
     "failOnWarn": false
   },
   "peerDependencies": {
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "unplugin-icons": "^22.5.0",
-    "vue": "^3.5.27"
+    "vue": "^3.5.30"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -63,20 +63,20 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.0.2",
-    "@iconify/json": "^2.2.437",
-    "@nuxt/kit": "^4.3.1",
-    "@nuxt/schema": "^4.3.1",
+    "@alanscodelog/utils": "^6.1.0",
+    "@iconify/json": "^2.2.450",
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
     "@nuxt/types": "^2.18.1",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.2.1",
     "@witchcraft/nuxt-utils": "^0.3.6",
     "colord": "^2.9.3",
     "colorjs.io": "0.6.0-alpha.1",
     "defu": "^6.1.4",
     "fast-glob": "^3.3.3",
     "metamorphosis": "^0.6.1",
-    "reka-ui": "^2.8.0",
-    "tailwind-merge": "^3.4.0",
+    "reka-ui": "^2.9.2",
+    "tailwind-merge": "^3.5.0",
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vue-component-type-helpers": "^2.2.12"
@@ -88,55 +88,55 @@
     "@alanscodelog/tsconfigs": "^6.2.0",
     "@alanscodelog/vite-config": "^0.0.7",
     "@chromatic-com/storybook": "^3.2.7",
-    "@commitlint/cli": "^20.4.1",
-    "@internationalized/date": "^3.11.0",
+    "@commitlint/cli": "^20.5.0",
+    "@internationalized/date": "^3.12.0",
     "@faker-js/faker": "^10.3.0",
-    "@nuxt/eslint-config": "^1.14.0",
+    "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
-    "@playwright/test": "^1.54.0",
+    "@playwright/test": "^1.58.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-a11y": "^8.6.15",
-    "@storybook/addon-actions": "^8.6.15",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.15",
-    "@storybook/addon-storysource": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/test": "^8.6.15",
+    "@storybook/addon-a11y": "^8.6.18",
+    "@storybook/addon-actions": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/addon-links": "^8.6.18",
+    "@storybook/addon-storysource": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/manager-api": "^8.6.18",
+    "@storybook/test": "^8.6.18",
     "@storybook/test-runner": "^0.22.1",
-    "@storybook/vue3": "^8.6.15",
-    "@storybook/vue3-vite": "^8.6.15",
-    "@tanstack/vue-virtual": "^3.13.18",
-    "@tailwindcss/cli": "^4.1.18",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^24.10.12",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/runtime-core": "^3.5.27",
-    "@vue/runtime-dom": "^3.5.27",
+    "@storybook/vue3": "^8.6.18",
+    "@storybook/vue3-vite": "^8.6.18",
+    "@tanstack/vue-virtual": "^3.13.23",
+    "@tailwindcss/cli": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^24.12.0",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/runtime-core": "^3.5.30",
+    "@vue/runtime-dom": "^3.5.30",
     "@vueuse/components": "^13.9.0",
     "@vueuse/core": "^13.9.0",
-    "autoprefixer": "^10.4.24",
+    "autoprefixer": "^10.4.27",
     "concurrently": "^9.2.1",
-    "eslint": "^9.39.2",
+    "eslint": "^9.39.4",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
-    "nuxt": "^4.3.1",
-    "playwright": "^1.54.0",
-    "playwright-core": "^1.54.0",
+    "nuxt": "^4.4.2",
+    "playwright": "^1.58.2",
+    "playwright-core": "^1.58.2",
     "semantic-release": "^24.2.9",
-    "storybook": "^8.6.15",
+    "storybook": "^8.6.18",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3",
     "unbuild": "^3.6.1",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.1.0",
-    "vue": "^3.5.27",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vue": "^3.5.30",
     "vue-tsc": "3.2.4",
     "wait-on": "^8.0.5"
   },
@@ -176,7 +176,7 @@
     "build:only": "nuxt-module-build build",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "dev": "nuxi dev playground",
-    "storybook": "BROWSER=none storybook dev -p 6006",
+    "storybook": "BROWSER=none storybook dev -p 6006 --no-open",
     "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
     "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
     "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --excludeTags 'skip-smoke-test'\"",

package/src/runtime/assets/animations.css

@@ -1,10 +1,10 @@
 @utility animate-from-* {
-	--animate-from: --value([length, percentage]);
+	--animate-from: --value([length], [percentage]);
 	--animate-from: calc(var(--spacing) * --value(integer));
 }
 
 @utility -animate-from-* {
-	--animate-from: --value([length, percentage]);
+	--animate-from: --value([length], [percentage]);
 	--animate-from: calc(var(--spacing) * -1 * --value(integer));
 }
 

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

@@ -157,3 +157,18 @@ export const CustomMessageComponent: Story = {
 		})
 	}
 }
+
+export const CustomNotificationProps: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error calling protected method
+		notification: handler._createEntry({
+			...Primary.args!.notification,
+			message: "Should be 300px wide",
+			notificationProps: {
+				class: "w-[300px]!"
+			}
+		})
+	}
+}

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

@@ -20,8 +20,11 @@
 		focus:border-accent-500
 		focus-within:border-accent-500
 	`,
-		($attrs as any).class)"
-	v-bind="{ ...$attrs, class: undefined }"
+		($attrs as any).class,
+		notification.notificationProps?.class
+	)
+	"
+	v-bind="{ ...$attrs, ...(notification?.notificationProps ?? {}), class: undefined }"
 	tabindex="0"
 	:data-id="notification.id"
 	ref="notificationEl"

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

@@ -34,14 +34,16 @@ export const Primary: Story = {
 			const paragraphs = `\n Simulating lots of text:\n${faker.lorem.paragraphs(20)}`
 			const extraText = computed(() => lotsOfText.value ? paragraphs : "")
 
-			const notifyRequiresAction = () => {
+			const notifyRequiresAction = (options: any) => {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification that requires action. Pick an option:${extraText.value}`,
+					message: `This is a cancellable notification that requires action. Pick an option:${extraText.value}`,
 					requiresAction: true,
 					options: ["Ok", "Default Answer", "Cancel"],
-					default: "Default Answer"
+					default: "Default Answer",
+					cancellable: true,
+					...options
 				})
 			}
 
@@ -49,8 +51,9 @@ export const Primary: Story = {
 				count++
 				void handler.notify({
 					title: withTitle.value ? `Notification(${count})` : undefined,
-					message: `This is a notification that has a dangerous option. Pick an option:${extraText.value}`,
+					message: `This is a cancellable notification that has a dangerous option. Pick an option:${extraText.value}`,
 					options: ["Ok", "Default Answer", "Dangerous Option", "Cancel"],
+					cancellable: true,
 					default: "Default Answer",
 					dangerous: ["Dangerous Option"]
 				})
@@ -105,9 +108,10 @@ export const Primary: Story = {
 		template: `
 	<lib-root :outline="args.outline" :notification-handler="handler">
 		<lib-button :label="'Notify Timeoutable'" @click="notifyTimeoutable()"></lib-button>
-		<lib-button :label="'Notify RequiresAction'" @click="notifyRequiresAction()"></lib-button>
+		<lib-button :label="'Notify RequiresAction (Cancellable)'" @click="notifyRequiresAction()"></lib-button>
+		<lib-button :label="'Notify RequiresAction (Cancellable) - Custom Width'" @click="notifyRequiresAction({cancellable:true,notificationProps: {class: 'sm:max-w-[90dvw]'}})"></lib-button>
 		<lib-button :label="'Notify Non-Cancellable that RequiresAction'" @click="notifyNonCancellableRequiresAction()"></lib-button>
-		<lib-button :label="'Notify With Dangerous Option'" @click="notifyWithDangerousOption()"></lib-button>
+		<lib-button :label="'Notify With Dangerous Option (Cancellable)'" @click="notifyWithDangerousOption()"></lib-button>
 		<lib-button :label="'Notify Non-Cancellable'" @click="notifyNonCancellable()"></lib-button>
 		<lib-checkbox v-model="lotsOfText">Use lots of text</lib-checkbox>
 		<lib-checkbox v-model="disableTimeout">Disable Timeout</lib-checkbox>

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

@@ -77,27 +77,25 @@
 				data-[state=open]:animate-contentShow
 				max-sm:data-[state=open]:animate-slideInUp
 				fixed
-				flex
-				max-h-[80dvh]
-				top-[50%]
-				left-[50%]
+				flex justify-center
+				top-1/2
+				left-1/2
+				w-full
 				sm:translate-x-[-50%]
 				sm:translate-y-[-50%]
-				max-w-[700px]
-				max-sm:bottom-2
+				p-2
+				max-sm:bottom-0
 				max-sm:top-[unset]
-				max-sm:left-2
-				max-sm:right-2
-				max-sm:w-[calc(100%-var(--spacing)*4)]
+				max-sm:left-0
 				z-100
 			"
+			@interact-outside="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 		>
 			<lib-notification
 				class="
 					w-full
 					sm:max-w-[700px]
-					max-w-full
-					max-h-full
+					max-h-[80dvh]
 					top-notification
 					text-md
 					gap-2

package/src/runtime/helpers/NotificationHandler.ts

@@ -97,7 +97,6 @@ export class NotificationHandler<
 			requiresAction: false,
 			options: ["Ok", "Cancel"],
 			default: "Ok",
-			cancellable: rawEntry.cancellable,
 			...rawEntry,
 			component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : undefined,
 			dangerous: rawEntry.dangerous ?? [],
@@ -218,18 +217,36 @@ export type RawNotificationEntry<
 	options?: TOptions
 	/** @default false */
 	requiresAction?: boolean
+	/**
+	 *  If true or a string (the cancel option) ensures the option exists and that is the "default" cancel action when a notification is dismissed in some manner that is not clicking one of the options (escaped, background click, etc.).
+	 *
+	 * This also enables cancelling via those secondary methods, otherwise the notification won't allow itself to be dismissed.
+	 *
+	 * @default undefined / false
+	 */
 	cancellable?: TCancellable
 	/** @default "Ok" */
 	default?: TOptions[number]
 	/** @default [] */
 	dangerous?: TOptions[number][]
-	/** @default false if cancellable, otherwise the default timeout */
+	/**
+	 * Overrides the default timeout, can be set to true to just enable it. An entry must be cancellable to have a timeout.
+	 *
+	 * @default global timeout / false if cancellable is false
+	 */
 	timeout?: number | boolean
 	icon?: string
 	message: string
 	component?: string | Component
-	/** By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
+	/** Props for the custom component. By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
 	componentProps?: Record<string, any>
+	/**
+	 * Props for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
+	 *
+	 * The most likely use is needing to adjust the width of fullscreen notifications, but fullscreen notifications have two widths (one for big screens and one for small ones (sm). You will usually want to do something like `{notificationProps: {class: 'sm:max-w-[90dvw]'}}` to change only the large one.
+	 *
+	 */
+	notificationProps?: Record<string, any>
 }
 
 export type NotificationEntry<