@ukic/web-components 2.28.0 → 3.0.0-alpha.1

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

@@ -9,10 +9,6 @@ export declare class InputComponentContainer {
      * The appearance of the input component container.
      */
     appearance?: "dark" | "default";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
-     */
-    dark?: boolean;
     /**
      *  If `true`, the disabled state will be set.
      */
@@ -33,10 +29,6 @@ export declare class InputComponentContainer {
      * The size of the input component container component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      *  If `true`, the validation will display inline.
      */

package/dist/types/components/ic-input-label/ic-input-label.d.ts

@@ -3,18 +3,10 @@ export declare class InputLabel {
      * The appearance of the input label.
      */
     appearance?: "dark" | "default";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
-     */
-    dark?: boolean;
     /**
      * If `true`, the disabled state will be set.
      */
     disabled: boolean;
-    /**
-     * If `true`, the input label will display with error styling.
-     */
-    error?: boolean;
     /**
      * The ID of the form element the label is bound to.
      */
@@ -35,6 +27,10 @@ export declare class InputLabel {
      * If `true`, the input label will require a value.
      */
     required: boolean;
+    /**
+     * The status of the label - e.g. 'error'.
+     */
+    status: "error" | "";
     componentDidLoad(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-import { IcTheme, IcThemeForeground } from "../../utils/types";
+import { IcTheme, IcThemeMode } from "../../utils/types";
 /**
  * @slot router-item - Handle routing by nesting your routes in this slot.
  */
@@ -7,10 +7,6 @@ export declare class Link {
     private routerSlot;
     private hostMutationObserver;
     el: HTMLIcLinkElement;
-    /**
-     * The appearance of the link, e.g. dark, light, or default.
-     */
-    appearance?: IcThemeForeground;
     /**
      * If `true`, the user can save the linked URL instead of navigating to it.
      */
@@ -23,6 +19,10 @@ export declare class Link {
      * The human language of the linked URL.
      */
     hreflang?: string;
+    /**
+     * If `true`, the link will display as black in the light theme, and white in the dark theme.
+     */
+    monochrome?: boolean;
     /**
      * How much of the referrer to send when following the link.
      */
@@ -31,14 +31,14 @@ export declare class Link {
      * The relationship of the linked URL as space-separated link types.
      */
     rel?: string;
-    /**
-     * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target="_blank".
-     */
-    showIcon?: boolean;
     /**
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: string;
+    /**
+     * 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;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -11,7 +11,7 @@ export declare class LoadingIndicator {
     circularLineWidth: number;
     indeterminate: boolean;
     indicatorLabel: string;
-    showSecond: boolean;
+    clipInnerElement: boolean;
     /**
      * The appearance of the loading indicator, e.g. dark or light.
      */
@@ -52,9 +52,9 @@ export declare class LoadingIndicator {
     type?: IcLoadingTypes;
     /**
      * The label to be displayed beneath the loading indicator.
-     * Display a changing label by separating multiple messages with forward slashes.
+     * Display a changing label by supplying an array of messages.
      */
-    label?: string;
+    label?: string | string[];
     watchPropHandler(): void;
     /**
      * The current amount of progress made.

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts

@@ -1,4 +1,4 @@
-export type IcLoadingSizes = "default" | "small" | "large" | "icon";
+export type IcLoadingSizes = "medium" | "small" | "large" | "icon";
 export type IcLoadingTypes = "circular" | "linear";
 export interface IcLoadingCircleXYR {
     x: number;

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

@@ -72,10 +72,6 @@ export declare class Menu {
      * The size of the menu component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The possible menu selection options.
      */

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -35,10 +35,6 @@ export declare class PageHeader {
      * The size of the page header component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the page header will be sticky at all breakpoints.
      */

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

@@ -11,8 +11,8 @@ export declare class Pagination {
     /**
      * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    adjacentCount: number;
-    watchAdjacentCountHandler(): void;
+    adjacentPageCount: number;
+    watchAdjacentPageCountHandler(): void;
     /**
      * The appearance of the pagination, e.g. dark, light or the default.
      */
@@ -20,8 +20,8 @@ export declare class Pagination {
     /**
      * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    boundaryCount: number;
-    watchBoundaryCountHandler(): void;
+    boundaryPageCount: number;
+    watchBoundaryPageCountHandler(): void;
     /**
      * The default page to display.
      */

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

@@ -46,10 +46,6 @@ export declare class RadioGroup {
      * The size of the radio group component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -25,26 +25,6 @@ export declare class RadioOption {
      * The <form> element to associate the radio with.
      */
     form?: string;
-    /**
-     * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
-     */
-    formaction?: string;
-    /**
-     * The way the submitted form data is encoded.
-     */
-    formenctype?: string;
-    /**
-     * The HTTP method used to submit the form.
-     */
-    formmethod?: string;
-    /**
-     * If `true`, the form will not be validated when submitted.
-     */
-    formnovalidate?: boolean;
-    /**
-     * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
-     */
-    formtarget?: string;
     /**
      * The group label for the radio option.
      */
@@ -71,10 +51,6 @@ export declare class RadioOption {
      * Emitted when the radio option is selected.
      */
     icCheck: EventEmitter<IcValueEventDetail>;
-    /**
-     * @deprecated This event should not be used anymore. Use icCheck instead.
-     */
-    radioOptionSelect: EventEmitter<IcValueEventDetail>;
     /**
      * Emitted when the radio option is selected or deselected.
      */

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

@@ -57,7 +57,7 @@ export declare class SearchBar {
      * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
      * If `true`, all options provided will be displayed.
      */
-    disableFilter?: boolean;
+    disableAutoFiltering?: boolean;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
      */
@@ -86,7 +86,7 @@ export declare class SearchBar {
     /**
      * The hint text for the hidden assistive description element.
      */
-    hintText?: string;
+    assistiveHintText?: string;
     /**
      * The label for the search bar.
      */
@@ -131,10 +131,6 @@ export declare class SearchBar {
      * The size of the search bar component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the value of the search will have its spelling and grammar checked.
      */
@@ -174,15 +170,7 @@ export declare class SearchBar {
      */
     icInput: EventEmitter<IcValueEventDetail>;
     private onInput;
-    /**
-     * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
-     */
-    icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;
     private onInputBlur;
-    /**
-     * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
-     */
-    icInputFocus: EventEmitter<IcValueEventDetail>;
     private onInputFocus;
     /**
      * Emitted when option is highlighted within the menu
@@ -217,7 +205,7 @@ export declare class SearchBar {
     /**
      * Emitted when focus is invoked from ic-search-bar
      */
-    icSearchBarFocus: EventEmitter<void>;
+    icSearchBarFocus: EventEmitter<IcValueEventDetail>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -34,10 +34,6 @@ export declare class Select {
     open: boolean;
     pressedCharacters: string;
     searchableSelectInputValue: string;
-    /**
-     * @deprecated This prop should not be used anymore.
-     */
-    charactersUntilSuggestions?: number;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -45,7 +41,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.
      */
@@ -54,28 +50,6 @@ export declare class Select {
      * The <form> element to associate the select with.
      */
     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.
      */
@@ -144,10 +118,6 @@ export declare class Select {
      * The size of the select component.
      */
     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.
      */

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

@@ -69,7 +69,7 @@ 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;

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

@@ -5,10 +5,6 @@ export declare class Skeleton {
      * The appearance of the skeleton.
      */
     appearance?: "light" | "default";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
-     */
-    light?: boolean;
     /**
      * 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,18 @@ 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 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

@@ -20,7 +20,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 +32,15 @@ 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 The variant of the step. This is managed by ic-stepper.
      */
@@ -48,7 +48,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/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

@@ -42,10 +42,6 @@ export declare class Switch {
      * The size of the switch component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * 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,20 +10,22 @@ 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;
     /**
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    /** @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 controlledMode;
@@ -16,11 +16,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.
      */
@@ -31,13 +26,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;

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,14 @@ 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;
+    /**
+     * Temporary function to handle horizontal scroll appearance until other dark mode work is completed.
+     */
+    private handleHorizontalScrollAppearance;
     render(): any;
 }

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

@@ -1,16 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class TabPanel {
     el: HTMLIcTabPanelElement;
-    /**
-     * @internal The appearance of the tabs, 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;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
     /**
      * @internal The shared ID that links the panel and tab.
      */
@@ -23,6 +16,8 @@ export declare class TabPanel {
      * @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.
      */
@@ -32,6 +27,5 @@ export declare class TabPanel {
      */
     tabPanelRemoved: EventEmitter<void>;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }