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

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcChipAppearance } from "./ic-chip.types";
 import { IcColor, IcEmphasisType, IcSizes } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered at the start of the chip.
@@ -8,14 +7,11 @@ import { IcColor, IcEmphasisType, IcSizes } from "../../utils/types";
 export declare class Chip {
     private inAGGrid;
     el: HTMLIcChipElement;
+    customColorClass: string;
     hovered: boolean;
     visible: boolean;
     /**
-     * @deprecated This prop should not be used anymore. Use variant prop instead.
-     */
-    appearance?: IcChipAppearance;
-    /**
-     * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.
+     * The custom chip colour. This will override the theme colour.
      * Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
      */
     customColor?: IcColor;
@@ -38,7 +34,12 @@ export declare class Chip {
      */
     size?: IcSizes;
     /**
-     * If `true`, the outlined variant of chip will have a transparent background rather than white.
+     * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     * Setting the "customColor" prop will override this.
+     */
+    theme?: "dark" | "light" | "inherit";
+    /**
+     * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
      */
     transparentBackground?: boolean;
     /**
@@ -49,10 +50,6 @@ export declare class Chip {
      * The text in the dismiss button tooltip and aria label.
      */
     dismissLabel?: string;
-    /**
-     * @deprecated This event should not be used anymore. Use icDismiss instead.
-     */
-    dismiss: EventEmitter<void>;
     /**
      * Is emitted when the user dismisses the chip.
      */

package/dist/types/components/ic-data-list/ic-data-list.d.ts

@@ -0,0 +1,20 @@
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
+/**
+ * @slot heading - Content will be placed at the top of the data list.
+ */
+export declare class DataList {
+    el: HTMLIcDataListElement;
+    /**
+     * The title for the data list.
+     */
+    heading: string;
+    /**
+     * The size of the data list component.
+     */
+    size?: IcSizesNoLarge;
+    /**
+     * 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;
+    render(): any;
+}

package/dist/types/components/ic-data-row/ic-data-row.d.ts

@@ -1,4 +1,4 @@
-import { IcSizesNoLarge } from "../../utils/types";
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot label - Content will be rendered in the leftmost cell.
  * @slot value - Content will be rendered to the right of the label.
@@ -9,7 +9,7 @@ export declare class DataRow {
     private resizeObserver;
     el: HTMLIcDataRowElement;
     deviceSize: number;
-    entitySize: "xl" | "m" | "xs";
+    listSize: "xl" | "m" | "xs";
     /**
      * The label in the leftmost cell of the row.
      */
@@ -19,9 +19,9 @@ export declare class DataRow {
      */
     size?: IcSizesNoLarge;
     /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
+     * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
-    small?: boolean;
+    theme?: IcThemeMode;
     /**
      * The value of the middle (right if no end-component supplied) cell of the row.
      */

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.
@@ -17,27 +18,15 @@ export declare class Dialog {
     private IC_TEXT_FIELD;
     private IC_ACCORDION;
     private IC_ACCORDION_GROUP;
-    private IC_SEARCH_BAR;
     private interactiveElementList;
     private resizeObserver;
     private resizeTimeout;
     private sourceElement;
-    private buttonOnclick0;
-    private buttonOnclick1;
-    private buttonOnclick2;
     el: HTMLIcDialogElement;
     dialogRendered: boolean;
     fadeIn: boolean;
     /**
-     * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a heading instead.
-     */
-    alertHeading?: string;
-    /**
-     * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a message instead.
-     */
-    alertMessage?: string;
-    /**
-     * If set to `false`, dialog controls will not be displayed overriding buttonProps or slotted dialog controls.
+     * If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed.
      */
     buttons?: boolean;
     /**
@@ -45,7 +34,7 @@ export declare class Dialog {
      */
     closeOnBackdropClick?: boolean;
     /**
-     * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+     * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
      */
     destructive?: boolean;
     /**
@@ -83,17 +72,9 @@ export declare class Dialog {
      */
     size?: "small" | "medium" | "large";
     /**
-     * @deprecated This prop should not be used anymore. Use an ic-alert/IcAlert component within an alert slot with a variant instead.
-     */
-    status?: "neutral" | "info" | "warning" | "error" | "success";
-    /**
-     * Sets the label and onclick functions for default buttons.
+     * 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.
      */
-    buttonProps?: {
-        label: string;
-        onclick: string;
-    }[];
-    watchPropHandler(): void;
+    theme?: IcThemeMode;
     /**
      * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.
      */
@@ -111,19 +92,10 @@ export declare class Dialog {
      */
     icDialogOpened: EventEmitter<void>;
     disconnectedCallback(): void;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     handleKeyboard(ev: KeyboardEvent): void;
     handleClick(ev: MouseEvent): void;
-    /**
-     * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
-     */
-    showDialog(): Promise<void>;
-    /**
-     * @deprecated This method should not be used anymore. Use open prop to set dialog visibility.
-     */
-    hideDialog(): Promise<void>;
     /**
      * Cancels the dialog. Used by the default 'Cancel' button or can be called manually to trigger cancelling of dialog.
      */
@@ -139,14 +111,10 @@ export declare class Dialog {
     private removeSlotChangeListener;
     private setInitialFocus;
     private getFocusedElementIndex;
-    private setAlertVariant;
     private closeIconClick;
     private getInteractiveElements;
     private getNextFocusEl;
     private focusNextInteractiveElement;
-    private setButtonOnClick;
-    private getButtonOnclick;
-    private getButtonVariant;
     private loopNextFocusIndexIfLastElement;
     private setFocusIndexBasedOnShiftKey;
     private renderDialog;

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.
@@ -21,7 +21,7 @@ export declare class EmptyState {
     /**
      * The number of lines of body text to display before truncating.
      */
-    bodyMaxLines?: number;
+    maxLines?: number;
     /**
      * The title rendered in the empty state container.
      */
@@ -34,6 +34,10 @@ 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;
     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.
@@ -13,7 +13,7 @@ export declare class Footer {
     private hostMutationObserver;
     el: HTMLIcFooterElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * The alignment of the section containers used within the footer.
      */
@@ -45,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,17 +1,18 @@
+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.
      */
-    groupTitle: string;
+    label: string;
     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;
@@ -30,11 +30,11 @@ export declare class Hero {
      */
     disableBackgroundParallax?: boolean;
     /**
-     * The heading of the hero.
+     * The heading of the hero. An <h2> level heading.
      */
     heading: string;
     /**
-     * The optional secondary heading, replaced by slotted right content.
+     * The optional secondary heading, an <h3> level heading. Replaced by slotted right content.
      */
     secondaryHeading?: string;
     /**
@@ -45,10 +45,6 @@ export declare class Hero {
      * The size of the hero component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The description for the hero.
      */
@@ -57,7 +53,7 @@ export declare class Hero {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     doScroll(): void;
     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,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";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "dark" instead.
-     */
-    dark?: boolean;
     /**
      *  If `true`, the disabled state will be set.
      */
@@ -34,10 +26,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

@@ -1,20 +1,8 @@
 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.
      */
@@ -39,6 +27,14 @@ 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" | "";
+    /**
+     * @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, IcThemeForeground } from "../../utils/types";
+import { IcBrand, 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,18 +31,18 @@ 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;
-    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?;
@@ -11,11 +11,7 @@ export declare class LoadingIndicator {
     circularLineWidth: number;
     indeterminate: boolean;
     indicatorLabel: string;
-    showSecond: boolean;
-    /**
-     * The appearance of the loading indicator, e.g. dark or light.
-     */
-    appearance?: IcThemeForegroundNoDefault;
+    clipInnerElement: boolean;
     /**
      * 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.
      */
@@ -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.
@@ -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-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;