@witchcraft/ui 0.3.25 → 0.3.26

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.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/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;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => 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;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => 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;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => 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;
     };
-    valid: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, 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;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => 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;
     };
-    valid: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, 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;
-    focus: (val: FocusEvent) => any;
     keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => 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;
-    focus: (val: FocusEvent) => any;
     keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => 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/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

@@ -53,8 +53,12 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     icon?: string;
     message: string;
     component?: string | Component;
-    /** 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 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.
      *

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:
@@ -152,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.25",
+  "version": "0.3.26",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.1.0",
+    "@alanscodelog/utils": "^6.2.0",
     "@iconify/json": "^2.2.450",
     "@nuxt/kit": "^4.4.2",
     "@nuxt/schema": "^4.4.2",
@@ -75,7 +75,7 @@
     "defu": "^6.1.4",
     "fast-glob": "^3.3.3",
     "metamorphosis": "^0.6.1",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.9.5",
     "tailwind-merge": "^3.5.0",
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
@@ -85,7 +85,7 @@
     "@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.5.0",
@@ -94,7 +94,7 @@
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "=1.58.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@storybook/addon-a11y": "^8.6.18",
     "@storybook/addon-actions": "^8.6.18",
@@ -125,8 +125,8 @@
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
     "nuxt": "^4.4.2",
-    "playwright": "^1.58.2",
-    "playwright-core": "^1.58.2",
+    "playwright": "=1.58.2",
+    "playwright-core": "=1.58.2",
     "semantic-release": "^24.2.9",
     "storybook": "^8.6.18",
     "storybook-dark-mode": "^4.0.2",

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/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:
@@ -177,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)
 	}
 
@@ -238,8 +236,8 @@ export type RawNotificationEntry<
 	icon?: string
 	message: string
 	component?: string | Component
-	/** 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 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.
 	 *