@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

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, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+import { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, 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";
@@ -34,7 +34,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, IcThemeMode, IcTypographyVariants, IcValueEventDetail } from "./utils/types";
+export { IcActivationTypes, IcAdditionalFieldTypes, IcAlignment, IcAutocompleteTypes, IcAutocorrectStates, IcBlurEventDetail, IcBrand, IcBrandForeground, IcColor, IcDeviceSizes, IcEmphasisType, IcInformationStatusOrEmpty, IcMenuOption, IcOrientation, IcSearchMatchPositions, IcSelectMethodTypes, IcSelectTypes, IcSizes, IcSizesNoLarge, IcStatusVariants, 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";
@@ -552,6 +552,10 @@ export namespace Components {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -717,7 +721,7 @@ export namespace Components {
         /**
           * 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;
+        "theme"?: IcThemeMode | IcBrandForeground;
         /**
           * The thickness of the divider.
          */
@@ -849,7 +853,7 @@ export namespace Components {
         /**
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
-        "appearance"?: IcThemeForeground;
+        "appearance"?: IcBrandForeground;
         "focusTrigger"?: string;
         "monochrome"?: boolean;
         "scrollItemIntoView": (itemPosition: number) => Promise<void>;
@@ -1046,7 +1050,7 @@ export namespace Components {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
-        "autoFocusOnSelected": boolean;
+        "autofocusOnSelected": boolean;
         /**
           * If `true`, the menu will close when an option is selected.
          */
@@ -2027,10 +2031,6 @@ export namespace Components {
         "ariaAutocomplete": IcAriaAutocompleteTypes;
         "ariaExpanded": string;
         "ariaOwns": string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus": boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -2043,6 +2043,10 @@ export namespace Components {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect": IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus": boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -2162,9 +2166,9 @@ export namespace Components {
     }
     interface IcTheme {
         /**
-          * 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)".
+          * The brand 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)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */
@@ -3207,7 +3211,7 @@ declare global {
         new (): HTMLIcTextFieldElement;
     };
     interface HTMLIcThemeElementEventMap {
-        "themeChange": IcTheme;
+        "brandChange": IcBrand;
     }
     interface HTMLIcThemeElement extends Components.IcTheme, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcThemeElementEventMap>(type: K, listener: (this: HTMLIcThemeElement, ev: IcThemeCustomEvent<HTMLIcThemeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3878,6 +3882,10 @@ declare namespace LocalJSX {
           * If `true`, the chip will appear disabled.
          */
         "disabled"?: boolean;
+        /**
+          * The text in the dismiss button tooltip and aria label.
+         */
+        "dismissLabel"?: string;
         /**
           * If `true`, the chip will have a close button at the end to dismiss it.
          */
@@ -4051,7 +4059,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "theme"?: IcThemeMode | IcBrandForeground;
         /**
           * The thickness of the divider.
          */
@@ -4183,7 +4191,7 @@ declare namespace LocalJSX {
         /**
           * The appearance of the horizontal scroll, e.g. dark, light or the default.
          */
-        "appearance"?: IcThemeForeground;
+        "appearance"?: IcBrandForeground;
     }
     interface IcInputComponentContainer {
         /**
@@ -5384,10 +5392,6 @@ declare namespace LocalJSX {
     interface IcTabPanel {
     }
     interface IcTextField {
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus"?: boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -5400,6 +5404,10 @@ declare namespace LocalJSX {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect"?: IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -5531,9 +5539,9 @@ declare namespace LocalJSX {
     }
     interface IcTheme {
         /**
-          * 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)".
+          * The brand 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)".
          */
-        "color"?: IcColor;
+        "brandColor"?: IcColor;
         /**
           * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
          */

package/dist/types/utils/helpers.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../stencil-public-runtime";
-import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcThemeForegroundNoDefault } from "./types";
-import { IcMenuOption, IcThemeForeground } from "../utils/types";
+import { IcCallbackFunctionNoReturn, IcInformationStatusOrEmpty, IcNavParentDetails, IcPropObject, IcSearchMatchPositions, IcColorRGBA, IcDeviceSizes, IcColor, IcBrandForegroundNoDefault } from "./types";
+import { IcMenuOption, IcBrandForeground } from "../utils/types";
 /**
  * converts an enum of strings into an array of strings
  */
@@ -60,9 +60,9 @@ export declare const getInputDescribedByText: (inputId: string, helperText: bool
  * are part of an IC component.
  *
  * ""
- * @returns IcThemeForeground depending on the context
+ * @returns IcBrandForeground depending on the context
  */
-export declare const getThemeFromContext: (el: Element, themeFromEvent?: IcThemeForeground) => IcThemeForeground;
+export declare const getBrandFromContext: (el: Element, brandFromEvent?: IcBrandForeground) => IcBrandForeground;
 /**
  * Checks if the current device is a mobile or tablet device.
  * @returns {boolean} Returns true if the device is a mobile or tablet device, otherwise returns false.
@@ -108,16 +108,16 @@ export declare const getCssProperty: (cssVar: string) => string;
  * Returns the brightness of the theme colour, calculated by using the theme RGB CSS values by:
  * - Multiplying each RGB value by a set number: https://www.w3.org/TR/AERT/#color-contrast
  * - Adding them together and dividing by 1000
- * This is a similar calculation to its CSS counterpart: "--ic-theme-text"
+ * This is a similar calculation to its CSS counterpart: "--ic-brand-text-color"
  * @returns number representing the brightness of the theme colour
  */
-export declare const getThemeColorBrightness: () => number;
+export declare const getBrandColorBrightness: () => number;
 /**
  * Returns if dark or light foreground colors should be used for color contrast reasons
  * @returns "dark" or "light"
- * @param brightness - Optional custom brightness value. Defaults to `getThemeColorBrightness`
+ * @param brightness - Optional custom brightness value. Defaults to `getBrandColorBrightness`
  */
-export declare const getThemeForegroundColor: (brightness?: number) => IcThemeForegroundNoDefault;
+export declare const getBrandForegroundAppearance: (brightness?: number) => IcBrandForegroundNoDefault;
 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;
@@ -144,6 +144,10 @@ export declare const hasClassificationBanner: () => boolean;
 export declare const addFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const removeFormResetListener: (el: HTMLElement, callbackFn: IcCallbackFunctionNoReturn) => void;
 export declare const pxToRem: (px: string, base?: number) => string;
+/**
+ * Removes the disabled attribute from the provided element when its value is set to false.
+ * This effectively makes it null, to not confuse screen readers that cannot interpret the false value
+ */
 export declare const removeDisabledFalse: (disabled: boolean, element: HTMLElement) => void;
 export declare const isMacDevice: () => boolean;
 export declare const isNumeric: (value: string) => boolean;

package/dist/types/utils/types.d.ts

@@ -11,16 +11,16 @@ export type IcInformationStatusOrEmpty = "warning" | "error" | "success" | "";
 export type IcNavType = "side" | "top" | "page-header";
 export type IcAutocompleteTypes = "on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo";
 export type IcAlignment = "left" | "center" | "full-width";
-export declare enum IcThemeForegroundEnum {
+export declare enum IcBrandForegroundEnum {
     Default = "default",
     Dark = "dark",
     Light = "light"
 }
 export type IcThemeMode = "dark" | "light" | "inherit";
-export type IcThemeForeground = "default" | "dark" | "light";
-export type IcThemeForegroundNoDefault = "dark" | "light";
-export type IcTheme = {
-    mode: IcThemeForeground;
+export type IcBrandForeground = "default" | "dark" | "light";
+export type IcBrandForegroundNoDefault = "dark" | "light";
+export type IcBrand = {
+    mode: IcBrandForeground;
     color: IcColorRGB;
 };
 export type IcAdditionalFieldTypes = "static" | "dynamic";