@nova-design-system/nova-webcomponents 3.19.0 → 3.21.0

package/dist/types/components.d.ts

@@ -284,6 +284,14 @@ export namespace Components {
           * Applies styling that visually indicates the button represents a dangerous action.
          */
         "danger": boolean;
+        /**
+          * Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won’t be reached via the Tab key.
+         */
+        "disableTabindex": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "disable-tabindex"?: boolean;
         /**
           * Disables the button, preventing user interaction.
          */
@@ -474,6 +482,7 @@ export namespace Components {
     }
     /**
      * A flexible data grid component powered by `@tanstack/table-core`.
+     * @deprecated Please use the datatable instead
      */
     interface NvDatagrid {
         /**
@@ -1632,7 +1641,7 @@ export namespace Components {
         /**
           * The value of the input field. It’s the text that users type in or the value that you set programmatically. This is the main way to interact with the input field, and it’s essential for creating forms that users can fill out.
          */
-        "value": number;
+        "value": number | null;
     }
     interface NvFieldpassword {
         /**
@@ -2407,6 +2416,14 @@ export namespace Components {
           * Makes the button look active when it’s within a compatible component like a button group.
          */
         "active": boolean;
+        /**
+          * Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won’t be reached via the Tab key.
+         */
+        "disableTabindex": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "disable-tabindex"?: boolean;
         /**
           * Disables the button, preventing user interaction.
          */
@@ -2763,6 +2780,20 @@ export namespace Components {
     }
     interface NvTable {
     }
+    interface NvTableheader {
+        /**
+          * The current sort direction of the header. Will be 'none' if the header is not sortable or if the sort direction is not set.
+         */
+        "sortDirection": 'none' | 'asc' | 'desc';
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "sort-direction"?: 'none' | 'asc' | 'desc';
+        /**
+          * Will render the header as sortable with the corresponding icon button. Allows the header to be tabbed, and trigger sorting via click or keyboard navigation
+         */
+        "sortable": boolean;
+    }
     interface NvToggle {
         /**
           * Indicates whether the toggle is checked or not.
@@ -3001,6 +3032,10 @@ export interface NvSplitCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvSplitElement;
 }
+export interface NvTableheaderCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvTableheaderElement;
+}
 export interface NvToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvToggleElement;
@@ -3196,6 +3231,7 @@ declare global {
     }
     /**
      * A flexible data grid component powered by `@tanstack/table-core`.
+     * @deprecated Please use the datatable instead
      */
     interface HTMLNvDatagridElement extends Components.NvDatagrid, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvDatagridElementEventMap>(type: K, listener: (this: HTMLNvDatagridElement, ev: NvDatagridCustomEvent<HTMLNvDatagridElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3406,7 +3442,7 @@ declare global {
         new (): HTMLNvFieldmultiselectElement;
     };
     interface HTMLNvFieldnumberElementEventMap {
-        "valueChanged": number;
+        "valueChanged": number | null;
     }
     interface HTMLNvFieldnumberElement extends Components.NvFieldnumber, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvFieldnumberElementEventMap>(type: K, listener: (this: HTMLNvFieldnumberElement, ev: NvFieldnumberCustomEvent<HTMLNvFieldnumberElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3695,6 +3731,23 @@ declare global {
         prototype: HTMLNvTableElement;
         new (): HTMLNvTableElement;
     };
+    interface HTMLNvTableheaderElementEventMap {
+        "sortDirectionChanged": string;
+    }
+    interface HTMLNvTableheaderElement extends Components.NvTableheader, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvTableheaderElementEventMap>(type: K, listener: (this: HTMLNvTableheaderElement, ev: NvTableheaderCustomEvent<HTMLNvTableheaderElementEventMap[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 HTMLNvTableheaderElementEventMap>(type: K, listener: (this: HTMLNvTableheaderElement, ev: NvTableheaderCustomEvent<HTMLNvTableheaderElementEventMap[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 HTMLNvTableheaderElement: {
+        prototype: HTMLNvTableheaderElement;
+        new (): HTMLNvTableheaderElement;
+    };
     interface HTMLNvToggleElementEventMap {
         "checkedChanged": boolean;
     }
@@ -3812,6 +3865,7 @@ declare global {
         "nv-split": HTMLNvSplitElement;
         "nv-stack": HTMLNvStackElement;
         "nv-table": HTMLNvTableElement;
+        "nv-tableheader": HTMLNvTableheaderElement;
         "nv-toggle": HTMLNvToggleElement;
         "nv-togglebutton": HTMLNvTogglebuttonElement;
         "nv-togglebuttongroup": HTMLNvTogglebuttongroupElement;
@@ -4107,6 +4161,14 @@ declare namespace LocalJSX {
           * Applies styling that visually indicates the button represents a dangerous action.
          */
         "danger"?: boolean;
+        /**
+          * Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won’t be reached via the Tab key.
+         */
+        "disableTabindex"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "disable-tabindex"?: boolean;
         /**
           * Disables the button, preventing user interaction.
          */
@@ -4306,6 +4368,7 @@ declare namespace LocalJSX {
     }
     /**
      * A flexible data grid component powered by `@tanstack/table-core`.
+     * @deprecated Please use the datatable instead
      */
     interface NvDatagrid {
         /**
@@ -5523,7 +5586,7 @@ declare namespace LocalJSX {
           * Emitted when the input value changes.
           * @bind value
          */
-        "onValueChanged"?: (event: NvFieldnumberCustomEvent<number>) => void;
+        "onValueChanged"?: (event: NvFieldnumberCustomEvent<number | null>) => void;
         /**
           * Display temporary text inside the input field to give users a hint about what to type. It’s a great way to provide examples or suggestions directly in the field before they start typing.
          */
@@ -5552,7 +5615,7 @@ declare namespace LocalJSX {
         /**
           * The value of the input field. It’s the text that users type in or the value that you set programmatically. This is the main way to interact with the input field, and it’s essential for creating forms that users can fill out.
          */
-        "value"?: number;
+        "value"?: number | null;
     }
     interface NvFieldpassword {
         /**
@@ -6362,6 +6425,14 @@ declare namespace LocalJSX {
           * Makes the button look active when it’s within a compatible component like a button group.
          */
         "active"?: boolean;
+        /**
+          * Use this to make the button skip-able when users navigate with the keyboard. The button remains clickable but won’t be reached via the Tab key.
+         */
+        "disableTabindex"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "disable-tabindex"?: boolean;
         /**
           * Disables the button, preventing user interaction.
          */
@@ -6703,6 +6774,24 @@ declare namespace LocalJSX {
     }
     interface NvTable {
     }
+    interface NvTableheader {
+        /**
+          * Event emitted when the sort direction changes. Payload is the new sort direction.
+         */
+        "onSortDirectionChanged"?: (event: NvTableheaderCustomEvent<string>) => void;
+        /**
+          * The current sort direction of the header. Will be 'none' if the header is not sortable or if the sort direction is not set.
+         */
+        "sortDirection"?: 'none' | 'asc' | 'desc';
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "sort-direction"?: 'none' | 'asc' | 'desc';
+        /**
+          * Will render the header as sortable with the corresponding icon button. Allows the header to be tabbed, and trigger sorting via click or keyboard navigation
+         */
+        "sortable"?: boolean;
+    }
     interface NvToggle {
         /**
           * Indicates whether the toggle is checked or not.
@@ -6894,6 +6983,7 @@ declare namespace LocalJSX {
         "nv-split": NvSplit;
         "nv-stack": NvStack;
         "nv-table": NvTable;
+        "nv-tableheader": NvTableheader;
         "nv-toggle": NvToggle;
         "nv-togglebutton": NvTogglebutton;
         "nv-togglebuttongroup": NvTogglebuttongroup;
@@ -6920,6 +7010,7 @@ declare module "@stencil/core" {
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**
              * A flexible data grid component powered by `@tanstack/table-core`.
+             * @deprecated Please use the datatable instead
              */
             "nv-datagrid": LocalJSX.NvDatagrid & JSXBase.HTMLAttributes<HTMLNvDatagridElement>;
             "nv-datagridcolumn": LocalJSX.NvDatagridcolumn & JSXBase.HTMLAttributes<HTMLNvDatagridcolumnElement>;
@@ -6970,6 +7061,7 @@ declare module "@stencil/core" {
              */
             "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
             "nv-table": LocalJSX.NvTable & JSXBase.HTMLAttributes<HTMLNvTableElement>;
+            "nv-tableheader": LocalJSX.NvTableheader & JSXBase.HTMLAttributes<HTMLNvTableheaderElement>;
             "nv-toggle": LocalJSX.NvToggle & JSXBase.HTMLAttributes<HTMLNvToggleElement>;
             "nv-togglebutton": LocalJSX.NvTogglebutton & JSXBase.HTMLAttributes<HTMLNvTogglebuttonElement>;
             "nv-togglebuttongroup": LocalJSX.NvTogglebuttongroup & JSXBase.HTMLAttributes<HTMLNvTogglebuttongroupElement>;

package/dist/vscode-data.json

@@ -325,6 +325,10 @@
           "name": "danger",
           "description": "Applies styling that visually indicates the button represents a dangerous\naction."
         },
+        {
+          "name": "disable-tabindex",
+          "description": "Use this to make the button skip-able when users navigate with the keyboard.\nThe button remains clickable but won’t be reached via the Tab key."
+        },
         {
           "name": "disabled",
           "description": "Disables the button, preventing user interaction."
@@ -2942,6 +2946,10 @@
           "name": "active",
           "description": "Makes the button look active when it’s within a compatible component\nlike a button group."
         },
+        {
+          "name": "disable-tabindex",
+          "description": "Use this to make the button skip-able when users navigate with the keyboard.\nThe button remains clickable but won’t be reached via the Tab key."
+        },
         {
           "name": "disabled",
           "description": "Disables the button, preventing user interaction."
@@ -3572,12 +3580,6 @@
             {
               "name": "cloud"
             },
-            {
-              "name": "collapse-close"
-            },
-            {
-              "name": "collapse-open"
-            },
             {
               "name": "color-picker"
             },
@@ -4451,6 +4453,9 @@
             {
               "name": "shopping-cart"
             },
+            {
+              "name": "sitemap"
+            },
             {
               "name": "slash"
             },
@@ -4987,6 +4992,34 @@
       },
       "attributes": []
     },
+    {
+      "name": "nv-tableheader",
+      "description": {
+        "kind": "markdown",
+        "value": "A semantic table header cell component that enhances native table headers with sorting behavior, keyboard accessibility, and Nova styling. When enabled, it displays sorting UI and allows users to toggle sort direction through clicks or keyboard input, and communicates its current state via ARIA attributes for assistive technologies.\n\nThis component does not perform sorting on its own—it only controls and displays the sorting state for that header. The actual data sorting must be handled externally. For advanced use cases, such as automatically sorting table data, using built-in server/client-side sorting, or managing multi-column sorting, see the datatable component, which includes full sorting logic.\n\nIf you prefer a fully custom table implementation, you can listen to this component’s sortDirectionChanged event and implement your own sorting behavior."
+      },
+      "attributes": [
+        {
+          "name": "sort-direction",
+          "description": "The current sort direction of the header. Will be 'none' if the header is\nnot sortable or if the sort direction is not set.",
+          "values": [
+            {
+              "name": "asc"
+            },
+            {
+              "name": "desc"
+            },
+            {
+              "name": "none"
+            }
+          ]
+        },
+        {
+          "name": "sortable",
+          "description": "Will render the header as sortable with the corresponding icon button.\nAllows the header to be tabbed, and trigger sorting via click or keyboard\nnavigation"
+        }
+      ]
+    },
     {
       "name": "nv-toggle",
       "description": {