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

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

@@ -1,4 +1,5 @@
 import { IcStepVariants, IcStepStatuses, IcStepTypes } from "./ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Step {
     el: HTMLIcStepElement;
     /**
@@ -41,6 +42,10 @@ export declare class Step {
      * The title of the step within the stepper.
      */
     heading?: string;
+    /**
+     * @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 variant of the step. This is managed by ic-stepper.
      */

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

@@ -1,5 +1,6 @@
 import { IcStepperAlignment } from "./ic-stepper.types";
 import { IcStepTypes, IcStepVariants } from "../ic-step/ic-step.types";
+import { IcThemeMode } from "../../utils/types";
 export declare class Stepper {
     private resizeObserver;
     private steps;
@@ -17,10 +18,6 @@ export declare class Stepper {
      * The alignment of the default stepper within its container.
      */
     aligned?: IcStepperAlignment;
-    /**
-     * The appearance of the stepper.
-     */
-    appearance?: "light" | "default";
     /**
      * The length of the connector between each step in pixels. Minimum length is 100px.
      */
@@ -29,6 +26,11 @@ export declare class Stepper {
      * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
      */
     hideStepInfo?: 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;
+    handleThemeChange(): void;
     /**
      * The variant of the stepper.
      */

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

@@ -2,7 +2,6 @@ import { EventEmitter } from "../../stencil-public-runtime";
 import { IcActivationTypes, IcThemeMode } from "../../utils/types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
-    private controlledMode;
     private enabledTabs;
     private focusedTabIndex;
     private newTabPanels;
@@ -49,18 +48,21 @@ export declare class TabContext {
      * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
      */
     tabRemovedHandler(hadFocus?: boolean): Promise<void>;
+    /** Sets attributes to link tab-group, tabs and tab-panels */
     private linkTabs;
+    /**
+     * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host
+     */
     private getChildren;
     private keydownHandler;
-    private attachEventListeners;
-    private setControlledMode;
+    /** Sets the tab that is selected on initial render */
     private setInitialTab;
+    /** Passes the selected tab to the tab and tab panel components */
     private configureTabs;
     private getEnabledTabs;
-    private getIndexOfEnabledTab;
+    /** Sets focus on tab and selects it */
     private keyboardSelectTab;
+    /** Sets focus on tab without selecting it (for manual activation) */
     private keyboardFocusTab;
-    private handleKeyBoardNavAutomatic;
-    private handleKeyBoardNavManual;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 import { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 import { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 import { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -33,7 +33,7 @@ import { IcAriaAutocompleteTypes, IcTextFieldInputModes, IcTextFieldTypes } from
 import { IcChangeEventDetail as IcChangeEventDetail3 } from "./components/ic-toggle-button-group/ic-toggle-button-group.types";
 import { IcTooltipPlacements } from "./components/ic-tooltip/ic-tooltip.types";
 import { Options } from "@popperjs/core";
-export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, IcTheme, IcThemeForeground, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
 export { IcBackToTopVariants } from "./components/ic-back-to-top/ic-back-to-top.types";
 export { IcBadgePositions, IcBadgeTypes, IcBadgeVariants } from "./components/ic-badge/ic-badge.types";
 export { IcButtonTooltipPlacement, IcButtonTypes, IcButtonVariants } from "./components/ic-button/ic-button.types";
@@ -516,7 +516,7 @@ export namespace Components {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * 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;
         /**
@@ -540,7 +540,11 @@ export namespace Components {
          */
         "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;
         /**
@@ -927,10 +931,6 @@ export namespace Components {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * 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.
          */
@@ -956,6 +956,10 @@ export namespace Components {
           * The minimum value that the progress value can take. 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 current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -964,6 +968,10 @@ export namespace Components {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * 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 indicator, either linear or circular.
          */
@@ -1301,6 +1309,10 @@ export namespace Components {
           * The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.
          */
         "anchor": string;
+        /**
+          * @param setFocusToAnchor when true return focus to anchor element when menu is closed
+         */
+        "closeMenu": (setFocusToAnchor?: boolean) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -1699,9 +1711,9 @@ export namespace Components {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * 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.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -1753,6 +1765,7 @@ export namespace Components {
           * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
          */
         "subheading"?: string;
+        "theme"?: IcThemeMode;
         /**
           * The state of the step within the stepper.
          */
@@ -1764,10 +1777,6 @@ export namespace Components {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -1776,6 +1785,10 @@ export namespace Components {
           * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
          */
         "hideStepInfo"?: 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 variant of the stepper.
          */
@@ -3685,7 +3698,7 @@ declare namespace LocalJSX {
     }
     interface IcChip {
         /**
-          * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+          * 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;
         /**
@@ -3709,7 +3722,11 @@ declare namespace LocalJSX {
          */
         "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;
         /**
@@ -4098,10 +4115,6 @@ declare namespace LocalJSX {
         "theme"?: IcThemeMode;
     }
     interface IcLoadingIndicator {
-        /**
-          * 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.
          */
@@ -4126,6 +4139,10 @@ declare namespace LocalJSX {
           * The minimum value that the progress value can take. 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 current amount of progress made. If not provided, component acts as an indeterminate loading indicator.
          */
@@ -4134,6 +4151,10 @@ declare namespace LocalJSX {
           * The size of the loading indicator.
          */
         "size"?: IcLoadingSizes;
+        /**
+          * 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 indicator, either linear or circular.
          */
@@ -4915,9 +4936,9 @@ declare namespace LocalJSX {
     }
     interface IcSkeleton {
         /**
-          * The appearance of the skeleton.
+          * 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.
          */
-        "appearance"?: "light" | "default";
+        "theme"?: IcThemeMode;
         /**
           * The variant of the skeleton that will be displayed.
          */
@@ -4972,10 +4993,6 @@ declare namespace LocalJSX {
           * The alignment of the default stepper within its container.
          */
         "aligned"?: IcStepperAlignment;
-        /**
-          * The appearance of the stepper.
-         */
-        "appearance"?: "light" | "default";
         /**
           * The length of the connector between each step in pixels. Minimum length is 100px.
          */
@@ -4984,6 +5001,10 @@ declare namespace LocalJSX {
           * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.
          */
         "hideStepInfo"?: 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 variant of the stepper.
          */