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

package/dist/types/components.d.ts

@@ -5,13 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 import { Column } from "./interfaces/Column";
 import { Element } from "./stencil-public-runtime";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement, Strategy } from "@floating-ui/dom";
 import { ColumnConfig } from "./interfaces/ColumnConfig";
-export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 export { Column } from "./interfaces/Column";
 export { Element } from "./stencil-public-runtime";
 export { IconName } from "./components/nv-icon/nv-icons";
@@ -334,6 +334,14 @@ export namespace Components {
         "size": `${ButtonSize}`;
     }
     interface NvCalendar {
+        /**
+          * Sets the label for the cancel button in actions.
+         */
+        "cancelLabel": string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "cancel-label"?: string;
         /**
           * Clears the current selection and resets the calendar to its initial state. This method can be called programmatically to reset the calendar.
          */
@@ -384,6 +392,14 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "number-of-calendars"?: number;
+        /**
+          * Sets the label for the primary (OK) button in actions.
+         */
+        "primaryLabel": string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "primary-label"?: string;
         /**
           * Selected date range format: { start: ISO string, end: ISO string } ex: { start: "2025-03-15", end: "2025-03-20" }
          */
@@ -684,7 +700,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Sets the form for the dialog footer.
+          * A form inside the dialog can be submitted through the dialog footer by giving the form an id and passing that id to the form attribute.
          */
         "form": string;
         /**
@@ -696,7 +712,7 @@ export namespace Components {
          */
         "leading-icon"?: string;
         /**
-          * Sets the type of the primary button.
+          * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
         "primaryButtonType": `${ButtonType}`;
         /**
@@ -1932,7 +1948,7 @@ export namespace Components {
          */
         "fluid": boolean;
         /**
-          * Enables an optional numeric input field alongside the slider, allowing users to type a value directly instead of—or in addition to—using the slider handle.
+          * Enables an optional numeric input field alongside the slider, allowing users to type a value directly instead of—or in addition to—using the slider handle. The field accepts numeric values in the format based on client-side local settings.
          */
         "hasField": boolean;
         /**
@@ -2508,6 +2524,66 @@ export namespace Components {
          */
         "shortcut": string;
     }
+    interface NvNotification {
+        /**
+          * Dismisses the notification with an animation, after the animation is complete, the hiddenChanged event will be emitted with the value of true, and the hidden prop will be set to true.
+         */
+        "dismiss": () => Promise<void>;
+        /**
+          * Allows the notification to be dismissed via a close button (x). The notification is not dismissible unless explicitly enabled.
+         */
+        "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}`;
+        /**
+          * Specifies the notification type which determines the color and default icon.
+         */
+        "feedback": `${FeedbackColors}`;
+        /**
+          * Short and concise text for the notification title.
+         */
+        "heading": string;
+        /**
+          * Controls the visibility of the notification.
+         */
+        "hidden": boolean;
+        /**
+          * Icon associated with the notification, defaults vary based on the feedback type.
+         */
+        "icon": string;
+        /**
+          * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
+         */
+        "initiallyHidden": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "initially-hidden"?: boolean;
+        /**
+          * Main content for the notification. For more complex content, use the content slot instead.
+         */
+        "message": string;
+        /**
+          * Sets the hidden prop to false, and shows the notification with an animation, after the animation is complete, the hiddenChanged event will be emitted with the value of false.
+         */
+        "show": () => Promise<void>;
+        /**
+          * Set a unique ID for the notification. Used for aria attributes and managing multiple notifications.
+         */
+        "uid": string;
+    }
+    /**
+     * @deprecated [EXPERIMENTAL]
+     * @experimental - Container for notifications TODO: add animations etc...
+     */
+    interface NvNotificationcontainer {
+        /**
+          * Position of the notification container on the screen.
+         */
+        "position": `${NotificationPosition}`;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -2913,6 +2989,10 @@ export interface NvMenuitemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvMenuitemElement;
 }
+export interface NvNotificationCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvNotificationElement;
+}
 export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
@@ -3525,6 +3605,33 @@ declare global {
         prototype: HTMLNvMenuitemElement;
         new (): HTMLNvMenuitemElement;
     };
