@ukic/web-components 2.13.0 → 2.14.0

package/dist/types/components/ic-accordion-group/ic-accordion-group.d.ts

@@ -4,6 +4,10 @@ export declare class AccordionGroup {
     el: HTMLIcAccordionGroupElement;
     accordions: HTMLIcAccordionElement[];
     areAllAccordionsOpen: boolean;
+    /**
+     * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
+     */
+    accessibleButtonLabel: string;
     /**
      * The appearance of the accordion group, e.g dark, or light.
      */
@@ -29,5 +33,6 @@ export declare class AccordionGroup {
     private handleExpanded;
     private linkAccordions;
     private setExpandedToAreAllAccordionsOpen;
+    private accordionOpenBtnText;
     render(): any;
 }

package/dist/types/components/ic-button/ic-button.d.ts

@@ -7,6 +7,7 @@ import { IcSizes, IcThemeForeground } from "../../utils/types";
  * @slot right-icon - Content will be placed to the right of the button label.
  * @slot top-icon - Content will be placed above the button label.
  * @slot badge - Badge component overlaying the top right of the button.
+ * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.
  */
 export declare class Button {
     private buttonEl;
@@ -18,6 +19,7 @@ export declare class Button {
     private describedById;
     private mutationObserver;
     private hostMutationObserver;
+    private routerSlot;
     el: HTMLIcButtonElement;
     ariaLabel: string;
     describedByContent: string;
@@ -173,6 +175,7 @@ export declare class Button {
     private hasLeftIconSlot;
     private hasTopIconSlot;
     private hasRightIconSlot;
+    private hasRouterSlot;
     private setViewBox;
     private handleHiddenFormButtonClick;
     private handleClick;

package/dist/types/components/ic-data-row/ic-data-row.d.ts

@@ -31,12 +31,7 @@ export declare class DataRow {
     componentDidLoad(): void;
     private runResizeObserver;
     private checkLabelAbove;
-    /**
-     * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
-     * @param label string - label of value
-     * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
-     */
-    private renderLabel;
+    private renderCellContent;
     private labelEndComponent;
     render(): any;
 }

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -1,4 +1,4 @@
-import { IcInformationStatusOrEmpty, IcSizesNoLarge } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
 /**
  * @slot left-icon - Content will be placed to the left of the input.
  */
@@ -31,7 +31,7 @@ export declare class InputComponentContainer {
     /**
      * The size of the input component container component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */

package/dist/types/components/ic-menu/ic-menu.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcMenuOption, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
+import { IcActivationTypes, IcMenuOption, IcSizes, IcValueEventDetail } from "../../utils/types";
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
@@ -71,7 +71,7 @@ export declare class Menu {
     /**
      * The size of the menu component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -96,7 +96,7 @@ export declare class SearchBar {
      */
     labelField?: string;
     /**
-     * Trigger loading state when fetching options asyncronously
+     * Trigger loading state when fetching options asynchronously
      */
     loading?: boolean;
     /**

package/dist/types/components/ic-select/ic-select.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizes } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 export declare class Select {
     private anchorEl;
@@ -139,7 +139,7 @@ export declare class Select {
     /**
      * The size of the select component.
      */
-    size?: IcSizesNoLarge;
+    size?: IcSizes;
     /**
      * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
      */
@@ -157,7 +157,7 @@ export declare class Select {
      */
     validationText?: string;
     /**
-     * If `true`, the loading state will be triggered when fetching options asyncronously.
+     * If `true`, the loading state will be triggered when fetching options asynchronously.
      */
     loading?: boolean;
     loadingHandler(newValue: boolean): void;
@@ -182,6 +182,7 @@ export declare class Select {
     inputValueToFilter: string;
     currValue: string;
     valueChangedHandler(): void;
+    openChangedHandler(): void;
     /**
      * Emitted when the select loses focus.
      */
@@ -194,6 +195,10 @@ export declare class Select {
      * Emitted when the clear button is clicked.
      */
     icClear: EventEmitter<void>;
+    /**
+     * Emitted when the select options menu is closed.
+     */
+    icClose: EventEmitter<void>;
     /**
      * Emitted when the select gains focus.
      */
@@ -202,6 +207,10 @@ export declare class Select {
      * Emitted when a keyboard input occurred.
      */
     icInput: EventEmitter<IcValueEventDetail>;
+    /**
+     * Emitted when the select options menu is opened.
+     */
+    icOpen: EventEmitter<void>;
     /**
      * Emitted when an option is highlighted within the menu.
      * Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -55,6 +55,7 @@ export declare class ToggleButton {
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(e: Event): void;
+    private handleFocus;
     private handleClick;
     render(): any;
 }

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts

@@ -0,0 +1,68 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { IcSizes, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes } from "../../utils/types";
+import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
+interface lastKey {
+    key: string | null;
+    shift: boolean;
+}
+export declare class ToggleButtonGroup {
+    el: HTMLIcToggleButtonGroupElement;
+    lastKeyPressed: lastKey;
+    /**
+     * The accessible label of the toggle button group component to provide context for screen reader users.
+     */
+    accessibleLabel?: string;
+    /**
+     * The appearance of the toggle button group, e.g dark, or light.
+     */
+    appearance: IcThemeForeground;
+    /**
+     * If `true`, the toggle button group will be set to the disabled state.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the toggle button group will fill the width of the container.
+     */
+    fullWidth?: boolean;
+    /**
+     * The placement of the icons in relation to the toggle button labels.
+     */
+    iconPlacement?: "left" | "right" | "top";
+    /**
+     * If `true`, the toggle button group will be in loading state.
+     */
+    loading?: boolean;
+    /**
+     * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
+     */
+    selectMethod?: IcSelectMethodTypes;
+    /**
+     * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
+     */
+    selectType?: IcSelectTypes;
+    /**
+     * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
+     */
+    size?: IcSizes;
+    /**
+     * The variant of the toggle button.
+     */
+    variant: "default" | "icon";
+    /**
+     * Emitted when a toggle button is selected.
+     */
+    icChange: EventEmitter<IcChangeEventDetail>;
+    selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private keyListener;
+    private setSlottedAria;
+    private handleHostFocus;
+    private proxySelectHandler;
+    private handleKeyDown;
+    private getNextItemToSelect;
+    private getAllToggleButtons;
+    render(): any;
+}
+export {};

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.types.d.ts

@@ -0,0 +1,7 @@
+export interface IcChangeEventDetail {
+    toggleChecked: boolean[] | boolean;
+    toggledOptions?: {
+        toggleButton: HTMLIcToggleButtonElement;
+    }[];
+    selectedOption: HTMLIcToggleButtonElement;
+}

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
@@ -30,8 +30,9 @@ import { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 import { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
+import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants, IcColor } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
@@ -56,6 +57,7 @@ export { IcStepperAlignment } from "./components/ic-stepper/ic-stepper.types";
 export { IcSwitchChangeEventDetail } from "./components/ic-switch/ic-switch.types";
 export { IcTabClickEventDetail, IcTabSelectEventDetail } from "./components/ic-tab/ic-tab.types";
 export { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./components/ic-text-field/ic-text-field.types";
+export { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export namespace Components {
     interface IcAccordion {
@@ -86,6 +88,10 @@ export namespace Components {
         "size"?: IcSizes;
     }
     interface IcAccordionGroup {
+        /**
+          * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
+         */
+        "accessibleButtonLabel": string;
         /**
           * The appearance of the accordion group, e.g dark, or light.
          */
@@ -843,7 +849,7 @@ export namespace Components {
         /**
           * The size of the input component container component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -1063,7 +1069,7 @@ export namespace Components {
         /**
           * The size of the menu component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -1544,7 +1550,7 @@ export namespace Components {
          */
         "labelField"?: string;
         /**
-          * Trigger loading state when fetching options asyncronously
+          * Trigger loading state when fetching options asynchronously
          */
         "loading"?: boolean;
         /**
@@ -1688,7 +1694,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * If `true`, the loading state will be triggered when fetching options asyncronously.
+          * If `true`, the loading state will be triggered when fetching options asynchronously.
          */
         "loading"?: boolean;
         /**
@@ -1742,7 +1748,7 @@ export namespace Components {
         /**
           * The size of the select component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -2231,6 +2237,48 @@ export namespace Components {
          */
         "variant": "default" | "icon";
     }
+    interface IcToggleButtonGroup {
+        /**
+          * The accessible label of the toggle button group component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The appearance of the toggle button group, e.g dark, or light.
+         */
+        "appearance": IcThemeForeground;
+        /**
+          * If `true`, the toggle button group will be set to the disabled state.
+         */
+        "disabled": boolean;
+        /**
+          * If `true`, the toggle button group will fill the width of the container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The placement of the icons in relation to the toggle button labels.
+         */
+        "iconPlacement"?: "left" | "right" | "top";
+        /**
+          * If `true`, the toggle button group will be in loading state.
+         */
+        "loading"?: boolean;
+        /**
+          * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
+         */
+        "selectMethod"?: IcSelectMethodTypes;
+        /**
+          * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
+         */
+        "selectType"?: IcSelectTypes;
+        /**
+          * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
+         */
+        "size"?: IcSizes;
+        /**
+          * The variant of the toggle button.
+         */
+        "variant": "default" | "icon";
+    }
     interface IcTooltip {
         "disableClick"?: boolean;
         /**
@@ -2434,6 +2482,10 @@ export interface IcToggleButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcToggleButtonElement;
 }
+export interface IcToggleButtonGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIcToggleButtonGroupElement;
+}
 export interface IcTopNavigationCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIcTopNavigationElement;
@@ -2940,8 +2992,10 @@ declare global {
         "icBlur": void;
         "icChange": IcValueEventDetail;
         "icClear": void;
+        "icClose": void;
         "icFocus": void;
         "icInput": IcValueEventDetail;
+        "icOpen": void;
         "icOptionSelect": IcOptionSelectEventDetail;
         "icRetryLoad": IcValueEventDetail;
     }
@@ -3163,6 +3217,23 @@ declare global {
         prototype: HTMLIcToggleButtonElement;
         new (): HTMLIcToggleButtonElement;
     };
+    interface HTMLIcToggleButtonGroupElementEventMap {
+        "icChange": IcChangeEventDetail3;
+    }
+    interface HTMLIcToggleButtonGroupElement extends Components.IcToggleButtonGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIcToggleButtonGroupElementEventMap>(type: K, listener: (this: HTMLIcToggleButtonGroupElement, ev: IcToggleButtonGroupCustomEvent<HTMLIcToggleButtonGroupElementEventMap[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 HTMLIcToggleButtonGroupElementEventMap>(type: K, listener: (this: HTMLIcToggleButtonGroupElement, ev: IcToggleButtonGroupCustomEvent<HTMLIcToggleButtonGroupElementEventMap[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 HTMLIcToggleButtonGroupElement: {
+        prototype: HTMLIcToggleButtonGroupElement;
+        new (): HTMLIcToggleButtonGroupElement;
+    };
     interface HTMLIcTooltipElement extends Components.IcTooltip, HTMLStencilElement {
     }
     var HTMLIcTooltipElement: {
@@ -3255,6 +3326,7 @@ declare global {
         "ic-toast": HTMLIcToastElement;
         "ic-toast-region": HTMLIcToastRegionElement;
         "ic-toggle-button": HTMLIcToggleButtonElement;
+        "ic-toggle-button-group": HTMLIcToggleButtonGroupElement;
         "ic-tooltip": HTMLIcTooltipElement;
         "ic-top-navigation": HTMLIcTopNavigationElement;
         "ic-typography": HTMLIcTypographyElement;
@@ -3284,6 +3356,10 @@ declare namespace LocalJSX {
         "size"?: IcSizes;
     }
     interface IcAccordionGroup {
+        /**
+          * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
+         */
+        "accessibleButtonLabel"?: string;
         /**
           * The appearance of the accordion group, e.g dark, or light.
          */
@@ -4047,7 +4123,7 @@ declare namespace LocalJSX {
         /**
           * The size of the input component container component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -4251,7 +4327,7 @@ declare namespace LocalJSX {
         /**
           * The size of the menu component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -4727,7 +4803,7 @@ declare namespace LocalJSX {
          */
         "labelField"?: string;
         /**
-          * Trigger loading state when fetching options asyncronously
+          * Trigger loading state when fetching options asynchronously
          */
         "loading"?: boolean;
         /**
@@ -4911,7 +4987,7 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * If `true`, the loading state will be triggered when fetching options asyncronously.
+          * If `true`, the loading state will be triggered when fetching options asynchronously.
          */
         "loading"?: boolean;
         /**
@@ -4938,6 +5014,10 @@ declare namespace LocalJSX {
           * Emitted when the clear button is clicked.
          */
         "onIcClear"?: (event: IcSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when the select options menu is closed.
+         */
+        "onIcClose"?: (event: IcSelectCustomEvent<void>) => void;
         /**
           * Emitted when the select gains focus.
          */
@@ -4946,6 +5026,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurred.
          */
         "onIcInput"?: (event: IcSelectCustomEvent<IcValueEventDetail>) => void;
+        /**
+          * Emitted when the select options menu is opened.
+         */
+        "onIcOpen"?: (event: IcSelectCustomEvent<void>) => void;
         /**
           * Emitted when an option is highlighted within the menu. Highlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated.
          */
@@ -4989,7 +5073,7 @@ declare namespace LocalJSX {
         /**
           * The size of the select component.
          */
-        "size"?: IcSizesNoLarge;
+        "size"?: IcSizes;
         /**
           * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
          */
@@ -5483,6 +5567,52 @@ declare namespace LocalJSX {
          */
         "variant"?: "default" | "icon";
     }
+    interface IcToggleButtonGroup {
+        /**
+          * The accessible label of the toggle button group component to provide context for screen reader users.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * The appearance of the toggle button group, e.g dark, or light.
+         */
+        "appearance"?: IcThemeForeground;
+        /**
+          * If `true`, the toggle button group will be set to the disabled state.
+         */
+        "disabled"?: boolean;
+        /**
+          * If `true`, the toggle button group will fill the width of the container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The placement of the icons in relation to the toggle button labels.
+         */
+        "iconPlacement"?: "left" | "right" | "top";
+        /**
+          * If `true`, the toggle button group will be in loading state.
+         */
+        "loading"?: boolean;
+        /**
+          * Emitted when a toggle button is selected.
+         */
+        "onIcChange"?: (event: IcToggleButtonGroupCustomEvent<IcChangeEventDetail3>) => void;
+        /**
+          * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
+         */
+        "selectMethod"?: IcSelectMethodTypes;
+        /**
+          * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.
+         */
+        "selectType"?: IcSelectTypes;
+        /**
+          * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.
+         */
+        "size"?: IcSizes;
+        /**
+          * The variant of the toggle button.
+         */
+        "variant"?: "default" | "icon";
+    }
     interface IcTooltip {
         /**
           * If `true`, the tooltip will not be displayed on hover, it will require a click.
@@ -5630,6 +5760,7 @@ declare namespace LocalJSX {
         "ic-toast": IcToast;
         "ic-toast-region": IcToastRegion;
         "ic-toggle-button": IcToggleButton;
+        "ic-toggle-button-group": IcToggleButtonGroup;
         "ic-tooltip": IcTooltip;
         "ic-top-navigation": IcTopNavigation;
         "ic-typography": IcTypography;
@@ -5699,6 +5830,7 @@ declare module "@stencil/core" {
             "ic-toast": LocalJSX.IcToast & JSXBase.HTMLAttributes<HTMLIcToastElement>;
             "ic-toast-region": LocalJSX.IcToastRegion & JSXBase.HTMLAttributes<HTMLIcToastRegionElement>;
             "ic-toggle-button": LocalJSX.IcToggleButton & JSXBase.HTMLAttributes<HTMLIcToggleButtonElement>;
+            "ic-toggle-button-group": LocalJSX.IcToggleButtonGroup & JSXBase.HTMLAttributes<HTMLIcToggleButtonGroupElement>;
             "ic-tooltip": LocalJSX.IcTooltip & JSXBase.HTMLAttributes<HTMLIcTooltipElement>;
             "ic-top-navigation": LocalJSX.IcTopNavigation & JSXBase.HTMLAttributes<HTMLIcTopNavigationElement>;
             "ic-typography": LocalJSX.IcTypography & JSXBase.HTMLAttributes<HTMLIcTypographyElement>;

package/dist/types/utils/helpers.d.ts

@@ -9,7 +9,7 @@ import { IcMenuOption, IcThemeForeground } from "../utils/types";
  * does not trigger a re-render.
  */
 export declare const inheritAttributes: (element: HTMLElement, attributes?: string[]) => {
-    [key: string]: unknown;
+    [key: string]: string;
 };
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
 export declare const debounce: (func: (...args: unknown[]) => void, wait?: number) => unknown;
@@ -137,3 +137,4 @@ export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallb
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const pxToRem: (px: string, base?: number) => string;
 export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
+export declare const isMacDevice: () => boolean;

package/dist/types/utils/types.d.ts

@@ -74,3 +74,5 @@ export interface IcValueEventDetail {
 export interface IcBlurEventDetail {
     relatedTarget: IcRelatedTarget;
 }
+export type IcSelectTypes = "single" | "multi";
+export type IcSelectMethodTypes = "auto" | "manual";