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

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type Placement } from '@floating-ui/dom';
+import { type Placement, type Strategy } from '@floating-ui/dom';
 /**
  * @slot trigger - Content to be placed as the trigger.
  * @slot content - Content to be placed within the popover.
@@ -33,6 +33,15 @@ export declare class NvPopover {
      * Defines where the popover appears relative to the trigger.
      */
     readonly placement: Placement;
+    /**
+     * Sets the positioning strategy for the popover. Options include:
+     * - `absolute`: Positions the popover relative to the trigger element
+     *   (default).
+     * - `fixed`: Positions the popover relative to the viewport, useful when you
+     *   need the popover to break out of overflow hidden containers, it will not
+     *   scroll inside a scroll container due to the fixed positioning.
+     */
+    readonly strategy: Strategy;
     /**
      * Use this to group popovers together so that opening one will not animate
      * the closing of another. This is helpful when popovers are placed close
@@ -114,6 +123,7 @@ export declare class NvPopover {
     /****************************************************************************/
     private isAnimating;
     handleOpenChange(open: boolean): Promise<void>;
+    handleStrategyChange(): void;
     /****************************************************************************/
     componentWillLoad(): void;
     componentWillUpdate(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { Placement } from '@floating-ui/dom';
+import type { Placement, Strategy } from '@floating-ui/dom';
 /**
  * @slot default - Content to be placed as the trigger.
  * @slot content - Content to be placed within the popover. Use for custom html, will render under the message.
@@ -28,9 +28,18 @@ export declare class NvTooltip {
     /**
      * Controls how long (in milliseconds) the tooltip waits to show after you
      * hover over or focus on an element. If you move away before the delay is up,
-     * the tooltip won’t appear.
+     * the tooltip won't appear.
      */
     readonly enterDelay: number;
+    /**
+     * Sets the positioning strategy for the tooltip. Options include:
+     * - `absolute`: Positions the tooltip relative to the trigger element
+     *   (default).
+     * - `fixed`: Positions the tooltip relative to the viewport, useful when you
+     *   need the tooltip to break out of overflow hidden containers, it will not
+     *   scroll inside a scroll container due to the fixed positioning.
+     */
+    readonly strategy: Strategy;
     /****************************************************************************/
     /**
      * Emitted when the tooltip is opened or closed. Bubbles up from the popover

package/dist/types/components.d.ts

@@ -5,17 +5,17 @@
  * 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 } from "@floating-ui/dom";
+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";
-export { Placement } from "@floating-ui/dom";
+export { Placement, Strategy } from "@floating-ui/dom";
 export { ColumnConfig } from "./interfaces/ColumnConfig";
 export namespace Components {
     interface NvAccordion {
@@ -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.
@@ -2573,6 +2627,10 @@ export namespace Components {
           * Call this method to show the popover, making it visible on the screen.
          */
         "show": () => Promise<void>;
+        /**
+          * Sets the positioning strategy for the popover. Options include: - `absolute`: Positions the popover relative to the trigger element   (default). - `fixed`: Positions the popover relative to the viewport, useful when you   need the popover to break out of overflow hidden containers, it will not   scroll inside a scroll container due to the fixed positioning.
+         */
+        "strategy": Strategy;
         /**
           * Call this method to toggle between showing and hiding the popover, based on its current state.
          */
@@ -2787,7 +2845,7 @@ export namespace Components {
     }
     interface NvTooltip {
         /**
-          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
+          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won't appear.
          */
         "enterDelay": number;
         /**
@@ -2802,6 +2860,10 @@ export namespace Components {
           * Decides where the tooltip shows up next to the element it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust it's position on the axis to fit on the screen, so users can always see it.
          */
         "placement": Placement;
+        /**
+          * Sets the positioning strategy for the tooltip. Options include: - `absolute`: Positions the tooltip relative to the trigger element   (default). - `fixed`: Positions the tooltip relative to the viewport, useful when you   need the tooltip to break out of overflow hidden containers, it will not   scroll inside a scroll container due to the fixed positioning.
+         */
+        "strategy": Strategy;
         "triggerElement": Element;
     }
 }
@@ -2905,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;
@@ -3517,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;
     }
@@ -3700,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;
@@ -3775,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;
         /**
@@ -4050,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'
@@ -4109,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" }
          */
@@ -4457,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;
         /**
@@ -4477,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}`;
         /**
@@ -5754,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;
         /**
@@ -6362,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.
@@ -6424,6 +6563,10 @@ declare namespace LocalJSX {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "shift-padding"?: number;
+        /**
+          * Sets the positioning strategy for the popover. Options include: - `absolute`: Positions the popover relative to the trigger element   (default). - `fixed`: Positions the popover relative to the viewport, useful when you   need the popover to break out of overflow hidden containers, it will not   scroll inside a scroll container due to the fixed positioning.
+         */
+        "strategy"?: Strategy;
         /**
           * Sets the interaction mode for triggering the popover. Options include: - `hover`: The popover is shown on trigger hover. - `click`: The popover toggles on trigger click. - `controlled`: The visibility is managed manually through methods or the   open prop.
          */
@@ -6666,7 +6809,7 @@ declare namespace LocalJSX {
     }
     interface NvTooltip {
         /**
-          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
+          * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won't appear.
          */
         "enterDelay"?: number;
         /**
@@ -6685,6 +6828,10 @@ declare namespace LocalJSX {
           * Decides where the tooltip shows up next to the element it’s linked to (above, below, to the sides). If there isn’t enough room, it will adjust it's position on the axis to fit on the screen, so users can always see it.
          */
         "placement"?: Placement;
+        /**
+          * Sets the positioning strategy for the tooltip. Options include: - `absolute`: Positions the tooltip relative to the trigger element   (default). - `fixed`: Positions the tooltip relative to the viewport, useful when you   need the tooltip to break out of overflow hidden containers, it will not   scroll inside a scroll container due to the fixed positioning.
+         */
+        "strategy"?: Strategy;
     }
     interface IntrinsicElements {
         "nv-accordion": NvAccordion;
@@ -6723,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;
@@ -6783,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/index.d.ts

@@ -7,7 +7,7 @@
  * DO NOT use this file to export your components. Instead, use the recommended approaches
  * to consume components of this package as outlined in the `README.md`.
  */
-export * as constants from './utils/constants';
+export * from './utils/constants';
 export * as classUtils from './utils/class.utils';
 export * as eventUtils from './utils/events.utils';
 export * as stringUtils from './utils/string.utils';

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"