@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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, IcSizes } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions, IcValueEventDetail, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
 /**
  * @slot icon - Content will be placed to the left of the select text input.
@@ -28,16 +28,12 @@ export declare class Select {
     el: HTMLIcSelectElement;
     ariaActiveDescendant: string;
     clearButtonFocused: boolean;
-    debounceIcChange: number;
+    debounceIcInput: number;
     hiddenInputValue: string;
     noOptions: IcMenuOption[];
     open: boolean;
     pressedCharacters: string;
     searchableSelectInputValue: string;
-    /**
-     * @deprecated This prop should not be used anymore.
-     */
-    charactersUntilSuggestions?: number;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -46,7 +42,7 @@ export declare class Select {
     /**
      * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
      */
-    disableFilter?: boolean;
+    disableAutoFiltering?: boolean;
     /**
      * The text displayed when there are no options in the option list.
      */
@@ -56,29 +52,7 @@ export declare class Select {
      */
     form?: string;
     /**
-     * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
-     * This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formaction?: string;
-    /**
-     * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formenctype?: string;
-    /**
-     * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formmethod?: string;
-    /**
-     * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formnovalidate?: boolean;
-    /**
-     * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
-     * This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formtarget?: string;
-    /**
-     * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
+     * If `true`, the select will fill the width of the container.
      */
     fullWidth: boolean;
     /**
@@ -109,6 +83,10 @@ export declare class Select {
      * The message displayed whilst the options are being loaded externally.
      */
     loadingLabel?: string;
+    /**
+     * If `true`, multiple options can be selected.
+     */
+    multiple?: boolean;
     /**
      * The name of the control, which is submitted with the form data.
      */
@@ -126,7 +104,7 @@ export declare class Select {
      */
     required?: boolean;
     /**
-     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+     * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
      */
     searchable?: boolean;
     /**
@@ -134,7 +112,7 @@ export declare class Select {
      */
     searchMatchPosition?: IcSearchMatchPositions;
     /**
-     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown.
+     * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
      */
     selectOnEnter?: boolean;
     /**
@@ -142,17 +120,17 @@ export declare class Select {
      */
     showClearButton?: boolean;
     /**
-     * The size of the select component.
+     * The size of the select.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */
     timeout?: number;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
@@ -174,18 +152,20 @@ export declare class Select {
     uniqueOptions: IcMenuOption[];
     watchOptionsHandler(): void;
     /**
-     * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+     * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
      */
     debounce?: number;
     currDebounce: number;
     debounceChangedHandler(newValue: number): void;
     /**
-     * The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input.
+     * The value of the select, reflected by the value of the currently selected option.
+     * For the searchable variant, the value is also reflected by the user input.
+     * For the multi-select variant, the value must be an array of option values.
      */
-    value?: string;
-    initialValue: string;
+    value?: string | string[];
+    initialValue: string | string[];
     inputValueToFilter: string;
-    currValue: string;
+    currValue: string | string[];
     valueChangedHandler(): void;
     openChangedHandler(): void;
     /**
@@ -197,7 +177,7 @@ export declare class Select {
      */
     icChange: EventEmitter<IcValueEventDetail>;
     /**
-     * Emitted when the clear button is clicked.
+     * Emitted when the clear or clear all button is clicked.
      */
     icClear: EventEmitter<void>;
     /**
@@ -217,10 +197,14 @@ export declare class Select {
      */
     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.
+     * Emitted when an option is selected.
+     * Selecting an option will also trigger an `icChange/onIcChange` due to the value being updated.
      */
     icOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
+    /**
+     * Emitted when `multiple` is `true` and an option is deselected.
+     */
+    icOptionDeselect: EventEmitter<IcOptionSelectEventDetail>;
     /**
      * Emitted when the 'retry loading' button is clicked for a searchable variant.
      */
@@ -237,7 +221,7 @@ export declare class Select {
     private handleRetry;
     private updateOnChangeDebounce;
     private emitIcChange;
-    private emitImmediateIcChange;
+    private emitIcInput;
     /**
      * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
      * @param options array of IcMenuOptions
@@ -252,12 +236,15 @@ export declare class Select {
     private setTextColor;
     private setMenuChange;
     private getLabelFromValue;
+    private getMultipleOptionsString;
     private getFilteredChildMenuOptions;
+    private getValueSortedByOptions;
     private handleNativeSelectChange;
     private handleCustomSelectChange;
+    private handleMultipleSelectChange;
+    private handleSelectAllChange;
     private handleMenuChange;
     private handleMenuKeyPress;
-    private handleMenuValueChange;
     private handleFocusIndicatorDisplay;
     private handleMouseDown;
     private isExternalFiltering;
@@ -279,11 +266,13 @@ export declare class Select {
     private handleSearchableSelectInput;
     private updateSearchableSelectResultAriaLive;
     private debounceAriaLiveUpdate;
+    private updateMultiSelectedCountAriaLive;
     private getDefaultValue;
     private setDefaultValue;
     private onFocus;
     private onBlur;
     private onTimeoutBlur;
     private handleFormReset;
+    private clearInput;
     render(): any;
 }

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcExpandedDetail } from "./ic-side-navigation.types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
@@ -17,7 +17,7 @@ export declare class SideNavigation {
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     hasSecondaryNavigation: boolean;
     menuExpanded: boolean;
     menuOpen: boolean;
@@ -69,11 +69,11 @@ export declare class SideNavigation {
     /**
      * Emitted when the side navigation is collapsed and expanded.
      */
-    sideNavExpanded: EventEmitter<IcExpandedDetail>;
+    icSideNavExpanded: EventEmitter<IcExpandedDetail>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    themeChangeHandler({ detail }: CustomEvent): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     private emitSideNavigationExpanded;
     private toggleMenu;
     private setToggleMenuFlyoutMenuVisibility;

package/dist/types/components/ic-side-navigation/ic-side-navigation.types.d.ts

@@ -1,7 +1,7 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrandForeground } from "../../utils/types";
 export interface IcTopBar {
     isSDevice: boolean;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     menuOpen: boolean;
     href: string;
     isAppNameSubtitleVariant: boolean;

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

@@ -1,14 +1,11 @@
 import { IcSkeletonVariants } from "./ic-skeleton.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Skeleton {
     el: HTMLIcSkeletonElement;
     /**
-     * The appearance of the skeleton.
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
-    appearance?: "light" | "default";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
-     */
-    light?: boolean;
+    theme?: IcThemeMode;
     /**
      * The variant of the skeleton that will be displayed.
      */

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -1,4 +1,4 @@
-import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
+import { IcStatusTagStatuses } from "./ic-status-tag.types";
 import { IcEmphasisType, IcSizes } from "../../utils/types";
 export declare class StatusTag {
     /**
@@ -6,10 +6,6 @@ export declare class StatusTag {
      * Screen readers will announce changes to the `label`, but not the initial value.
      */
     announced?: boolean;
-    /**
-     * @deprecated This prop should not be used anymore. Use variant prop instead.
-     */
-    appearance?: IcStatusTagAppearance;
     /**
      * The content rendered within the status tag.
      */
@@ -18,19 +14,22 @@ export declare class StatusTag {
      * The size of the status tag component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The colour of the status tag.
      */
     status?: IcStatusTagStatuses;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: "dark" | "light" | "inherit";
+    /**
+     * The letter case of the status tag's label.
+     */
+    uppercase?: boolean;
     /**
      * The emphasis of the status tag.
      */
     variant?: IcEmphasisType;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ic-status-tag/ic-status-tag.types.d.ts

@@ -1,2 +1 @@
 export type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
-export type IcStatusTagAppearance = "filled" | "outlined";

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

@@ -1,4 +1,5 @@
 import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Step {
     el: HTMLIcStepElement;
     /**
@@ -20,7 +21,7 @@ export declare class Step {
     /**
      * @internal The name of the next step. This is managed by ic-stepper.
      */
-    nextStepTitle?: string;
+    nextStepHeading?: string;
     /**
      * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
      */
@@ -32,15 +33,19 @@ export declare class Step {
     /**
      * The status of the step. Use this prop to display a status message on the step if it is required or optional.
      */
-    stepStatus?: IcStepStatuses;
+    status?: IcStepStatuses;
     /**
      * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
      */
-    stepSubtitle?: string;
+    subheading?: string;
     /**
      * The title of the step within the stepper.
      */
-    stepTitle?: string;
+    heading?: string;
+    /**
+     * @internal Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
     /**
      * @internal The variant of the step. This is managed by ic-stepper.
      */
@@ -48,7 +53,7 @@ export declare class Step {
     /**
      * The state of the step within the stepper.
      */
-    stepType?: IcStepTypes;
-    stepTypeChangeHandler(): void;
+    type?: IcStepTypes;
+    typeChangeHandler(): void;
     render(): any;
 }

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

@@ -1,5 +1,6 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Stepper {
     private resizeObserver;
     private steps;
@@ -17,10 +18,6 @@ export declare class Stepper {
      * The alignment of the default stepper within its container.
      */
     aligned?: IcStepperAlignment;
-    /**
-     * The appearance of the stepper.
-     */
-    appearance?: "light" | "default";
     /**
      * The length of the connector between each step in pixels. Minimum length is 100px.
      */
@@ -29,6 +26,11 @@ export declare class Stepper {
      * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
      */
     hideStepInfo?: boolean;
+    /**
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+     */
+    theme?: IcThemeMode;
+    handleThemeChange(): void;
     /**
      * The variant of the stepper.
      */

package/dist/types/components/ic-stepper/test/basic/ic-stepper-test-examples.d.ts

@@ -1,4 +1,4 @@
-export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";
+export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        heading=\"First\"\n        ></ic-step>\n        <ic-step\n          heading=\"Second With a Very Long Title\"\n          subheading=\"Optional subtitle that is long and should wrap\"\n          current\n          type=\"current\"\n        ></ic-step>\n        <ic-step\n          heading=\"Third\"\n          type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fourth title that is long and should wrap\"\n          subheading=\"Optional Subtitle\"\n          type=\"completed\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fifth and final step\"\n          subheading=\"Optional Subtitle\"\n          icon\n          status=\"optional\"\n          type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";

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

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcSwitchChangeEventDetail } from "./ic-switch.types";
-import { IcSizesNoLarge } from "../../utils/types";
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
- * @slot right-adornment - Content is placed to the right of switch before state label.
+ * @slot right-adornment - Content is placed to the right of switch.
  */
 export declare class Switch {
     private inputId;
@@ -35,18 +35,14 @@ export declare class Switch {
      * The name of the control, which is submitted with the form data.
      */
     name?: string;
-    /**
-     * If `true`, the switch will render the On/Off state text.
-     */
-    showState?: boolean;
     /**
      * The size of the switch component.
      */
     size?: IcSizesNoLarge;
     /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
-    small?: boolean;
+    theme?: IcThemeMode;
     /**
      * The value of the toggle does not mean if it's checked or not, use the `checked`
      * property for that.

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcTabClickEventDetail } from "./ic-tab.types";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
  * @slot badge - Badge component displayed inline with the tab.
@@ -10,8 +10,6 @@ export declare class Tab {
     private focusTabId;
     private isInitialRender;
     el: HTMLIcTabElement;
-    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
-    appearance?: IcThemeForegroundNoDefault;
     /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
     contextId?: string;
     /**
@@ -19,12 +17,16 @@ export declare class Tab {
      */
     disabled?: boolean;
     watchDisabledHandler(): void;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
     /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
     selected?: boolean;
     /** @internal The shared ID between panel and tab. */
     tabId?: string;
     /** @internal The position of the tab inside the tabs array in context. */
     tabPosition?: number;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     disabledWatchHandler(): void;
     /**
      * @internal Emitted when a tab is selected.

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcActivationTypes, IcThemeMode } from "../../utils/types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
     private enabledTabs;
@@ -15,11 +15,6 @@ export declare class TabContext {
      * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.
      */
     activationType?: IcActivationTypes;
-    /**
-     * The appearance of the tab context, e.g dark, or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
-    watchAppearanceHandler(): void;
     /**
      * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
      */
@@ -30,13 +25,19 @@ export declare class TabContext {
     selectedTabIndex?: number;
     updateSelectedTab(newValue: number): void;
     /**
-     * Emitted when a user selects a tab.
+     * If `true`, the tabs will display as black in the light theme.
      */
-    icTabSelect: EventEmitter<IcTabSelectEventDetail>;
+    monochrome?: boolean;
+    watchMonochromeHandler(): void;
     /**
-     * @deprecated This event should not be used anymore. Use icTabSelect instead.
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
-    tabSelect: EventEmitter<IcTabSelectEventDetail>;
+    theme?: IcThemeMode;
+    watchThemeHandler(): void;
+    /**
+     * Emitted when a user selects a tab.
+     */
+    icTabSelect: EventEmitter<IcTabSelectEventDetail>;
     componentDidLoad(): void;
     componentWillUpdate(): void;
     disconnectedCallback(): void;
@@ -47,7 +48,6 @@ export declare class TabContext {
      * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
      */
     tabRemovedHandler(hadFocus?: boolean): Promise<void>;
-    private emitEvents;
     /** Sets attributes to link tab-group, tabs and tab-panels */
     private linkTabs;
     /**

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

@@ -1,14 +1,5 @@
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabGroup {
-    /**
-     * @internal The appearance of the tab group, e.g dark, or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
-    /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
-     */
-    contextId?: string;
     /**
      * If `true`, the tabs and tab panels will be positioned separately.
      */
@@ -17,6 +8,10 @@ export declare class TabGroup {
      * The label to describe the purpose of the set of tabs to screen reader users.
      */
     label: string;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts

@@ -1,16 +1,23 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabPanel {
     el: HTMLIcTabPanelElement;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
     /**
-     * @internal The appearance of the tabs, e.g dark, or light.
+     * @internal The shared ID that links the panel and tab.
      */
-    appearance?: IcThemeForegroundNoDefault;
+    panelId?: string;
     /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
+     * @internal The shared ID of the currently selected tab.
      */
-    contextId?: string;
+    selectedTab?: string;
+    /**
+     * @internal The position of the tab panel inside the tabs array in context.
+     */
+    tabPosition?: number;
+    /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+    theme?: IcThemeMode;
     /**
      * @internal Emitted when a tab panel is dynamically created.
      */
@@ -20,6 +27,5 @@ export declare class TabPanel {
      */
     tabPanelRemoved: EventEmitter<void>;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }