@ukic/web-components 2.13.0 → 2.15.0

package/dist/esm/types-6f6b41a5.js.map

@@ -1 +1 @@
-{"file":"types-6f6b41a5.js","mappings":"IAwBY;AAAZ,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;IAsEW;AAAZ,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,sCAAa,CAAA;IACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB;;;;","names":[],"sources":["src/utils/types.ts"],"sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcSizes = \"default\" | \"large\" | \"small\";\n\nexport type IcSizesNoLarge = \"default\" | \"small\";\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\"\n  | \"code-large\"\n  | \"code-small\"\n  | \"code-extra-small\"\n  | \"badge\"\n  | \"badge-small\";\n\n/**\n * @interface IcMenuOption\n * @field {string} A label field to options. Defaults to \"label\", but can have any custom name.\n * @field {string} A value field to options. Defaults to \"value\", but can have any custom name.\n */\nexport interface IcMenuOption {\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n  loading?: boolean;\n  timedOut?: boolean;\n  [key: string]: any;\n  element?: {\n    component: any;\n    ariaLabel: string;\n  };\n  icon?: any;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport type IcEmphasisType = \"filled\" | \"outlined\";\n\nexport interface IcValueEventDetail {\n  value: string;\n  keyPressed?: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"],"version":3}
+{"file":"types-6f6b41a5.js","mappings":"IAwBY;AAAZ,WAAY,mBAAmB;IAC7B,0CAAmB,CAAA;IACnB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;IAsEW;AAAZ,WAAY,qBAAqB;IAC/B,4CAAmB,CAAA;IACnB,sCAAa,CAAA;IACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB;;;;","names":[],"sources":["src/utils/types.ts"],"sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcSizes = \"default\" | \"large\" | \"small\";\n\nexport type IcSizesNoLarge = \"default\" | \"small\";\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\"\n  | \"code-large\"\n  | \"code-small\"\n  | \"code-extra-small\"\n  | \"badge\"\n  | \"badge-small\";\n\n/**\n * @interface IcMenuOption\n * @field {string} A label field to options. Defaults to \"label\", but can have any custom name.\n * @field {string} A value field to options. Defaults to \"value\", but can have any custom name.\n */\nexport interface IcMenuOption {\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n  loading?: boolean;\n  timedOut?: boolean;\n  [key: string]: any;\n  element?: {\n    component: any;\n    ariaLabel: string;\n  };\n  icon?: any;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport type IcEmphasisType = \"filled\" | \"outlined\";\n\nexport interface IcValueEventDetail {\n  value: string;\n  keyPressed?: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n\nexport type IcSelectTypes = \"single\" | \"multi\";\n\nexport type IcSelectMethodTypes = \"auto\" | \"manual\";\n"],"version":3}

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;
@@ -42,6 +44,7 @@ export declare class Button {
      * If `true`, the button will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
      */
@@ -173,6 +176,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

@@ -1,6 +1,10 @@
 import { EventEmitter } from "../stencil-public-runtime";
 import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA } from "./types";
 import { IcMenuOption, IcThemeForeground } from "../utils/types";
+/**
+ * converts an enum of strings into an array of strings
+ */
+export declare const stringEnumToArray: (theEnum: Record<string, string | number>) => string[];
 /**
  * Used to inherit global attributes set on the host. Called in componentWillLoad and assigned
  * to a variable that is later used in the render function.
@@ -9,7 +13,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;
@@ -25,7 +29,7 @@ export declare const debounce: (func: (...args: unknown[]) => void, wait?: numbe
  * @param value The value of the input
  * @param disabled If true, the input is disabled
  */
-export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | undefined | null, disabled: boolean) => void;
+export declare const renderHiddenInput: (always: boolean, container: HTMLElement, name: string, value: string | Date | undefined | null, disabled: boolean) => void;
 /**
  * This method is used to add a hidden file input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -137,3 +141,5 @@ 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;
+export declare const isNumeric: (value: string) => 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";