@nova-design-system/nova-webcomponents 3.28.0 → 3.30.0

package/dist/types/components.d.ts

@@ -5,20 +5,22 @@
  * 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, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, StatusIndicatorEmphasis, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+import { IconName } from "./components/nv-icon/nv-icons";
 import { Column } from "./interfaces/Column";
 import { DateOnly, TimeOnly } from "./interfaces/dates";
 import { Element } from "./stencil-public-runtime";
 import { FilterMode } from "./utils/search-engine";
-import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement, Strategy } from "@floating-ui/dom";
-export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+import { TagColor } from "./components/nv-tag/nv-tag";
+export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, StatusIndicatorEmphasis, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
+export { IconName } from "./components/nv-icon/nv-icons";
 export { Column } from "./interfaces/Column";
 export { DateOnly, TimeOnly } from "./interfaces/dates";
 export { Element } from "./stencil-public-runtime";
 export { FilterMode } from "./utils/search-engine";
-export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement, Strategy } from "@floating-ui/dom";
+export { TagColor } from "./components/nv-tag/nv-tag";
 export namespace Components {
     interface NvAccordion {
         /**
@@ -128,8 +130,9 @@ export namespace Components {
         "hidden": boolean;
         /**
           * Icon associated with the alert, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * Main content of the alert. For more complex content, use the default slot instead.
          */
@@ -224,8 +227,9 @@ export namespace Components {
         /**
           * The icon to display in the badge.
           * @deprecated use leadIcon or slot="leading-icon" instead.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * The location of the icon in the badge.
           * @deprecated only leadIcon now.
@@ -243,9 +247,10 @@ export namespace Components {
         "label"?: string | null;
         /**
           * The lead icon of the badge.
+          * @icon 
           * @default null
          */
-        "leadIcon"?: string | null;
+        "leadIcon"?: `${IconName}` | null;
         /**
           * When true, the alert does not automatically close upon dismissing. Useful for externally controlled component behavior.
           * @default false
@@ -440,6 +445,9 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvCol {
         /**
           * Defines the column size based on a 12 column grid system.
@@ -676,9 +684,10 @@ export namespace Components {
         "form": string;
         /**
           * Sets the leading icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "leadingIcon": string;
+        "leadingIcon": `${IconName}` | null;
         /**
           * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
@@ -690,9 +699,10 @@ export namespace Components {
         "primaryLabel": string;
         /**
           * Sets the trailing icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "trailingIcon": string;
+        "trailingIcon": `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -787,9 +797,10 @@ export namespace Components {
         "form"?: string | null;
         /**
           * Sets the leading icon for the primary button.
+          * @icon 
           * @default null
          */
-        "leadingIcon"?: string | null;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Sets the type of the primary button. If using a form, this will default to 'submit' if nothing passed.
          */
@@ -801,9 +812,10 @@ export namespace Components {
         "primaryLabel": string | null;
         /**
           * Sets the trailing icon for the primary button.
+          * @icon 
           * @default null
          */
-        "trailingIcon"?: string | null;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -2480,8 +2492,9 @@ export namespace Components {
         "medium": boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+          * @icon
          */
-        "name": `${IconName}` | string;
+        "name": `${IconName}`;
         /**
           * Adjust the size of the icon to fit your design needs.
           * @default 'md'
@@ -2531,8 +2544,9 @@ export namespace Components {
         "loading": boolean;
         /**
           * 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
          */
-        "name": `${IconName}` | string;
+        "name": `${IconName}`;
         /**
           * Sets the shape of the button. Choose between square and rounded.
           * @default 'square'
@@ -2641,6 +2655,7 @@ export namespace Components {
         "hasSubmenu": boolean;
         /**
           * 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
          */
         "icon": `${IconName}`;
         /**
@@ -2687,8 +2702,9 @@ export namespace Components {
         "hidden": boolean;
         /**
           * Icon associated with the notification, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon": string;
+        "icon": `${IconName}`;
         /**
           * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
           * @default false
@@ -2952,6 +2968,9 @@ export namespace Components {
          */
         "triggerMode": 'hover' | 'click' | 'controlled';
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvRow {
     }
     /**
@@ -2962,6 +2981,16 @@ export namespace Components {
           * The current active path. Used to automatically set the active state of nav items. Example: "/dashboard" or "/settings/profile"
          */
         "activePath"?: string;
+        /**
+          * Maximum width in pixels when resizing.
+          * @default 480
+         */
+        "maxWidth": number;
+        /**
+          * Minimum width in pixels when resizing.
+          * @default 200
+         */
+        "minWidth": number;
         /**
           * Determines the emphasis of notification bullets in the sidebar. - high: More prominent appearance - low: Less prominent appearance
           * @default 'high'
@@ -2977,11 +3006,20 @@ export namespace Components {
           * @default true
          */
         "open": boolean;
+        /**
+          * When true, the sidebar can be resized horizontally by dragging its right edge. Only active when the sidebar is open (not collapsed).
+          * @default false
+         */
+        "resizable": boolean;
         /**
           * The type of sidebar behavior. - collapsible: Can be toggled open/closed - persistent: Always visible
           * @default 'persistent'
          */
         "type": 'collapsible' | 'persistent';
+        /**
+          * Current sidebar width in pixels. When set (or while resizing), overrides the default CSS token width. Updated as the user drags the resize handle. Not reflected to the attribute to avoid DOM churn on every pointer move.
+         */
+        "width"?: number;
     }
     /**
      * Scrollable main content area of the sidebar containing navigation groups and items.
@@ -3048,8 +3086,9 @@ export namespace Components {
         "collapsible": boolean;
         /**
           * Optional icon to display before the label.
+          * @icon
          */
-        "icon"?: IconName;
+        "icon"?: `${IconName}`;
         /**
           * Number of notifications to display. When provided, a notification bullet will be automatically rendered. The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.
          */
@@ -3142,6 +3181,26 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    /**
+     * A static, non-interactive visual indicator that communicates
+     * system-controlled status through colour, icon, and optional label.
+     */
+    interface NvStatusindicator {
+        /**
+          * The visual emphasis of the indicator.
+          * @default 'low'
+         */
+        "emphasis": `${StatusIndicatorEmphasis}`;
+        /**
+          * The text label of the indicator. When omitted, the component renders icon-only.
+         */
+        "label"?: string;
+        /**
+          * The status variant of the indicator.
+          * @default 'neutral'
+         */
+        "status": `${FeedbackColors}`;
+    }
     interface NvTable {
     }
     interface NvTableheader {
@@ -3156,6 +3215,40 @@ export namespace Components {
          */
         "sortable": boolean;
     }
+    interface NvTag {
+        /**
+          * The color variant of the tag.
+          * @default 'grey'
+         */
+        "color": TagColor;
+        /**
+          * Whether the dismiss button is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether the tag can be dismissed.
+          * @default false
+         */
+        "dismissible": boolean;
+        /**
+          * When set, the tag renders as a link.
+         */
+        "href"?: string;
+        /**
+          * The text label of the tag.
+         */
+        "label"?: string;
+        /**
+          * The relationship of the linked resource. When target="_blank" and rel is not set, defaults to "noopener noreferrer" for security.
+         */
+        "rel"?: string;
+        /**
+          * The browsing context for the link.
+          * @default '_self'
+         */
+        "target": '_self' | '_blank' | '_parent' | '_top';
+    }
     /**
      * This is a test component for the new TimeOnly type
      * @deprecated [EXPERIMENTAL]
@@ -3441,6 +3534,10 @@ export interface NvTableheaderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvTableheaderElement;
 }
+export interface NvTagCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvTagElement;
+}
 export interface NvTimetestCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvTimetestElement;
@@ -3586,6 +3683,9 @@ declare global {
         prototype: HTMLNvCalendarElement;
         new (): HTMLNvCalendarElement;
     };
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface HTMLNvColElement extends Components.NvCol, HTMLStencilElement {
     }
     var HTMLNvColElement: {
@@ -4235,6 +4335,9 @@ declare global {
         prototype: HTMLNvPopoverElement;
         new (): HTMLNvPopoverElement;
     };
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface HTMLNvRowElement extends Components.NvRow, HTMLStencilElement {
     }
     var HTMLNvRowElement: {
@@ -4243,6 +4346,7 @@ declare global {
     };
     interface HTMLNvSidebarElementEventMap {
         "openChanged": boolean;
+        "widthChanged": number;
     }
     /**
      * Main sidebar container for navigation. Supports collapsible and persistent modes.
@@ -4365,6 +4469,16 @@ declare global {
         prototype: HTMLNvStackElement;
         new (): HTMLNvStackElement;
     };
+    /**
+     * A static, non-interactive visual indicator that communicates
+     * system-controlled status through colour, icon, and optional label.
+     */
+    interface HTMLNvStatusindicatorElement extends Components.NvStatusindicator, HTMLStencilElement {
+    }
+    var HTMLNvStatusindicatorElement: {
+        prototype: HTMLNvStatusindicatorElement;
+        new (): HTMLNvStatusindicatorElement;
+    };
     interface HTMLNvTableElement extends Components.NvTable, HTMLStencilElement {
     }
     var HTMLNvTableElement: {
@@ -4388,6 +4502,28 @@ declare global {
         prototype: HTMLNvTableheaderElement;
         new (): HTMLNvTableheaderElement;
     };
+    interface HTMLNvTagElementEventMap {
+        "dismissed": {
+    /**
+     * The label of the dismissed tag.
+     */
+    label?: string;
+  };
+    }
+    interface HTMLNvTagElement extends Components.NvTag, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvTagElementEventMap>(type: K, listener: (this: HTMLNvTagElement, ev: NvTagCustomEvent<HTMLNvTagElementEventMap[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 HTMLNvTagElementEventMap>(type: K, listener: (this: HTMLNvTagElement, ev: NvTagCustomEvent<HTMLNvTagElementEventMap[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 HTMLNvTagElement: {
+        prototype: HTMLNvTagElement;
+        new (): HTMLNvTagElement;
+    };
     interface HTMLNvTimetestElementEventMap {
         "valueChanged": { start?: TimeOnly; end?: TimeOnly };
         "lastChanged": { time: TimeOnly };
@@ -4546,8 +4682,10 @@ declare global {
         "nv-sidebarnavsubitem": HTMLNvSidebarnavsubitemElement;
         "nv-split": HTMLNvSplitElement;
         "nv-stack": HTMLNvStackElement;
+        "nv-statusindicator": HTMLNvStatusindicatorElement;
         "nv-table": HTMLNvTableElement;
         "nv-tableheader": HTMLNvTableheaderElement;
+        "nv-tag": HTMLNvTagElement;
         "nv-timetest": HTMLNvTimetestElement;
         "nv-toggle": HTMLNvToggleElement;
         "nv-togglebutton": HTMLNvTogglebuttonElement;
@@ -4659,8 +4797,9 @@ declare namespace LocalJSX {
         "hidden"?: boolean;
         /**
           * Icon associated with the alert, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * Main content of the alert. For more complex content, use the default slot instead.
          */
@@ -4768,8 +4907,9 @@ declare namespace LocalJSX {
         /**
           * The icon to display in the badge.
           * @deprecated use leadIcon or slot="leading-icon" instead.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * The location of the icon in the badge.
           * @deprecated only leadIcon now.
@@ -4787,9 +4927,10 @@ declare namespace LocalJSX {
         "label"?: string | null;
         /**
           * The lead icon of the badge.
+          * @icon 
           * @default null
          */
-        "leadIcon"?: string | null;
+        "leadIcon"?: `${IconName}` | null;
         /**
           * Emitted when the badge is dismissed.
          */
@@ -5005,6 +5146,9 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvCol {
         /**
           * Defines the column size based on a 12 column grid system.
@@ -5320,9 +5464,10 @@ declare namespace LocalJSX {
         "form"?: string;
         /**
           * Sets the leading icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "leadingIcon"?: string;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Emitted when the cancel button is clicked. This will close the dialog.
          */
@@ -5342,9 +5487,10 @@ declare namespace LocalJSX {
         "primaryLabel"?: string;
         /**
           * Sets the trailing icon for the primary button.
-          * @default ''
+          * @icon 
+          * @default null
          */
-        "trailingIcon"?: string;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -5436,9 +5582,10 @@ declare namespace LocalJSX {
         "form"?: string | null;
         /**
           * Sets the leading icon for the primary button.
+          * @icon 
           * @default null
          */
-        "leadingIcon"?: string | null;
+        "leadingIcon"?: `${IconName}` | null;
         /**
           * Emitted when the cancel button is clicked. This will close the drawer.
          */
@@ -5458,9 +5605,10 @@ declare namespace LocalJSX {
         "primaryLabel"?: string | null;
         /**
           * Sets the trailing icon for the primary button.
+          * @icon 
           * @default null
          */
-        "trailingIcon"?: string | null;
+        "trailingIcon"?: `${IconName}` | null;
         /**
           * Controls the visibility of the cancel button. When true, the cancel button is hidden.
           * @default false
@@ -7204,8 +7352,9 @@ declare namespace LocalJSX {
         "medium"?: boolean;
         /**
           * Choose the icon you want to display. This also sets the aria-label for improved accessibility, helping users who rely on screen readers.
+          * @icon
          */
-        "name"?: `${IconName}` | string;
+        "name"?: `${IconName}`;
         /**
           * Adjust the size of the icon to fit your design needs.
           * @default 'md'
@@ -7255,8 +7404,9 @@ declare namespace LocalJSX {
         "loading"?: boolean;
         /**
           * 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
          */
-        "name"?: `${IconName}` | string;
+        "name"?: `${IconName}`;
         /**
           * Sets the shape of the button. Choose between square and rounded.
           * @default 'square'
@@ -7361,6 +7511,7 @@ declare namespace LocalJSX {
         "hasSubmenu"?: boolean;
         /**
           * 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
          */
         "icon"?: `${IconName}`;
         /**
@@ -7420,8 +7571,9 @@ declare namespace LocalJSX {
         "hidden"?: boolean;
         /**
           * Icon associated with the notification, defaults vary based on the feedback type.
+          * @icon
          */
-        "icon"?: string;
+        "icon"?: `${IconName}`;
         /**
           * When true, the notification will be hidden initially, but internal changes will not be in a controlled state. Good for animating the notification in.
           * @default false
@@ -7666,6 +7818,9 @@ declare namespace LocalJSX {
          */
         "triggerMode"?: 'hover' | 'click' | 'controlled';
     }
+    /**
+     * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+     */
     interface NvRow {
     }
     /**
@@ -7676,6 +7831,16 @@ declare namespace LocalJSX {
           * The current active path. Used to automatically set the active state of nav items. Example: "/dashboard" or "/settings/profile"
          */
         "activePath"?: string;
+        /**
+          * Maximum width in pixels when resizing.
+          * @default 480
+         */
+        "maxWidth"?: number;
+        /**
+          * Minimum width in pixels when resizing.
+          * @default 200
+         */
+        "minWidth"?: number;
         /**
           * Determines the emphasis of notification bullets in the sidebar. - high: More prominent appearance - low: Less prominent appearance
           * @default 'high'
@@ -7691,16 +7856,29 @@ declare namespace LocalJSX {
           * @bind open
          */
         "onOpenChanged"?: (event: NvSidebarCustomEvent<boolean>) => void;
+        /**
+          * Emitted when the sidebar width changes via the resize handle. Fires at the end of a drag, or after each keyboard adjustment.
+         */
+        "onWidthChanged"?: (event: NvSidebarCustomEvent<number>) => void;
         /**
           * Whether the sidebar is currently open (only applies to collapsible type).
           * @default true
          */
         "open"?: boolean;
+        /**
+          * When true, the sidebar can be resized horizontally by dragging its right edge. Only active when the sidebar is open (not collapsed).
+          * @default false
+         */
+        "resizable"?: boolean;
         /**
           * The type of sidebar behavior. - collapsible: Can be toggled open/closed - persistent: Always visible
           * @default 'persistent'
          */
         "type"?: 'collapsible' | 'persistent';
+        /**
+          * Current sidebar width in pixels. When set (or while resizing), overrides the default CSS token width. Updated as the user drags the resize handle. Not reflected to the attribute to avoid DOM churn on every pointer move.
+         */
+        "width"?: number;
     }
     /**
      * Scrollable main content area of the sidebar containing navigation groups and items.
@@ -7767,8 +7945,9 @@ declare namespace LocalJSX {
         "collapsible"?: boolean;
         /**
           * Optional icon to display before the label.
+          * @icon
          */
-        "icon"?: IconName;
+        "icon"?: `${IconName}`;
         /**
           * Number of notifications to display. When provided, a notification bullet will be automatically rendered. The bullet will be positioned in the trailing slot when sidebar is open, and on the icon when collapsed.
          */
@@ -7844,6 +8023,26 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    /**
+     * A static, non-interactive visual indicator that communicates
+     * system-controlled status through colour, icon, and optional label.
+     */
+    interface NvStatusindicator {
+        /**
+          * The visual emphasis of the indicator.
+          * @default 'low'
+         */
+        "emphasis"?: `${StatusIndicatorEmphasis}`;
+        /**
+          * The text label of the indicator. When omitted, the component renders icon-only.
+         */
+        "label"?: string;
+        /**
+          * The status variant of the indicator.
+          * @default 'neutral'
+         */
+        "status"?: `${FeedbackColors}`;
+    }
     interface NvTable {
     }
     interface NvTableheader {
@@ -7862,6 +8061,49 @@ declare namespace LocalJSX {
          */
         "sortable"?: boolean;
     }
+    interface NvTag {
+        /**
+          * The color variant of the tag.
+          * @default 'grey'
+         */
+        "color"?: TagColor;
+        /**
+          * Whether the dismiss button is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the tag can be dismissed.
+          * @default false
+         */
+        "dismissible"?: boolean;
+        /**
+          * When set, the tag renders as a link.
+         */
+        "href"?: string;
+        /**
+          * The text label of the tag.
+         */
+        "label"?: string;
+        /**
+          * Emitted when the dismiss button is clicked.
+         */
+        "onDismissed"?: (event: NvTagCustomEvent<{
+    /**
+     * The label of the dismissed tag.
+     */
+    label?: string;
+  }>) => void;
+        /**
+          * The relationship of the linked resource. When target="_blank" and rel is not set, defaults to "noopener noreferrer" for security.
+         */
+        "rel"?: string;
+        /**
+          * The browsing context for the link.
+          * @default '_self'
+         */
+        "target"?: '_self' | '_blank' | '_parent' | '_top';
+    }
     /**
      * This is a test component for the new TimeOnly type
      * @deprecated [EXPERIMENTAL]
@@ -8101,8 +8343,10 @@ declare namespace LocalJSX {
         "nv-sidebarnavsubitem": NvSidebarnavsubitem;
         "nv-split": NvSplit;
         "nv-stack": NvStack;
+        "nv-statusindicator": NvStatusindicator;
         "nv-table": NvTable;
         "nv-tableheader": NvTableheader;
+        "nv-tag": NvTag;
         "nv-timetest": NvTimetest;
         "nv-toggle": NvToggle;
         "nv-togglebutton": NvTogglebutton;
@@ -8127,6 +8371,9 @@ declare module "@stencil/core" {
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
             "nv-buttongroup": LocalJSX.NvButtongroup & JSXBase.HTMLAttributes<HTMLNvButtongroupElement>;
             "nv-calendar": LocalJSX.NvCalendar & JSXBase.HTMLAttributes<HTMLNvCalendarElement>;
+            /**
+             * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+             */
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**
              * A flexible data grid component powered by `@tanstack/table-core`.
@@ -8194,6 +8441,9 @@ declare module "@stencil/core" {
             "nv-pagination-nav": LocalJSX.NvPaginationNav & JSXBase.HTMLAttributes<HTMLNvPaginationNavElement>;
             "nv-paginationtable": LocalJSX.NvPaginationtable & JSXBase.HTMLAttributes<HTMLNvPaginationtableElement>;
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
+            /**
+             * @deprecated since v3.0.0. Use Tailwind CSS classes instead with grid or flexbox utilities.
+             */
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
             /**
              * Main sidebar container for navigation. Supports collapsible and persistent modes.
@@ -8242,8 +8492,14 @@ declare module "@stencil/core" {
              * @deprecated Please use tailwind classes instead
              */
             "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
+            /**
+             * A static, non-interactive visual indicator that communicates
+             * system-controlled status through colour, icon, and optional label.
+             */
+            "nv-statusindicator": LocalJSX.NvStatusindicator & JSXBase.HTMLAttributes<HTMLNvStatusindicatorElement>;
             "nv-table": LocalJSX.NvTable & JSXBase.HTMLAttributes<HTMLNvTableElement>;
             "nv-tableheader": LocalJSX.NvTableheader & JSXBase.HTMLAttributes<HTMLNvTableheaderElement>;
+            "nv-tag": LocalJSX.NvTag & JSXBase.HTMLAttributes<HTMLNvTagElement>;
             /**
              * This is a test component for the new TimeOnly type
              * @deprecated [EXPERIMENTAL]