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

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

@@ -1,6 +1,36 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcOrientation, IcBrandForeground, IcThemeMode } from "../../utils/types";
+import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./ic-divider.types";
 export declare class Divider {
-    foregroundColor: IcThemeForeground;
-    themeChangeHandler(ev: CustomEvent): void;
+    el: HTMLIcDividerElement;
+    foregroundColor: IcBrandForeground;
+    /**
+     * 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 | IcBrandForeground;
+    /**
+     * The thickness of the divider.
+     */
+    weight: IcDividerWeights;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): 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-empty-state/ic-empty-state.d.ts

@@ -1,5 +1,5 @@
 import { IcEmptyStateAlignment } from "./ic-empty-state.types";
-import { IcSizes } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot image - Content is placed at the top above all other content.
  * @slot actions - Content is placed at the bottom below all other content.
@@ -34,8 +34,11 @@ export declare class EmptyState {
      * The subtitle rendered in the empty state container.
      */
     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;
     componentDidLoad(): void;
-    private hostMutationCallback;
     render(): any;
 }

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground } from "../../utils/types";
+import { IcAlignment, IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcFooterBreakpoints } from "./ic-footer.types";
 /**
  * @slot description - Content will be rendered at the top of the footer.
@@ -10,9 +10,10 @@ import { IcFooterBreakpoints } from "./ic-footer.types";
 export declare class Footer {
     private footerEl;
     private resizeObserver;
+    private hostMutationObserver;
     el: HTMLIcFooterElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * The alignment of the section containers used within the footer.
      */
