@nova-design-system/nova-webcomponents 3.9.0 → 3.10.0

package/dist/types/components.d.ts

@@ -5,13 +5,13 @@
  * 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, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+import { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete, ToggleButtonEmphasis, ToggleButtonSize } from "./utils/constants";
 import { Column } from "./interfaces/Column";
 import { Element } from "./stencil-public-runtime";
 import { IconName } from "./components/nv-icon/nv-icons";
 import { Placement } from "@floating-ui/dom";
 import { ColumnConfig } from "./interfaces/ColumnConfig";
-export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, SemanticSizes, TextInputAutocomplete } from "./utils/constants";
+export { ButtonEmphasis, ButtonSize, ButtonType, DeprecatedSemanticColors, FeedbackColors, GlobalFilterPosition, IconButtonShape, LabelPlacement, LoaderColors, 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";
@@ -315,6 +315,24 @@ export namespace Components {
          */
         "type": `${ButtonType}`;
     }
+    interface NvButtongroup {
+        /**
+          * Adjusts the emphasis of all the buttons to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones
+         */
+        "emphasis": `${ButtonEmphasis}`;
+        /**
+          * Allows the button group to stretch and fill the entire width of its container.
+         */
+        "fluid": boolean;
+        /**
+          * Determines the orientation of the button group. When enabled, the buttons are stacked vertically rather than aligned side by side.
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * Determines how large or small all the buttons appear, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size": `${ButtonSize}`;
+    }
     interface NvCalendar {
         /**
           * Clears the current selection and resets the calendar to its initial state. This method can be called programmatically to reset the calendar.
@@ -1336,6 +1354,19 @@ export namespace Components {
           * Add helpful hints or extra information under the text input field.
          */
         "description": string;
+        /**
+          * Deselect all visible and enabled items. Works for both options and slots mode.
+          * @returns
+         */
+        "deselectAll": () => Promise<void>;
+        /**
+          * Text for the "Deselect All" button.
+         */
+        "deselectAllLabel": string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "deselect-all-label"?: string;
         /**
           * Disables the input field.
          */
@@ -1348,6 +1379,14 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "empty-result"?: string;
+        /**
+          * Enables or disables the "Select All / Deselect All" toggle functionality.
+         */
+        "enableSelectAll": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enable-select-all"?: boolean;
         /**
           * Alters the input field's appearance to indicate an error, helping users identify fields that need correction.
           * @validator error
@@ -1450,6 +1489,24 @@ export namespace Components {
           * Reset the filter and make all items visible.
          */
         "resetFilter": () => Promise<void>;
+        /**
+          * Select all visible and enabled items. Works for both options and slots mode.
+          * @returns
+         */
+        "selectAll": () => Promise<void>;
+        /**
+          * Text for the "Select All" button.
+         */
+        "selectAllLabel": string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "select-all-label"?: string;
+        /**
+          * Toggle selection state of all visible and enabled items. If all items are selected, deselects all. Otherwise, selects all. Works for both options and slots mode.
+          * @returns
+         */
+        "toggleSelectAll": () => Promise<void>;
         /**
           * Specifies the selected values of the multiselect field. This is the canonical value for the component and is used for form submission.
          */
@@ -2676,6 +2733,58 @@ export namespace Components {
          */
         "value"?: string;
     }
+    interface NvTogglebutton {
+        /**
+          * Whether the button is active or not. Will not toggle automatically but needs to be controlled externally.
+         */
+        "active": boolean;
+        /**
+          * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        "disabled": boolean;
+        /**
+          * Make it more or less visually prominent to users.
+         */
+        "emphasis": `${ToggleButtonEmphasis}`;
+        /**
+          * Determines how large or small the togglebutton appears, allowing for customization of the togglebutton's dimensions to fit different design specifications and user needs.
+         */
+        "size": `${ToggleButtonSize}`;
+        /**
+          * The value to associated with the button when selected in a Togglebuttongroup.
+         */
+        "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.
+         */
+        "emphasis": `${ToggleButtonEmphasis}`;
+        /**
+          * Ensures at least one toggle stays selected at all times.
+         */
+        "enforceValue": boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enforce-value"?: boolean;
+        /**
+          * Activates single-selection mode so only one button can be active at a time.
+         */
+        "exclusive": boolean;
+        /**
+          * Determines how large or small the togglebutton appears, allowing for customization of the togglebutton's dimensions to fit different design specifications and user needs.
+         */
+        "size": `${ToggleButtonSize}`;
+        /**
+          * The active toggle buttons in the group. Is an array of one string when in exclusive mode, and an array of strings when in non-exclusive mode.
+         */
+        "value": string[];
+    }
     interface NvTooltip {
         /**
           * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
@@ -2808,6 +2917,14 @@ export interface NvToggleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvToggleElement;
 }
+export interface NvTogglebuttonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvTogglebuttonElement;
+}
+export interface NvTogglebuttongroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLNvTogglebuttongroupElement;
+}
 export interface NvTooltipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLNvTooltipElement;
@@ -2915,6 +3032,12 @@ declare global {
         prototype: HTMLNvButtonElement;
         new (): HTMLNvButtonElement;
     };
+    interface HTMLNvButtongroupElement extends Components.NvButtongroup, HTMLStencilElement {
+    }
+    var HTMLNvButtongroupElement: {
+        prototype: HTMLNvButtongroupElement;
+        new (): HTMLNvButtongroupElement;
+    };
     interface HTMLNvCalendarElementEventMap {
         "singleDateChange": string;
         "rangeDateChange": HTMLNvCalendarElement['rangeValue'];
@@ -3480,6 +3603,49 @@ declare global {
         prototype: HTMLNvToggleElement;
         new (): HTMLNvToggleElement;
     };
+    interface HTMLNvTogglebuttonElementEventMap {
+        "toggled": {
+    /** The value associated with the button. */
+    value: string;
+    /** If the button is active when clicked. */
+    active: boolean;
+  };
+    }
+    interface HTMLNvTogglebuttonElement extends Components.NvTogglebutton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLNvTogglebuttonElementEventMap>(type: K, listener: (this: HTMLNvTogglebuttonElement, ev: NvTogglebuttonCustomEvent<HTMLNvTogglebuttonElementEventMap[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 HTMLNvTogglebuttonElementEventMap>(type: K, listener: (this: HTMLNvTogglebuttonElement, ev: NvTogglebuttonCustomEvent<HTMLNvTogglebuttonElementEventMap[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 HTMLNvTogglebuttonElement: {
+        prototype: HTMLNvTogglebuttonElement;
+        new (): HTMLNvTogglebuttonElement;
+    };
+    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;
+        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 HTMLNvTogglebuttongroupElementEventMap>(type: K, listener: (this: HTMLNvTogglebuttongroupElement, ev: NvTogglebuttongroupCustomEvent<HTMLNvTogglebuttongroupElementEventMap[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 HTMLNvTogglebuttongroupElement: {
+        prototype: HTMLNvTogglebuttongroupElement;
+        new (): HTMLNvTogglebuttongroupElement;
+    };
     interface HTMLNvTooltipElementEventMap {
         "openChanged": boolean;
     }
@@ -3506,6 +3672,7 @@ declare global {
         "nv-breadcrumb": HTMLNvBreadcrumbElement;
         "nv-breadcrumbs": HTMLNvBreadcrumbsElement;
         "nv-button": HTMLNvButtonElement;
+        "nv-buttongroup": HTMLNvButtongroupElement;
         "nv-calendar": HTMLNvCalendarElement;
         "nv-col": HTMLNvColElement;
         "nv-datagrid": HTMLNvDatagridElement;
@@ -3539,6 +3706,8 @@ declare global {
         "nv-table": HTMLNvTableElement;
         "nv-tablecolumn": HTMLNvTablecolumnElement;
         "nv-toggle": HTMLNvToggleElement;
+        "nv-togglebutton": HTMLNvTogglebuttonElement;
+        "nv-togglebuttongroup": HTMLNvTogglebuttongroupElement;
         "nv-tooltip": HTMLNvTooltipElement;
     }
 }
@@ -3862,6 +4031,24 @@ declare namespace LocalJSX {
          */
         "type"?: `${ButtonType}`;
     }
+    interface NvButtongroup {
+        /**
+          * Adjusts the emphasis of all the buttons to make it more or less visually prominent to users. Use this to draw attention to important actions or reduce focus on less critical ones
+         */
+        "emphasis"?: `${ButtonEmphasis}`;
+        /**
+          * Allows the button group to stretch and fill the entire width of its container.
+         */
+        "fluid"?: boolean;
+        /**
+          * Determines the orientation of the button group. When enabled, the buttons are stacked vertically rather than aligned side by side.
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+        /**
+          * Determines how large or small all the buttons appear, allowing for customization of the button's dimensions to fit different design specifications and user needs.
+         */
+        "size"?: `${ButtonSize}`;
+    }
     interface NvCalendar {
         /**
           * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
@@ -4989,6 +5176,14 @@ declare namespace LocalJSX {
           * Add helpful hints or extra information under the text input field.
          */
         "description"?: string;
+        /**
+          * Text for the "Deselect All" button.
+         */
+        "deselectAllLabel"?: string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "deselect-all-label"?: string;
         /**
           * Disables the input field.
          */
@@ -5001,6 +5196,14 @@ declare namespace LocalJSX {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "empty-result"?: string;
+        /**
+          * Enables or disables the "Select All / Deselect All" toggle functionality.
+         */
+        "enableSelectAll"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enable-select-all"?: boolean;
         /**
           * Alters the input field's appearance to indicate an error, helping users identify fields that need correction.
           * @validator error
@@ -5098,6 +5301,14 @@ declare namespace LocalJSX {
           * Marks the input field as required.
          */
         "required"?: boolean;
+        /**
+          * Text for the "Select All" button.
+         */
+        "selectAllLabel"?: string;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "select-all-label"?: string;
         /**
           * Specifies the selected values of the multiselect field. This is the canonical value for the component and is used for form submission.
          */
@@ -6387,6 +6598,72 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface NvTogglebutton {
+        /**
+          * Whether the button is active or not. Will not toggle automatically but needs to be controlled externally.
+         */
+        "active"?: boolean;
+        /**
+          * Prevents all interaction, rendering the toggle in a non-interactive state.
+         */
+        "disabled"?: boolean;
+        /**
+          * Make it more or less visually prominent to users.
+         */
+        "emphasis"?: `${ToggleButtonEmphasis}`;
+        /**
+          * Emitted when the button is toggled.
+         */
+        "onToggled"?: (event: NvTogglebuttonCustomEvent<{
+    /** The value associated with the button. */
+    value: string;
+    /** If the button is active when clicked. */
+    active: boolean;
+  }>) => void;
+        /**
+          * Determines how large or small the togglebutton appears, allowing for customization of the togglebutton's dimensions to fit different design specifications and user needs.
+         */
+        "size"?: `${ToggleButtonSize}`;
+        /**
+          * The value to associated with the button when selected in a Togglebuttongroup.
+         */
+        "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.
+         */
+        "emphasis"?: `${ToggleButtonEmphasis}`;
+        /**
+          * Ensures at least one toggle stays selected at all times.
+         */
+        "enforceValue"?: boolean;
+        /**
+         * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
+         */
+        "enforce-value"?: boolean;
+        /**
+          * Activates single-selection mode so only one button can be active at a time.
+         */
+        "exclusive"?: boolean;
+        /**
+          * Emitted when the selected toggle buttons change.
+          * @bind value
+         */
+        "onValueChanged"?: (event: NvTogglebuttongroupCustomEvent<string[]>) => void;
+        /**
+          * Determines how large or small the togglebutton appears, allowing for customization of the togglebutton's dimensions to fit different design specifications and user needs.
+         */
+        "size"?: `${ToggleButtonSize}`;
+        /**
+          * The active toggle buttons in the group. Is an array of one string when in exclusive mode, and an array of strings when in non-exclusive mode.
+         */
+        "value"?: string[];
+    }
     interface NvTooltip {
         /**
           * Controls how long (in milliseconds) the tooltip waits to show after you hover over or focus on an element. If you move away before the delay is up, the tooltip won’t appear.
@@ -6418,6 +6695,7 @@ declare namespace LocalJSX {
         "nv-breadcrumb": NvBreadcrumb;
         "nv-breadcrumbs": NvBreadcrumbs;
         "nv-button": NvButton;
+        "nv-buttongroup": NvButtongroup;
         "nv-calendar": NvCalendar;
         "nv-col": NvCol;
         "nv-datagrid": NvDatagrid;
@@ -6451,6 +6729,8 @@ declare namespace LocalJSX {
         "nv-table": NvTable;
         "nv-tablecolumn": NvTablecolumn;
         "nv-toggle": NvToggle;
+        "nv-togglebutton": NvTogglebutton;
+        "nv-togglebuttongroup": NvTogglebuttongroup;
         "nv-tooltip": NvTooltip;
     }
 }
@@ -6469,6 +6749,7 @@ declare module "@stencil/core" {
             "nv-breadcrumb": LocalJSX.NvBreadcrumb & JSXBase.HTMLAttributes<HTMLNvBreadcrumbElement>;
             "nv-breadcrumbs": LocalJSX.NvBreadcrumbs & JSXBase.HTMLAttributes<HTMLNvBreadcrumbsElement>;
             "nv-button": LocalJSX.NvButton & JSXBase.HTMLAttributes<HTMLNvButtonElement>;
+            "nv-buttongroup": LocalJSX.NvButtongroup & JSXBase.HTMLAttributes<HTMLNvButtongroupElement>;
             "nv-calendar": LocalJSX.NvCalendar & JSXBase.HTMLAttributes<HTMLNvCalendarElement>;
             "nv-col": LocalJSX.NvCol & JSXBase.HTMLAttributes<HTMLNvColElement>;
             /**
@@ -6515,6 +6796,12 @@ declare module "@stencil/core" {
             "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/types/utils/constants.d.ts

@@ -37,6 +37,16 @@ export declare enum ButtonType {
     Reset = "reset",
     Button = "button"
 }
+export declare enum ToggleButtonEmphasis {
+    High = "high",
+    Low = "low"
+}
+export declare enum ToggleButtonSize {
+    ExtraSmall = "xs",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
 export declare enum IconButtonShape {
     Square = "square",
     Rounded = "rounded"

package/dist/vscode-data.json

@@ -394,6 +394,67 @@
         }
       ]
     },
+    {
+      "name": "nv-buttongroup",
+      "description": {
+        "kind": "markdown",
+        "value": "The Button Group component organizes multiple related buttons into a cohesive unit with consistent styling and behavior. It automatically forwards properties like size, emphasis, and fluid to all child buttons, ensuring visual uniformity across grouped actions.\n\nThis component simplifies the management of button collections by providing centralized control over their appearance and layout, supporting both horizontal and vertical orientations to fit various design requirements."
+      },
+      "attributes": [
+        {
+          "name": "emphasis",
+          "description": "Adjusts the emphasis of all the buttons to make it more or less visually\nprominent to users. Use this to draw attention to important actions or\nreduce focus on less critical ones",
+          "values": [
+            {
+              "name": "high"
+            },
+            {
+              "name": "low"
+            },
+            {
+              "name": "lower"
+            },
+            {
+              "name": "medium"
+            }
+          ]
+        },
+        {
+          "name": "fluid",
+          "description": "Allows the button group to stretch and fill the entire width of its\ncontainer."
+        },
+        {
+          "name": "orientation",
+          "description": "Determines the orientation of the button group. When enabled, the buttons\nare stacked vertically rather than aligned side by side.",
+          "values": [
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "vertical"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Determines how large or small all the buttons appear, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs.",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xs"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nv-calendar",
       "description": {
@@ -1557,6 +1618,10 @@
           "name": "description",
           "description": "Add helpful hints or extra information under the text input field."
         },
+        {
+          "name": "deselect-all-label",
+          "description": "Text for the \"Deselect All\" button."
+        },
         {
           "name": "disabled",
           "description": "Disables the input field."
@@ -1565,6 +1630,10 @@
           "name": "empty-result",
           "description": "The text to display when no items match the filter."
         },
+        {
+          "name": "enable-select-all",
+          "description": "Enables or disables the \"Select All / Deselect All\" toggle functionality."
+        },
         {
           "name": "error",
           "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
@@ -1616,6 +1685,10 @@
         {
           "name": "required",
           "description": "Marks the input field as required."
+        },
+        {
+          "name": "select-all-label",
+          "description": "Text for the \"Select All\" button."
         }
       ]
     },
@@ -3591,6 +3664,12 @@
             {
               "name": "engine"
             },
+            {
+              "name": "eraser-off"
+            },
+            {
+              "name": "eraser"
+            },
             {
               "name": "external-link"
             },
@@ -4263,6 +4342,18 @@
             {
               "name": "shopping-cart"
             },
+            {
+              "name": "sizemd"
+            },
+            {
+              "name": "sizesm"
+            },
+            {
+              "name": "sizexl"
+            },
+            {
+              "name": "sizexs"
+            },
             {
               "name": "slash"
             },
@@ -4742,6 +4833,104 @@
         }
       ]
     },
+    {
+      "name": "nv-togglebutton",
+      "description": {
+        "kind": "markdown",
+        "value": "The Toggle Button component provides an interactive button that maintains an active/inactive state, perfect for binary choices or grouped selections. It integrates seamlessly with the Toggle Button Group component to create cohesive selection interfaces.\nThis component enables users to make selections that persist visually, providing clear feedback about current choices and allowing for both single and multiple selection patterns depending on the group configuration."
+      },
+      "attributes": [
+        {
+          "name": "active",
+          "description": "Whether the button is active or not. Will not toggle automatically but\nneeds to be controlled externally."
+        },
+        {
+          "name": "disabled",
+          "description": "Prevents all interaction, rendering the toggle in a non-interactive state."
+        },
+        {
+          "name": "emphasis",
+          "description": "Make it more or less visually prominent to users.",
+          "values": [
+            {
+              "name": "high"
+            },
+            {
+              "name": "low"
+            }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Determines how large or small the togglebutton appears, allowing for\ncustomization of the togglebutton's dimensions to fit different design\nspecifications and user needs.",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xs"
+            }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The value to associated with the button when selected in a\nTogglebuttongroup."
+        }
+      ]
+    },
+    {
+      "name": "nv-togglebuttongroup",
+      "description": {
+        "kind": "markdown",
+        "value": "The Toggle Button Group component orchestrates multiple toggle buttons into a cohesive selection interface. It supports both single-selection (exclusive) and multi-selection modes, with optional enforcement to ensure at least one option remains selected.\nThis component simplifies complex selection scenarios by managing button states automatically, making it ideal for filter controls, view switchers, formatting toolbars, and preference panels where users need to choose from multiple related options."
+      },
+      "attributes": [
+        {
+          "name": "emphasis",
+          "description": "Make it more or less visually prominent to users.",
+          "values": [
+            {
+              "name": "high"
+            },
+            {
+              "name": "low"
+            }
+          ]
+        },
+        {
+          "name": "enforce-value",
+          "description": "Ensures at least one toggle stays selected at all times."
+        },
+        {
+          "name": "exclusive",
+          "description": "Activates single-selection mode so only one button can be active at a time."
+        },
+        {
+          "name": "size",
+          "description": "Determines how large or small the togglebutton appears, allowing for\ncustomization of the togglebutton's dimensions to fit different design\nspecifications and user needs.",
+          "values": [
+            {
+              "name": "lg"
+            },
+            {
+              "name": "md"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xs"
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "nv-tooltip",
       "description": {