@nova-design-system/nova-webcomponents 3.0.0-beta.31 → 3.0.0-beta.34

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

@@ -1,5 +1,5 @@
 declare const _default: {
-    component: "nv-base";
+    component: string;
     skip: true;
 };
 export default _default;

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

@@ -0,0 +1,30 @@
+/**
+ * @slot default - Pass an icon, a link, or text to render the breadcrumb content.
+ * @slot separator - The separator between breadcrumb items.
+ */
+export declare class NvBreadcrumb {
+    el: HTMLNvBreadcrumbElement;
+    private popoverTrigger;
+    /****************************************************************************/
+    /**
+     * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs
+     * in a dropdown. Use default for a single item. When passing multiple items
+     * as collapsed, make sure to wrap you links in list tags
+     */
+    readonly type: 'collapsed' | 'default';
+    /**
+     * Add an optional tooltip to provide extra information about the breadcrumb.
+     */
+    readonly tooltip: string;
+    /**
+     * Use this to highlight the breadcrumb as the current page in your
+     * navigation. It also makes the page clearer to screen readers with
+     * aria-current="location".
+     */
+    readonly current: boolean;
+    /****************************************************************************/
+    componentDidLoad(): void;
+    componentWillLoad(): void;
+    /****************************************************************************/
+    render(): any;
+}

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * @slot default - Child content of the component.
+ */
+export declare class NvBreadcrumbs {
+    render(): any;
+}

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

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

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

