@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

package/dist/types/components.d.ts

@@ -10,13 +10,11 @@ import { Column } from "./interfaces/Column";
 import { Element } from "./stencil-public-runtime";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement, Strategy } from "@floating-ui/dom";
-import { ColumnConfig } from "./interfaces/ColumnConfig";
 export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, NotificationEmphasis, NotificationPosition, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 export { Column } from "./interfaces/Column";
 export { Element } from "./stencil-public-runtime";
 export { IconName } from "./components/nv-icon/nv-icons";
 export { Placement, Strategy } from "@floating-ui/dom";
-export { ColumnConfig } from "./interfaces/ColumnConfig";
 export namespace Components {
     interface NvAccordion {
         /**
@@ -2670,94 +2668,78 @@ export namespace Components {
     interface NvRow {
     }
     /**
-     * @deprecated Please use tailwind classes instead
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
      */
-    interface NvStack {
-        /**
-          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
-         */
-        "fill": boolean;
+    interface NvSplit {
         /**
-          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
-         */
-        "flex": boolean;
-        /**
-          * Full set the width of the stack to 100%. (same effect as WFull props)
+          * Collapse a specific pane to 0 size.
+          * @param index Index of the pane to collapse.
+          * @returns
          */
-        "full": boolean;
+        "collapse": (index: number) => Promise<void>;
         /**
-          * Gutter refers to the space that exists between children components inside the stack container.
+          * Destroy the split instance: removes gutters and resets layout state.
+          * @returns
          */
-        "gutter": number;
+        "destroy": () => Promise<void>;
         /**
-          * Display the element of the stack vertically.
+          * Direction of the split layout. - `horizontal`: panes side by side - `vertical`: panes stacked
          */
-        "vertical": boolean;
-    }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-     */
-    interface NvTable {
+        "direction": 'horizontal' | 'vertical';
         /**
-          * Configuration of the columns of the table
+          * Returns the current pane sizes.
+          * @returns Array of pane sizes in percentages.
          */
-        "columnsConfig": ColumnConfig[];
+        "getSizes": () => Promise<number[]>;
         /**
-          * Configuration of the columns of the table
+          * Width or height of the gutter (in px) depending on the split direction. Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
          */
-        "columnsConfigJson"?: string;
+        "gutterSize": number;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "columns-config-json"?: string;
-        /**
-          * Data to be displayed in the table
-         */
-        "data": any[];
+        "gutter-size"?: number;
         /**
-          * Data to be displayed in the table
+          * Minimum sizes (in px) for each pane. Example: `[100, 200]` => first pane min 100px, second min 200px. Explicitly `reflect: false` (array) for framework compatibility.
          */
-        "dataJson"?: string;
+        "minSizes"?: number[];
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Programmatically set pane sizes.
+          * @param sizes Array of pane sizes in percentages.
+          * @returns
          */
-        "data-json"?: string;
+        "setSizes": (sizes: number[]) => Promise<void>;
         /**
-          * Fallback value to be displayed when data is not available
+          * Initial sizes of the panes in percentages. Example: `[50, 50]` means two equal panes. Explicitly `reflect: false` (array) for framework compatibility.
          */
-        "fallbackValue": string;
+        "sizes": number[];
+    }
+    /**
+     * @deprecated Please use tailwind classes instead
+     */
+    interface NvStack {
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
          */
-        "fallback-value"?: string;
+        "fill": boolean;
         /**
-          * The message to display when there are no columns or data available.
-          * @default 'No data or columns available to display.'
+          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
          */
-        "noColumnsNoDataMessage": string;
+        "flex": boolean;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Full set the width of the stack to 100%. (same effect as WFull props)
          */
-        "no-columns-no-data-message"?: string;
+        "full": boolean;
         /**
-          * Message to be displayed when no data is available
+          * Gutter refers to the space that exists between children components inside the stack container.
          */
-        "noDataMessage": string;
+        "gutter": number;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Display the element of the stack vertically.
          */
-        "no-data-message"?: string;
+        "vertical": boolean;
     }
-    interface NvTablecolumn {
-        /**
-          * Header of the column to be displayed
-         */
-        "header"?: string;
-        /**
-          * Name of the column and data accessor
-         */
-        "name": string;
+    interface NvTable {
     }
     interface NvToggle {
         /**
@@ -2835,10 +2817,6 @@ export namespace Components {
          */
         "value": string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvTogglebuttongroup {
         /**
           * Make it more or less visually prominent to users.
@@ -2997,9 +2975,9 @@ export interface NvPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvPopoverElement;
 }
-export interface NvTableCustomEvent<T> extends CustomEvent<T> {
+export interface NvSplitCustomEvent<T> extends CustomEvent<T> {
     detail: T;
-    target: HTMLNvTableElement;
+    target: HTMLNvSplitElement;
 }
 export interface NvToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -3019,10 +2997,7 @@ export interface NvTooltipCustomEvent<T> extends CustomEvent<T> {
 }
 declare global {
     interface HTMLNvAccordionElementEventMap {
-        "openChanged": {
-    /** Index of open items */
-    openIndexes: number[];
-  };
+        "openIndexesChanged": number[];
     }
     interface HTMLNvAccordionElement extends Components.NvAccordion, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvAccordionElementEventMap>(type: K, listener: (this: HTMLNvAccordionElement, ev: NvAccordionCustomEvent<HTMLNvAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3655,6 +3630,26 @@ declare global {
         prototype: HTMLNvRowElement;
         new (): HTMLNvRowElement;
     };
+    interface HTMLNvSplitElementEventMap {
+        "sizesChanged": number[];
+    }
+    /**
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
+     */
+    interface HTMLNvSplitElement extends Components.NvSplit, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvSplitElementEventMap>(type: K, listener: (this: HTMLNvSplitElement, ev: NvSplitCustomEvent<HTMLNvSplitElementEventMap[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 HTMLNvSplitElementEventMap>(type: K, listener: (this: HTMLNvSplitElement, ev: NvSplitCustomEvent<HTMLNvSplitElementEventMap[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 HTMLNvSplitElement: {
+        prototype: HTMLNvSplitElement;
+        new (): HTMLNvSplitElement;
+    };
     /**
      * @deprecated Please use tailwind classes instead
      */
@@ -3664,43 +3659,12 @@ declare global {
         prototype: HTMLNvStackElement;
         new (): HTMLNvStackElement;
     };
-    interface HTMLNvTableElementEventMap {
-        "action": {
-    /**
-     * Key action to be performed
-     */
-    keyAction: string;
-
-    /**
-     * Details of the action to be performed
-     */
-    details: any;
-  };
-    }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
-     */
     interface HTMLNvTableElement extends Components.NvTable, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLNvTableElementEventMap>(type: K, listener: (this: HTMLNvTableElement, ev: NvTableCustomEvent<HTMLNvTableElementEventMap[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 HTMLNvTableElementEventMap>(type: K, listener: (this: HTMLNvTableElement, ev: NvTableCustomEvent<HTMLNvTableElementEventMap[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 HTMLNvTableElement: {
         prototype: HTMLNvTableElement;
         new (): HTMLNvTableElement;
     };
-    interface HTMLNvTablecolumnElement extends Components.NvTablecolumn, HTMLStencilElement {
-    }
-    var HTMLNvTablecolumnElement: {
-        prototype: HTMLNvTablecolumnElement;
-        new (): HTMLNvTablecolumnElement;
-    };
     interface HTMLNvToggleElementEventMap {
         "checkedChanged": boolean;
     }
@@ -3743,10 +3707,6 @@ declare global {
     interface HTMLNvTogglebuttongroupElementEventMap {
         "valueChanged": string[];
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface HTMLNvTogglebuttongroupElement extends Components.NvTogglebuttongroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLNvTogglebuttongroupElementEventMap>(type: K, listener: (this: HTMLNvTogglebuttongroupElement, ev: NvTogglebuttongroupCustomEvent<HTMLNvTogglebuttongroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3819,9 +3779,9 @@ declare global {
         "nv-notificationcontainer": HTMLNvNotificationcontainerElement;
         "nv-popover": HTMLNvPopoverElement;
         "nv-row": HTMLNvRowElement;
+        "nv-split": HTMLNvSplitElement;
         "nv-stack": HTMLNvStackElement;
         "nv-table": HTMLNvTableElement;
-        "nv-tablecolumn": HTMLNvTablecolumnElement;
         "nv-toggle": HTMLNvToggleElement;
         "nv-togglebutton": HTMLNvTogglebuttonElement;
         "nv-togglebuttongroup": HTMLNvTogglebuttongroupElement;
@@ -3853,11 +3813,9 @@ declare namespace LocalJSX {
         "mode"?: 'accordion' | 'multi';
         /**
           * Event emitted when an item's open state changes
+          * @bind openIndexes
          */
-        "onOpenChanged"?: (event: NvAccordionCustomEvent<{
-    /** Index of open items */
-    openIndexes: number[];
-  }>) => void;
+        "onOpenIndexesChanged"?: (event: NvAccordionCustomEvent<number[]>) => void;
         /**
           * Index of open items (external control possible)
          */
@@ -6630,108 +6588,61 @@ declare namespace LocalJSX {
     interface NvRow {
     }
     /**
-     * @deprecated Please use tailwind classes instead
-     */
-    interface NvStack {
-        /**
-          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
-         */
-        "fill"?: boolean;
-        /**
-          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
-         */
-        "flex"?: boolean;
-        /**
-          * Full set the width of the stack to 100%. (same effect as WFull props)
-         */
-        "full"?: boolean;
-        /**
-          * Gutter refers to the space that exists between children components inside the stack container.
-         */
-        "gutter"?: number;
-        /**
-          * Display the element of the stack vertically.
-         */
-        "vertical"?: boolean;
-    }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
+     * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
      */
-    interface NvTable {
+    interface NvSplit {
         /**
-          * Configuration of the columns of the table
+          * Direction of the split layout. - `horizontal`: panes side by side - `vertical`: panes stacked
          */
-        "columnsConfig"?: ColumnConfig[];
+        "direction"?: 'horizontal' | 'vertical';
         /**
-          * Configuration of the columns of the table
+          * Width or height of the gutter (in px) depending on the split direction. Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
          */
-        "columnsConfigJson"?: string;
+        "gutterSize"?: number;
         /**
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
-        "columns-config-json"?: string;
-        /**
-          * Data to be displayed in the table
-         */
-        "data"?: any[];
-        /**
-          * Data to be displayed in the table
-         */
-        "dataJson"?: string;
+        "gutter-size"?: number;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Minimum sizes (in px) for each pane. Example: `[100, 200]` => first pane min 100px, second min 200px. Explicitly `reflect: false` (array) for framework compatibility.
          */
-        "data-json"?: string;
+        "minSizes"?: number[];
         /**
-          * Fallback value to be displayed when data is not available
+          * Emitted when pane sizes are updated (either via dragging or programmatically).
+          * @bind sizes
          */
-        "fallbackValue"?: string;
+        "onSizesChanged"?: (event: NvSplitCustomEvent<number[]>) => void;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Initial sizes of the panes in percentages. Example: `[50, 50]` means two equal panes. Explicitly `reflect: false` (array) for framework compatibility.
          */
-        "fallback-value"?: string;
+        "sizes"?: number[];
+    }
+    /**
+     * @deprecated Please use tailwind classes instead
+     */
+    interface NvStack {
         /**
-          * The message to display when there are no columns or data available.
-          * @default 'No data or columns available to display.'
+          * Fill will force the children to fill the stack depending of the direction of the stack. In horizontal position, the children take the height of the stack. In vertical position, the children take the width of the stack.
          */
-        "noColumnsNoDataMessage"?: string;
+        "fill"?: boolean;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Flex will force the children to share the stack between the children depending of the direction of the stack. In horizontal position, the children width will share the width of the stack. In vertical position, the children height will share the height of the stack.
          */
-        "no-columns-no-data-message"?: string;
+        "flex"?: boolean;
         /**
-          * Message to be displayed when no data is available
+          * Full set the width of the stack to 100%. (same effect as WFull props)
          */
-        "noDataMessage"?: string;
+        "full"?: boolean;
         /**
-         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+          * Gutter refers to the space that exists between children components inside the stack container.
          */
-        "no-data-message"?: string;
+        "gutter"?: number;
         /**
-          * *************************************************************************
+          * Display the element of the stack vertically.
          */
-        "onAction"?: (event: NvTableCustomEvent<{
-    /**
-     * Key action to be performed
-     */
-    keyAction: string;
-
-    /**
-     * Details of the action to be performed
-     */
-    details: any;
-  }>) => void;
+        "vertical"?: boolean;
     }
-    interface NvTablecolumn {
-        /**
-          * Header of the column to be displayed
-         */
-        "header"?: string;
-        /**
-          * Name of the column and data accessor
-         */
-        "name": string;
+    interface NvTable {
     }
     interface NvToggle {
         /**
@@ -6823,10 +6734,6 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    /**
-     * @deprecated [EXPERIMENTAL]
-     * @experimental This component is still in development and subject to change in future releases.
-     */
     interface NvTogglebuttongroup {
         /**
           * Make it more or less visually prominent to users.
@@ -6925,9 +6832,9 @@ declare namespace LocalJSX {
         "nv-notificationcontainer": NvNotificationcontainer;
         "nv-popover": NvPopover;
         "nv-row": NvRow;
+        "nv-split": NvSplit;
         "nv-stack": NvStack;
         "nv-table": NvTable;
-        "nv-tablecolumn": NvTablecolumn;
         "nv-toggle": NvToggle;
         "nv-togglebutton": NvTogglebutton;
         "nv-togglebuttongroup": NvTogglebuttongroup;
@@ -6992,21 +6899,16 @@ declare module "@stencil/core" {
             "nv-popover": LocalJSX.NvPopover & JSXBase.HTMLAttributes<HTMLNvPopoverElement>;
             "nv-row": LocalJSX.NvRow & JSXBase.HTMLAttributes<HTMLNvRowElement>;
             /**
-             * @deprecated Please use tailwind classes instead
+             * The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel.
              */
-            "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
+            "nv-split": LocalJSX.NvSplit & JSXBase.HTMLAttributes<HTMLNvSplitElement>;
             /**
-             * @deprecated [EXPERIMENTAL]
-             * @experimental - This component is used as a base for the nv-datagrid component. Do not use it directly.
+             * @deprecated Please use tailwind classes instead
              */
+            "nv-stack": LocalJSX.NvStack & JSXBase.HTMLAttributes<HTMLNvStackElement>;
             "nv-table": LocalJSX.NvTable & JSXBase.HTMLAttributes<HTMLNvTableElement>;
-            "nv-tablecolumn": LocalJSX.NvTablecolumn & JSXBase.HTMLAttributes<HTMLNvTablecolumnElement>;
             "nv-toggle": LocalJSX.NvToggle & JSXBase.HTMLAttributes<HTMLNvToggleElement>;
             "nv-togglebutton": LocalJSX.NvTogglebutton & JSXBase.HTMLAttributes<HTMLNvTogglebuttonElement>;
-            /**
-             * @deprecated [EXPERIMENTAL]
-             * @experimental This component is still in development and subject to change in future releases.
-             */
             "nv-togglebuttongroup": LocalJSX.NvTogglebuttongroup & JSXBase.HTMLAttributes<HTMLNvTogglebuttongroupElement>;
             "nv-tooltip": LocalJSX.NvTooltip & JSXBase.HTMLAttributes<HTMLNvTooltipElement>;
         }

package/dist/vscode-data.json

@@ -3888,6 +3888,9 @@
             {
               "name": "git-branch"
             },
+            {
+              "name": "git-compare"
+            },
             {
               "name": "gps"
             },
@@ -4056,6 +4059,9 @@
             {
               "name": "map"
             },
+            {
+              "name": "master-data"
+            },
             {
               "name": "menu"
             },
@@ -4236,6 +4242,12 @@
             {
               "name": "qrcode"
             },
+            {
+              "name": "quotes-open"
+            },
+            {
+              "name": "quotes"
+            },
             {
               "name": "radar"
             },
@@ -4425,6 +4437,9 @@
             {
               "name": "spacing-vertical"
             },
+            {
+              "name": "sparkles"
+            },
             {
               "name": "speakerphone"
             },
@@ -4582,7 +4597,7 @@
               "name": "volume-3"
             },
             {
-              "name": "volume"
+              "name": "wallet"
             },
             {
               "name": "wand"
@@ -4863,6 +4878,31 @@
       },
       "attributes": []
     },
+    {
+      "name": "nv-split",
+      "description": {
+        "kind": "markdown",
+        "value": "The `nv-split` component is an advanced layout container that enables the creation of interactively resizable panels. It provides a flexible solution for dividing available space between multiple interface sections, with precise control over dimensions and constraints for each panel."
+      },
+      "attributes": [
+        {
+          "name": "direction",
+          "description": "Direction of the split layout.\n- `horizontal`: panes side by side\n- `vertical`: panes stacked",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "gutter-size",
+          "description": "Width or height of the gutter (in px) depending on the split direction.\nDefault is 24px to meet WCAG 2.2 target size requirements for touch accessibility."
+        }
+      ]
+    },
     {
       "name": "nv-stack",
       "description": {
@@ -4896,47 +4936,9 @@
       "name": "nv-table",
       "description": {
         "kind": "markdown",
-        "value": "The nv-table is an example component that only show a simple table.\n\nThe `<table>` HTML element represents tabular data�that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data."
-      },
-      "attributes": [
-        {
-          "name": "columns-config-json",
-          "description": "Configuration of the columns of the table"
-        },
-        {
-          "name": "data-json",
-          "description": "Data to be displayed in the table"
-        },
-        {
-          "name": "fallback-value",
-          "description": "Fallback value to be displayed when data is not available"
-        },
-        {
-          "name": "no-columns-no-data-message",
-          "description": "The message to display when there are no columns or data available."
-        },
-        {
-          "name": "no-data-message",
-          "description": "Message to be displayed when no data is available"
-        }
-      ]
-    },
-    {
-      "name": "nv-tablecolumn",
-      "description": {
-        "kind": "markdown",
-        "value": "Helper Component for nv-table"
+        "value": "A semantic table container component that wraps around a native HTML table element, and enhances it with Nova styles and additional functionality. This component provides an advanced foundation for data tables with features like sticky positioning, column resizing, and row selection. If you are looking for a more complex table solution by passing in data to build the markup with additional features, check out the **datatable component**.\n\n**Key Features**\n\n- **Native Table Structure**: Uses standard HTML table elements (thead, tbody, tfoot, tr, th, td) as children\n- **Column Resizing**: Columns are resizable by default, with option to disable per column\n- **Sticky Positioning**: Headers and columns can stick during scrolling\n- **Row Selection**: Visual indication for selected rows\n- **Responsive Design**: Works seamlessly across different screen sizes\n- **Width Classes**: Support for Tailwind width classes to control column sizing\n\n**Data Attributes**\n\nThe nv-table component supports several data attributes to enhance functionality:\n\n**Sticky Positioning**\n- `data-sticky-top`: Apply to `<thead>` to make header stick to top during vertical scroll\n- `data-sticky-left`: Apply to `<th>` and `<td>` to make column stick to left during horizontal scroll\n- `data-sticky-right`: Apply to `<th>` and `<td>` to make column stick to right during horizontal scroll\n\n**Column Behavior**\n- `data-no-resize`: Apply to `<th>` to prevent column from being resizable\n- Width classes (e.g., `w-10`, `w-20`): Set initial column widths; columns without fixed widths grow to fill available space\n\n**Row Selection**\n- `data-selected`: Apply to `<tr>` to indicate the selected row with appropriate styling\n\n**Usage Notes**\n\n- For horizontal sticky columns, wrap the table in a container with `overflow-x: auto`\n- Sticky columns require the same data attribute on both header (`<th>`) and data cells (`<td>`)\n- Columns without width classes or `data-no-resize` will automatically grow to fill available space\n- Works with all standard table accessibility features and semantic markup"
       },
-      "attributes": [
-        {
-          "name": "header",
-          "description": "Header of the column to be displayed"
-        },
-        {
-          "name": "name",
-          "description": "Name of the column and data accessor"
-        }
-      ]
+      "attributes": []
     },
     {
       "name": "nv-toggle",