@nova-design-system/nova-vue 3.12.0 → 3.13.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,7 @@ 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 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,17 @@ 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',
+    'hiddenChanged'
+], 'hidden', 'hidden-changed');
 export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined, [
     'triggerElement',
     'open',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.12.0",
+  "version": "3.13.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",