@@ -121,8 +121,10 @@ export declare class NVFieldDropDown {
     valueChanged: EventEmitter<string>;
     handleOpenChanged(event: CustomEvent<boolean>): void;
     watchFilterableHandler(newValue: boolean): void;
-    watchValueHandler(): void;
+    watchValueHandler(newValue: string): void;
     /****************************************************************************/
+    componentWillLoad(): void;
+    componentDidLoad(): void;
     /**
      * Subscribe to click outside event.
      */
@@ -180,6 +182,7 @@ export declare class NVFieldDropDown {
     handleKeyDown(event: KeyboardEvent): void;
     private updateHighlightedItem;
     private focusFirstItem;
+    private updateSelectedItem;
     /****************************************************************************/
     render(): any;
 }

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

@@ -100,7 +100,7 @@ export declare class NvFieldpassword {
      * Set rules for how the input should be formatted. For example, you can
      * require that a phone number includes only digits or that an email address
      * has the correct format. If users don’t follow these rules, they’ll get a
-     * prompt to correct their input.
+     * prompt to correct their input on form submission.
      * the rules are applied to the input value via regexes.
      */
     readonly pattern: string;

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

@@ -34,7 +34,7 @@ export declare class NvFieldselect {
      * to ensure unique identification, facilitating proper label association and
      * accessibility.
      */
-    readonly selectId: string;
+    readonly inputId: string;
     /**
      * Lets you define the text that explains what users should choose in the
      * select field. It’s a crucial element for making forms clear and

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

@@ -124,7 +124,7 @@ export declare class NvFieldtext {
      * Set rules for how the input should be formatted. For example, you can
      * require that a phone number includes only digits or that an email address
      * has the correct format. If users don’t follow these rules, they’ll get a
-     * prompt to correct their input.
+     * prompt to correct their input after the form is submitted.
      */
     readonly pattern: string;
     /**

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

@@ -141,19 +141,15 @@ export declare class NvFieldtextarea {
      * min-height, if false, we need to remove the height property.
      */
     autosizeChanged(): void;
+    /**
+     * Make sure to adjust the height of the textarea when the value changes
+     * programmatically or by typing when autosize is on.
+     */
+    handleValueChange(): void;
     /****************************************************************************/
     private handleTextarea;
     private handleTextareaContainerClick;
     private adjustTextareaHeight;
-    /**
-     * Class        Properties
-     * resize-none	resize: none;
-     * resize-y	    resize: vertical;
-     * resize-x	    resize: horizontal;
-     * resize	      resize: both;
-     * @returns {string} The resize class.
-     */
-    private getResize;
     /****************************************************************************/
     componentDidLoad(): void;
     /****************************************************************************/

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

@@ -1,4 +1,4 @@
-import { ButtonSize, ButtonEmphasis, ButtonType } from '../../utils/constants';
+import { ButtonSize, ButtonEmphasis, ButtonType, IconButtonShape } from '../../utils/constants';
 import { IconName } from '../nv-icon/nv-icons';
 /**
  * @slot default - Content of the button.
@@ -51,7 +51,7 @@ export declare class NvIconbutton {
     /**
      * Sets the shape of the button. Choose between square and rounded.
      */
-    readonly shape: 'square' | 'rounded';
+    readonly shape: `${IconButtonShape}`;
     /****************************************************************************/
     /**
      * Handles form-related actions when the button is clicked.

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

@@ -10,7 +10,6 @@ export declare class NvMenu {
     private triggerElement;
     private popoverElement;
     private isHandlingKeyDown;
-    private isHandlingClick;
     /****************************************************************************/
     /**
      * Use this to toggle the initial visibility of the menu, by default the menu
@@ -44,12 +43,12 @@ export declare class NvMenu {
     close(): Promise<void>;
     /****************************************************************************/
     /**
-     * Emitted from nv-menuitem elements with the corresponding id when the menu
-     * item is selected.
+     * Emitted from nv-menuitem elements with the corresponding id and name when
+     * selected (via click or keyboard). This event listener can be attached to
+     * either the nv-menu or the nv-menuitem element.
      */
     menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;
-    private handleMenuItemSelect;
-    handleMenuClick(event: MouseEvent): void;
+    handleMenuItemSelect(event: CustomEvent<MenuitemSelectedEventDetail>): void;
     handleKeydown(event: KeyboardEvent): void;
     handleOpenChanged(event: CustomEvent<boolean>): void;
     private focusFirstItem;

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

@@ -1,9 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import { IconName } from '../nv-icon/nv-icons';
 export type MenuitemSelectedEventDetail = {
     /**
      * The id of the menu item that was selected.
      */
-    itemId?: HTMLElement['id'];
+    id?: HTMLElement['id'];
+    /**
+     * The name of the menu item that was selected.
+     */
+    name?: string;
+    /**
+     * Indicates if the menu item has a nested submenu.
+     */
+    hasSubmenu?: boolean;
 };
 /**
  * @slot default - The content to render, usually just text
@@ -29,6 +38,21 @@ export declare class NvMenuitem {
      * If the menu item has a submenu, the a caret icon will be displayed.
      */
     readonly hasSubmenu: boolean;
+    /**
+     * Represents the identifier or name associated with the menu item. This value
+     * will be emitted as part of the event data when the menu item is selected,
+     * enabling event handlers to identify the chosen item.
+     */
+    readonly name: string;
+    /****************************************************************************/
+    /**
+     * Fires when the menu item is selected (click or keypress). Will include the
+     * id and name of the menu item.
+     */
+    menuitemSelected: EventEmitter<MenuitemSelectedEventDetail>;
+    private handleMenuItemSelect;
+    handleClick(event: MouseEvent): void;
+    handleKeyDown(event: KeyboardEvent): void;
     /****************************************************************************/
     render(): any;
 }

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

@@ -8,6 +8,7 @@ export declare class NvPopover {
     el: HTMLNvPopoverElement;
     private popoverElement;
     private arrowElement;
+    private eventsAttached;
     /****************************************************************************/
     /**
      * @internal
@@ -82,6 +83,11 @@ export declare class NvPopover {
      * its current state.
      */
     toggle(): Promise<void>;
+    /**
+     * Attaches event listeners to the trigger element, and makes sure this only
+     * happens once.
+     */
+    private attachEventListeners;
     /**
      * Calculates the position of the popover relative to the trigger.
      * @docs https://floating-ui.com/docs/computePosition
@@ -107,6 +113,7 @@ export declare class NvPopover {
     handleOpenChange(open: boolean): Promise<void>;
     /****************************************************************************/
     componentWillLoad(): void;
+    componentWillUpdate(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /****************************************************************************/

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

@@ -5,8 +5,13 @@ import type { Placement } from '@floating-ui/dom';
  */
 export declare class NvTooltip {
     el: HTMLNvTooltipElement;
-    private triggerElement;
     /****************************************************************************/
+    /**
+     * @internal
+     * Accepts a reference to the DOM element acting as the popover trigger. This
+     * should be used when the slot for the trigger is not defined.
+     */
+    triggerElement: Element;
     /**
      * A string representing the text to be displayed inside the tooltip. This
      * content is shown when the tooltip is activated by the user, such as on

package/dist/types/components.d.ts

@@ -5,19 +5,21 @@
  * 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, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, IconButtonShape, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
 import { Column } from "./interfaces/Column";
 import { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement } from "@floating-ui/dom";
 import { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+import { MenuitemSelectedEventDetail as MenuitemSelectedEventDetail1 } from "./components/nv-menuitem/nv-menuitem";
 import { Element } from "./stencil-public-runtime";
-export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, FieldLabelPlacement, IconButtonShape, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
 export { Column } from "./interfaces/Column";
 export { DropdownItemSelectedEventDetail } from "./components/nv-fielddropdownitem/DropdownItemSelectedEventDetail";
 export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement } from "@floating-ui/dom";
 export { MenuitemSelectedEventDetail } from "./components/nv-menuitem/nv-menuitem";
+export { MenuitemSelectedEventDetail as MenuitemSelectedEventDetail1 } from "./components/nv-menuitem/nv-menuitem";
 export { Element } from "./stencil-public-runtime";
 export namespace Components {
     interface NvAlert {
@@ -158,6 +160,22 @@ export namespace Components {
      */
     interface NvBase {
     }
+    interface NvBreadcrumb {
+        /**
+          * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
+         */
+        "current": boolean;
+        /**
+          * Add an optional tooltip to provide extra information about the breadcrumb.
+         */
+        "tooltip": string;
+        /**
+          * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs in a dropdown. Use default for a single item. When passing multiple items as collapsed, make sure to wrap you links in list tags
+         */
+        "type": 'collapsed' | 'default';
+    }
+    interface NvBreadcrumbs {
+    }
     interface NvButton {
         /**
           * Applies styling that visually indicates the button represents a dangerous action.
@@ -541,7 +559,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input. the rules are applied to the input value via regexes.
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input on form submission. the rules are applied to the input value via regexes.
          */
         "pattern": string;
         /**
@@ -646,6 +664,10 @@ export namespace Components {
           * @validator message
          */
         "errorDescription": string;
+        /**
+          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId": string;
         /**
           * Lets you define the text that explains what users should choose in the select field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -671,10 +693,6 @@ export namespace Components {
           * Marks the select field as required, ensuring that the user must fill it out before submitting the form.
          */
         "required": boolean;
-        /**
-          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
-         */
-        "selectId": string;
         /**
           * Changes the select field’s appearance to indicate successful input or validation.
          */
@@ -742,7 +760,7 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input.
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input after the form is submitted.
          */
         "pattern": string;
         /**
@@ -968,7 +986,7 @@ export namespace Components {
         /**
           * Sets the shape of the button. Choose between square and rounded.
          */
-        "shape": 'square' | 'rounded';
+        "shape": `${IconButtonShape}`;
         /**
           * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
          */
@@ -1027,6 +1045,10 @@ export namespace Components {
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
          */
         "icon": `${IconName}`;
+        /**
+          * Represents the identifier or name associated with the menu item. This value will be emitted as part of the event data when the menu item is selected, enabling event handlers to identify the chosen item.
+         */
+        "name": string;
         /**
           * Show a shortcut key for the action represented in the menu item.
          */
@@ -1209,6 +1231,7 @@ 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;
+        "triggerElement": Element;
     }
 }
 export interface NvAlertCustomEvent<T> extends CustomEvent<T> {
@@ -1263,6 +1286,10 @@ export interface NvMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvMenuElement;
 }
+export interface NvMenuitemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvMenuitemElement;
+}
 export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
@@ -1321,6 +1348,18 @@ declare global {
         prototype: HTMLNvBaseElement;
         new (): HTMLNvBaseElement;
     };
+    interface HTMLNvBreadcrumbElement extends Components.NvBreadcrumb, HTMLStencilElement {
+    }
+    var HTMLNvBreadcrumbElement: {
+        prototype: HTMLNvBreadcrumbElement;
+        new (): HTMLNvBreadcrumbElement;
+    };
+    interface HTMLNvBreadcrumbsElement extends Components.NvBreadcrumbs, HTMLStencilElement {
+    }
+    var HTMLNvBreadcrumbsElement: {
+        prototype: HTMLNvBreadcrumbsElement;
+        new (): HTMLNvBreadcrumbsElement;
+    };
     interface HTMLNvButtonElement extends Components.NvButton, HTMLStencilElement {
     }
     var HTMLNvButtonElement: {
@@ -1578,7 +1617,18 @@ declare global {
         prototype: HTMLNvMenuElement;
         new (): HTMLNvMenuElement;
     };
+    interface HTMLNvMenuitemElementEventMap {
+        "menuitemSelected": MenuitemSelectedEventDetail1;
+    }
     interface HTMLNvMenuitemElement extends Components.NvMenuitem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvMenuitemElementEventMap>(type: K, listener: (this: HTMLNvMenuitemElement, ev: NvMenuitemCustomEvent<HTMLNvMenuitemElementEventMap[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 HTMLNvMenuitemElementEventMap>(type: K, listener: (this: HTMLNvMenuitemElement, ev: NvMenuitemCustomEvent<HTMLNvMenuitemElementEventMap[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 HTMLNvMenuitemElement: {
         prototype: HTMLNvMenuitemElement;
@@ -1663,6 +1713,8 @@ declare global {
         "nv-avatar": HTMLNvAvatarElement;
         "nv-badge": HTMLNvBadgeElement;
         "nv-base": HTMLNvBaseElement;
+        "nv-breadcrumb": HTMLNvBreadcrumbElement;
+        "nv-breadcrumbs": HTMLNvBreadcrumbsElement;
         "nv-button": HTMLNvButtonElement;
         "nv-col": HTMLNvColElement;
         "nv-datagrid": HTMLNvDatagridElement;
@@ -1862,6 +1914,22 @@ declare namespace LocalJSX {
      */
     interface NvBase {
     }
+    interface NvBreadcrumb {
+        /**
+          * Use this to highlight the breadcrumb as the current page in your navigation. It also makes the page clearer to screen readers with aria-current="location".
+         */
+        "current"?: boolean;
+        /**
+          * Add an optional tooltip to provide extra information about the breadcrumb.
+         */
+        "tooltip"?: string;
+        /**
+          * The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs in a dropdown. Use default for a single item. When passing multiple items as collapsed, make sure to wrap you links in list tags
+         */
+        "type"?: 'collapsed' | 'default';
+    }
+    interface NvBreadcrumbs {
+    }
     interface NvButton {
         /**
           * Applies styling that visually indicates the button represents a dangerous action.
@@ -2268,7 +2336,7 @@ declare namespace LocalJSX {
          */
         "onValueChanged"?: (event: NvFieldpasswordCustomEvent<string>) => void;
         /**
-          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input. the rules are applied to the input value via regexes.
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input on form submission. the rules are applied to the input value via regexes.
          */
         "pattern"?: string;
         /**
@@ -2378,6 +2446,10 @@ declare namespace LocalJSX {
           * @validator message
          */
         "errorDescription"?: string;
+        /**
+          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
+         */
+        "inputId"?: string;
         /**
           * Lets you define the text that explains what users should choose in the select field. It’s a crucial element for making forms clear and user-friendly.
          */
@@ -2408,10 +2480,6 @@ declare namespace LocalJSX {
           * Marks the select field as required, ensuring that the user must fill it out before submitting the form.
          */
         "required"?: boolean;
-        /**
-          * Sets the ID for the select element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.
-         */
-        "selectId"?: string;
         /**
           * Changes the select field’s appearance to indicate successful input or validation.
          */
@@ -2484,7 +2552,7 @@ declare namespace LocalJSX {
          */
         "onValueChanged"?: (event: NvFieldtextCustomEvent<string>) => void;
         /**
-          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input.
+          * Set rules for how the input should be formatted. For example, you can require that a phone number includes only digits or that an email address has the correct format. If users don’t follow these rules, they’ll get a prompt to correct their input after the form is submitted.
          */
         "pattern"?: string;
         /**
@@ -2720,7 +2788,7 @@ declare namespace LocalJSX {
         /**
           * Sets the shape of the button. Choose between square and rounded.
          */
-        "shape"?: 'square' | 'rounded';
+        "shape"?: `${IconButtonShape}`;
         /**
           * Determines how large or small the button appears, allowing for customization of the button's dimensions to fit different design specifications and user needs.
          */
@@ -2750,7 +2818,7 @@ declare namespace LocalJSX {
          */
         "nested"?: boolean;
         /**
-          * Emitted from nv-menuitem elements with the corresponding id when the menu item is selected.
+          * Emitted from nv-menuitem elements with the corresponding id and name when selected (via click or keyboard). This event listener can be attached to either the nv-menu or the nv-menuitem element.
          */
         "onMenuitemSelected"?: (event: NvMenuCustomEvent<MenuitemSelectedEventDetail>) => void;
         /**
@@ -2775,6 +2843,14 @@ declare namespace LocalJSX {
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers. The icon is not displayed when the button is loading.
          */
         "icon"?: `${IconName}`;
+        /**
+          * Represents the identifier or name associated with the menu item. This value will be emitted as part of the event data when the menu item is selected, enabling event handlers to identify the chosen item.
+         */
+        "name"?: string;
+        /**
+          * Fires when the menu item is selected (click or keypress). Will include the id and name of the menu item.
+         */
+        "onMenuitemSelected"?: (event: NvMenuitemCustomEvent<MenuitemSelectedEventDetail1>) => void;
         /**
           * Show a shortcut key for the action represented in the menu item.
          */
@@ -2955,6 +3031,8 @@ declare namespace LocalJSX {
         "nv-avatar": NvAvatar;
         "nv-badge": NvBadge;
         "nv-base": NvBase;
+        "nv-breadcrumb": NvBreadcrumb;
+        "nv-breadcrumbs": NvBreadcrumbs;
         "nv-button": NvButton;
         "nv-col": NvCol;
         "nv-datagrid": NvDatagrid;
@@ -3001,6 +3079,8 @@ declare module "@stencil/core" {
              * @deprecated This is only to help with the migration from v2 to v3. It will be removed in the next major release.
              */
             "nv-base": LocalJSX.NvBase & JSXBase.HTMLAttributes<HTMLNvBaseElement>;
+            "nv-breadcrumb": LocalJSX.NvBreadcrumb & JSXBase.HTMLAttributes<HTMLNvBreadcrumbElement>;
+            "nv-breadcrumbs": LocalJSX.NvBreadcrumbs & JSXBase.HTMLAttributes<HTMLNvBreadcrumbsElement>;
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**

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

@@ -1,10 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { JSX } from './components';
 
+type Optional<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K>;
+
+export type NovaTemplate = string;
+export type NovaComponent = keyof JSX.IntrinsicElements;
+
+export type NovaDocs<T> = T extends NovaTemplate
+  ? Omit<NovaDocsGeneric<T>, 'component'>
+  : NovaDocsGeneric<T>;
+
 /**
- * Interface for the NovaDocs object
+ * Generic Interface for the NovaDocs object
  */
-export interface NovaDocs<T> {
+export interface NovaDocsGeneric<T> {
   /**
    * Will not render the component in storybook, useful for composed components
    */
@@ -12,39 +21,52 @@ export interface NovaDocs<T> {
   /**
    * Tag name of the component
    */
-  component: keyof JSX.IntrinsicElements;
+  component: T extends NovaTemplate ? undefined : NovaComponent;
   /**
    * List of components that will be rendered inside the component's docs,
    * required for correct imports
    */
-  subcomponents?: Array<keyof JSX.IntrinsicElements>;
+  subcomponents?: Array<NovaComponent>;
   /**
    * List of components that will be used for composition.  Will render
    * additional docs tabs with props etc. for them.
    */
-  composedComponents?: Array<keyof JSX.IntrinsicElements>;
+  composedComponents?: Array<NovaComponent>;
   /**
    * Each item will be rendered as a story in each storybook.
    */
-  stories?: Array<{
-    /**
-     * Name of the story
-     */
-    name: string;
+  stories?: Array<
+    {
+      /**
+       * Name of the story
+       */
+      name: string;
 
-    /**
-     * Description of the story
-     */
-    description?: string;
+      /**
+       * Props to pass to the component
+       */
+      args?: T extends NovaTemplate ? undefined : Partial<T>;
 
-    /**
-     * Props to pass to the component
-     */
-    args?: Partial<T>;
-
-    /**
-     * Template to render the component with the args passed in the story args object above (optional)
-     */
-    template: any;
-  }>;
+      /**
+       * Template to render the component with the args passed in the story args
+       * object above (optional)
+       */
+      template: JSX.Element;
+    } & StoryDescription<T>
+  >;
 }
+
+type StoryDescription<T> = T extends NovaTemplate
+  ? {
+      /**
+       * Description of the story, required for template stories
+       */
+      description: string;
+    }
+  : {
+      /**
+       * Description of the story, leave blank to automatically infer from prop
+       * descriptions
+       */
+      description?: string;
+    };

package/dist/types/templates/navigation.docs.d.ts

@@ -0,0 +1,3 @@
+import type { NovaDocs, NovaTemplate } from '../nova-docs';
+declare const NavigationDocs: NovaDocs<NovaTemplate>;
+export default NavigationDocs;