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

package/dist/types/components.d.ts

@@ -11,6 +11,7 @@ import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 import { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 import { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
 import { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 import { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 import { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
@@ -39,6 +40,7 @@ export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
 export { IcChangeEventDetail } from "./components/ic-checkbox-group/ic-checkbox-group.types";
 export { IcProtectiveMarkings } from "./components/ic-classification-banner/ic-classification-banner.types";
+export { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./components/ic-divider/ic-divider.types";
 export { IcEmptyStateAlignment } from "./components/ic-empty-state/ic-empty-state.types";
 export { IcFooterBreakpoints } from "./components/ic-footer/ic-footer.types";
 export { IcHeroContentAlignments } from "./components/ic-hero/ic-hero.types";
@@ -63,7 +65,6 @@ export { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 export { Options } from "@popperjs/core";
 export namespace Components {
     interface IcAccordion {
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the accordion will be disabled.
          */
@@ -88,16 +89,16 @@ export namespace Components {
           * The size of the accordion.
          */
         "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;
     }
     interface IcAccordionGroup {
         /**
           * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
          */
         "accessibleButtonLabel": string;
-        /**
-          * The appearance of the accordion group, e.g dark, or light.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the accordion will load in an expanded state.
          */
@@ -118,6 +119,10 @@ export namespace Components {
           * The size of the accordion.
          */
         "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;
     }
     interface IcAlert {
         /**
@@ -140,6 +145,10 @@ export namespace Components {
           * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon": 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 `true`, the title and message will appear above and below instead of inline.
          */
@@ -388,7 +397,7 @@ export namespace Components {
         /**
           * 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.
          */
@@ -417,6 +426,10 @@ export namespace Components {
           * 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;
     }
     interface IcCheckbox {
         /**
@@ -424,7 +437,7 @@ export namespace Components {
          */
         "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;
         /**
@@ -471,6 +484,10 @@ export namespace Components {
           * 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.
          */
@@ -505,6 +522,10 @@ export namespace Components {
           * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -659,8 +680,40 @@ export namespace Components {
           * 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;
     }
     interface IcDivider {
+        /**
+          * 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;
     }
     interface IcEmptyState {
         /**
@@ -1077,7 +1130,7 @@ export namespace Components {
         /**
           * The label describing the keyboard shortcut for a menu item's action.
          */
-        "keyboardShortcut"?: string;
+        "keyboardShortcutLabel"?: string;
         /**
           * The label to display in the menu item.
          */
@@ -1241,10 +1294,6 @@ export namespace Components {
           * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
         "adjacentPageCount": number;
-        /**
-          * 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.
          */
@@ -1273,6 +1322,10 @@ export namespace Components {
           * 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.
          */
@@ -1282,16 +1335,16 @@ export namespace Components {
           * @param page The page number to set as the current page
          */
         "setCurrentPage": (page: number) => Promise<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.
          */
         "type": IcPaginationTypes;
     }
     interface IcPaginationItem {
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the pagination item will be disabled.
          */
@@ -1300,6 +1353,10 @@ export namespace Components {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label": string;
+        /**
+          * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The current page number.
          */
@@ -1308,6 +1365,10 @@ export namespace Components {
           * 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'.
          */
@@ -1373,6 +1434,10 @@ export namespace Components {
           * The size of the radio group 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -1420,6 +1485,10 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         "setTabIndex": (value: number) => Promise<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 value for the radio option.
          */
@@ -1538,6 +1607,10 @@ export namespace Components {
           * 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.
          */
@@ -3293,16 +3366,16 @@ declare namespace LocalJSX {
           * The size of the accordion.
          */
         "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;
     }
     interface IcAccordionGroup {
         /**
           * The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.
          */
         "accessibleButtonLabel"?: string;
-        /**
-          * The appearance of the accordion group, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the accordion will load in an expanded state.
          */
@@ -3319,6 +3392,10 @@ declare namespace LocalJSX {
           * The size of the accordion.
          */
         "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;
     }
     interface IcAlert {
         /**
@@ -3345,6 +3422,10 @@ declare namespace LocalJSX {
           * If `true`, the default icon for the neutral variant will appear on the left of the alert.
          */
         "showDefaultIcon"?: 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 `true`, the title and message will appear above and below instead of inline.
          */
@@ -3592,7 +3673,7 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
@@ -3617,6 +3698,10 @@ declare namespace LocalJSX {
           * 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;
     }
     interface IcCheckbox {
         /**
@@ -3624,7 +3709,7 @@ declare namespace LocalJSX {
          */
         "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;
         /**
@@ -3671,6 +3756,10 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -3709,6 +3798,10 @@ declare namespace LocalJSX {
           * 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -3871,8 +3964,40 @@ declare namespace LocalJSX {
           * 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;
     }
     interface IcDivider {
+        /**
+          * 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;
     }
     interface IcEmptyState {
         /**
@@ -4270,7 +4395,7 @@ declare namespace LocalJSX {
         /**
           * The label describing the keyboard shortcut for a menu item's action.
          */
-        "keyboardShortcut"?: string;
+        "keyboardShortcutLabel"?: string;
         /**
           * The label to display in the menu item.
          */
@@ -4419,10 +4544,6 @@ declare namespace LocalJSX {
           * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
          */
         "adjacentPageCount"?: number;
-        /**
-          * 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.
          */
@@ -4451,6 +4572,10 @@ declare namespace LocalJSX {
           * 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;
         /**
           * Emitted when a page is selected.
          */
@@ -4459,16 +4584,16 @@ declare namespace LocalJSX {
           * The total number of pages.
          */
         "pages": 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 type of pagination to be used.
          */
         "type"?: IcPaginationTypes;
     }
     interface IcPaginationItem {
-        /**
-          * The appearance of the pagination, e.g. dark, light or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the pagination item will be disabled.
          */
@@ -4477,6 +4602,10 @@ declare namespace LocalJSX {
           * The label for the pagination item (applicable when simple pagination is being used).
          */
         "label"?: string;
+        /**
+          * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The current page number.
          */
@@ -4485,6 +4614,10 @@ declare namespace LocalJSX {
           * 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'.
          */
@@ -4549,6 +4682,10 @@ declare namespace LocalJSX {
           * The size of the radio group 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;
         /**
           * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -4599,6 +4736,10 @@ declare namespace LocalJSX {
           * If `true`, the radio option will be displayed in a selected state.
          */
         "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 value for the radio option.
          */
@@ -4749,6 +4890,10 @@ declare namespace LocalJSX {
           * 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/utils/helpers.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor } from "./types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcThemeForegroundNoDefault } from "./types";
 import { IcMenuOption, IcThemeForeground } from "../utils/types";
 /**
  * converts an enum of strings into an array of strings
@@ -117,7 +117,7 @@ export declare const getThemeColorBrightness: () => number;
  * @returns "dark" or "light"
  * @param brightness - Optional custom brightness value. Defaults to `getThemeColorBrightness`
  */
-export declare const getThemeForegroundColor: (brightness?: number) => IcThemeForeground;
+export declare const getThemeForegroundColor: (brightness?: number) => IcThemeForegroundNoDefault;
 export declare const getSlot: (element: HTMLElement, name: string) => Element | null;
 export declare const slotHasContent: (element: HTMLElement, name: string) => boolean;
 export declare const getSlotContent: (element: HTMLElement, name: string) => Element[] | NodeListOf<ChildNode> | null;