@nova-design-system/nova-webcomponents 3.12.0 → 3.13.0

package/dist/types/components/nv-dialogfooter/nv-dialogfooter.d.ts

@@ -38,11 +38,13 @@ export declare class NvDialogfooter {
      */
     readonly primaryLabel: 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.
      */
-    readonly primaryButtonType: `${ButtonType}`;
+    primaryButtonType: `${ButtonType}`;
     /**
-     * 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.
      */
     readonly form: string;
     /****************************************************************************/
@@ -51,7 +53,8 @@ export declare class NvDialogfooter {
      */
     dialogCanceled: EventEmitter<void>;
     /**
-     * Emitted when the primary button is clicked. This allows to handle the primary action and potential data capture before closing the dialog.
+     * Emitted when the primary button is clicked. This allows to handle the
+     * primary action and potential data capture before closing the dialog.
      */
     dialogPrimaryClicked: EventEmitter<void>;
     /****************************************************************************/
@@ -67,6 +70,7 @@ export declare class NvDialogfooter {
     private handleCancel;
     /****************************************************************************/
     componentWillLoad(): void;
+    componentDidLoad(): void;
     /****************************************************************************/
     render(): any;
 }

package/dist/types/components/nv-fieldslider/nv-fieldslider.d.ts

@@ -38,7 +38,8 @@ export declare class NvFieldslider {
     /**
      * 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.
+     * slider handle. The field accepts numeric values in the format based on
+     * client-side local settings.
      */
     readonly hasField: boolean;
     /**
@@ -208,7 +209,7 @@ export declare class NvFieldslider {
     private onKeyDown;
     /**
      * Handles field input value changes.
-     * @param {Event} event - The input event
+     * @param {FieldInputProps['onInput']} details - The parsed value and index
      */
     private handleFieldChange;
     /****************************************************************************/

package/dist/types/components/nv-fieldslider/partials/field-input.d.ts

@@ -2,7 +2,7 @@ import { FunctionalComponent } from '../../../stencil-public-runtime';
 /**
  * Props for the FieldInput component
  */
-interface FieldInputProps {
+export interface FieldInputProps {
     /** Whether this is a range slider */
     range: boolean;
     /** Whether to show the input field */
@@ -26,7 +26,12 @@ interface FieldInputProps {
     /** Whether the slider is readonly */
     readonly: boolean;
     /** Handler for input changes */
-    onInput: (event: Event) => void;
+    onInput: (details: {
+        /** Parsed value */
+        value: number;
+        /** Index (0 or 1) for range mode, ignored in single mode */
+        index?: number;
+    }) => void;
     /** Label to display before the value */
     labelBeforeValue?: string;
     /** Label to display after the value */
@@ -42,4 +47,3 @@ interface FieldInputProps {
  * @returns {JSX.Element} JSX element representing the field input
  */
 export declare const FieldInput: FunctionalComponent<FieldInputProps>;
-export {};

package/dist/types/components/nv-notification/nv-notification.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FeedbackColors, NotificationEmphasis } from '../../utils/constants';
+/**
+ * @slot heading - Use this slot to insert HTML as the notification title.
+ * @slot content - Use this slot to insert HTML as the notification message.
+ * @slot actions - Use this slot for custom actions.
+ */
+export declare class NvNotification {
+    el: HTMLNvNotificationElement;
+    private container;
+    private headingSlot;
+    private messageSlot;
+    private actionsSlot;
+    /****************************************************************************/
+    /**
+     * Set a unique ID for the notification. Used for aria attributes and managing
+     * multiple notifications.
+     */
+    readonly uid: string;
+    /**
+     * Specifies the notification type which determines the color and default icon.
+     */
+    readonly feedback: `${FeedbackColors}`;
+    /**
+     * 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
+     */
+    readonly emphasis: `${NotificationEmphasis}`;
+    /**
+     * Short and concise text for the notification title.
+     */
+    readonly heading: string;
+    /**
+     * Main content for the notification. For more complex content, use the
+     * content slot instead.
+     */
+    readonly message: string;
+    /**
+     * Icon associated with the notification, defaults vary based on the feedback
+     * type.
+     */
+    readonly icon: string;
+    /**
+     * Allows the notification to be dismissed via a close button (x). The
+     * notification is not dismissible unless explicitly enabled.
+     */
+    readonly dismissible: boolean;
+    /**
+     * Controls the visibility of the notification.
+     */
+    hidden: boolean;
+    /****************************************************************************/
+    dismiss(): Promise<void>;
+    /****************************************************************************/
+    /**
+     * Emits when the 'hidden' prop changes, reflecting a change in visibility.
+     * Passes hidden value to the detail.
+     * @bind hidden
+     */
+    hiddenChanged: EventEmitter<boolean>;
+    /****************************************************************************/
+    private iconByFeedback;
+    private roleByFeedback;
+    private getDefaultIcon;
+    private getAriaRole;
+    private getAriaLive;
+    private getHeadingId;
+    private getMessageId;
+    private dismissAnimation;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-notification/nv-notification.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvNotificationDocs: NovaDocs<Components.NvNotification>;
+export default NvNotificationDocs;

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, 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, 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,44 @@ export namespace Components {
          */
         "shortcut": string;
     }
+    interface NvNotification {
+        /**
+          * *************************************************************************
+         */
+        "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;
+        /**
+          * Main content for the notification. For more complex content, use the content slot instead.
+         */
+        "message": string;
+        /**
+          * Set a unique ID for the notification. Used for aria attributes and managing multiple notifications.
+         */
+        "uid": string;
+    }
     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 +2967,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 +3583,23 @@ 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;
+    };
     interface HTMLNvPopoverElementEventMap {
         "openChanged": boolean;
     }
@@ -3708,6 +3783,7 @@ declare global {
         "nv-loader": HTMLNvLoaderElement;
         "nv-menu": HTMLNvMenuElement;
         "nv-menuitem": HTMLNvMenuitemElement;
+        "nv-notification": HTMLNvNotificationElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
         "nv-stack": HTMLNvStackElement;
@@ -3783,7 +3859,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 +4134,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 +4201,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 +4557,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 +4577,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 +5854,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 +6462,45 @@ 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;
+        /**
+          * 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;
+    }
     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 +6870,7 @@ declare namespace LocalJSX {
         "nv-loader": NvLoader;
         "nv-menu": NvMenu;
         "nv-menuitem": NvMenuitem;
+        "nv-notification": NvNotification;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
         "nv-stack": NvStack;
@@ -6799,6 +6931,7 @@ 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>;
             "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

@@ -37,6 +37,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",
@@ -4595,6 +4603,72 @@
         }
       ]
     },
+    {
+      "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": "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-popover",
       "description": {