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

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-menu-item/ic-menu-item.d.ts

@@ -25,7 +25,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.
      */

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcThemeForeground, IcThemeForegroundNoDefault } 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.
      */

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 } 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;

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 } 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,18 @@ export declare class NavigationItem {
     private navigationSlot;
     private isInitialRender;
     private itemEl;
+    private hostMutationObserver;
+    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.
      */
@@ -72,6 +75,7 @@ export declare class NavigationItem {
     navItemClicked: EventEmitter<void>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentDidUpdate(): void;
     themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
     /**
@@ -83,6 +87,7 @@ export declare class NavigationItem {
     private sideNavExpandHandler;
     private handleBlur;
     private handleClick;
+    private hostMutationCallback;
     private generateTooltipLabel;
     private renderNavigationItemContent;
     render(): any;

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.
      */
@@ -73,6 +77,10 @@ export declare class Pagination {
     private handleClickPrevious;
     private handleClickNext;
     private handleClickLast;
+    /**
+     * Temporary function to handle button appearance until other dark mode work is completed.
+     */
+    private handleButtonAppearance;
     private firstButton;
     private previousButton;
     private nextButton;

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-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.
      */