@witchcraft/ui 0.3.23 → 0.3.25

package/README.md

@@ -31,6 +31,7 @@ It does not install "@nuxtjs/tailwindcss" for now since it's not compatible with
 // without Nuxt:
 @import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
+@import "@witchcraft/ui/animations.css";
 // source used components
 @source "@witchcraft/ui/components";
 
@@ -117,6 +118,7 @@ See [@witchcraft/editor/vite.config.dev.ts].
 ```css
 @import "@witchcraft/ui/utils.css";
 @import "@witchcraft/ui/base.css";
+@import "@witchcraft/ui/animations.css";
 @source "/path/to/node_modules/@witchcraft/ui/src/runtime/components";
 ```
 Base just contains animation keyframes, basic styles for vue animations, and some basic global styles. They will get imported regardless of whether they are used since otherwise tailwind does not detect they are being used.

package/dist/module.d.mts

@@ -35,7 +35,7 @@ interface ModuleOptions {
      */
     mainCssFile?: string;
     /** @internal */
-    _playgroundWorkaround?: boolean;
+    _playgroundWorkaround?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

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

package/dist/module.mjs

@@ -37,7 +37,7 @@ const module$1 = defineNuxtModule({
     componentPrefix: "W",
     debug: true,
     mainCssFile: "~/assets/css/tailwind.css",
-    _playgroundWorkaround: false
+    _playgroundWorkaround: void 0
   },
   moduleDependencies: {
     // not working, see note for unpluginOptions
@@ -82,7 +82,7 @@ const module$1 = defineNuxtModule({
     addTemplate({
       filename: "witchcraft-ui.css",
       write: true,
-      getContents: () => options._playgroundWorkaround ? crop`
+      getContents: () => options._playgroundWorkaround === "@witchcraft/ui" ? crop`
 					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
 					${indent(tailwindFiles.map((_) => `@import "${_.filepath}";`).join("\n"), 5)}
 					${indent(filteredComponentsInfo.map((_) => `@source "${_.filepath}";`).join("\n"), 5)}

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/LibButton/LibButton.d.vue.ts

@@ -12,8 +12,8 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: string;
     color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -12,8 +12,8 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: string;
     color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -25,8 +25,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     onSubmit?: ((val: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -25,8 +25,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props
     onSubmit?: ((val: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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,14 +124,14 @@ 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;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     valid: 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,14 +124,14 @@ 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;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     valid: boolean;

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

@@ -12,8 +12,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     id: string;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     valid: boolean;

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

@@ -12,8 +12,8 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     id: string;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     valid: 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/LibPalette/LibPalette.d.vue.ts

@@ -8,8 +8,8 @@ declare const __VLS_export: import("vue").DefineComponent<LinkableByIdProps & Ba
     theme?: Theme;
 }> & Readonly<{}>, {
     theme: Theme;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -8,8 +8,8 @@ declare const __VLS_export: import("vue").DefineComponent<LinkableByIdProps & Ba
     theme?: Theme;
 }> & Readonly<{}>, {
     theme: Theme;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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/components/LibProgressBar/LibProgressBar.d.vue.ts

@@ -24,8 +24,8 @@ Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     autohideOnComplete: number;

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

@@ -24,8 +24,8 @@ Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     autohideOnComplete: number;

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

@@ -65,8 +65,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props & {
     "onFocus:parent"?: (() => any) | undefined;
 }>, {
     id: string;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     recordingTitle: string;

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

@@ -65,8 +65,8 @@ declare const __VLS_export: import("vue").DefineComponent<Props & {
     "onFocus:parent"?: (() => any) | undefined;
 }>, {
     id: string;
-    readonly: boolean;
     disabled: boolean;
+    readonly: boolean;
     border: boolean;
     unstyle: boolean;
     recordingTitle: string;

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.23",
+  "version": "0.3.25",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -32,7 +32,7 @@
     },
     "./utils.css": "./src/runtime/assets/utils.css",
     "./base.css": "./src/runtime/assets/base.css",
-    "./animation.css": "./src/runtime/assets/animations.css",
+    "./animations.css": "./src/runtime/assets/animations.css",
     "./nuxt": {
       "types": "./dist/types.d.mts",
       "import": "./dist/module.mjs"
@@ -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/module.ts

@@ -75,7 +75,7 @@ export interface ModuleOptions {
 	 */
 	mainCssFile?: string
 	/** @internal */
-	_playgroundWorkaround?: boolean
+	_playgroundWorkaround?: string
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -93,7 +93,7 @@ export default defineNuxtModule<ModuleOptions>({
 		componentPrefix: "W",
 		debug: true,
 		mainCssFile: "~/assets/css/tailwind.css",
-		_playgroundWorkaround: false
+		_playgroundWorkaround: undefined
 	},
 	moduleDependencies: {
 		// not working, see note for unpluginOptions
@@ -143,7 +143,7 @@ export default defineNuxtModule<ModuleOptions>({
 		addTemplate({
 			filename: "witchcraft-ui.css",
 			write: true,
-			getContents: () => options._playgroundWorkaround
+			getContents: () => options._playgroundWorkaround === "@witchcraft/ui"
 				? crop`
 					${indent(themeAsTailwindCss(theme, themeConvertionOpts), 5)}
 					${indent(tailwindFiles.map(_ => `@import "${_.filepath}";`).join("\n"), 5)}

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/tailwind.css

@@ -1,4 +1,4 @@
-/* For storybook, **NOT EXPORTED**. The nuxt module creates it's own version of this file by looking at all css files in this folder. See it for details. */
+/* For storybook, **NOT EXPORTED**. The nuxt module creates it's own version of this file by looking at all css files in this folder. See it for details. We also need to be sure to add them to the exports. */
 @import "tailwindcss" source("../../");
 @import "./theme.css";
 @import "./animations.css";

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<