@nova-design-system/nova-vue 3.28.0 → 3.29.0

package/README.md

@@ -11,6 +11,10 @@
 
 ---
 
+## Requirements
+
+- **ES2022+ build target** — The Nova Vue plugin uses top-level `await` to ensure Stencil custom elements are registered before Vue renders. Your bundler must target `es2022` or higher. For Vite, set `build.target: 'es2022'` in your `vite.config.ts`.
+
 ## Installation
 
 To begin, install the necessary Nova packages using your package manager:

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export * from './generated/components';
 export * from './plugin';
 export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';
+export type { IconName } from '@nova-design-system/nova-webcomponents';
 export * from './components/NvDatatable';

package/dist/plugin.js

@@ -7,14 +7,20 @@
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
 import { NvNotificationService, } from './providers/NotificationService';
 import * as components from './generated/components';
+/**
+ * Register all Stencil custom elements before the plugin is imported.
+ * Top-level await ensures customElements.define() completes before Vue renders,
+ * preventing a race condition where camelCase props (e.g. errorDescription) are
+ * set as lowercased HTML attributes (errordescription) instead of kebab-case
+ * (error-description) that Stencil observes.
+ */
+await defineCustomElements();
 /**
  * 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(app, options = {}) {
-        // Define custom elements with event handling
-        defineCustomElements();
         // Register all Vue component wrappers globally so that
         // props are passed as JS properties (not HTML attributes)
         Object.entries(components).forEach(([name, component]) => {

package/dist/providers/NotificationService.d.ts

@@ -1,5 +1,5 @@
 import { App, type Ref, type Component } from 'vue';
-import { NotificationEmphasis, FeedbackColors, NotificationPosition } from '../index';
+import { NotificationEmphasis, FeedbackColors, NotificationPosition, type IconName } from '../index';
 /**
  * Action callbacks for notifications. Will render buttons automatically.
  */
@@ -28,7 +28,7 @@ export interface NotificationOptions {
     /** Type of the notification, used to determine the color and default icon. */
     feedback?: `${FeedbackColors}`;
     /** Custom icon name to override the default icon. */
-    icon?: string;
+    icon?: `${IconName}`;
     /** Notification actions */
     actions?: NotificationAction[];
     /** Custom components for the notification actions. */

package/package.json

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