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

package/dist/types/components/nv-icon/nv-icons.d.ts

@@ -1,3 +1,3 @@
 /** Available icons */
-export declare const iconNames: readonly ["access-point-off", "access-point", "accessible", "activity", "address-book", "adjustments-horizontal", "adjustments-up", "adjustments", "affiliate", "air-conditioning", "alert-circle", "align-center", "align-left", "align-right", "app-window", "apps", "archive", "areas", "arrow-back-up", "arrow-back", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-forward-up", "arrow-forward", "arrow-left", "arrow-right", "arrow-up-left", "arrow-up-right", "arrow-up", "arrows-exchange", "arrows-maximize", "arrows-minimize", "arrows-move", "aspect-ratio", "atom", "ban", "basket", "battery-1", "battery-2", "battery-3", "battery-4", "battery-automotive", "battery-charging", "battery-eco", "battery-off", "battery", "bell-off", "bell-ringing", "bell", "bike", "bluetooth-connected", "bluetooth-off", "bluetooth", "bolt-off", "bolt", "book", "bookmark-off", "bookmark", "bookmarks", "box-align-top", "box-multiple", "briefcase", "brightness-down", "brightness-up", "browser-check", "browser-plus", "browser-x", "browser", "brush", "building-bank", "building-factory", "building-lighthouse", "building-store", "building", "bulb-off", "bulb", "cake", "calendar-time", "calendar", "camera-off", "camera", "car-crane", "car", "caravan", "cash-banknote", "cash", "cast", "cell", "charging-pile", "chart-arcs", "chart-area-line", "chart-area", "chart-arrows-vertical", "chart-arrows", "chart-bar", "chart-bubble", "chart-circles", "chart-donut", "chart-dots", "chart-line", "chart-pie", "chart-radar", "check", "checkbox", "checklist", "checks", "chevron-down", "chevron-left", "chevron-right", "chevron-top", "chevrons-left", "chevrons-right", "circle-caret-right", "circle-check", "circle-x", "circuit-alternate", "circuit-ground-digital", "clipboard-check", "clipboard-list", "clipboard-plus", "clipboard-text", "clipboard-x", "clipboard", "clock-edit", "clock", "cloud-data-connection", "cloud-download", "cloud-rain", "cloud-snow", "cloud-upload", "cloud", "color-picker", "color-swatch", "compass", "contract", "copy", "cpu", "crane", "credit-card", "crop", "cross", "crown", "currency-bitcoin", "currency-dollar", "currency-ethereum", "currency-euro", "cut", "dashboard", "database", "device-desktop", "device-floppy", "device-gamepad", "device-laptop", "device-mobile-rotated", "device-mobile", "device-tablet", "device-watch", "devices", "dialpad", "direction-horizontal", "direction-sign", "direction", "discount", "door-enter", "door-exit", "door-off", "dots-vertical", "dots", "download", "drone", "droplet-filled", "droplet-half", "droplet", "droplets", "edit", "engine", "external-link", "eye-off", "eye", "face-id", "feather", "file-alert", "file-analytics", "file-check", "file-code", "file-download", "file-export", "file-horizontal", "file-import", "file-plus", "file-search", "file-text-bookmark", "file-text", "file-type-bmp", "file-type-css", "file-type-csv", "file-type-doc", "file-type-html", "file-type-jpg", "file-type-js", "file-type-pdf", "file-type-png", "file-type-ppt", "file-type-xls", "file-type-xml", "file-type-zip", "file-upload", "file-x", "file-zip", "file", "files-off", "files", "filter-off", "filter-sort", "filter", "fingerprint", "fire-extinguisher", "flag", "flame", "flip-horizontal", "flip-vertical", "folder-minus", "folder-off", "folder-plus", "folder-x", "folder", "folders", "frame", "gas-station", "gauge-off", "gauge", "gift", "gps", "grid-dots", "grip-horizontal", "grip-vertical", "hand-stop", "hand-waving", "hash", "haze", "headphones-off", "headphones", "headset", "heart-off", "heart", "heartbeat", "helicopter", "helmet-swopp", "helmet", "help", "history", "home", "hourglass-empty", "hourglass-high", "hourglass-low", "hourglass-off", "hourglass", "inbox", "info-circle", "keyboard-hide", "keyboard-show", "keyboard", "layout-board-split", "layout-dashboard", "layout-grid", "layout-sidebar-left-collapse", "layout-sidebar-left-expand", "layout-sidebar-right-collapse", "layout-sidebar-right-expand", "layout", "leaf", "lifebuoy", "link", "list-search", "list", "loader", "location", "lock-off", "lock-open", "lock", "login", "logout", "mail-forward", "mail-opened", "mail", "map-pin-off", "map-pin", "map", "menu", "message-dots", "message-off", "message", "messages", "microphone-off", "microphone", "minus", "mist", "moon", "motorbike", "mouse", "movie", "network", "news", "note", "notebook", "notes", "offshore-station", "package", "palette", "paperclip", "pencil", "phone-call", "phone-calling", "phone-check", "phone-incoming", "phone-off", "phone-outgoing", "phone", "photo-off", "photo", "pig", "pin", "pinned-off", "pinned", "plane-off", "plane", "plant", "player-pause", "player-play", "player-skip-back", "player-skip-forward", "player-stop", "player-track-next", "player-track-prev", "plug-connected", "plug", "plus", "power-ac", "power-dc", "power", "presentation-analytics", "presentation", "printer", "propeller", "published", "puzzle-2", "puzzle", "pylon", "qrcode", "radar", "radio", "radioactive", "receipt-dollar", "receipt-euro", "receipt", "recharging", "recycle", "refresh-alert", "refresh-off", "refresh", "repeat-once", "repeat", "replace", "report-analytics", "report-medical", "report-search", "report", "ripple-off", "ripple", "rocket", "rotate-2", "rotate-clockwise-2", "rotate-clockwise", "rotate-dot", "rotate", "router", "ruler-measure", "sailboat", "satellite", "scale", "school", "scissors", "scooter-electric", "screenshot", "search", "seeding", "select", "selector", "send", "server", "settings", "shape", "share-2", "share", "shield-check", "shield-lock", "shield-off", "shield-x", "shield", "ship-off", "ship", "shopping-cart", "slash", "smart-home", "snowflake", "solar-panel", "sort-ascending-letters", "sort-ascending-numbers", "sort-descending-letters", "sort-descending-numbers", "spacing-horizontal", "spacing-vertical", "speakerphone", "stack", "stairs", "star", "sun", "sunrise", "sunset", "switch-horizontal", "switch-vertical", "table", "tag", "tank-empty-fill", "tank-full-fill", "tank-medium-fill", "temperature-off", "temperature", "template", "terminal", "text-size", "text", "thumb-down", "thumb-up", "ticket", "timeline", "tir", "tool", "tools", "train", "trash-off", "trash", "tree", "trees", "truck-delivery", "truck", "umbrella", "unlink", "upload", "user-circle", "user-minus", "user-plus", "user-worker", "user", "users", "versions", "video-minus", "video-off", "video-plus", "video", "volume-2", "volume-3", "volume", "wallet", "wand", "wave", "waves", "wifi-off", "wifi", "wind-direction", "wind", "windmill", "wood", "world", "writing", "x", "zoom-reset"];
+export declare const iconNames: readonly ["access-point-off", "access-point", "accessible", "activity", "address-book", "adjustments-horizontal", "adjustments-up", "adjustments", "affiliate", "air-conditioning", "alert-circle", "align-center", "align-left", "align-right", "app-window", "apps", "archive", "areas", "arrow-back-up", "arrow-back", "arrow-down-left", "arrow-down-right", "arrow-down", "arrow-forward-up", "arrow-forward", "arrow-left", "arrow-right", "arrow-up-left", "arrow-up-right", "arrow-up", "arrows-exchange", "arrows-maximize", "arrows-minimize", "arrows-move", "aspect-ratio", "atom", "ban", "basket", "battery-1", "battery-2", "battery-3", "battery-4", "battery-automotive", "battery-charging", "battery-eco", "battery-off", "battery", "bell-off", "bell-ringing", "bell", "bike", "bluetooth-connected", "bluetooth-off", "bluetooth", "bolt-off", "bolt", "book", "bookmark-off", "bookmark", "bookmarks", "box-align-top", "box-multiple", "briefcase", "brightness-down", "brightness-up", "browser-check", "browser-plus", "browser-x", "browser", "brush", "building-bank", "building-factory", "building-lighthouse", "building-store", "building", "bulb-off", "bulb", "cake", "calendar-time", "calendar", "camera-off", "camera", "car-crane", "car", "caravan", "cash-banknote", "cash", "cast", "cell", "charging-pile", "chart-arcs", "chart-area-line", "chart-area", "chart-arrows-vertical", "chart-arrows", "chart-bar", "chart-bubble", "chart-circles", "chart-donut", "chart-dots", "chart-line", "chart-pie", "chart-radar", "check", "checkbox", "checklist", "checks", "chevron-down", "chevron-left", "chevron-right", "chevron-top", "chevrons-left", "chevrons-right", "circle-caret-right", "circle-check", "circle-x", "circuit-alternate", "circuit-ground-digital", "clipboard-check", "clipboard-list", "clipboard-plus", "clipboard-text", "clipboard-x", "clipboard", "clock-edit", "clock", "cloud-data-connection", "cloud-download", "cloud-rain", "cloud-snow", "cloud-upload", "cloud", "color-picker", "color-swatch", "compass", "contract", "copy", "cpu", "crane", "credit-card", "crop", "cross", "crown", "currency-bitcoin", "currency-dollar", "currency-ethereum", "currency-euro", "cut", "dashboard", "database", "device-desktop", "device-floppy", "device-gamepad", "device-laptop", "device-mobile-rotated", "device-mobile", "device-tablet", "device-watch", "devices", "dialpad", "direction-horizontal", "direction-sign", "direction", "discount", "door-enter", "door-exit", "door-off", "dots-vertical", "dots", "download", "drone", "droplet-filled", "droplet-half", "droplet", "droplets", "edit", "engine", "eraser-off", "eraser", "external-link", "eye-off", "eye", "face-id", "feather", "file-alert", "file-analytics", "file-check", "file-code", "file-download", "file-export", "file-horizontal", "file-import", "file-plus", "file-search", "file-text-bookmark", "file-text", "file-type-bmp", "file-type-css", "file-type-csv", "file-type-doc", "file-type-html", "file-type-jpg", "file-type-js", "file-type-pdf", "file-type-png", "file-type-ppt", "file-type-xls", "file-type-xml", "file-type-zip", "file-upload", "file-x", "file-zip", "file", "files-off", "files", "filter-off", "filter-sort", "filter", "fingerprint", "fire-extinguisher", "flag", "flame", "flip-horizontal", "flip-vertical", "folder-minus", "folder-off", "folder-plus", "folder-x", "folder", "folders", "frame", "gas-station", "gauge-off", "gauge", "gift", "gps", "grid-dots", "grip-horizontal", "grip-vertical", "hand-stop", "hand-waving", "hash", "haze", "headphones-off", "headphones", "headset", "heart-off", "heart", "heartbeat", "helicopter", "helmet-swopp", "helmet", "help", "history", "home", "hourglass-empty", "hourglass-high", "hourglass-low", "hourglass-off", "hourglass", "inbox", "info-circle", "keyboard-hide", "keyboard-show", "keyboard", "layout-board-split", "layout-dashboard", "layout-grid", "layout-sidebar-left-collapse", "layout-sidebar-left-expand", "layout-sidebar-right-collapse", "layout-sidebar-right-expand", "layout", "leaf", "lifebuoy", "link", "list-search", "list", "loader", "location", "lock-off", "lock-open", "lock", "login", "logout", "mail-forward", "mail-opened", "mail", "map-pin-off", "map-pin", "map", "menu", "message-dots", "message-off", "message", "messages", "microphone-off", "microphone", "minus", "mist", "moon", "motorbike", "mouse", "movie", "network", "news", "note", "notebook", "notes", "offshore-station", "package", "palette", "paperclip", "pencil", "phone-call", "phone-calling", "phone-check", "phone-incoming", "phone-off", "phone-outgoing", "phone", "photo-off", "photo", "pig", "pin", "pinned-off", "pinned", "plane-off", "plane", "plant", "player-pause", "player-play", "player-skip-back", "player-skip-forward", "player-stop", "player-track-next", "player-track-prev", "plug-connected", "plug", "plus", "power-ac", "power-dc", "power", "presentation-analytics", "presentation", "printer", "propeller", "published", "puzzle-2", "puzzle", "pylon", "qrcode", "radar", "radio", "radioactive", "receipt-dollar", "receipt-euro", "receipt", "recharging", "recycle", "refresh-alert", "refresh-off", "refresh", "repeat-once", "repeat", "replace", "report-analytics", "report-medical", "report-search", "report", "ripple-off", "ripple", "rocket", "rotate-2", "rotate-clockwise-2", "rotate-clockwise", "rotate-dot", "rotate", "router", "ruler-measure", "sailboat", "satellite", "scale", "school", "scissors", "scooter-electric", "screenshot", "search", "seeding", "select", "selector", "send", "server", "settings", "shape", "share-2", "share", "shield-check", "shield-lock", "shield-off", "shield-x", "shield", "ship-off", "ship", "shopping-cart", "sizemd", "sizesm", "sizexl", "sizexs", "slash", "smart-home", "snowflake", "solar-panel", "sort-ascending-letters", "sort-ascending-numbers", "sort-descending-letters", "sort-descending-numbers", "spacing-horizontal", "spacing-vertical", "speakerphone", "stack", "stairs", "star", "sun", "sunrise", "sunset", "switch-horizontal", "switch-vertical", "table", "tag", "tank-empty-fill", "tank-full-fill", "tank-medium-fill", "temperature-off", "temperature", "template", "terminal", "text-size", "text", "thumb-down", "thumb-up", "ticket", "timeline", "tir", "tool", "tools", "train", "trash-off", "trash", "tree", "trees", "truck-delivery", "truck", "umbrella", "unlink", "upload", "user-circle", "user-minus", "user-plus", "user-worker", "user", "users", "versions", "video-minus", "video-off", "video-plus", "video", "volume-2", "volume-3", "volume", "wallet", "wand", "wave", "waves", "wifi-off", "wifi", "wind-direction", "wind", "windmill", "wood", "world", "writing", "x", "zoom-reset"];
 export type IconName = (typeof iconNames)[number];

package/dist/types/components/nv-togglebutton/nv-togglebutton.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';
+/**
+ * @slot default - Child content of the toggle button.
+ */
+export declare class NvTogglebutton {
+    /****************************************************************************/
+    /**
+     * Determines how large or small the togglebutton appears, allowing for
+     * customization of the togglebutton's dimensions to fit different design
+     * specifications and user needs.
+     */
+    readonly size: `${ToggleButtonSize}`;
+    /**
+     * The value to associated with the button when selected in a
+     * Togglebuttongroup.
+     */
+    readonly value: string;
+    /**
+     * Prevents all interaction, rendering the toggle in a non-interactive state.
+     */
+    readonly disabled: boolean;
+    /**
+     * Whether the button is active or not. Will not toggle automatically but
+     * needs to be controlled externally.
+     */
+    readonly active: boolean;
+    /**
+     * Make it more or less visually prominent to users.
+     */
+    readonly emphasis: `${ToggleButtonEmphasis}`;
+    /****************************************************************************/
+    private handleClick;
+    /****************************************************************************/
+    /**
+     * Emitted when the button is toggled.
+     */
+    toggled: EventEmitter<{
+        /** The value associated with the button. */
+        value: string;
+        /** If the button is active when clicked. */
+        active: boolean;
+    }>;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-togglebutton/nv-togglebutton.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvTogglebuttonDocs: NovaDocs<Components.NvTogglebutton>;
+export default NvTogglebuttonDocs;

package/dist/types/components/nv-togglebuttongroup/nv-togglebuttongroup.d.ts

@@ -0,0 +1,80 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';
+/**
+ * @deprecated [EXPERIMENTAL]
+ * @experimental This component is still in development and subject to change in future releases.
+ * @slot default - Child content of the component, pass the nv-togglebutton components here.
+ */
+export declare class NvTogglebuttongroup {
+    el: HTMLNvTogglebuttongroupElement;
+    private mutationObserver;
+    /****************************************************************************/
+    /**
+     * 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[];
+    /**
+     * Activates single-selection mode so only one button can be active at a time.
+     */
+    readonly exclusive: boolean;
+    /**
+     * Ensures at least one toggle stays selected at all times.
+     */
+    readonly enforceValue: boolean;
+    /**
+     * Make it more or less visually prominent to users.
+     */
+    readonly 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.
+     */
+    readonly size: `${ToggleButtonSize}`;
+    /****************************************************************************/
+    /**
+     * Sets the active state of all toggle buttons depending on the value of the
+     * group.
+     */
+    private setActiveToggleButtons;
+    /**
+     * Sets the emphasis of all toggle buttons to the same value.
+     */
+    private setEmphasisToggleButtons;
+    /**
+     * Sets the size of all toggle buttons to the same value.
+     */
+    private setSizeToggleButtons;
+    /**
+     * Sets up the MutationObserver to watch for changes in child elements
+     */
+    private setupMutationObserver;
+    /**
+     * Narrow Type used locally to interact with nv-togglebutton child elements.
+     * @param {Element} element - The element to check.
+     * @returns {(HTMLElement & {
+     *   active: boolean;
+     *   value: string;
+     *   emphasis: `${ToggleButtonEmphasis}`;
+     *   size: `${ToggleButtonSize}`;
+     * }) | null} The element as a toggle button, or null if it is not a toggle button.
+     */
+    private static asToggleButton;
+    /****************************************************************************/
+    onValueChanged(newValue: typeof this.value): void;
+    onEmphasisChanged(): void;
+    onSizeChanged(): void;
+    onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>): void;
+    /****************************************************************************/
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /****************************************************************************/
+    /**
+     * Emitted when the selected toggle buttons change.
+     * @bind value
+     */
+    valueChanged: EventEmitter<string[]>;
+    /****************************************************************************/
+    render(): any;
+}

package/dist/types/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.d.ts

@@ -0,0 +1,4 @@
+import type { NovaDocs } from '../../nova-docs';
+import { Components } from '../../components';
+declare const NvTogglebuttongroupDocs: NovaDocs<Components.NvTogglebuttongroup>;
+export default NvTogglebuttongroupDocs;

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"