@@ -44,7 +45,7 @@ export declare class Footer {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private isSmall;
     private resizeObserverCallback;
     private runResizeObserver;

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcBrandForeground } from "../../utils/types";
 type FooterConfig = {
     small: boolean;
     grouped: boolean;
@@ -7,7 +7,7 @@ export declare class FooterLink {
     el: HTMLIcFooterLinkElement;
     deviceSize: number;
     footerConfig: FooterConfig;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * If `true`, the user can save the linked URL instead of navigating to it.
      */
@@ -34,7 +34,7 @@ export declare class FooterLink {
     target?: string;
     componentWillLoad(): void;
     footerResizeHandler(): void;
-    footerThemeChangeHandler(ev: CustomEvent): void;
+    footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private inferConfig;
     render(): any;
 }

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

@@ -1,8 +1,9 @@
+import { IcBrand, IcBrandForeground, IcBrandForegroundNoDefault } from "../../utils/types";
 export declare class FooterLinkGroup {
     el: HTMLIcFooterLinkGroupElement;
     expanded: boolean;
     deviceSize: number;
-    dropdownIconStyle: import("../../utils/types").IcThemeForeground;
+    dropdownIconStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     small: boolean;
     /**
      * The title of the link group to be displayed.
@@ -11,7 +12,7 @@ export declare class FooterLinkGroup {
     componentWillLoad(): void;
     componentDidLoad(): void;
     footerResizeHandler(): void;
-    footerThemeChangeHandler(ev: CustomEvent): void;
+    footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private isSmall;
     private handleKeydown;
     private toggleExpanded;

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

@@ -1,4 +1,4 @@
-import { IcAlignment, IcSizesNoLarge, IcThemeForeground } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge, IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcHeroContentAlignments } from "./ic-hero.types";
 /**
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -9,7 +9,7 @@ import { IcHeroContentAlignments } from "./ic-hero.types";
 export declare class Hero {
     private hostMutationObserver;
     el: HTMLIcHeroElement;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     rightContent: boolean;
     leftContentFullWidth: boolean;
     scrollFactor: string;
@@ -53,8 +53,7 @@ export declare class Hero {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     doScroll(): void;
-    private hostMutationCallback;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrandForeground, IcThemeMode } from "../../utils/types";
 export declare class HorizontalScroll {
     private buttonStateSet;
     private isScrolling;
@@ -14,7 +14,13 @@ export declare class HorizontalScroll {
     /**
      * The appearance of the horizontal scroll, e.g. dark, light or the default.
      */
-    appearance?: IcThemeForeground;
+    appearance?: IcBrandForeground;
+    /** @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,14 +5,11 @@ 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.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      *  If `true`, the input component container will fill the width of the container it is in.
      */
@@ -37,7 +34,7 @@ export declare class InputComponentContainer {
      * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
      */
     validationStatus: IcInformationStatusOrEmpty;
+    componentWillLoad(): void;
     componentDidLoad(): void;
-    private hostMutationCallback;
     render(): any;
 }

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.
      */
@@ -15,6 +11,10 @@ export declare class InputLabel {
      * The helper text that will be displayed.
      */
     helperText: string;
+    /**
+     * The label will be visually hidden.
+     */
+    hideLabel: boolean;
     /**
      * The text content of the label.
      */
@@ -31,6 +31,10 @@ export declare class InputLabel {
      * The status of the label - e.g. 'error'.
      */
     status: "error" | "";
+    /**
+     * @internal If `true`, wraps label text in label tag
+     */
+    useLabelTag: boolean;
     componentDidLoad(): void;
     render(): any;
 }

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

@@ -1,4 +1,4 @@
-import { IcTheme, IcThemeMode } from "../../utils/types";
+import { IcBrand, IcThemeMode } from "../../utils/types";
 /**
  * @slot router-item - Handle routing by nesting your routes in this slot.
  */
@@ -42,7 +42,7 @@ export declare class Link {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the link.
      */

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

@@ -1,5 +1,5 @@
 import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
-import { IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcThemeMode } from "../../utils/types";
 export declare class LoadingIndicator {
     private circularMeter;
     private innerElement?;
@@ -12,10 +12,6 @@ export declare class LoadingIndicator {
     indeterminate: boolean;
     indicatorLabel: string;
     clipInnerElement: boolean;
-    /**
-     * The appearance of the loading indicator, e.g. dark or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
     /**
      * The description that will be set as the aria-label of the loading indicator when not using a visible label.
      */
@@ -42,6 +38,10 @@ export declare class LoadingIndicator {
      * Used to calculate the proportional width of the progress bar.
      */
     min?: number;
+    /**
+     * If `true`, the element will display as black and white.
+     */
+    monochrome?: boolean;
     /**
      * The size of the loading indicator.
      */
@@ -62,6 +62,10 @@ export declare class LoadingIndicator {
      */
     progress?: number;
     watchProgressHandler(): 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -3,15 +3,25 @@ import { IcActivationTypes, IcMenuOption, IcSizes, IcValueEventDetail } from "..
 import { IcOptionSelectEventDetail, IcMenuChangeEventDetail, IcMenuOptionIdEventDetail } from "./ic-menu.types";
 import { IcSearchBarSearchModes } from "../ic-search-bar/ic-search-bar.types";
 export declare class Menu {
+    private ACTIVE_DESCENDANT;
+    private CLEAR_BUTTON_ID;
+    private SEARCH_BAR_TAG;
     private disabledOptionSelected;
     private hasPreviouslyBlurred;
     private hasTimedOut;
     private isLoading;
+    private isMultiSelect;
     private isSearchBar;
     private isSearchableSelect;
+    private lastOptionSelected;
+    private lastOptionFocused;
     private menu;
+    private multiOptionClicked;
     private popperInstance;
     private preventClickOpen;
+    private preventMenuFocus;
+    private selectAllButton;
+    private shiftPressed;
     private ungroupedOptions;
     host: HTMLIcMenuElement;
     focusFromSearchKeypress: boolean;
@@ -19,6 +29,7 @@ export declare class Menu {
     keyboardNav: boolean;
     optionHighlighted: string;
     preventIncorrectTabOrder: boolean;
+    menuOptions: IcMenuOption[];
     /**
      * Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation.
      */
@@ -30,7 +41,11 @@ export declare class Menu {
     /**
      * @internal If `true`, autofocus will be applied on selected item when menu is open.
      */
-    autoFocusOnSelected: boolean;
+    autofocusOnSelected: boolean;
+    /**
+     *  If `true`, the menu will close when an option is selected.
+     */
+    closeOnSelect: boolean;
     /**
      *  If `true`, the menu will fill the width of the container.
      */
@@ -69,7 +84,7 @@ export declare class Menu {
      */
     selectOnEnter?: boolean;
     /**
-     * The size of the menu component.
+     * The size of the menu.
      */
     size?: IcSizes;
     /**
@@ -78,23 +93,26 @@ export declare class Menu {
     options: IcMenuOption[];
     watchOptionsHandler(newOptions: IcMenuOption[]): void;
     /**
-     * The value of the currently selected option.
+     * The value of the currently selected option - or array of values (if multiple options allowed).
      */
-    value: string;
-    watchValueHandler(): void;
+    value: string | string[];
     /**
      * The custom name for the value field for IcMenuOption.
      */
     valueField: string;
     /**
-     * @internal Emitted when key is pressed while menu is open
+     * Emitted when the clear all button is clicked.
+     */
+    icClear: EventEmitter<void>;
+    /**
+     * @internal Emitted when key is pressed while menu is open.
      */
     menuKeyPress: EventEmitter<{
         isNavKey: boolean;
         key: string;
     }>;
     /**
-     * @internal Emitted when an option has been highlighted
+     * @internal Emitted when an option has been highlighted.
      */
     menuOptionId: EventEmitter<IcMenuOptionIdEventDetail>;
     /**
@@ -102,19 +120,21 @@ export declare class Menu {
      */
     menuOptionSelect: EventEmitter<IcOptionSelectEventDetail>;
     /**
-     * @internal Emitted when state of menu changes (i.e. open or close).
+     * @internal Emitted when all options are selected or deselected.
      */
-    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
+    menuOptionSelectAll: EventEmitter<{
+        select: boolean;
+    }>;
     /**
-     * @internal Emitted when menu value changes.
+     * @internal Emitted when state of menu changes (i.e. open or closed).
      */
-    menuValueChange: EventEmitter<IcValueEventDetail>;
+    menuStateChange: EventEmitter<IcMenuChangeEventDetail>;
     /**
-     * @internal Emitted when the retry button is clicked
+     * @internal Emitted when the retry button is clicked.
      */
     retryButtonClicked: EventEmitter<IcValueEventDetail>;
     /**
-     * @internal Emitted when the timeout menu loses focus
+     * @internal Emitted when the timeout menu loses focus.
      */
     timeoutBlur: EventEmitter<{
         ev: FocusEvent;
@@ -158,10 +178,13 @@ export declare class Menu {
     private setPreviousOptionValue;
     private getParentEl;
     private arrowBehaviour;
-    private setMenuOptions;
+    private getMenuOptions;
     private setHighlightedOption;
     private autoSetInputValueKeyboardOpen;
-    private manSetInputValueKeyboardOpen;
+    private selectHighlightedOption;
+    private isOptionSelected;
+    private deselectSelectedOptions;
+    private manualSetInputValueKeyboardOpen;
     private setInputValue;
     private handleOptionClick;
     private handleRetry;
@@ -169,12 +192,22 @@ export declare class Menu {
     private handleBlur;
     private handleMouseDown;
     private handleMenuKeyDown;
+    private handleMenuKeyUp;
+    private handleSelectAllClick;
+    private handleSelectAllBlur;
+    private handleSelectAllFocus;
+    private handleSelectAllMouseDown;
+    private handleSingleShiftSelect;
+    private handleMultipleShiftSelect;
+    private handleOptionSelect;
+    private getFirstOptionInSelection;
+    private emitSelectAllEvents;
     private emitMenuKeyPress;
     private autoSetValueOnMenuKeyDown;
-    private handleMenuKeyUp;
     private getOptionId;
     private getOptionAriaLabel;
     private getSortedOptions;
+    private getOptionHighlightedIndex;
     private isManualMode;
     private scrollToSelected;
     private loadUngroupedOptions;

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.
      */
@@ -14,6 +17,7 @@ export declare class MenuItem {
      * If `true`, the menu item will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The URL that the link points to. This will render the menu item as an "a" tag.
      */
@@ -25,7 +29,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 +61,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 { IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, 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: IcBrandForegroundNoDefault | IcBrandForeground;
     /**
      * The display mode.
      */
@@ -42,13 +42,17 @@ 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;
     disconnectedCallback(): void;
     navBarMenuOpenHandler(): void;
     navBarMenuCloseHandler(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the native `button`.
      */

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

@@ -1,4 +1,4 @@
-import { IcNavType } from "../../utils/types";
+import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, 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: IcBrandForegroundNoDefault | IcBrandForeground;
     inTopNavSideMenu: boolean;
     navigationType: IcNavType | "";
     parentEl: HTMLElement;
@@ -27,12 +27,16 @@ 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;
     childBlurHandler(): void;
     navItemClickHandler(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the nav item.
      */

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, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, 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: IcBrandForegroundNoDefault | IcBrandForeground;
     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,8 +80,9 @@ export declare class NavigationItem {
     navItemClicked: EventEmitter<void>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentDidUpdate(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the nav item.
      */
@@ -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;