@nova-design-system/nova-webcomponents 3.29.0 → 3.31.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 { 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 { Placement, Strategy } from "@floating-ui/dom";
+export { TagColor } from "./components/nv-tag/nv-tag";
 export namespace Components {
     interface NvAccordion {
         /**
@@ -1229,10 +1231,19 @@ export namespace Components {
           * @default false
          */
         "autofocus": boolean;
+        /**
+          * Clears the current selection. Resets the value to an empty string, removes the selected state from items, clears the filter text (when filterable) and emits `valueChanged` (and `filterTextChanged` when the filter was reset). Emits `cleared` when anything was actually reset.
+         */
+        "clear": () => Promise<void>;
         /**
           * Clears the filter text
          */
         "clearFilter": () => Promise<void>;
+        /**
+          * Shows the inline clear (×) button when a value is selected (or when filterable and the user has typed). The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing the selection from outside the component.
+          * @default false
+         */
+        "clearable": boolean;
         /**
           * Determines if the component’s filtering behavior is managed externally. When set to true and filterable is enabled, the component won’t automatically filter items. Instead, you must implement your own filtering logic (e.g., server-side search or custom matching) using the filterTextChanged event.
           * @default false
@@ -1921,6 +1932,15 @@ export namespace Components {
           * @default false
          */
         "autofocus": boolean;
+        /**
+          * Clears the current selection. Resets the value to an empty string and emits `valueChanged` and `cleared` when the value actually changed. The `@Watch('value')` watcher takes care of syncing the underlying native `<select>` options and the form value.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Shows the inline clear (×) button when a value is selected. The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing from outside the component.
+          * @default false
+         */
+        "clearable": boolean;
         /**
           * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
          */
@@ -2979,6 +2999,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'
@@ -2994,11 +3024,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.
@@ -3160,6 +3199,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 {
@@ -3174,6 +3233,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]
@@ -3459,6 +3552,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;
@@ -3872,6 +3969,7 @@ declare global {
     interface HTMLNvFielddropdownElementEventMap {
         "valueChanged": string;
         "filterTextChanged": string;
+        "cleared": void;
         "openChanged": HTMLNvPopoverElementEventMap['openChanged'];
         "dropdownItemSelected": HTMLNvFielddropdownitemElementEventMap['dropdownItemSelected'];
     }
@@ -4014,6 +4112,7 @@ declare global {
     };
     interface HTMLNvFieldselectElementEventMap {
         "valueChanged": string;
+        "cleared": void;
     }
     interface HTMLNvFieldselectElement extends Components.NvFieldselect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFieldselectElementEventMap>(type: K, listener: (this: HTMLNvFieldselectElement, ev: NvFieldselectCustomEvent<HTMLNvFieldselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4267,6 +4366,7 @@ declare global {
     };
     interface HTMLNvSidebarElementEventMap {
         "openChanged": boolean;
+        "widthChanged": number;
     }
     /**
      * Main sidebar container for navigation. Supports collapsible and persistent modes.
@@ -4389,6 +4489,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: {
@@ -4412,6 +4522,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 };
@@ -4570,8 +4702,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;
@@ -5921,6 +6055,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "autofocus"?: boolean;
+        /**
+          * Shows the inline clear (×) button when a value is selected (or when filterable and the user has typed). The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing the selection from outside the component.
+          * @default false
+         */
+        "clearable"?: boolean;
         /**
           * Determines if the component’s filtering behavior is managed externally. When set to true and filterable is enabled, the component won’t automatically filter items. Instead, you must implement your own filtering logic (e.g., server-side search or custom matching) using the filterTextChanged event.
           * @default false
@@ -6005,6 +6144,10 @@ declare namespace LocalJSX {
           * Defines the name attribute of the input field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the input's data in form submissions. It should be unique within the form to avoid conflicts.
          */
         "name"?: string;
+        /**
+          * Emitted when the field is cleared via the inline clear button or the programmatic `clear()` method. Useful for reacting to user-initiated clears without subscribing to every `valueChanged` emission.
+         */
+        "onCleared"?: (event: NvFielddropdownCustomEvent<void>) => void;
         /**
           * Event emitted when an item is clicked. Propagation prevented in listener.
          */
@@ -6644,6 +6787,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "autofocus"?: boolean;
+        /**
+          * Shows the inline clear (×) button when a value is selected. The programmatic `clear()` method works regardless of this prop — leave it off when you want to manage clearing from outside the component.
+          * @default false
+         */
+        "clearable"?: boolean;
         /**
           * Add helpful hints or extra information under the select field. This is where you can clarify what users should choose or provide additional instructions, making the form easier to fill out correctly.
          */
@@ -6697,6 +6845,10 @@ declare namespace LocalJSX {
           * Defines the name attribute of the select field, which is crucial for form submission. This value is used as the key in the key-value pair sent to the server, representing the selected data in form submissions. It should be unique within the form to avoid conflicts
          */
         "name"?: string;
+        /**
+          * Emitted when the field is cleared via the inline clear button or the programmatic `clear()` method. Useful for reacting to user-initiated clears without subscribing to every `valueChanged` emission.
+         */
+        "onCleared"?: (event: NvFieldselectCustomEvent<void>) => void;
         /**
           * Emitted when the selected value changes.
           * @bind value
@@ -7717,6 +7869,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'
@@ -7732,16 +7894,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.
@@ -7886,6 +8061,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 {
@@ -7904,6 +8099,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]
@@ -8143,8 +8381,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;
@@ -8290,8 +8530,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]

package/dist/types/index.d.ts

@@ -16,6 +16,6 @@ export * as dateTimeUtils from './utils/nova-datetime';
 export type * from './components.d.ts';
 export * as animations from './animations';
 export * as searchEngine from './utils/search-engine';
-export { iconNames } from './components/nv-icon/nv-icons';
+export { iconNames, type IconName } from './components/nv-icon/nv-icons';
 export { WeekAbbreviations } from './interfaces/localization';
 export * from './interfaces/dates';

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

@@ -53,6 +53,10 @@ export declare enum ToggleButtonEmphasis {
     High = "high",
     Low = "low"
 }
+export declare enum StatusIndicatorEmphasis {
+    High = "high",
+    Low = "low"
+}
 export declare enum ToggleButtonSize {
     ExtraSmall = "xs",
     Small = "sm",