@elastic/eui 97.3.0 → 97.3.1-rc.0

package/eui.d.ts

@@ -975,7 +975,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	/**
 	 * Border colors
 	 */
-	export const euiBorderColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
+	export const euiBorderColor: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
 	export const useEuiBorderColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 
 }
@@ -1144,6 +1144,7 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	export interface EuiThemeProviderProps<T> extends PropsWithChildren {
 	    theme?: EuiThemeSystem<T>;
 	    colorMode?: EuiThemeColorMode;
+	    highContrastMode?: boolean;
 	    modify?: EuiThemeModifications<T>;
 	    children: any;
 	    /**
@@ -1160,11 +1161,11 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	        cloneElement?: boolean;
 	    };
 	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, highContrastMode: _highContrastMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
 
 }
 declare module '@elastic/eui/src/services/theme' {
-	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
+	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
@@ -1572,6 +1573,7 @@ declare module '@elastic/eui/src/global_styling/variables/shadow' {
 	export interface _EuiThemeShadowCustomColor {
 	    color?: string;
 	    property?: 'box-shadow' | 'filter';
+	    borderAllInHighContrastMode?: boolean;
 	}
 
 }
@@ -1832,6 +1834,40 @@ declare module '@elastic/eui/src/components/title/title.styles' {
 	};
 	export {};
 
+}
+declare module '@elastic/eui/src/components/code/code_syntax.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCodeTextColors: ({ euiTheme }: UseEuiTheme) => {
+	    backgroundColor: string;
+	    color: string;
+	};
+	export const euiCodeSyntaxVariables: (euiThemeContext: UseEuiTheme) => {
+	    backgroundColor: string;
+	    color: string;
+	    inlineCodeColor: string;
+	    selectedBackgroundColor: string;
+	    commentColor: string;
+	    selectorTagColor: string;
+	    stringColor: string;
+	    tagColor: string;
+	    nameColor: string;
+	    numberColor: string;
+	    keywordColor: string;
+	    functionTitleColor: string;
+	    typeColor: string;
+	    attributeColor: string;
+	    symbolColor: string;
+	    paramsColor: string;
+	    metaColor: string;
+	    titleColor: string;
+	    sectionColor: string;
+	    additionColor: string;
+	    deletionColor: string;
+	    selectorClassColor: string;
+	    selectorIdColor: string;
+	    readonly tokensCss: string;
+	};
+
 }
 declare module '@elastic/eui/src/components/text/text.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -2315,6 +2351,10 @@ declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles'
 	     * cross-browser issues with this at some point. Hopefully CSS natively implements
 	     * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
 	     * and there'll be no need for the entire component at that point 🙏
+	     *
+	     * 2024 update: We have found an issue! Windows high contrast themes force overrides
+	     * `color` and therefore "breaks" the rgba hack. We can skip this UX (via the
+	     * forced-colors media query) for those modes for now.
 	     */
 	    euiTextTruncate__truncatedText: import("@emotion/utils").SerializedStyles;
 	    euiTextTruncate__fullText: import("@emotion/utils").SerializedStyles;
@@ -3333,6 +3373,11 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    border: string;
+	    color: string;
+	    backgroundColor: string;
+	} | {
+	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -3343,6 +3388,11 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonFillColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    border: string;
+	    color: string;
+	    backgroundColor: string;
+	} | {
+	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -3408,30 +3458,30 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	/**
 	 * euiSlightShadow
 	 */
-	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadowXSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	/**
 	 * bottomShadowSmall
 	 */
-	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadowSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	/**
 	 * bottomShadowMedium
 	 */
-	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, property }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadowMedium: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	/**
 	 * bottomShadow
 	 */
-	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadowLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	/**
 	 * bottomShadowLarge
 	 */
 	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
 	    reverse?: boolean;
 	}
-	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
+	export const euiShadowXLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowXLarge | undefined) => string;
 	/**
 	 * slightShadowHover
 	 */
-	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiSlightShadowHover: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
 	/**
 	 * bottomShadowFlat
@@ -3439,9 +3489,9 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow'
 	 * Similar to shadow medium but without the bottom depth.
 	 * Useful for popovers that drop UP rather than DOWN.
 	 */
