@nova-design-system/nova-webcomponents 3.29.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 { 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 {
         /**
@@ -2979,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'
@@ -2994,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.
@@ -3160,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 {
@@ -3174,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]
@@ -3459,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;
@@ -4267,6 +4346,7 @@ declare global {
     };
     interface HTMLNvSidebarElementEventMap {
         "openChanged": boolean;
+        "widthChanged": number;
     }
     /**
      * Main sidebar container for navigation. Supports collapsible and persistent modes.
@@ -4389,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: {
@@ -4412,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 };
@@ -4570,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;
@@ -7717,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'
@@ -7732,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.
@@ -7886,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 {
@@ -7904,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]
@@ -8143,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;
@@ -8290,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]

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",

package/dist/vscode-data.json

@@ -21017,6 +21017,14 @@
           "name": "active-path",
           "description": "The current active path. Used to automatically set the active state of nav items.\nExample: \"/dashboard\" or \"/settings/profile\""
         },
+        {
+          "name": "max-width",
+          "description": "Maximum width in pixels when resizing."
+        },
+        {
+          "name": "min-width",
+          "description": "Minimum width in pixels when resizing."
+        },
         {
           "name": "notification-emphasis",
           "description": "Determines the emphasis of notification bullets in the sidebar.\n- high: More prominent appearance\n- low: Less prominent appearance",
@@ -21045,6 +21053,10 @@
           "name": "open",
           "description": "Whether the sidebar is currently open (only applies to collapsible type)."
         },
+        {
+          "name": "resizable",
+          "description": "When true, the sidebar can be resized horizontally by dragging its right edge.\nOnly active when the sidebar is open (not collapsed)."
+        },
         {
           "name": "type",
           "description": "The type of sidebar behavior.\n- collapsible: Can be toggled open/closed\n- persistent: Always visible",
@@ -21056,6 +21068,10 @@
               "name": "persistent"
             }
           ]
+        },
+        {
+          "name": "width",
+          "description": "Current sidebar width in pixels. When set (or while resizing), overrides\nthe default CSS token width. Updated as the user drags the resize handle.\nNot reflected to the attribute to avoid DOM churn on every pointer move."
         }
       ]
     },
@@ -22783,6 +22799,52 @@
         }
       ]
     },
+    {
+      "name": "nv-statusindicator",
+      "description": {
+        "kind": "markdown",
+        "value": "A static, non-interactive visual indicator that communicates\nsystem-controlled status through colour, icon, and optional label."
+      },
+      "attributes": [
+        {
+          "name": "emphasis",
+          "description": "The visual emphasis of the indicator.",
+          "values": [
+            {
+              "name": "high"
+            },
+            {
+              "name": "low"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": "The text label of the indicator. When omitted, the component renders icon-only."
+        },
+        {
+          "name": "status",
+          "description": "The status variant of the indicator.",
+          "values": [
+            {
+              "name": "error"
+            },
+            {
+              "name": "information"
+            },
+            {
+              "name": "neutral"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nv-table",
       "description": {
@@ -22819,6 +22881,89 @@
         }
       ]
     },
+    {
+      "name": "nv-tag",
+      "description": {
+        "kind": "markdown",
+        "value": "A visual indicator that communicates categories or metadata. Supports optional leading icon, 10 colour variants from the rainbow palette, and an optional dismiss action. When `href` is set, the tag renders as a link."
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color variant of the tag.",
+          "values": [
+            {
+              "name": "amber"
+            },
+            {
+              "name": "blue"
+            },
+            {
+              "name": "crimson"
+            },
+            {
+              "name": "green"
+            },
+            {
+              "name": "grey"
+            },
+            {
+              "name": "lime"
+            },
+            {
+              "name": "orange"
+            },
+            {
+              "name": "red"
+            },
+            {
+              "name": "turquoise"
+            },
+            {
+              "name": "yellow"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the dismiss button is disabled."
+        },
+        {
+          "name": "dismissible",
+          "description": "Whether the tag can be dismissed."
+        },
+        {
+          "name": "href",
+          "description": "When set, the tag renders as a link."
+        },
+        {
+          "name": "label",
+          "description": "The text label of the tag."
+        },
+        {
+          "name": "rel",
+          "description": "The relationship of the linked resource. When target=\"_blank\" and rel is not set, defaults to \"noopener noreferrer\" for security."
+        },
+        {
+          "name": "target",
+          "description": "The browsing context for the link.",
+          "values": [
+            {
+              "name": "_blank"
+            },
+            {
+              "name": "_parent"
+            },
+            {
+              "name": "_self"
+            },
+            {
+              "name": "_top"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nv-timetest",
       "description": {