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

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcSizes, IcThemeForeground, IcSelectTypes, IcSelectMethodTypes } from "../../utils/types";
+import { IcSizes, IcSelectTypes, IcSelectMethodTypes, IcThemeMode } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-toggle-button-group.types";
 interface lastKey {
     key: string | null;
@@ -12,14 +12,11 @@ export declare class ToggleButtonGroup {
      * The accessible label of the toggle button group component to provide context for screen reader users.
      */
     accessibleLabel?: string;
-    /**
-     * The appearance of the toggle button group, e.g dark, or light.
-     */
-    appearance: IcThemeForeground;
     /**
      * If `true`, the toggle button group will be set to the disabled state.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button group will fill the width of the container.
      */
@@ -32,6 +29,11 @@ export declare class ToggleButtonGroup {
      * If `true`, the toggle button group will be in loading state.
      */
     loading?: boolean;
+    /**
+     * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+     */
+    monochrome?: boolean;
+    watchMonochromeHandler(): void;
     /**
      * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
      */
@@ -44,6 +46,11 @@ export declare class ToggleButtonGroup {
      * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible 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;
+    watchThemeHandler(): void;
     /**
      * The variant of the toggle button.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground, IcTheme, IcDeviceSizes, IcValueEventDetail } from "../../utils/types";
+import { IcAlignment, IcThemeForeground, IcTheme, IcDeviceSizes, IcValueEventDetail, IcThemeMode } from "../../utils/types";
 import { IcSearchBarBlurEventDetail } from "../ic-search-bar/ic-search-bar.types";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
@@ -52,6 +52,10 @@ export declare class TopNavigation {
      * The status info to be displayed.
      */
     status: 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 version info to be displayed.
      */

package/dist/types/components.d.ts

@@ -163,6 +163,10 @@ export namespace Components {
           * The ID of the element to jump back to when the link is clicked.
          */
         "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;
         /**
           * The variant of the button to render
          */
@@ -254,10 +258,6 @@ export namespace Components {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         "ariaControlsId": string | boolean;
         "ariaOwnsId": string | boolean;
         /**
@@ -328,6 +328,10 @@ export namespace Components {
           * If `true`, the button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
@@ -356,6 +360,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;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -843,13 +851,11 @@ export namespace Components {
          */
         "appearance"?: IcThemeForeground;
         "focusTrigger"?: string;
+        "monochrome"?: boolean;
         "scrollItemIntoView": (itemPosition: number) => Promise<void>;
+        "theme"?: IcThemeMode;
     }
     interface IcInputComponentContainer {
-        /**
-          * The appearance of the input component container.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -890,10 +896,6 @@ export namespace Components {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -1111,6 +1113,10 @@ export namespace Components {
         "label"?: string;
     }
     interface IcMenuItem {
+        /**
+          * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+         */
+        "checked": boolean;
         /**
           * The description displayed in the menu item, below the label.
          */
@@ -1189,6 +1195,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 IcNavigationGroup {
         /**
@@ -1203,6 +1213,10 @@ export namespace Components {
           * Sets focus on the nav item.
          */
         "setFocus": () => 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;
     }
     interface IcNavigationItem {
         "collapsedIconLabel": boolean;
@@ -1244,12 +1258,20 @@ 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 IcNavigationMenu {
         /**
           * The status info to display.
          */
         "status": 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 version info to display.
          */
@@ -1288,6 +1310,10 @@ export namespace Components {
           * The subtitle to render on the page header.
          */
         "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;
     }
     interface IcPagination {
         /**
@@ -1382,7 +1408,7 @@ export namespace Components {
         /**
           * @param setFocusToAnchor when true return focus to anchor element when menu is closed
          */
-        "closeMenu": (setFocusToAnchor?: boolean) => Promise<void>;
+        "closeMenu": (setFocusToAnchor?: boolean, menuElement?: HTMLIcMenuItemElement) => Promise<void>;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -1720,7 +1746,7 @@ export namespace Components {
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
-          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
          */
         "searchable"?: boolean;
         /**
@@ -1739,6 +1765,10 @@ export namespace Components {
           * The size of the select.
          */
         "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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -1830,6 +1860,10 @@ 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"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -2099,6 +2133,10 @@ export namespace Components {
           * If `true`, the value of the text field 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;
         "truncateValue"?: boolean;
         /**
           * The type of control to display. The default type is text.
@@ -2177,10 +2215,6 @@ export namespace Components {
           * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button will be in a checked state.
          */
@@ -2205,10 +2239,18 @@ export namespace Components {
           * If `true`, the toggle button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * The size of the toggle button to be displayed.
          */
         "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 variant of the toggle button.
          */
@@ -2219,10 +2261,6 @@ export namespace Components {
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button group, e.g dark, or light.
-         */
-        "appearance": IcThemeForeground;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -2239,6 +2277,10 @@ export namespace Components {
           * If `true`, the toggle button group will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.
          */
@@ -2251,6 +2293,10 @@ export namespace Components {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible 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 variant of the toggle button.
          */
@@ -2324,6 +2370,10 @@ export namespace Components {
           * The status info to be displayed.
          */
         "status": 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 version info to be displayed.
          */
@@ -2794,9 +2844,9 @@ declare global {
     };
     interface HTMLIcMenuItemElementEventMap {
         "childBlur": void;
-        "handleMenuItemClick": {
-    label: string;
-    hasSubMenu: boolean;
+        "handleMenuItemClick": HTMLIcMenuItemElement;
+        "icToggleChecked": {
+    checked: boolean;
   };
         "triggerPopoverMenuInstance": void;
     }
@@ -2902,7 +2952,7 @@ declare global {
         new (): HTMLIcPaginationItemElement;
     };
     interface HTMLIcPopoverMenuElementEventMap {
-        "icPopoverClosed": void;
+        "icPopoverClosed": HTMLIcMenuItemElement;
     }
     interface HTMLIcPopoverMenuElement extends Components.IcPopoverMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIcPopoverMenuElementEventMap>(type: K, listener: (this: HTMLIcPopoverMenuElement, ev: IcPopoverMenuCustomEvent<HTMLIcPopoverMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3440,6 +3490,10 @@ declare namespace LocalJSX {
           * The ID of the element to jump back to when the link is clicked.
          */
         "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;
         /**
           * The variant of the button to render
          */
@@ -3524,10 +3578,6 @@ declare namespace LocalJSX {
           * If `fileUpload` is set to `true`, this is the accepted list of file types.
          */
         "accept"?: string;
-        /**
-          * The appearance of the button, e.g. dark, light, or the default.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.
          */
@@ -3596,6 +3646,10 @@ declare namespace LocalJSX {
           * If `true`, the button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+         */
+        "monochrome"?: boolean;
         /**
           * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
          */
@@ -3632,6 +3686,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;
         /**
           * The position of the tooltip in relation to the button.
          */
@@ -4128,10 +4186,6 @@ declare namespace LocalJSX {
         "appearance"?: IcThemeForeground;
     }
     interface IcInputComponentContainer {
-        /**
-          * The appearance of the input component container.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -4172,10 +4226,6 @@ declare namespace LocalJSX {
         "readonly"?: boolean;
     }
     interface IcInputLabel {
-        /**
-          * The appearance of the input label.
-         */
-        "appearance"?: "dark" | "default";
         /**
           * If `true`, the disabled state will be set.
          */
@@ -4376,6 +4426,10 @@ declare namespace LocalJSX {
         "label"?: string;
     }
     interface IcMenuItem {
+        /**
+          * If `true`, the menu item will be in a checked state. This is only applicable when variant is set to `toggle`.
+         */
+        "checked"?: boolean;
         /**
           * The description displayed in the menu item, below the label.
          */
@@ -4400,6 +4454,12 @@ declare namespace LocalJSX {
           * The label to display in the menu item.
          */
         "label": string;
+        /**
+          * Emitted when the user clicks a menu item that is set to the toggle variant.
+         */
+        "onIcToggleChecked"?: (event: IcMenuItemCustomEvent<{
+    checked: boolean;
+  }>) => void;
         /**
           * How much of the referrer to send when following the link.
          */
@@ -4450,6 +4510,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 IcNavigationGroup {
         /**
@@ -4460,6 +4524,10 @@ declare namespace LocalJSX {
           * The label to display on the group.
          */
         "label"?: 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 IcNavigationItem {
         /**
@@ -4494,12 +4562,20 @@ 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 IcNavigationMenu {
         /**
           * The status info to display.
          */
         "status"?: 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 version info to display.
          */
@@ -4538,6 +4614,10 @@ declare namespace LocalJSX {
           * The subtitle to render on the page header.
          */
         "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;
     }
     interface IcPagination {
         /**
@@ -4631,7 +4711,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the popover menu is closed.
          */
-        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<void>) => void;
+        "onIcPopoverClosed"?: (event: IcPopoverMenuCustomEvent<HTMLIcMenuItemElement>) => void;
         /**
           * If `true`, the popover menu will be displayed.
          */
@@ -5043,7 +5123,7 @@ declare namespace LocalJSX {
          */
         "searchMatchPosition"?: IcSearchMatchPositions;
         /**
-          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
+          * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
          */
         "searchable"?: boolean;
         /**
@@ -5058,6 +5138,10 @@ declare namespace LocalJSX {
           * The size of the select.
          */
         "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;
         /**
           * If using external filtering, set a timeout for when loading takes too long.
          */
@@ -5152,6 +5236,10 @@ 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"?: "dark" | "light" | "inherit";
+        /**
+          * The letter case of the status tag's label.
+         */
+        "uppercase"?: boolean;
         /**
           * The emphasis of the status tag.
          */
@@ -5416,6 +5504,10 @@ declare namespace LocalJSX {
           * If `true`, the value of the text field 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;
         /**
           * The type of control to display. The default type is text.
          */
@@ -5492,10 +5584,6 @@ declare namespace LocalJSX {
           * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button will be in a checked state.
          */
@@ -5520,6 +5608,10 @@ declare namespace LocalJSX {
           * If `true`, the toggle button will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when the user clicks a toggle button.
          */
@@ -5530,6 +5622,10 @@ declare namespace LocalJSX {
           * The size of the toggle button to be displayed.
          */
         "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 variant of the toggle button.
          */
@@ -5540,10 +5636,6 @@ declare namespace LocalJSX {
           * The accessible label of the toggle button group component to provide context for screen reader users.
          */
         "accessibleLabel"?: string;
-        /**
-          * The appearance of the toggle button group, e.g dark, or light.
-         */
-        "appearance"?: IcThemeForeground;
         /**
           * If `true`, the toggle button group will be set to the disabled state.
          */
@@ -5560,6 +5652,10 @@ declare namespace LocalJSX {
           * If `true`, the toggle button group will be in loading state.
          */
         "loading"?: boolean;
+        /**
+          * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.
+         */
+        "monochrome"?: boolean;
         /**
           * Emitted when a toggle button is selected.
          */
@@ -5576,6 +5672,10 @@ declare namespace LocalJSX {
           * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible 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 variant of the toggle button.
          */
@@ -5640,6 +5740,10 @@ declare namespace LocalJSX {
           * The status info to be displayed.
          */
         "status"?: 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 version info to be displayed.
          */