-	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadowFlat: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
+	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, options?: _EuiThemeShadowCustomColor | undefined) => string;
 	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
 
 }
@@ -3509,7 +3559,7 @@ declare module '@elastic/eui/src/components/loading/loading_chart' {
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export const SIZES: readonly ["m", "l", "xl"];
 	export type EuiLoadingChartSize = (typeof SIZES)[number];
-	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
+	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLSpanElement> & {
 	    size?: EuiLoadingChartSize;
 	    mono?: boolean;
 	};
@@ -4164,6 +4214,7 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    controlCompressedBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    iconAffordance: string;
 	    iconCompressedAffordance: string;
+	    stateUnderlineHeight: string | number | undefined;
 	};
 	export const euiFormControlStyles: (euiThemeContext: UseEuiTheme) => {
 	    shared: string;
@@ -4185,8 +4236,8 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    withBackgroundColor?: boolean | undefined;
 	    withBackgroundAnimation?: boolean | undefined;
 	}) => string;
-	export const euiFormControlFocusStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => string;
-	export const euiFormControlInvalidStyles: ({ euiTheme }: UseEuiTheme) => string;
+	export const euiFormControlFocusStyles: (euiThemeContext: UseEuiTheme) => string;
+	export const euiFormControlInvalidStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlDisabledStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlReadOnlyStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlAutoFillStyles: (euiThemeContext: UseEuiTheme) => string;
@@ -4223,8 +4274,9 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	            unselected: string;
 	        };
 	        disabled: {
-	            selected: string;
-	            unselected: string;
+	            readonly shared: string;
+	            readonly selected: string;
+	            readonly unselected: string;
 	        };
 	        icon: string;
 	        hiddenInput: string;
@@ -4442,7 +4494,7 @@ declare module '@elastic/eui/src/components/button' {
 }
 declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiHorizontalRuleStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiHorizontalRuleStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
 	    euiHorizontalRule: import("@emotion/utils").SerializedStyles;
 	    full: import("@emotion/utils").SerializedStyles;
 	    half: import("@emotion/utils").SerializedStyles;
@@ -6252,10 +6304,16 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const EuiFormControlLayoutClearButtonStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => {
 	    euiFormControlLayoutClearButton: import("@emotion/utils").SerializedStyles;
-	    euiFormControlLayoutClearButton__icon: import("@emotion/utils").SerializedStyles;
 	    size: {
-	        s: import("@emotion/utils").SerializedStyles;
-	        m: import("@emotion/utils").SerializedStyles;
+	        s: string;
+	        m: string;
+	    };
+	    icon: {
+	        euiFormControlLayoutClearButton__icon: import("@emotion/utils").SerializedStyles;
+	        size: {
+	            s: import("@emotion/utils").SerializedStyles;
+	            m: import("@emotion/utils").SerializedStyles;
+	        };
 	    };
 	};
 
