@nova-design-system/nova-vue 3.12.0 → 3.14.0-beta.0

package/README.md

@@ -5,20 +5,18 @@
 - [Nova Components Vue](#nova-components-vue)
   - [Key Features](#key-features)
   - [Installation](#installation)
-  - [Setup Using Tailwind (Recommended)](#setup-using-tailwind-recommended)
+  - [Setting up Tailwind](#setting-up-tailwind)
+    - [About Tailwind and the Nova Plugin](#about-tailwind-and-the-nova-plugin)
     - [1. Install Tailwind CSS and the Vite Plugin](#1-install-tailwind-css-and-the-vite-plugin)
     - [2. Configure the Vite Plugin](#2-configure-the-vite-plugin)
     - [3. Create `tailwind.config.ts`](#3-create-tailwindconfigts)
     - [4. Configure Tailwind and Nova Plugin in `main.css`](#4-configure-tailwind-and-nova-plugin-in-maincss)
     - [5. Register NovaComponents and include the Nova Tokens](#5-register-novacomponents-and-include-the-nova-tokens)
-    - [6. Use Nova Components and Tailwind Utilities](#6-use-nova-components-and-tailwind-utilities)
+    - [6. Use Nova Components with Tailwind Utilities](#6-use-nova-components-with-tailwind-utilities)
     - [7. Setup the Nova Font](#7-setup-the-nova-font)
     - [Creating Your Own Style Components with Tailwind](#creating-your-own-style-components-with-tailwind)
-  - [Setup Without Tailwind (Not Recommended)](#setup-without-tailwind-not-recommended)
-    - [1. Register NovaComponents and include the Nova CSS.](#1-register-novacomponents-and-include-the-nova-css)
-    - [2. Use Nova Components](#2-use-nova-components)
   - [Nova Font Pro Integration](#nova-font-pro-integration)
-    - [Option 1: Import in Main Entry (Recommended)](#option-1-import-in-main-entry-recommended)
+    - [Option 1: Import in Global CSS (Recommended)](#option-1-import-in-global-css-recommended)
     - [Option 2: HTML Integration](#option-2-html-integration)
 
 
@@ -27,7 +25,7 @@
 ## Key Features
 
 - **Lightweight Integration**: Leverage Nova Web Components with minimal configuration in Vue.
-- **Customizable Styling**: Use Tailwind (recommended) or Nova’s utility classes to quickly style components.
+- **Customizable Styling**: Use Tailwind’s utility classes with the Nova Tailwind theme and plugin for token-driven styling and layouts.
 - **Dark Mode Ready**: Toggle dark mode by adding the `dark` class to your `body` element.
 - **Nova Font Pro Support**: Easily integrate Nova’s custom font for a consistent design experience.
 
@@ -48,19 +46,31 @@ yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @n
 ```
 
 > In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the [Developers' setup guide](https://wiki.eliagroup.eu/spaces/EAing/pages/89296007/2.3.3.10+Developer+Setup#id-2.3.3.10DeveloperSetup-NPMconfig), you need to turn off the SSL certificate verification:
+>
+> ```bash
+> npm config set strict-ssl false
+> ```
 
-```bash
-npm config set strict-ssl false
-```
+---
 
-## Setup Using Tailwind (Recommended)
+## Setting up Tailwind
 
-We highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
+Nova Vue requires Tailwind CSS for styling. Tailwind provides a powerful utility-first workflow and an optimized bundle size. Nova includes a dedicated Tailwind theme and plugin that map Nova’s design tokens to Tailwind’s theme and utilities, enabling consistent, token-driven styling across your app.
 
 > **Tailwind Version**
 > This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
 
-Below is an example setup using the **vue cli with vite**. If you're using another framework, such as nuxt, please refer to the [Tailwind Installation Guide](https://tailwindcss.com/docs/installation).
+### About Tailwind and the Nova Plugin
+
+- **What is Tailwind?** A utility-first CSS framework with low-level, composable classes (flex, grid, spacing, color, typography) to rapidly build UIs.
+- **Nova Tokens**: Nova ships design tokens as CSS variables (via the Spark and Ocean themes) covering colors, spacing, typography, radii, shadows, and more.
+- **Integration**:
+  - `novaTailwindTheme` wires Nova tokens into Tailwind’s theme scales.
+  - The Nova Tailwind plugin exposes utilities and variants that reference those tokens, so your Tailwind classes resolve to Nova’s token values at runtime.
+- **Why import tokens CSS?** Import one token CSS file (`spark.css` or `ocean.css`) so the underlying CSS variables exist at runtime. The Tailwind utilities generated by the plugin read from these variables.
+- **Do not mix with legacy utilities**: When using Tailwind, do not import `@nova-design-system/nova-base/dist/css/nova-utils.css` to avoid redundant CSS and larger bundles.
+
+Below is an example setup using the **Vue CLI with Vite**. If you're using another framework, such as Nuxt, please refer to the [Tailwind Installation Guide](https://tailwindcss.com/docs/installation).
 
 ### 1. Install Tailwind CSS and the Vite Plugin
 
@@ -92,7 +102,6 @@ export default defineConfig({
     },
   },
 })
-
 ```
 
 ### 3. Create `tailwind.config.ts`
@@ -110,7 +119,7 @@ export default {
 
 ### 4. Configure Tailwind and Nova Plugin in `main.css`
 
-in `src/assets/main.css`:
+In `src/assets/main.css`:
 
 ```css
 @import 'tailwindcss';
@@ -125,18 +134,18 @@ in `src/assets/main.css`:
 > **Dark Mode**
 > To enable dark mode, add the `dark` class to the `<body>` element.
 
-
 ### 5. Register NovaComponents and include the Nova Tokens
-Register the Nova Components Vue plugin in your `main.ts` file, and include the nova tokens (Spark or Ocean theme) css file:
 
-```typescript
+Register the Nova Components Vue plugin in your `main.ts` file, and include exactly one of the Nova tokens (Spark or Ocean) CSS files:
+
+```ts
 import './assets/main.css'
-import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
+import '@nova-design-system/nova-base/dist/css/spark.css' // or ocean.css
 
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
+import { NovaComponents } from '@nova-design-system/nova-vue/plugin'
 
 const app = createApp(App)
 
@@ -146,14 +155,16 @@ app.use(NovaComponents)
 app.mount('#app')
 ```
 
-### 6. Use Nova Components and Tailwind Utilities
+> When using Tailwind, do not import `@nova-design-system/nova-base/dist/css/nova-utils.css`.
 
-```html
+### 6. Use Nova Components with Tailwind Utilities
+
+```vue
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from 'vue'
 import { NvButton } from '@nova-design-system/nova-vue'
 
-const count = ref(0);
+const count = ref(0)
 </script>
 
 <template>
@@ -165,7 +176,7 @@ const count = ref(0);
 </template>
 ```
 
-> Note: **We have full typescript and intellisense support for Nova components.** If you do not see the autocomplete options, make sure you uninstall Volar or Vetur, and use the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) Extension only.
+> Note: **We have full TypeScript and IntelliSense support for Nova components.** If you do not see autocomplete options, uninstall Volar/Vetur and use the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension only.
 
 ### 7. Setup the Nova Font
 
@@ -186,23 +197,23 @@ If you find you’re repeating the same set of utility classes for certain UI el
 
 Then in your markup, instead of:
 
-```jsx
+```html
 <div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
-  {/* Content */}
+  <!-- Content -->
 </div>
 <div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
-  {/* Content */}
+  <!-- Content -->
 </div>
 ```
 
 You can use your new `card` class:
 
-```jsx
+```html
 <div class="card">
-  {/* Content */}
+  <!-- Content -->
 </div>
 <div class="card">
-  {/* Content */}
+  <!-- Content -->
 </div>
 ```
 
@@ -210,82 +221,19 @@ This ensures consistent styling and keeps your markup clean. Any colors or spaci
 
 ---
 
-## Setup Without Tailwind (Not Recommended)
-
-If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer less options, and lacks the flexibility and optimizations of Tailwind.
-
-### 1. Register NovaComponents and include the Nova CSS.
-
-After installing the nova packages, you'll need to include the CSS for the theme and the utils. Then you register the Nova Components Vue plugin.
-
-In your `main.ts` file:
-
-```typescript
-import './assets/main.css'
-import '@nova-design-system/nova-base/dist/css/nova-utils.css';
-import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
-
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
-
-const app = createApp(App)
-
-app.use(router)
-app.use(NovaComponents)
-
-app.mount('#app')
-```
-
-### 2. Use Nova Components
-
-```html
-<script setup lang="ts">
-import { ref } from 'vue';
-import { NvButton } from '@nova-design-system/nova-vue'
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex items-center justify-center">
-    <NvButton danger @click="count++">
-      Count is {{ count }}
-    </NvButton>
-  </div>
-</template>
-```
-
----
-
 ## Nova Font Pro Integration
 
 > [!WARNING]
 > Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project.
-> To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
-
- Once you have the URL, you can integrate it using any of these methods:
-
-### Option 1: Import in Main Entry (Recommended)
-In your `main.ts`:
+> To get the Nova Fonts URL, **please contact us via Teams** or get the URL in the Nova Design System [internal wiki](https://dev.azure.com/elia-digitization/Nova/_wiki/wikis/Nova.wiki/30245/Nova-Font-Pro).
 
-```typescript
-import './assets/main.css'
-import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
-import 'https://novaassets.azureedge.net/fonts/nova-fonts-pro.css';
+Once you have the URL, you can integrate it using any of these methods:
 
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
+### Option 1: Import in Global CSS (Recommended)
+In your `src/assets/main.css`:
 
-const app = createApp(App)
-
-app.use(router)
-app.use(NovaComponents)
-
-app.mount('#app')
+```css
+@import url('contact-us-for-URL/nova-fonts-pro.css');
 ```
 
 ### Option 2: HTML Integration
@@ -295,7 +243,7 @@ In your `index.html`:
 <!DOCTYPE html>
 <html>
 <head>
-  <link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
+  <link rel="stylesheet" href="contact-us-for-URL/nova-fonts-pro.css">
 </head>
 <body>
   <div id="app"></div>

package/dist/generated/components.d.ts

@@ -55,6 +55,8 @@ export declare const NvIconbutton: import("vue").DefineSetupFnComponent<JSX.NvIc
 export declare const NvLoader: import("vue").DefineSetupFnComponent<JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvLoader & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvMenu: import("vue").DefineSetupFnComponent<JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvMenuitem: import("vue").DefineSetupFnComponent<JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
+export declare const NvNotification: import("vue").DefineSetupFnComponent<JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+export declare const NvNotificationcontainer: import("vue").DefineSetupFnComponent<JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvPopover: import("vue").DefineSetupFnComponent<JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
 export declare const NvRow: import("vue").DefineSetupFnComponent<JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvStack: import("vue").DefineSetupFnComponent<JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;

package/dist/generated/components.js

@@ -99,6 +99,8 @@ export const NvCalendar = /*@__PURE__*/ defineContainer('nv-calendar', undefined
     'showActions',
     'shortcuts',
     'showWeekNumbers',
+    'cancelLabel',
+    'primaryLabel',
     'singleDateChange',
     'rangeDateChange',
     'valueChanged'
@@ -532,6 +534,21 @@ export const NvMenuitem = /*@__PURE__*/ defineContainer('nv-menuitem', undefined
     'name',
     'menuitemSelected'
 ]);
+export const NvNotification = /*@__PURE__*/ defineContainer('nv-notification', undefined, [
+    'uid',
+    'feedback',
+    'emphasis',
+    'heading',
+    'message',
+    'icon',
+    'dismissible',
+    'hidden',
+    'initiallyHidden',
+    'hiddenChanged'
+], 'hidden', 'hidden-changed');
+export const NvNotificationcontainer = /*@__PURE__*/ defineContainer('nv-notificationcontainer', undefined, [
+    'position'
+]);
 export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined, [
     'triggerElement',
     'open',

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from './plugin';
+export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from './plugin';
+export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';

package/dist/plugin.d.ts

@@ -8,9 +8,19 @@
  * By providing custom implementations, we ensure that event names are
  * properly transformed, allowing Stencil components to work seamlessly in Vue.
  */
-import { Plugin } from 'vue';
+import { App } from 'vue';
+import { type NotificationServiceOptions } from './providers/NotificationService';
 /**
- * This is the Vue plugin that is used to define the custom elements and event
- * handlers.
+ * Configuration options for the NovaComponents plugin.
  */
-export declare const NovaComponents: Plugin;
+export interface NovaComponentsOptions {
+    /** Notification service configuration options. */
+    notifications?: NotificationServiceOptions;
+}
+/**
+ * This is the Vue plugin that is used to define the custom elements, event
+ * handlers, and includes the notification service.
+ */
+export declare const NovaComponents: {
+    install(app: App, options?: NovaComponentsOptions): Promise<void>;
+};

package/dist/plugin.js

@@ -9,6 +9,7 @@
  * properly transformed, allowing Stencil components to work seamlessly in Vue.
  */
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+import { NvNotificationService, } from './providers/NotificationService';
 /**
  * Transforms the event name to kebab-case.
  * @param {string} eventName - The name of the event.
@@ -39,15 +40,18 @@ const ael = (el, eventName, cb, opts) => el.addEventListener(transformEventName(
  */
 const rel = (el, eventName, cb, opts) => el.removeEventListener(transformEventName(eventName), cb, opts);
 /**
- * This is the Vue plugin that is used to define the custom elements and event
- * handlers.
+ * This is the Vue plugin that is used to define the custom elements, event
+ * handlers, and includes the notification service.
  */
 export const NovaComponents = {
-    async install() {
+    async install(app, options = {}) {
+        // Define custom elements with event handling
         defineCustomElements(window, {
             ce: (eventName, opts) => new CustomEvent(transformEventName(eventName), opts),
             ael,
             rel,
         });
+        // Install notification service
+        NvNotificationService.install(app, options.notifications);
     },
 };

package/dist/providers/NotificationService.d.ts

@@ -0,0 +1,84 @@
+import { App, type Ref, type Component } from 'vue';
+import { NotificationEmphasis, FeedbackColors, NotificationPosition } from '../index';
+/**
+ * Action callbacks for notifications. Will render buttons automatically.
+ */
+export interface NotificationAction {
+    /** The label of the action. */
+    label: string;
+    /** The callback to execute when the action is clicked. */
+    onClick: () => void;
+}
+/**
+ * Options for creating a notification.
+ */
+export interface NotificationOptions {
+    /** Unique identifier for the notification. If not provided, one will be generated. */
+    id?: string;
+    /** Short and concise text for the notification heading. */
+    heading?: string;
+    /** Main content of the notification. */
+    message?: string;
+    /** Whether the notification can be manually dismissed via close button. */
+    dismissible?: boolean;
+    /** Adjusts the emphasis to make the notification more or less visually
+     * prominent to users. Use this to draw attention to important actions or
+     * reduce focus on less critical ones */
+    emphasis?: `${NotificationEmphasis}`;
+    /** Type of the notification, used to determine the color and default icon. */
+    feedback?: `${FeedbackColors}`;
+    /** Custom icon name to override the default icon. */
+    icon?: string;
+    /** Notification actions */
+    actions?: NotificationAction[];
+    /** Custom components for the notification actions. */
+    actionSlot?: Component;
+}
+/**
+ * A notification with all required fields populated.
+ */
+export interface Notification extends NotificationOptions {
+    /** Timestamp when the notification was created. */
+    createdAt: number;
+}
+/**
+ * Context value provided by the NotificationService.
+ */
+export interface NotificationContextValue {
+    /** Reactive array of active notifications. */
+    notifications: Ref<Notification[]>;
+    /** Function to show a new notification. Returns the notification ID. */
+    show: (options: NotificationOptions) => string;
+    /** Function to dismiss a specific notification by ID. This will remove the
+     * notification after the animation completes */
+    dismiss: (id: string) => void;
+    /** Function to immediately remove a specific notification by ID. */
+    remove: (id: string) => void;
+    /** Function to remove all active notifications immediately. */
+    removeAll: () => void;
+}
+/**
+ * Configuration options for the NotificationService plugin.
+ */
+export interface NotificationServiceOptions {
+    /** Position of the notification container on the screen. */
+    position?: `${NotificationPosition}`;
+    /** Maximum number of notifications to display at once. */
+    maxNotifications?: number;
+    /** Additional CSS class name for the notification container. */
+    className?: string;
+}
+/**
+ * Vue plugin for Nova notifications.
+ */
+export declare const NvNotificationService: {
+    install(app: App, options?: NotificationServiceOptions): void;
+};
+/**
+ * Composable to use notifications in any component.
+ *
+ * @returns {NotificationContextValue} The notification context
+ * @throws {Error} If used outside of an app with NvNotificationService installed
+ */
+export declare const useNotifications: () => NotificationContextValue;
+export default NvNotificationService;

package/dist/providers/NotificationService.js

@@ -0,0 +1,215 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { ref, createApp, h, } from 'vue';
+import { NvButton, NvNotification, NvNotificationcontainer, } from '../generated/components';
+/**
+ * Utility function to generate unique IDs.
+ *
+ * @returns {string} A unique identifier string
+ */
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+/**
+ * Utility function to unwrap a notification element from a ref.
+ * @param {NvNotificationRef} el The notification element ref
+ * @returns {HTMLNvNotificationElement | null} The notification element
+ */
+const unwrapNotificationEl = (el) => {
+    if (!el)
+        return null;
+    return '$el' in el ? el.$el : el;
+};
+class NotificationManager {
+    notifications = ref([]);
+    options;
+    containerApp = null;
+    constructor(options = {}) {
+        this.options = {
+            position: options.position || 'top-right',
+            maxNotifications: options.maxNotifications || 50,
+            className: options.className || '',
+        };
+        this.createContainer();
+    }
+    // keep track of all notification refs by id
+    elRefs = new Map();
+    // small helper to bind/unbind refs per id
+    setElRef = (id) => (el) => {
+        if (el)
+            this.elRefs.set(id, el);
+        else
+            this.elRefs.delete(id);
+    };
+    createContainer() {
+        // Create container element
+        const containerEl = document.createElement('div');
+        containerEl.id = 'nova-notification-container';
+        document.body.appendChild(containerEl);
+        // Create Vue app for the container
+        this.containerApp = createApp({
+            setup: () => {
+                return () => {
+                    const items = this.notifications.value.map((notification) => {
+                        const hasCustomActions = (notification.actions && notification.actions.length > 0) ||
+                            !!notification.actionSlot;
+                        const actionChildren = [];
+                        notification.actions?.forEach((action) => {
+                            actionChildren.push(h(NvButton, { onClick: action.onClick, emphasis: 'low', size: 'sm' }, { default: () => action.label }));
+                        });
+                        if (notification.actionSlot) {
+                            actionChildren.push(h(notification.actionSlot));
+                        }
+                        const actionContainer = hasCustomActions
+                            ? h('div', { slot: 'actions' }, actionChildren)
+                            : null;
+                        return h(NvNotification, {
+                            key: notification.id,
+                            ref: this.setElRef(notification.id),
+                            heading: notification.heading,
+                            message: notification.message,
+                            dismissible: notification.dismissible,
+                            emphasis: notification.emphasis,
+                            feedback: notification.feedback,
+                            icon: notification.icon,
+                            initiallyHidden: true,
+                            onHiddenChanged: (event) => {
+                                if (event.detail)
+                                    this.handleNotificationClose(notification.id);
+                            },
+                        }, {
+                            default: () => (actionContainer ? [actionContainer] : null),
+                        });
+                    });
+                    return h(NvNotificationcontainer, {
+                        position: this.options.position,
+                        class: this.options.className,
+                        'data-testid': 'notification-container',
+                    }, {
+                        // ✅ function slot avoids the warning
+                        default: () => items,
+                    });
+                };
+            },
+        });
+        this.containerApp.mount(containerEl);
+    }
+    handleNotificationClose(id) {
+        this.remove(id);
+    }
+    /**
+     * Show a new notification.
+     *
+     * @param {NotificationOptions} options - The notification options
+     * @returns {string} The notification ID
+     */
+    show = (options) => {
+        const id = options.id || generateId();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            icon: options.icon,
+            createdAt: Date.now(),
+        };
+        // Remove oldest notifications if we exceed max
+        const newNotifications = [notification, ...this.notifications.value];
+        if (newNotifications.length > this.options.maxNotifications) {
+            this.notifications.value = newNotifications.slice(0, this.options.maxNotifications);
+        }
+        else {
+            this.notifications.value = newNotifications;
+        }
+        setTimeout(() => {
+            const ref = this.elRefs.get(id);
+            const el = unwrapNotificationEl(ref);
+            el?.show();
+        }, 0);
+        return id;
+    };
+    /**
+     * Dismiss a specific notification by ID. This will remove the notification
+     * after the animation completes.
+     *
+     * @param {string} id - The notification ID to dismiss
+     */
+    dismiss = (id) => {
+        const ref = this.elRefs.get(id);
+        const el = unwrapNotificationEl(ref);
+        el?.dismiss();
+    };
+    /**
+     * Immediately remove a specific notification by ID.
+     *
+     * @param {string} id - The notification ID to dismiss
+     */
+    remove = (id) => {
+        this.notifications.value = this.notifications.value.filter((notification) => notification.id !== id);
+        this.elRefs.delete(id);
+    };
+    /**
+     * Clear all active notifications.
+     */
+    removeAll = () => {
+        this.notifications.value = [];
+    };
+    /**
+     * Get the current context value.
+     *
+     * @returns {NotificationContextValue} The context value
+     */
+    getContextValue = () => ({
+        notifications: this.notifications,
+        show: this.show,
+        remove: this.remove,
+        dismiss: this.dismiss,
+        removeAll: this.removeAll,
+    });
+    /**
+     * Destroy the notification manager and clean up resources.
+     */
+    destroy() {
+        if (this.containerApp) {
+            this.containerApp.unmount();
+            this.containerApp = null;
+        }
+        const containerEl = document.getElementById('nova-notification-container');
+        if (containerEl) {
+            document.body.removeChild(containerEl);
+        }
+    }
+}
+// Global notification manager instance
+let notificationManager = null;
+/**
+ * Vue plugin for Nova notifications.
+ */
+export const NvNotificationService = {
+    install(app, options = {}) {
+        notificationManager = new NotificationManager(options);
+        // Provide global property
+        app.config.globalProperties.$notifications =
+            notificationManager.getContextValue();
+        // Provide for composition API
+        app.provide('notifications', notificationManager.getContextValue());
+    },
+};
+/**
+ * Composable to use notifications in any component.
+ *
+ * @returns {NotificationContextValue} The notification context
+ * @throws {Error} If used outside of an app with NvNotificationService installed
+ */
+export const useNotifications = () => {
+    if (!notificationManager) {
+        throw new Error('useNotifications must be used in an app with NovaComponents installed. Use app.use(NovaComponents) in your main.ts');
+    }
+    return notificationManager.getContextValue();
+};
+export default NvNotificationService;

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { NvNotificationService, useNotifications, default as NotificationService, } from './NotificationService';
+export type { NotificationOptions, Notification, NotificationContextValue, NotificationServiceOptions, } from './NotificationService';

package/dist/providers/index.js

@@ -0,0 +1 @@
+export { NvNotificationService, useNotifications, default as NotificationService, } from './NotificationService';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.12.0",
+  "version": "3.14.0-beta.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -31,7 +31,9 @@
   },
   "scripts": {
     "build": "npm run tsc",
+    "build:watch": "npm run tsc:watch",
     "tsc": "tsc -p . --outDir ./dist",
+    "tsc:watch": "tsc -p . --outDir ./dist --watch",
     "storybook": "storybook dev -p 6008",
     "storybook.build": "storybook build -o ../../storybook-static/vue",
     "clean": "rimraf dist lib/generated",
@@ -41,7 +43,7 @@
     "@nova-design-system/nova-webcomponents": "*"
   },
   "devDependencies": {
-    "vue": "3.4.36",
+    "vue": "3.5.17",
     "nova-utils": "*",
     "nova-storybook-utils": "*"
   }