@witchcraft/ui 0.3.24 → 0.3.26

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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/assets/utils.css

@@ -1 +1 @@
-@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}@utility no-truncate{overflow:visible;text-overflow:unset;white-space:normal}
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility mix-from-*{--mix-from:--value(--color-*);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to,transparent) var(--mix-percentage,50%))}@utility mix-to-*{--mix-to:--value(--color-*);--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to,transparent) var(--mix-percentage,50%))}@utility tint-*{--mix-from:--value(--color-*);--mix-to:#fff;--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to) var(--mix-percentage,20%))}@utility shade-*{--mix-from:--value(--color-*);--mix-to:#000;--mix-percentage:calc(--modifier(integer) * 1%);--mix:color-mix(in srgb,var(--mix-from),var(--mix-to) var(--mix-percentage))}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}@utility no-truncate{overflow:visible;text-overflow:unset;white-space:normal}

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/helpers/NotificationHandler.d.ts

@@ -32,18 +32,40 @@ 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. */
-    componentProps?: Record<string, any>;
+    /** Props for the custom component. By default the component is passed the message, the messageClasses, and the full notification. Both will be overriden if you set them on componentProps. */
+    componentProps?: Record<string, any> & {
+        notification: NotificationEntry;
+        message: string;
+        messageClasses: string;
+    };
+    /**
+     * 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

@@ -57,13 +57,6 @@ export class NotificationHandler {
         );
       }
     }
-    if (entry.timeout !== void 0 && !entry.cancellable) {
-      throw new Error(
-        crop`Cannot timeout notification that is not cancellable:
-					${indent(pretty(entry), 5)}
-					`
-      );
-    }
     if (entry.timeout !== void 0 && entry.requiresAction) {
       throw new Error(
         crop`Cannot timeout notification that requires action:
@@ -85,7 +78,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 ?? [],
@@ -153,7 +145,11 @@ export class NotificationHandler {
     const remaining = notification.timeout - notification._timer.elapsedBeforePause;
     clearTimeout(notification._timer.id);
     notification._timer.id = setTimeout(() => {
-      notification.resolve(notification.cancellable);
+      if (notification.cancellable) {
+        notification.resolve(notification.cancellable);
+      } else {
+        notification.resolve(notification.default);
+      }
     }, remaining);
   }
   static resolveToDefault(notification) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "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.2.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.5",
+    "tailwind-merge": "^3.5.0",
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vue-component-type-helpers": "^2.2.12"
@@ -85,58 +85,58 @@
     "@alanscodelog/commitlint-config": "^3.1.2",
     "@alanscodelog/eslint-config": "^6.3.1",
     "@alanscodelog/semantic-release-config": "^6.0.2",
-    "@alanscodelog/tsconfigs": "^6.2.0",
+    "@alanscodelog/tsconfigs": "^6.3.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/assets/utils.css

@@ -115,6 +115,49 @@
 	--bars-fg-width: calc(--value(integer) * 1%, 50%);
 }
 
+/* Mix utils can be used like bg-(--mix) mix-from-red-500 mix-to-blue-500/20 (where 20 is the percentage of "to"). It mixes with transparent if no from/to. There are also tint-* and shade-* variants to mix with white and black respectively. */
+@utility mix-from-* {
+	--mix-from: --value(--color-*);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to, transparent) var(--mix-percentage, 50%)
+	);
+}
+
+@utility mix-to-* {
+	--mix-to: --value(--color-*);
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to, transparent) var(--mix-percentage, 50%)
+	);
+}
+
+@utility tint-* {	
+	--mix-from: --value(--color-*);
+	--mix-to: white; 
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to) var(--mix-percentage, 20%)
+	);
+}
+
+@utility shade-* {
+	--mix-from: --value(--color-*);
+	--mix-to: black;
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to) var(--mix-percentage)
+	);
+}
+
+
 @utility scrollbar-hidden {
 	/* IE and Edge */
 	-ms-overflow-style: none;

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

@@ -71,12 +71,6 @@ export class NotificationHandler<
 					`)
 			}
 		}
-		if (entry.timeout !== undefined && !entry.cancellable) {
-			throw new Error(
-				crop`Cannot timeout notification that is not cancellable:
-					${indent(pretty(entry), 5)}
-					`)
-		}
 		if (entry.timeout !== undefined && entry.requiresAction) {
 			throw new Error(
 				crop`Cannot timeout notification that requires action:
@@ -97,7 +91,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 ?? [],
@@ -178,7 +171,11 @@ export class NotificationHandler<
 		const remaining = notification.timeout - notification._timer.elapsedBeforePause
 		clearTimeout(notification._timer.id)
 		notification._timer.id = setTimeout(() => {
-			notification.resolve(notification.cancellable)
+			if (notification.cancellable) {
+				notification.resolve(notification.cancellable)
+			} else {
+				notification.resolve(notification.default)
+			}
 		}, remaining)
 	}
 
@@ -218,18 +215,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. */
-	componentProps?: Record<string, any>
+	/** Props for the custom component. By default the component is passed the message, the messageClasses, and the full notification. Both will be overriden if you set them on componentProps. */
+	componentProps?: Record<string, any> & { notification: NotificationEntry, message: string, messageClasses: string }
+	/**
+	 * 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<