@@ -6674,7 +6732,7 @@ declare module '@elastic/eui/src/components/color_picker/utils' {
 	export const getEventPosition: (location: {
 	    x: number;
 	    y: number;
-	}, container: HTMLElement) => {
+	}, container: HTMLElement | SVGElement) => {
 	    left: number;
 	    top: number;
 	    width: number;
@@ -7043,6 +7101,7 @@ declare module '@elastic/eui/src/services/theme/context' {
 	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
 	export const EuiModificationsContext: import("react").Context<import ("@elastic/eui").RecursivePartial<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>>;
 	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
+	export const EuiHighContrastModeContext: import("react").Context<boolean>;
 	export const defaultComputedTheme: EuiThemeComputed<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>;
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
@@ -7057,6 +7116,7 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 	export interface UseEuiTheme<T extends {} = {}> {
 	    euiTheme: EuiThemeComputed<T>;
 	    colorMode: EuiThemeColorModeStandard;
+	    highContrastMode: boolean;
 	    modifications: EuiThemeModifications<T>;
 	}
 	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
@@ -7979,7 +8039,7 @@ declare module '@elastic/eui/src/components/auto_sizer' {
 }
 declare module '@elastic/eui/src/components/avatar/avatar.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiAvatarStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiAvatarStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
 	    euiAvatar: import("@emotion/utils").SerializedStyles;
 	    plain: import("@emotion/utils").SerializedStyles;
 	    subdued: import("@emotion/utils").SerializedStyles;
@@ -8079,26 +8139,56 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiBadgeColors: (euiThemeContext: UseEuiTheme) => {
 	    primary: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    success: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    warning: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    danger: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    accent: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    disabled: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
@@ -8761,12 +8851,13 @@ declare module '@elastic/eui/src/components/breadcrumbs' {
 
 }
 declare module '@elastic/eui/src/components/panel/split_panel/split_panel.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiSplitPanelOuterStyles: {
 	    euiSplitPanelOuter: import("@emotion/utils").SerializedStyles;
 	    column: import("@emotion/utils").SerializedStyles;
 	    row: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiSplitPanelInnerStyles: {
+	export const euiSplitPanelInnerStyles: ({ highContrastMode, }: UseEuiTheme) => {
 	    euiSplitPanelInner: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -9626,14 +9717,15 @@ declare module '@elastic/eui/src/components/progress/progress.styles' {
 	/**
 	 * Emotion styles
 	 */
-	export const euiProgressStyles: ({ euiTheme }: UseEuiTheme, isNative: boolean) => {
+	export const euiProgressStyles: ({ euiTheme, highContrastMode }: UseEuiTheme, isNative: boolean) => {
 	    euiProgress: import("@emotion/utils").SerializedStyles;
 	    native: import("@emotion/utils").SerializedStyles;
 	    indeterminate: import("@emotion/utils").SerializedStyles;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
+	    _sharedSizeCSS: (size: string) => import("@emotion/utils").SerializedStyles;
+	    readonly xs: import("@emotion/utils").SerializedStyles;
+	    readonly s: import("@emotion/utils").SerializedStyles;
+	    readonly m: import("@emotion/utils").SerializedStyles;
+	    readonly l: import("@emotion/utils").SerializedStyles;
 	    fixed: import("@emotion/utils").SerializedStyles;
 	    absolute: import("@emotion/utils").SerializedStyles;
 	    static: import("@emotion/utils").SerializedStyles;
@@ -10304,6 +10396,7 @@ declare module '@elastic/eui/src/components/form/range/range.styles' {
 	    trackBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    tickHeight: string;
 	    tickWidth: string;
+	    tickColor: string;
 	    disabledOpacity: number;
 	    highlightHeight: string;
 	    height: string;
@@ -10376,7 +10469,7 @@ declare module '@elastic/eui/src/components/form/range/range_levels.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiRangeLevelsStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiRangeLevels: import("@emotion/utils").SerializedStyles;
-	    hasRange: import("@emotion/utils").SerializedStyles;
+	    euiRangeLevels__overlay: import("@emotion/utils").SerializedStyles;
 	    hasTicks: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiRangeLevelStyles: (euiThemeContext: UseEuiTheme) => {
@@ -11087,36 +11180,6 @@ declare module '@elastic/eui/src/components/code/utils' {
 	export const highlightByLine: (children: string, language: string, data: LineNumbersConfig, euiTheme: UseEuiTheme) => RefractorNode[];
 	export {};
 
-}
-declare module '@elastic/eui/src/components/code/code_syntax.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiCodeSyntaxVariables: ({ euiTheme }: UseEuiTheme) => {
-	    backgroundColor: string;
-	    color: string;
-	    inlineCodeColor: string;
-	    selectedBackgroundColor: string;
-	    commentColor: string;
-	    selectorTagColor: string;
-	    stringColor: string;
-	    tagColor: string;
-	    nameColor: string;
-	    numberColor: string;
-	    keywordColor: string;
-	    functionTitleColor: string;
-	    typeColor: string;
-	    attributeColor: string;
-	    symbolColor: string;
-	    paramsColor: string;
-	    metaColor: string;
-	    titleColor: string;
-	    sectionColor: string;
-	    additionColor: string;
-	    deletionColor: string;
-	    selectorClassColor: string;
-	    selectorIdColor: string;
-	    readonly tokensCss: string;
-	};
-
 }
 declare module '@elastic/eui/src/components/code/code.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -13200,6 +13263,7 @@ declare module '@elastic/eui/src/components/color_picker/hue.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiHueStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiHue: import("@emotion/utils").SerializedStyles;
+	    euiHue__track: import("@emotion/utils").SerializedStyles;
 	    euiHue__range: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -13219,6 +13283,7 @@ declare module '@elastic/eui/src/components/color_picker/saturation.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiSaturationStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiSaturation: import("@emotion/utils").SerializedStyles;
+	    euiSaturation__svg: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__lightness: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__saturation: import("@emotion/utils").SerializedStyles;
 	    euiSaturation__indicator: import("@emotion/utils").SerializedStyles;
@@ -13570,7 +13635,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 }
 declare module '@elastic/eui/src/components/mark/mark.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiMarkStyles: ({ euiTheme, colorMode }: UseEuiTheme) => {
+	export const euiMarkStyles: ({ euiTheme, highContrastMode }: UseEuiTheme) => {
 	    euiMark: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiMarkScreenReaderStyles: (highlightStart: string, highlightEnd: string) => {
@@ -14092,7 +14157,7 @@ declare module '@elastic/eui/src/components/timeline/timeline_item' {
 }
 declare module '@elastic/eui/src/components/timeline/timeline.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTimelineStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTimelineStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTimeline: import("@emotion/utils").SerializedStyles;
 	    m: import("@emotion/utils").SerializedStyles;
 	    l: import("@emotion/utils").SerializedStyles;
@@ -17159,7 +17224,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 }
 declare module '@elastic/eui/src/components/tabs/tab.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTabStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTabStyles: ({ euiTheme, highContrastMode }: UseEuiTheme) => {
 	    euiTab: import("@emotion/utils").SerializedStyles;
 	    expanded: import("@emotion/utils").SerializedStyles;
 	    selected: import("@emotion/utils").SerializedStyles;
@@ -17586,6 +17651,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiDatePopoverButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiDatePopoverButton: import("@emotion/utils").SerializedStyles;
+	    now: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -19432,6 +19498,10 @@ declare module '@elastic/eui/src/components/skeleton/utils' {
 	    gradientSize?: string;
 	};
 	export const euiSkeletonGradientAnimation: ({ euiTheme, colorMode }: UseEuiTheme, { slideSize, gradientSize }?: AnimationOptions) => import("@emotion/utils").SerializedStyles;
+	export const _highContrastFallback: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, { shape, borderRadius }?: {
+	    shape?: string | undefined;
+	    borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
+	}) => string;
 	export {};
 
 }
@@ -19779,6 +19849,7 @@ declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu_item.style
 	    euiKeyPadMenuItem: import("@emotion/utils").SerializedStyles;
 	    enabled: import("@emotion/utils").SerializedStyles;
 	    selected: import("@emotion/utils").SerializedStyles;
+	    selectedHighContrast: import("@emotion/utils").SerializedStyles;
 	    disabled: {
 	        disabled: import("@emotion/utils").SerializedStyles;
 	        selected: import("@emotion/utils").SerializedStyles;
@@ -20828,6 +20899,7 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    euiPageHeaderContent__top: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__leftSideItems: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__rightSideItems: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__rightSideItem: import("@emotion/utils").SerializedStyles;
 	    euiPageHeaderContent__titleIcon: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -21304,17 +21376,21 @@ declare module '@elastic/eui/src/components/provider/cache' {
 	export * from '@elastic/eui/src/components/provider/cache/cache_provider';
 
 }
-declare module '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider' {
+declare module '@elastic/eui/src/components/provider/system_defaults/match_media_hook' {
+	export const useWindowMediaMatcher: (mediaQuery: string) => boolean;
+
+}
+declare module '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider' {
 	import { FunctionComponent, ReactElement } from 'react';
 	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services';
 	export const COLOR_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
-	export const EuiSystemColorModeProvider: FunctionComponent<{
-	    children: (systemColorMode: EuiThemeColorModeStandard) => ReactElement;
+	export const EuiSystemDefaultsProvider: FunctionComponent<{
+	    children: (systemColorMode: EuiThemeColorModeStandard, systemHighContrastMode: boolean) => ReactElement;
 	}>;
 
 }
-declare module '@elastic/eui/src/components/provider/system_color_mode' {
-	export { EuiSystemColorModeProvider } from '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider';
+declare module '@elastic/eui/src/components/provider/system_defaults' {
+	export { EuiSystemDefaultsProvider } from '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider';
 
 }
 declare module '@elastic/eui/src/components/provider/nested/nested_context' {
@@ -21351,6 +21427,14 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     * Defaults to the user's OS/system setting if undefined.
 	     */
 	    colorMode?: EuiThemeColorMode;
+	    /**
+	     * Allows enabling a high contrast mode for better accessibility.
+	     * Defaults to the user's OS/system setting if undefined.
+	     *
+	     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
+	     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
+	     */
+	    highContrastMode?: boolean;
 	    /**
 	     * Provide global styles via `@emotion/react` `Global` for your custom theme.
 	     * Pass `false` to remove the default EUI global styles.
@@ -21386,7 +21470,7 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     */
 	    componentDefaults?: EuiComponentDefaults;
 	}
-	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
+	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, highContrastMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
 
 }
 declare module '@elastic/eui/src/components/provider' {
@@ -23875,16 +23959,11 @@ declare module '@elastic/eui/src/components/steps/step_number.styles' {
 	    complete: import("@emotion/utils").SerializedStyles;
 	    current: import("@emotion/utils").SerializedStyles;
 	};
-	export const euiStepNumberContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiStepNumberIconStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiStepNumber__icon: import("@emotion/utils").SerializedStyles;
 	    complete: import("@emotion/utils").SerializedStyles;
 	    danger: import("@emotion/utils").SerializedStyles;
 	    warning: import("@emotion/utils").SerializedStyles;
-	    euiStepNumber__number: import("@emotion/utils").SerializedStyles;
-	    incomplete: import("@emotion/utils").SerializedStyles;
-	    loading: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
-	    current: import("@emotion/utils").SerializedStyles;
 	    none: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -23975,7 +24054,7 @@ declare module '@elastic/eui/src/components/steps/steps' {
 }
 declare module '@elastic/eui/src/components/steps/sub_steps.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiSubStepsStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiSubStepsStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
 	    euiSubSteps: import("@emotion/utils").SerializedStyles;
 	};
 
@@ -25315,6 +25394,7 @@ declare module '@elastic/eui/.storybook/test' {
 	     */
 	    waitForAndClick: (testSubject: string) => Promise<void>;
 	    waitForEuiPopoverVisible: () => Promise<void>;
+	    waitForEuiPopoverHidden: () => Promise<void>;
 	    getByLabelText: (<T extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement);
 	    getAllByLabelText: (<T_1 extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T_1[]) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement[]);
 	    queryByLabelText: (<T_2 extends HTMLElement = HTMLElement>(id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => T_2 | null) & ((id: import("@testing-library/dom").Matcher, options?: import("@testing-library/dom").SelectorMatcherOptions | undefined) => HTMLElement | null);

package/i18ntokens.json

@@ -653,14 +653,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 37,
+        "line": 38,
         "column": 20,
-        "index": 1352
+        "index": 1380
       },
       "end": {
-        "line": 41,
+        "line": 42,
         "column": 3,
-        "index": 1454
+        "index": 1482
       }
     },
     "filepath": "src/components/color_picker/color_picker_swatch.tsx"
@@ -995,14 +995,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 791,
+        "line": 794,
         "column": 8,
-        "index": 23154
+        "index": 23332
       },
       "end": {
-        "line": 794,
+        "line": 797,
         "column": 9,
-        "index": 23273
+        "index": 23451
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"
@@ -4973,14 +4973,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 34,
+        "line": 35,
         "column": 20,
-        "index": 1321
+        "index": 1412
       },
       "end": {
-        "line": 37,
+        "line": 38,
         "column": 3,
-        "index": 1399
+        "index": 1490
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
@@ -5927,14 +5927,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 139,
+        "line": 138,
         "column": 6,
-        "index": 3868
+        "index": 3856
       },
       "end": {
-        "line": 145,
+        "line": 144,
         "column": 8,
-        "index": 3996
+        "index": 3984
       }
     },
     "filepath": "src/components/progress/progress.tsx"