@ukic/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcButtonTypes, IcButtonVariants, IcButtonTooltipPlacement } from "./ic-button.types";
-import { IcSizes, IcTheme, IcThemeForeground } from "../../utils/types";
+import { IcSizes, IcTheme, IcThemeMode } from "../../utils/types";
 /**
  * @slot left-icon - Content will be placed to the left of the button label.
  * @slot right-icon - Content will be placed to the right of the button label.
@@ -27,10 +27,6 @@ export declare class Button {
      * If `fileUpload` is set to `true`, this is the accepted list of file types.
      */
     accept?: string;
-    /**
-     * The appearance of the button, e.g. dark, light, or the default.
-     */
-    appearance?: IcThemeForeground;
     /**
      * @internal Used to identify any related child component
      */
@@ -108,6 +104,10 @@ export declare class Button {
      * If `true`, the button will be in loading state.
      */
     loading?: boolean;
+    /**
+     * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+     */
+    monochrome?: boolean;
     /**
      * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
      */
@@ -132,6 +132,10 @@ export declare class Button {
      * 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;
     /**
      * The position of the tooltip in relation to the button.
      */

package/dist/types/components/ic-card-vertical/ic-card-vertical.d.ts

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcTheme, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the card to the right of the icon.
  * @slot message - Content will be placed in the main body of the card.
@@ -15,9 +15,9 @@ import { IcThemeForeground } from "../../utils/types";
 export declare class CardVertical {
     private hostMutationObserver;
     el: HTMLIcCardVerticalElement;
-    appearance?: IcThemeForeground;
     areaExpanded: boolean;
     isFocussed: boolean;
+    monochrome: boolean;
     parentEl: HTMLElement | null;
     parentIsAnchorTag: boolean;
     /**
@@ -43,7 +43,7 @@ export declare class CardVertical {
     /**
      * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * The human language of the linked URL.
      */
@@ -68,11 +68,15 @@ export declare class CardVertical {
      * 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(event: Event): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    themeChangeHandler(ev: CustomEvent<IcTheme>): void;
     /**
      * Sets focus on the card.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAdditionalFieldTypes, IcSizes } from "../../utils/types";
+import { IcAdditionalFieldTypes, IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot additional-field - Content to be displayed alongside a checkbox.
  */
@@ -11,7 +11,7 @@ export declare class Checkbox {
      */
     additionalFieldDisplay: IcAdditionalFieldTypes;
     /**
-     * If `true`, the checkbox will be set to the checked state.
+     * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
      */
     checked?: boolean;
     initiallyChecked: boolean;
@@ -53,6 +53,10 @@ export declare class Checkbox {
      * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
      */
     size?: IcSizes;
+    /**
+     * 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 value for the checkbox.
      */

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

@@ -1,7 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 export declare class CheckboxGroup {
+    private checkboxSelector;
     el: HTMLIcCheckboxGroupElement;
     /**
      * If `true`, the checkbox group will be set to the disabled state.
@@ -32,6 +33,11 @@ export declare class CheckboxGroup {
      * The size of the checkboxes to be displayed. This does not affect the font size of the label.
      */
     size?: IcSizes;
+    /**
+     * 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;
+    watchThemeHandler(newValue: IcThemeMode): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot dialog-controls - Content will be place at the bottom of the dialog.
  * @slot heading - Content will be placed at the top of the dialog.
@@ -70,6 +71,10 @@ export declare class Dialog {
      * Sets the maximum and minimum height and width for the dialog.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * 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;
     /**
      * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.
      */

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

@@ -1,6 +1,36 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcOrientation, IcThemeForeground, IcThemeMode } from "../../utils/types";
+import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./ic-divider.types";
 export declare class Divider {
+    el: HTMLIcDividerElement;
     foregroundColor: IcThemeForeground;
+    /**
+     * The line style of the divider.
+     */
+    borderStyle: IcDividerStyles;
+    /**
+     * The label for the divider. The label placement will need to be set for the label to be displayed correctly.
+     */
+    label?: string;
+    /**
+     * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
+     */
+    labelPlacement?: IcDividerLabelPlacement;
+    /** If `true`, the divider will be displayed in a grey colour. */
+    monochrome?: boolean;
+    /**
+     * The orientation of the divider.
+     */
+    orientation: IcOrientation;
+    /**
+     * 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 | IcThemeForeground;
+    /**
+     * The thickness of the divider.
+     */
+    weight: IcDividerWeights;
     themeChangeHandler(ev: CustomEvent): void;
+    private updateMonochromeState;
+    componentWillRender(): void;
     render(): any;
 }

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

@@ -0,0 +1,3 @@
+export type IcDividerStyles = "solid" | "dashed";
+export type IcDividerWeights = "thin" | "medium" | "thick" | "very-thick";
+export type IcDividerLabelPlacement = "left" | "center" | "right" | "top" | "bottom";

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

@@ -1,8 +1,9 @@
+import { IcThemeForeground, IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class FooterLinkGroup {
     el: HTMLIcFooterLinkGroupElement;
     expanded: boolean;
     deviceSize: number;
-    dropdownIconStyle: import("../../utils/types").IcThemeForeground;
+    dropdownIconStyle: IcThemeForegroundNoDefault | IcThemeForeground;
     small: boolean;
     /**
      * The title of the link group to be displayed.

package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeForeground, IcThemeMode } from "../../utils/types";
 export declare class HorizontalScroll {
     private buttonStateSet;
     private isScrolling;
@@ -15,6 +15,12 @@ export declare class HorizontalScroll {
      * The appearance of the horizontal scroll, e.g. dark, light or the default.
      */
     appearance?: IcThemeForeground;
+    /** @internal Determines whether black variant of the tabs should be displayed. */
+    monochrome?: boolean;
+    /**
+     * @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 name of the event that triggers focus handler logic.
      */

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

@@ -5,10 +5,6 @@ import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
 export declare class InputComponentContainer {
     private hostMutationObserver;
     el: HTMLIcInputComponentContainerElement;
-    /**
-     * The appearance of the input component container.
-     */
-    appearance?: "dark" | "default";
     /**
      *  If `true`, the disabled state will be set.
      */

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

@@ -1,8 +1,4 @@
 export declare class InputLabel {
-    /**
-     * The appearance of the input label.
-     */
-    appearance?: "dark" | "default";
     /**
      * If `true`, the disabled state will be set.
      */

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

@@ -5,7 +5,10 @@ import { IcMenuItemVariants } from "./ic-menu-item.types";
  */
 export declare class MenuItem {
     el: HTMLIcMenuItemElement;
-    toggleChecked: boolean;
+    /**
+     * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+     */
+    checked: boolean;
     /**
      * The description displayed in the menu item, below the label.
      */
@@ -25,7 +28,7 @@ export declare class MenuItem {
     /**
      * The label describing the keyboard shortcut for a menu item's action.
      */
-    keyboardShortcut?: string;
+    keyboardShortcutLabel?: string;
     /**
      * The label to display in the menu item.
      */
@@ -57,9 +60,12 @@ export declare class MenuItem {
     /**
      * @internal Emitted when the user clicks a menu item.
      */
-    handleMenuItemClick: EventEmitter<{
-        label: string;
-        hasSubMenu: boolean;
+    handleMenuItemClick: EventEmitter<HTMLIcMenuItemElement>;
+    /**
+     * Emitted when the user clicks a menu item that is set to the toggle variant.
+     */
+    icToggleChecked: EventEmitter<{
+        checked: boolean;
     }>;
     /**
      * @internal Emitted when the user clicks a menu item that triggers a popover menu instance.

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
 import { IcNavButtonModes } from "./ic-navigation-button.types";
 /**
  * @slot icon - Content will be placed to the left of the button label.
@@ -9,7 +9,7 @@ export declare class NavigationButton {
     private inheritedAttributes;
     private hostMutationObserver;
     el: HTMLIcNavigationButtonElement;
-    initialAppearance: IcThemeForeground;
+    initialAppearance: IcThemeForegroundNoDefault | IcThemeForeground;
     /**
      * The display mode.
      */
@@ -42,6 +42,10 @@ export declare class NavigationButton {
      * 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;
     componentWillRender(): void;

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

@@ -1,4 +1,4 @@
-import { IcNavType } from "../../utils/types";
+import { IcNavType, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
 export declare class NavigationGroup {
     private allGroupedNavigationItems;
     private collapsedNavItemsHeight;
@@ -15,7 +15,7 @@ export declare class NavigationGroup {
     deviceSize: number;
     dropdownOpen: boolean;
     expanded: boolean;
-    focusStyle: import("../../utils/types").IcThemeForeground;
+    focusStyle: IcThemeForegroundNoDefault | IcThemeForeground;
     inTopNavSideMenu: boolean;
     navigationType: IcNavType | "";
     parentEl: HTMLElement;
@@ -27,6 +27,10 @@ export declare class NavigationGroup {
      * The label to display on the group.
      */
     label: 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcNavType, IcTheme } from "../../utils/types";
+import { IcNavType, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
 /**
  * @part link - The `<a>` within ic-navigation-item
  * @slot badge - Badge component overlaying the top right of the icon.
@@ -9,15 +9,19 @@ export declare class NavigationItem {
     private navigationSlot;
     private isInitialRender;
     private itemEl;
+    private hostMutationObserver;
+    private ANIMATION_DURATION;
+    private ARIA_LABEL_STRING;
     el: HTMLIcNavigationItemElement;
     deviceSize: number;
-    focusStyle: import("../../utils/types").IcThemeForeground;
+    focusStyle: IcThemeForegroundNoDefault | IcThemeForeground;
     inTopNavSideMenu: boolean;
     isSideNavMobile: boolean;
     isTopNavChild: boolean;
     navigationType: IcNavType | "";
     parentEl: HTMLElement;
     sideNavExpanded: boolean;
+    ariaLabel: string;
     /**
      * @internal If `true`, the icon and label will be displayed when side navigation is collapsed.
      */
@@ -62,6 +66,10 @@ export declare class NavigationItem {
      *  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;
     /**
      * @internal - Emitted when item loses focus.
      */
@@ -72,6 +80,7 @@ export declare class NavigationItem {
     navItemClicked: EventEmitter<void>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentDidUpdate(): void;
     themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
     /**
@@ -83,7 +92,9 @@ export declare class NavigationItem {
     private sideNavExpandHandler;
     private handleBlur;
     private handleClick;
+    private hostMutationCallback;
     private generateTooltipLabel;
     private renderNavigationItemContent;
+    private sideNavToggleTooltip;
     render(): any;
 }

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot navigation - Content will be rendered at top of panel.
  * @slot buttons - Content will be rendered above version info and below navigation.
@@ -16,6 +17,10 @@ export declare class NavigationMenu {
      * The status info to display.
      */
     status: 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;
     /**
      * The version info to display.
      */

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

@@ -1,4 +1,4 @@
-import { IcAlignment, IcSizesNoLarge } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -47,6 +47,10 @@ export declare class PageHeader {
      * The subtitle to render on the page header.
      */
     subheading?: 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 import { IcPaginationTypes, IcChangeEventDetail } from "./ic-pagination.types";
 export declare class Pagination {
     el: HTMLIcPaginationElement;
@@ -13,10 +13,6 @@ export declare class Pagination {
      */
     adjacentPageCount: number;
     watchAdjacentPageCountHandler(): void;
-    /**
-     * The appearance of the pagination, e.g. dark, light or the default.
-     */
-    appearance: IcThemeForeground;
     /**
      * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
@@ -42,11 +38,19 @@ export declare class Pagination {
      * The label for the pagination item (applicable when simple pagination is being used).
      */
     label: string;
+    /**
+     * If `true`, the pagination will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
     /**
      * The total number of pages.
      */
     pages: number;
     watchNumberPagesHandler(): void;
+    /**
+     * 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 type of pagination to be used.
      */

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

@@ -1,13 +1,9 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcPaginationItemType } from "./ic-pagination-item.types";
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class PaginationItem {
     el: HTMLIcPaginationItemElement;
     capitalizedLabel: string;
-    /**
-     * The appearance of the pagination, e.g. dark, light or the default.
-     */
-    appearance: IcThemeForeground;
     /**
      * If `true`, the pagination item will be disabled.
      */
@@ -17,6 +13,10 @@ export declare class PaginationItem {
      */
     label: string;
     watchLabelHandler(): void;
+    /**
+     * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
     /**
      * The current page number.
      */
@@ -25,6 +25,10 @@ export declare class PaginationItem {
      * If `true`, the pagination item will be selected.
      */
     selected: 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;
     /**
      * The type of pagination item - 'page' or 'ellipsis'.
      */

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

@@ -42,15 +42,12 @@ export declare class PopoverMenu {
     /**
      * Emitted when the popover menu is closed.
      */
-    icPopoverClosed: EventEmitter<void>;
+    icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
     componentDidRender(): void;
-    handleMenuItemClick(ev: CustomEvent<{
-        label: string;
-        hasSubMenu: boolean;
-    }>): void;
+    handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void;
     handleSubmenuChange(ev: Event): void;
     handleClick(ev: Event): void;
     handleKeyDown(ev: KeyboardEvent): void;
@@ -69,7 +66,7 @@ export declare class PopoverMenu {
      * @internal Close the menu, emit icPopoverClosed of the root popover
      * @param setFocusToAnchor when true return focus to anchor element when menu is closed
      */
-    closeMenu(setFocusToAnchor?: boolean): Promise<void>;
+    closeMenu(setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement): Promise<void>;
     private getNextItemToSelect;
     private addMenuItems;
     private getMenuAriaLabel;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcValueEventDetail } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcOrientation, IcSizesNoLarge, IcThemeMode, IcValueEventDetail } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-radio-group.types";
 export declare class RadioGroup {
     private radioContainer;
@@ -55,6 +55,11 @@ export declare class RadioGroup {
      */
     validationText: string;
     orientationChangeHandler(): void;
+    /**
+     * 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;
+    watchThemeHandler(newValue: IcThemeMode): void;
     /**
      * Emitted when a user selects a radio.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAdditionalFieldTypes, IcValueEventDetail } from "../../utils/types";
+import { IcAdditionalFieldTypes, IcThemeMode, IcValueEventDetail } from "../../utils/types";
 /**
  * @slot additional-field - Content to displayed alongside a radio option.
  */
@@ -37,6 +37,10 @@ export declare class RadioOption {
      * The name for the radio option.
      */
     name: 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;
     /**
      * The value for the radio option.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcSizesNoLarge } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcMenuOption, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 import { IcSearchBarBlurEventDetail, IcSearchBarSearchModes } from "./ic-search-bar.types";
 import { IcValueEventDetail, IcBlurEventDetail } from "../../utils/types";
 import { IcMenuChangeEventDetail, IcOptionSelectEventDetail } from "../ic-menu/ic-menu.types";
@@ -135,6 +135,10 @@ export declare class SearchBar {
      * If `true`, the value of the search will have its spelling and grammar checked.
      */
     spellcheck: 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;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */

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.
@@ -103,7 +103,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;
     /**
@@ -126,6 +126,10 @@ export declare class Select {
      * 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'.
      */

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

@@ -22,6 +22,10 @@ export declare class StatusTag {
      * 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.
      */

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

@@ -13,9 +13,5 @@ export declare class TabGroup {
     /** @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-text-field/ic-text-field.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge } from "../../utils/types";
+import { IcAutocompleteTypes, IcAutocorrectStates, IcInformationStatusOrEmpty, IcValueEventDetail, IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from "./ic-text-field.types";
 /**
  * @slot icon - Content will be placed to the left of the text input.
@@ -144,6 +144,10 @@ export declare class TextField {
      * If `true`, the value of the text field will have its spelling and grammar checked.
      */
     spellcheck: 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;
     /**
      * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
      */