+    interface HTMLNvNotificationElementEventMap {
+        "hiddenChanged": boolean;
+    }
+    interface HTMLNvNotificationElement extends Components.NvNotification, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvNotificationElementEventMap>(type: K, listener: (this: HTMLNvNotificationElement, ev: NvNotificationCustomEvent<HTMLNvNotificationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLNvNotificationElementEventMap>(type: K, listener: (this: HTMLNvNotificationElement, ev: NvNotificationCustomEvent<HTMLNvNotificationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLNvNotificationElement: {
+        prototype: HTMLNvNotificationElement;
+        new (): HTMLNvNotificationElement;
+    };
+    /**
+     * @deprecated [EXPERIMENTAL]
+     * @experimental - Container for notifications TODO: add animations etc...
+     */
+    interface HTMLNvNotificationcontainerElement extends Components.NvNotificationcontainer, HTMLStencilElement {
+    }
+    var HTMLNvNotificationcontainerElement: {
+        prototype: HTMLNvNotificationcontainerElement;
+        new (): HTMLNvNotificationcontainerElement;
+    };
     interface HTMLNvPopoverElementEventMap {
         "openChanged": boolean;
     }
@@ -3708,6 +3815,8 @@ declare global {
         "nv-loader": HTMLNvLoaderElement;
         "nv-menu": HTMLNvMenuElement;
         "nv-menuitem": HTMLNvMenuitemElement;
+        "nv-notification": HTMLNvNotificationElement;
+        "nv-notificationcontainer": HTMLNvNotificationcontainerElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
         "nv-stack": HTMLNvStackElement;
@@ -3783,7 +3892,7 @@ declare namespace LocalJSX {
          */
         "mode"?: 'accordion' | 'multi';
         /**
-          * Event emitted on toggle (header click)
+          * Event emitted on toggle (header click or programmatic change)
          */
         "onItemToggle"?: (event: NvAccordionItemCustomEvent<boolean>) => void;
         /**
@@ -4058,6 +4167,14 @@ declare namespace LocalJSX {
         "size"?: `${ButtonSize}`;
     }
     interface NvCalendar {
+        /**
+          * Sets the label for the cancel button in actions.
+         */
+        "cancelLabel"?: string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "cancel-label"?: string;
         /**
           * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
           * @default 'YYYY-MM-DD'
@@ -4117,6 +4234,14 @@ declare namespace LocalJSX {
           * @bind value
          */
         "onValueChanged"?: (event: NvCalendarCustomEvent<string>) => void;
+        /**
+          * Sets the label for the primary (OK) button in actions.
+         */
+        "primaryLabel"?: string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "primary-label"?: string;
         /**
           * Selected date range format: { start: ISO string, end: ISO string } ex: { start: "2025-03-15", end: "2025-03-20" }
          */
@@ -4465,7 +4590,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Sets the form for the dialog footer.
+          * A form inside the dialog can be submitted through the dialog footer by giving the form an id and passing that id to the form attribute.
          */
         "form"?: string;
         /**
@@ -4485,7 +4610,7 @@ declare namespace LocalJSX {
          */
         "onDialogPrimaryClicked"?: (event: NvDialogfooterCustomEvent<void>) => void;
         /**
-          * Sets the type of the primary button.
+          * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
         "primaryButtonType"?: `${ButtonType}`;
         /**
@@ -5762,7 +5887,7 @@ declare namespace LocalJSX {
          */
         "fluid"?: boolean;
         /**
-          * Enables an optional numeric input field alongside the slider, allowing users to type a value directly instead of—or in addition to—using the slider handle.
+          * Enables an optional numeric input field alongside the slider, allowing users to type a value directly instead of—or in addition to—using the slider handle. The field accepts numeric values in the format based on client-side local settings.
          */
         "hasField"?: boolean;
         /**
@@ -6370,6 +6495,63 @@ declare namespace LocalJSX {
          */
         "shortcut"?: string;
     }
+    interface NvNotification {
+        /**
+          * Allows the notification to be dismissed via a close button (x). The notification is not dismissible unless explicitly enabled.
+         */
+        "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}`;
+        /**
+          * Specifies the notification type which determines the color and default icon.
+         */
+        "feedback"?: `${FeedbackColors}`;
+        /**
+          * Short and concise text for the notification title.
+         */
+        "heading"?: string;
+        /**
+          * Controls the visibility of the notification.
+         */
+        "hidden"?: boolean;
+        /**
+          * Icon associated with the notification, defaults vary based on the feedback type.
+         */
+        "icon"?: string;
+        /**
+          * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
+         */
+        "initiallyHidden"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "initially-hidden"?: boolean;
+        /**
+          * Main content for the notification. For more complex content, use the content slot instead.
+         */
+        "message"?: string;
+        /**
+          * Emits when the 'hidden' prop changes, reflecting a change in visibility. Passes hidden value to the detail.
+          * @bind hidden
+         */
+        "onHiddenChanged"?: (event: NvNotificationCustomEvent<boolean>) => void;
+        /**
+          * Set a unique ID for the notification. Used for aria attributes and managing multiple notifications.
+         */
+        "uid"?: string;
+    }
+    /**
+     * @deprecated [EXPERIMENTAL]
+     * @experimental - Container for notifications TODO: add animations etc...
+     */
+    interface NvNotificationcontainer {
+        /**
+          * Position of the notification container on the screen.
+         */
+        "position"?: `${NotificationPosition}`;
+    }
     interface NvPopover {
         /**
           * Disables the automatic flipping of the popover when the trigger element is out of the viewport. The popover will flip automatically by default.
@@ -6739,6 +6921,8 @@ declare namespace LocalJSX {
         "nv-loader": NvLoader;
         "nv-menu": NvMenu;
         "nv-menuitem": NvMenuitem;
+        "nv-notification": NvNotification;
+        "nv-notificationcontainer": NvNotificationcontainer;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
         "nv-stack": NvStack;
@@ -6799,6 +6983,12 @@ declare module "@stencil/core" {
             "nv-loader": LocalJSX.NvLoader & JSXBase.HTMLAttributes<HTMLNvLoaderElement>;
             "nv-menu": LocalJSX.NvMenu & JSXBase.HTMLAttributes<HTMLNvMenuElement>;
             "nv-menuitem": LocalJSX.NvMenuitem & JSXBase.HTMLAttributes<HTMLNvMenuitemElement>;
+            "nv-notification": LocalJSX.NvNotification & JSXBase.HTMLAttributes<HTMLNvNotificationElement>;
+            /**
+             * @deprecated [EXPERIMENTAL]
+             * @experimental - Container for notifications TODO: add animations etc...
+             */
+            "nv-notificationcontainer": LocalJSX.NvNotificationcontainer & JSXBase.HTMLAttributes<HTMLNvNotificationcontainerElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
             /**

package/dist/types/nova-docs.d.ts

@@ -100,4 +100,10 @@ type StoryDescription<T> = T extends NovaTemplate
        * descriptions
        */
       description?: string;
+      /**
+       * If the description is not provided, infer it from the prop descriptions
+       * from another component (for example child components that are described
+       * in the parent story, see nv-dialog as an example)
+       */
+      descriptionSource?: NovaComponent;
     };

package/dist/types/utils/constants.d.ts

@@ -1,4 +1,12 @@
 import { WeekAbbreviations } from '../interfaces/localization';
+export declare enum NotificationPosition {
+    TopRight = "top-right",
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center"
+}
 export declare enum FeedbackColors {
     Information = "information",
     Warning = "warning",
@@ -37,6 +45,10 @@ export declare enum ButtonType {
     Reset = "reset",
     Button = "button"
 }
+export declare enum NotificationEmphasis {
+    Medium = "medium",
+    High = "high"
+}
 export declare enum ToggleButtonEmphasis {
     High = "high",
     Low = "low"

package/dist/vscode-data.json

@@ -462,6 +462,10 @@
         "value": "The `<nv-calendar>` component supports a wide range of date formats to accommodate various use cases, including international standards, regional conventions, and platform-specific formats."
       },
       "attributes": [
+        {
+          "name": "cancel-label",
+          "description": "Sets the label for the cancel button in actions."
+        },
         {
           "name": "date-format",
           "description": "Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)"
@@ -486,6 +490,10 @@
           "name": "number-of-calendars",
           "description": "Number of calendars to display"
         },
+        {
+          "name": "primary-label",
+          "description": "Sets the label for the primary (OK) button in actions."
+        },
         {
           "name": "selection-type",
           "description": "Selection type (single date or date range)",
@@ -683,7 +691,7 @@
         },
         {
           "name": "form",
-          "description": "Sets the form for the dialog footer."
+          "description": "A form inside the dialog can be submitted through the dialog footer by\ngiving the form an id and passing that id to the form attribute."
         },
         {
           "name": "leading-icon",
@@ -691,7 +699,7 @@
         },
         {
           "name": "primary-button-type",
-          "description": "Sets the type of the primary button.",
+          "description": "Sets the type of the primary button. If using a form, this will default to\n'submit' if nothing passed.",
           "values": [
             {
               "name": "button"
@@ -2255,7 +2263,7 @@
         },
         {
           "name": "has-field",
-          "description": "Enables an optional numeric input field alongside the slider, allowing\nusers to type a value directly instead of—or in addition to—using the\nslider handle."
+          "description": "Enables an optional numeric input field alongside the slider, allowing\nusers to type a value directly instead of—or in addition to—using the\nslider handle. The field accepts numeric values in the format based on\nclient-side local settings."
         },
         {
           "name": "hide-label",
@@ -4003,6 +4011,9 @@
             {
               "name": "mail"
             },
+            {
+              "name": "map-pin-2"
+            },
             {
               "name": "map-pin-off"
             },
@@ -4564,9 +4575,6 @@
             {
               "name": "wind"
             },
-            {
-              "name": "windmill"
-            },
             {
               "name": "wood"
             },
@@ -4578,6 +4586,9 @@
             },
             {
               "name": "x"
+            },
+            {
+              "name": "zoom-reset"
             }
           ]
         },
@@ -4595,6 +4606,109 @@
         }
       ]
     },
+    {
+      "name": "nv-notification",
+      "description": {
+        "kind": "markdown",
+        "value": "The `nv-notification` component is designed to display a single notification message within the user interface. Unlike alerts, notifications are typically transient and context-driven, offering users timely feedback or updates without demanding persistent attention. This component is a low-level building block and should not be used directly in most cases.\n\nFor React, Vue, Blazor, and Angular, we provide framework-specific notification services that come with hooks, composables, or helpers to manage notifications in a structured way. These services handle lifecycle, queuing, and consistent behavior across your app. We strongly recommend referring to the provider documentation for your framework of choice and using those abstractions instead.\n\nIf you choose not to use the framework services, you may work directly with the `nv-notification` component together with the `nv-notificationcontainer` to manually manage notifications. This approach is intended for advanced use cases or for building a fully custom notification system."
+      },
+      "attributes": [
+        {
+          "name": "dismissible",
+          "description": "Allows the notification to be dismissed via a close button (x). The\nnotification is not dismissible unless explicitly enabled."
+        },
+        {
+          "name": "emphasis",
+          "description": "Adjusts the emphasis to make the notification more or less visually\nprominent to users. Use this to draw attention to important actions or\nreduce focus on less critical ones",
+          "values": [
+            {
+              "name": "high"
+            },
+            {
+              "name": "medium"
+            }
+          ]
+        },
+        {
+          "name": "feedback",
+          "description": "Specifies the notification type which determines the color and default icon.",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "information"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "heading",
+          "description": "Short and concise text for the notification title."
+        },
+        {
+          "name": "hidden",
+          "description": "Controls the visibility of the notification."
+        },
+        {
+          "name": "icon",
+          "description": "Icon associated with the notification, defaults vary based on the feedback\ntype."
+        },
+        {
+          "name": "initially-hidden",
+          "description": "When true, the notification will be hidden initially, but internal changes\nwill not be in a controlled state. Good for animating the notification in."
+        },
+        {
+          "name": "message",
+          "description": "Main content for the notification. For more complex content, use the\ncontent slot instead."
+        },
+        {
+          "name": "uid",
+          "description": "Set a unique ID for the notification. Used for aria attributes and managing\nmultiple notifications."
+        }
+      ]
+    },
+    {
+      "name": "nv-notificationcontainer",
+      "description": {
+        "kind": "markdown",
+        "value": "This component is the container for the notifications.  Each framework has its own implementation of the providers."
+      },
+      "attributes": [
+        {
+          "name": "position",
+          "description": "Position of the notification container on the screen.",
+          "values": [
+            {
+              "name": "bottom-center"
+            },
+            {
+              "name": "bottom-left"
+            },
+            {
+              "name": "bottom-right"
+            },
+            {
+              "name": "top-center"
+            },
+            {
+              "name": "top-left"
+            },
+            {
+              "name": "top-right"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nv-popover",
       "description": {