@elastic/eui 113.1.0 → 113.2.0

package/eui.d.ts

@@ -1154,10 +1154,19 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	export interface _EuiButtonOptions {
 	    display?: _EuiButtonDisplay;
 	}
-	export const getEuiButtonColors: (euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | "disabled") => {
+	type ButtonVariantColors = {
+	    color: string;
+	    background: string;
+	    backgroundHover: string;
+	    backgroundActive: string;
+	    borderColor: string;
+	};
+	export const getEuiButtonColorValues: (euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | "disabled") => {
 	    color: string;
 	    backgroundColor: string;
 	    borderColor: string;
+	    backgroundHover: string;
+	    backgroundActive: string;
 	};
 	/**
 	 * Creates the `base` version of button styles with proper text contrast.
@@ -1174,10 +1183,12 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	    color: string;
 	    backgroundColor: string;
 	};
-	export const getEuiFilledButtonColors: (euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | "disabled") => {
+	export const getEuiFilledButtonColorValues: (euiThemeContext: UseEuiTheme, color: _EuiExtendedButtonColor | "disabled") => {
 	    color: string;
 	    backgroundColor: string;
 	    borderColor: string;
+	    backgroundHover: string;
+	    backgroundActive: string;
 	};
 	/**
 	 * Creates the `fill` version of buttons styles with proper text contrast.
@@ -1243,10 +1254,15 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	        fontScale: "s";
 	    };
 	};
+	/**
+	 * internal styles util for applying button background color on hover
+	 */
+	export const euiButtonInteractionStyles: (euiThemeContext: UseEuiTheme, buttonColors: ButtonVariantColors, type?: "fill" | "overlay") => string;
 	/**
 	 * creates a bottom border on hover/focus to ensure a visible change as forced mode removed background colors
 	 */
 	export const highContrastHoverIndicatorStyles: ({ euiTheme }: UseEuiTheme) => string;
+	export {};
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
@@ -2141,7 +2157,7 @@ declare module '@elastic/eui/src/components/table/mobile/responsive_context' {
 	 * Used by parent/top-level table components to determine isResponsive state
 	 * based on the passed breakpoint
 	 */
-	export const useIsEuiTableResponsive: (componentProp?: EuiBreakpointSize | boolean) => boolean;
+	export const useIsEuiTableResponsive: (breakpoint?: EuiBreakpointSize | boolean) => boolean;
 	/**
 	 * Context set by parent table components
 	 * Hook used by cells to fetch parent isResponsive state
@@ -2175,6 +2191,7 @@ declare module '@elastic/eui/src/components/table/table.styles' {
 	};
 	export const euiTableStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTable: import("@emotion/react").SerializedStyles;
+	    euiTableScrollableInline: import("@emotion/react").SerializedStyles;
 	    layout: {
 	        fixed: import("@emotion/react").SerializedStyles;
 	        auto: import("@emotion/react").SerializedStyles;
@@ -2194,9 +2211,20 @@ declare module '@elastic/eui/src/components/table/table.styles' {
 	     */
 	    desktop: import("@emotion/react").SerializedStyles;
 	    mobile: import("@emotion/react").SerializedStyles;
+	    scrollableWrapper: import("@emotion/react").SerializedStyles;
 	};
 	export const euiTableCaptionStyles: import("@emotion/react").SerializedStyles;
 
+}
+declare module '@elastic/eui/src/components/table/const' {
+	/**
+	 * CSS Container name of the `EuiTable` component.
+	 * It can be used for dimensional and scroll-state queries.
+	 *
+	 * @see {@link EuiTable}
+	 */
+	export const EUI_TABLE_CSS_CONTAINER_NAME = "EuiTable";
+
 }
 declare module '@elastic/eui/src/components/table/table' {
 	import { FunctionComponent, TableHTMLAttributes } from 'react';
@@ -2224,7 +2252,27 @@ declare module '@elastic/eui/src/components/table/table' {
 	     * @default true
 	     */
 	    hasBackground?: boolean;
+	    /**
+	     * Allow the table to grow over 100% of the container inline size
+	     * (width in horizontal writing-mode) and enable scrolling on overflow.
+	     *
+	     * This should only be used with [`tableLayout`]{@link EuiTableProps#tableLayout}
+	     * set to `auto`.
+	     * @beta
+	     * @default false
+	     */
+	    scrollableInline?: boolean;
 	}
+	/**
+	 * EuiTable is a low-level building block component used to render tabular data
+	 * in a customized way.
+	 *
+	 * It should only be used when confirmed that [EuiBasicTable]{@link EuiBasicTable}
+	 * and [EuiInMemoryTable]{@link EuiInMemoryTable} are not flexible enough
+	 * for the purposes of the job.
+	 *
+	 * @see {@link https://eui.elastic.co/docs/components/tables/custom/|EuiTable documentation}
+	 */
 	export const EuiTable: FunctionComponent<EuiTableProps>;
 
 }
@@ -2242,11 +2290,48 @@ declare module '@elastic/eui/src/components/table/table_footer' {
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export const EuiTableFooter: FunctionComponent<PropsWithChildren & CommonProps>;
 
+}
+declare module '@elastic/eui/src/components/table/types' {
+	/**
+	 * @internal
+	 */
+	export interface EuiTableSharedWidthProps {
+	    width?: string | number;
+	    minWidth?: string | number;
+	    maxWidth?: string | number;
+	}
+	/**
+	 * @internal
+	 */
+	export interface EuiTableStickyCellOptions {
+	    /**
+	     * The side the cell should stick to.
+	     * In horizontal writing-mode, `start` equals the left side and `end`
+	     * the right side.
+	     */
+	    side: 'start' | 'end';
+	}
+
 }
 declare module '@elastic/eui/src/components/table/utils' {
-	import { CSSProperties } from 'react';
-	export const WARNING_MESSAGE = "Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.";
-	export const resolveWidthAsStyle: (style?: CSSProperties, width?: string | number) => CSSProperties;
+	import type { CSSProperties } from 'react';
+	import type { EuiTableSharedWidthProps } from '@elastic/eui/src/components/table/types';
+	/**
+	 * @internal
+	 */
+	export const WARNING_MESSAGE_WIDTH = "Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.";
+	/**
+	 * @internal
+	 */
+	export const WARNING_MESSAGE_MIN_WIDTH = "Two `minWidth` properties were provided. Provide only one of `style.minWidth` or `minWidth` to avoid conflicts.";
+	/**
+	 * @internal
+	 */
+	export const WARNING_MESSAGE_MAX_WIDTH = "Two `maxWidth` properties were provided. Provide only one of `style.maxWidth` or `maxWidth` to avoid conflicts.";
+	/**
+	 * @internal
+	 */
+	export const resolveWidthPropsAsStyle: (style: CSSProperties | undefined, { width: rawWidth, minWidth: rawMinWidth, maxWidth: rawMaxWidth, }: EuiTableSharedWidthProps) => CSSProperties;
 
 }
 declare module '@elastic/eui/src/services/canvas/canvas_text_utils' {
@@ -2481,12 +2566,37 @@ declare module '@elastic/eui/src/components/table/table_row_cell.styles' {
 	    euiTableRowCell__mobileHeader: import("@emotion/react").SerializedStyles;
 	};
 
+}
+declare module '@elastic/eui/src/components/table/table_cells_shared.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import { EuiTableStickyCellOptions } from '@elastic/eui/src/components/table/types';
+	export const euiTableHeaderFooterCellStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiTableHeaderCell: import("@emotion/react").SerializedStyles;
+	    euiTableHeaderCell__content: import("@emotion/react").SerializedStyles;
+	    euiTableHeaderCell__button: import("@emotion/react").SerializedStyles;
+	    euiTableFooterCell: {
+	        euiTableFooterCell: import("@emotion/react").SerializedStyles;
+	        hasBackground: import("@emotion/react").SerializedStyles;
+	    };
+	};
+	export const euiTableCellCheckboxStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiTableHeaderCellCheckbox: import("@emotion/react").SerializedStyles;
+	    euiTableRowCellCheckbox: import("@emotion/react").SerializedStyles;
+	    desktop: import("@emotion/react").SerializedStyles;
+	    mobile: import("@emotion/react").SerializedStyles;
+	};
+	/**
+	 * @internal
+	 */
+	export const _useEuiTableStickyCellStyles: (options?: EuiTableStickyCellOptions) => import("@emotion/react").SerializedStyles[] | undefined;
+
 }
 declare module '@elastic/eui/src/components/table/table_row_cell' {
 	import { CSSProperties, FunctionComponent, ReactNode, TdHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { HorizontalAlignment } from '@elastic/eui/src/services';
-	interface EuiTableRowCellSharedPropsShape {
+	import type { EuiTableStickyCellOptions, EuiTableSharedWidthProps } from '@elastic/eui/src/components/table/types';
+	interface EuiTableRowCellSharedPropsShape extends EuiTableSharedWidthProps {
 	    /**
 	     * Horizontal alignment of the text in the cell
 	     */
@@ -2507,7 +2617,6 @@ declare module '@elastic/eui/src/components/table/table_row_cell' {
 	    truncateText?: boolean | {
 	        lines: number;
 	    };
-	    width?: CSSProperties['width'];
 	}
 	export interface EuiTableRowCellMobileOptionsShape extends EuiTableRowCellSharedPropsShape {
 	    /**
@@ -2570,6 +2679,25 @@ declare module '@elastic/eui/src/components/table/table_row_cell' {
 	     * Used by EuiBasicTable to render hidden copy markers
 	     */
 	    append?: ReactNode;
+	    /**
+	     * Whether the cell should stick to a side of the table.
+	     *
+	     * This option is not applied in the responsive cards layout - see
+	     * {@link EuiTableProps#responsiveBreakpoint|`responsiveBreakpoint`}.
+	     *
+	     * Currently, it can only be used when the cell is in the first or the last
+	     * column of a table.
+	     *
+	     * When set to `true` and `hasBackground: false` is set on the table,
+	     * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+	     * the background color of the element containing the table.
+	     * Otherwise, the sticky cell will use the default `backgroundBasePlain`
+	     * background color.
+	     * @internal
+	     * @beta
+	     * @default false
+	     */
+	    sticky?: EuiTableStickyCellOptions;
 	}
 	type Props = CommonProps & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'valign'> & EuiTableRowCellProps;
 	export const EuiTableRowCell: FunctionComponent<Props>;
@@ -2587,6 +2715,7 @@ declare module '@elastic/eui/src/components/table/_table_cell_content.styles' {
 	    wrapText: import("@emotion/react").SerializedStyles;
 	    hasActions: {
 	        actions: import("@emotion/react").SerializedStyles;
+	        custom: import("@emotion/react").SerializedStyles;
 	        desktop: import("@emotion/react").SerializedStyles;
 	        mobile: import("@emotion/react").SerializedStyles;
 	    };
@@ -2602,33 +2731,33 @@ declare module '@elastic/eui/src/components/table/_table_cell_content' {
 	};
 	export const EuiTableCellContent: FunctionComponent<EuiTableCellContentProps>;
 
-}
-declare module '@elastic/eui/src/components/table/table_cells_shared.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTableHeaderFooterCellStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiTableHeaderCell: import("@emotion/react").SerializedStyles;
-	    euiTableHeaderCell__content: import("@emotion/react").SerializedStyles;
-	    euiTableHeaderCell__button: import("@emotion/react").SerializedStyles;
-	    euiTableFooterCell: {
-	        euiTableFooterCell: import("@emotion/react").SerializedStyles;
-	        hasBackground: import("@emotion/react").SerializedStyles;
-	    };
-	};
-	export const euiTableCellCheckboxStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiTableHeaderCellCheckbox: import("@emotion/react").SerializedStyles;
-	    euiTableRowCellCheckbox: import("@emotion/react").SerializedStyles;
-	    desktop: import("@emotion/react").SerializedStyles;
-	    mobile: import("@emotion/react").SerializedStyles;
-	};
-
 }
 declare module '@elastic/eui/src/components/table/table_footer_cell' {
 	import { FunctionComponent, TdHTMLAttributes } from 'react';
 	import { HorizontalAlignment } from '@elastic/eui/src/services';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type EuiTableFooterCellProps = CommonProps & TdHTMLAttributes<HTMLTableCellElement> & {
+	import { EuiTableSharedWidthProps, EuiTableStickyCellOptions } from '@elastic/eui/src/components/table/types';
+	export type EuiTableFooterCellProps = CommonProps & Omit<TdHTMLAttributes<HTMLTableCellElement>, 'width'> & EuiTableSharedWidthProps & {
 	    align?: HorizontalAlignment;
-	    width?: string | number;
+	    /**
+	     * Whether the cell should stick to a side of the table.
+	     *
+	     * This option is not applied in the responsive cards layout - see
+	     * {@link EuiTableProps#responsiveBreakpoint|`responsiveBreakpoint`}.
+	     *
+	     * Currently, it can only be used when the cell is in the first or the last
+	     * column of a table.
+	     *
+	     * When set to `true` and `hasBackground: false` is set on the table,
+	     * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+	     * the background color of the element containing the table.
+	     * Otherwise, the sticky cell will use the default `backgroundBasePlain`
+	     * background color.
+	     * @internal
+	     * @beta
+	     * @default false
+	     */
+	    sticky?: EuiTableStickyCellOptions;
 	};
 	export const EuiTableFooterCell: FunctionComponent<EuiTableFooterCellProps>;
 
@@ -11687,9 +11816,35 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     */
 	    dataType?: EuiTableDataType;
 	    /**
-	     * A CSS width property. Hints for the required width of the column (e.g. "30%", "100px", etc..)
+	     * Requested width of the column.
+	     *
+	     * Exact width settings are not guaranteed in certain table layouts
+	     * or configurations, and may be adjusted by browser's algorithm.
+	     * Consider this value a guidance.
+	     *
+	     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/table-layout#values|table-layout algorithms on MDN}
 	     */
 	    width?: string;
+	    /**
+	     * Requested minimum width of the column.
+	     *
+	     * Exact width settings are not guaranteed in certain table layouts
+	     * or configurations, and may be adjusted by browser's algorithm.
+	     * Consider this value a guidance.
+	     *
+	     * This property takes effect only when `tableLayout="auto"` is set on the table.
+	     */
+	    minWidth?: string;
+	    /**
+	     * Requested maximum width of the column.
+	     *
+	     * Exact width settings are not guaranteed in certain table layouts
+	     * or configurations, and may be adjusted by browser's algorithm.
+	     * Consider this value a guidance.
+	     *
+	     * This property takes effect only when `tableLayout="auto"` is set on the table.
+	     */
+	    maxWidth?: string;
 	    /**
 	     * Defines whether the user can sort on this column. If a function is provided, this function returns the value to sort against
 	     */
@@ -11758,7 +11913,7 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     * If provided, allows this column to be sorted on. Must return the value to sort against.
 	     */
 	    sortable?: (item: T) => Primitive;
-	} & Pick<EuiTableFieldDataColumnType<T>, 'readOnly' | 'description' | 'width' | 'align' | 'truncateText' | 'isExpander'>;
+	} & Pick<EuiTableFieldDataColumnType<T>, 'readOnly' | 'description' | 'width' | 'minWidth' | 'maxWidth' | 'align' | 'truncateText' | 'isExpander'>;
 	export type EuiTableActionsColumnType<T extends object> = {
 	    /**
 	     * An array of one of the objects: {@link DefaultItemAction} or {@link CustomItemAction}
@@ -11772,7 +11927,26 @@ declare module '@elastic/eui/src/components/basic_table/table_types' {
 	     * Allows configuring an icon with a tooltip, to be displayed next to the name
 	     */
 	    nameTooltip?: EuiTableColumnNameTooltipProps;
-	} & Pick<EuiTableFieldDataColumnType<T>, 'description' | 'width'>;
+	    /**
+	     * Whether the actions column should always stick to the right side
+	     * of the table no matter the inline (horizontal) scroll position.
+	     *
+	     * This option should be used in tables with `scrollableInline={true}`
+	     * and will be enabled by default in future versions of EUI.
+	     *
+	     * Currently, it can only be used when the actions column is the last column
+	     * of the table.
+	     *
+	     * When set to `true` and `hasBackground: false` is set on the table,
+	     * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+	     * the background color of the element containing the table.
+	     * Otherwise, the sticky column will use the default `backgroundBasePlain`
+	     * background color.
+	     * @beta
+	     * @default false
+	     */
+	    sticky?: boolean;
+	} & Pick<EuiTableFieldDataColumnType<T>, 'description' | 'width' | 'minWidth' | 'maxWidth'>;
 	export interface EuiTableSortingType<T> {
 	    /**
 	     * Indicates the property/field to sort on
@@ -11836,15 +12010,15 @@ declare module '@elastic/eui/src/components/table/table_header_cell' {
 	import type { EuiTableRowCellMobileOptionsShape } from '@elastic/eui/src/components/table/table_row_cell';
 	import type { EuiTableColumnNameTooltipProps } from '@elastic/eui/src/components/basic_table/table_types';
 	import { HEADER_CELL_SCOPE } from '@elastic/eui/src/components/table/table_header_cell_shared';
+	import type { EuiTableSharedWidthProps, EuiTableStickyCellOptions } from '@elastic/eui/src/components/table/types';
 	export type TableHeaderCellScope = (typeof HEADER_CELL_SCOPE)[number];
-	export type EuiTableHeaderCellProps = CommonProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'scope'> & {
+	export type EuiTableHeaderCellProps = CommonProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'scope' | 'width'> & EuiTableSharedWidthProps & {
 	    align?: HorizontalAlignment;
 	    isSortAscending?: boolean;
 	    isSorted?: boolean;
 	    mobileOptions?: Pick<EuiTableRowCellMobileOptionsShape, 'only' | 'show'>;
 	    onSort?: NoArgCallback<void>;
 	    scope?: TableHeaderCellScope;
-	    width?: string | number;
 	    /** Allows adding an icon with a tooltip displayed next to the name */
 	    tooltipProps?: EuiTableColumnNameTooltipProps;
 	    description?: string;
@@ -11858,6 +12032,25 @@ declare module '@elastic/eui/src/components/table/table_header_cell' {
 	     * Used by EuiBasicTable to render hidden copy markers
 	     */
 	    append?: ReactNode;
+	    /**
+	     * Whether the cell should stick to a side of the table.
+	     *
+	     * This option is not applied in the responsive cards layout - see
+	     * {@link EuiTableProps#responsiveBreakpoint|`responsiveBreakpoint`}.
+	     *
+	     * Currently, it can only be used when the cell is in the first or the last
+	     * column of a table.
+	     *
+	     * When set to `true` and `hasBackground: false` is set on the table,
+	     * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+	     * the background color of the element containing the table.
+	     * Otherwise, the sticky cell will use the default `backgroundBasePlain`
+	     * background color.
+	     * @internal
+	     * @beta
+	     * @default false
+	     */
+	    sticky?: EuiTableStickyCellOptions;
 	};
 	export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps>;
 
@@ -11866,13 +12059,13 @@ declare module '@elastic/eui/src/components/table/table_header_cell_checkbox' {
 	import { FunctionComponent, ThHTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { HEADER_CELL_SCOPE } from '@elastic/eui/src/components/table/table_header_cell_shared';
+	import type { EuiTableSharedWidthProps } from '@elastic/eui/src/components/table/types';
 	export type EuiTableHeaderCellCheckboxScope = (typeof HEADER_CELL_SCOPE)[number];
-	export interface EuiTableHeaderCellCheckboxProps {
-	    width?: string | number;
+	export interface EuiTableHeaderCellCheckboxProps extends EuiTableSharedWidthProps {
 	    scope?: EuiTableHeaderCellCheckboxScope;
 	    append?: ReactNode;
 	}
-	export const EuiTableHeaderCellCheckbox: FunctionComponent<CommonProps & ThHTMLAttributes<HTMLTableCellElement> & EuiTableHeaderCellCheckboxProps>;
+	export const EuiTableHeaderCellCheckbox: FunctionComponent<CommonProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'width'> & EuiTableHeaderCellCheckboxProps>;
 
 }
 declare module '@elastic/eui/src/components/table/mobile/table_header_mobile.styles' {
@@ -12059,6 +12252,7 @@ declare module '@elastic/eui/src/components/table' {
 	export type { EuiTableRowCellProps } from '@elastic/eui/src/components/table/table_row_cell';
 	export { EuiTableRowCell } from '@elastic/eui/src/components/table/table_row_cell';
 	export { EuiTableRowCellCheckbox } from '@elastic/eui/src/components/table/table_row_cell_checkbox';
+	export { EUI_TABLE_CSS_CONTAINER_NAME } from '@elastic/eui/src/components/table/const';
 
 }
 declare module '@elastic/eui/src/components/flyout/manager/const' {
@@ -12116,6 +12310,7 @@ declare module '@elastic/eui/src/components/flyout/manager/types' {
 	    level: EuiFlyoutLevel;
 	    width?: number;
 	    size?: string;
+	    minWidth?: number;
 	    activityStage?: EuiFlyoutActivityStage;
 	}
 	export interface FlyoutSession {
@@ -12142,6 +12337,13 @@ declare module '@elastic/eui/src/components/flyout/manager/types' {
 	    pushPadding?: PushPaddingOffsets;
 	    currentZIndex: number;
 	    unmanagedFlyouts: string[];
+	    /** The container element that flyouts are positioned relative to (if any). */
+	    containerElement?: HTMLElement | null;
+	    /**
+	     * Reference width used for layout and resize clamping (container or viewport).
+	     * Set by the layout mode hook so flyouts use the same value for consistent clamping.
+	     */
+	    referenceWidth?: number;
 	}
 	/**
 	 * Public API surface provided through React context.
@@ -12150,12 +12352,13 @@ declare module '@elastic/eui/src/components/flyout/manager/types' {
 	export interface FlyoutManagerApi {
 	    state: EuiFlyoutManagerState;
 	    dispatch: (action: Action) => void;
-	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
+	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string, minWidth?: number) => void;
 	    closeFlyout: (flyoutId: string) => void;
 	    closeAllFlyouts: () => void;
 	    setActiveFlyout: (flyoutId: string | null) => void;
 	    setFlyoutWidth: (flyoutId: string, width: number) => void;
 	    setPushPadding: (side: 'left' | 'right', width: number) => void;
+	    setContainerElement: (element: HTMLElement | null) => void;
 	    goBack: () => void;
 	    goToFlyout: (flyoutId: string) => void;
 	    addUnmanagedFlyout: (flyoutId: string) => void;
@@ -12192,6 +12395,10 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	export const ACTION_GO_TO_FLYOUT: "eui/flyoutManager/goToFlyout";
 	/** Dispatched to set push padding offset for a side. */
 	export const ACTION_SET_PUSH_PADDING: "eui/flyoutManager/setPushPadding";
+	/** Dispatched to set the container element for container-relative flyouts. */
+	export const ACTION_SET_CONTAINER_ELEMENT: "eui/flyoutManager/setContainerElement";
+	/** Dispatched to set the reference width used for layout and resize clamping. */
+	export const ACTION_SET_REFERENCE_WIDTH: "eui/flyoutManager/setReferenceWidth";
 	export const ACTION_ADD_UNMANAGED_FLYOUT: "eui/flyoutManager/addUnmanagedFlyout";
 	export const ACTION_CLOSE_UNMANAGED_FLYOUT: "eui/flyoutManager/closeUnmanagedFlyout";
 	/**
@@ -12204,6 +12411,7 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	    title: string;
 	    level: EuiFlyoutLevel;
 	    size?: string;
+	    minWidth?: number;
 	}
 	/** Remove a flyout from manager state. Also updates the active session. */
 	export interface CloseFlyoutAction extends BaseAction {
@@ -12259,15 +12467,25 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	    type: typeof ACTION_CLOSE_UNMANAGED_FLYOUT;
 	    flyoutId: string;
 	}
+	/** Set the container element for container-relative positioning. */
+	export interface SetContainerElementAction extends BaseAction {
+	    type: typeof ACTION_SET_CONTAINER_ELEMENT;
+	    element: HTMLElement | null;
+	}
+	/** Set the reference width for layout and resize clamping. */
+	export interface SetReferenceWidthAction extends BaseAction {
+	    type: typeof ACTION_SET_REFERENCE_WIDTH;
+	    width: number;
+	}
 	/** Union of all flyout manager actions. */
-	export type Action = AddFlyoutAction | CloseFlyoutAction | CloseAllFlyoutsAction | SetActiveFlyoutAction | SetWidthAction | SetLayoutModeAction | SetActivityStageAction | GoBackAction | GoToFlyoutAction | SetPushPaddingAction | AddUnmanagedFlyoutAction | CloseUnmanagedFlyoutAction;
+	export type Action = AddFlyoutAction | CloseFlyoutAction | CloseAllFlyoutsAction | SetActiveFlyoutAction | SetWidthAction | SetLayoutModeAction | SetActivityStageAction | GoBackAction | GoToFlyoutAction | SetPushPaddingAction | AddUnmanagedFlyoutAction | CloseUnmanagedFlyoutAction | SetContainerElementAction | SetReferenceWidthAction;
 	/**
 	 * Register a flyout with the manager.
 	 * - `title` is used for the flyout menu.
 	 * - `level` determines whether the flyout is `main` or `child`.
 	 * - Optional `size` is the named EUI size (e.g. `s`, `m`, `l`).
 	 */
-	export const addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => AddFlyoutAction;
+	export const addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string, minWidth?: number) => AddFlyoutAction;
 	/** Unregister a flyout and update the session accordingly. */
 	export const closeFlyout: (flyoutId: string) => CloseFlyoutAction;
 	/** Unregister all flyouts. */
@@ -12290,6 +12508,10 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	export const addUnmanagedFlyout: (flyoutId: string) => AddUnmanagedFlyoutAction;
 	/** Unregister an unmanaged flyout */
 	export const closeUnmanagedFlyout: (flyoutId: string) => CloseUnmanagedFlyoutAction;
+	/** Set the container element for container-relative flyout positioning. */
+	export const setContainerElement: (element: HTMLElement | null) => SetContainerElementAction;
+	/** Set the reference width for layout and resize clamping. */
+	export const setReferenceWidth: (width: number) => SetReferenceWidthAction;
 	export {};
 
 }
@@ -12323,12 +12545,13 @@ declare module '@elastic/eui/src/components/flyout/manager/store' {
 	    subscribe: (listener: Listener) => () => void;
 	    subscribeToEvents: (listener: EventListener) => () => void;
 	    dispatch: (action: Action) => void;
-	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
+	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string, minWidth?: number) => void;
 	    closeFlyout: (flyoutId: string) => void;
 	    closeAllFlyouts: () => void;
 	    setActiveFlyout: (flyoutId: string | null) => void;
 	    setFlyoutWidth: (flyoutId: string, width: number) => void;
 	    setPushPadding: (side: 'left' | 'right', width: number) => void;
+	    setContainerElement: (element: HTMLElement | null) => void;
 	    goBack: () => void;
 	    goToFlyout: (flyoutId: string) => void;
 	    addUnmanagedFlyout: (flyoutId: string) => void;
@@ -12366,6 +12589,8 @@ declare module '@elastic/eui/src/components/flyout/manager/selectors' {
 	export const useCurrentChildFlyout: () => import ("@elastic/eui/src/components/flyout/manager/types").EuiManagedFlyoutState | null;
 	/** The measured width (px) of the specified flyout, or `null` if unknown. */
 	export const useFlyoutWidth: (flyoutId?: string | null) => number | undefined;
+	/** The configured minWidth (px) of the specified flyout, or `undefined` if not set. */
+	export const useFlyoutMinWidth: (flyoutId?: string | null) => number | undefined;
 	/** The configured size of the parent (main) flyout for a given child flyout ID. */
 	export const useParentFlyoutSize: (childFlyoutId: string) => string | undefined;
 	/** True if the provided `flyoutId` is the main flyout and it currently has a child. */
@@ -12415,11 +12640,16 @@ declare module '@elastic/eui/src/components/flyout/manager/layout_mode' {
 	/**
 	 * Hook to handle responsive layout mode for managed flyouts.
 	 * Decides whether to place flyouts side-by-side or stacked based on
-	 * viewport width and flyout widths/sizes.
+	 * the reference width (the reference container's width, defaulting to
+	 * document.body when not set) and flyout widths/sizes.
 	 */
 	export const useApplyFlyoutLayoutMode: () => void;
-	/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
-	export const getWidthFromSize: (size: string | number) => number;
+	/**
+	 * Convert a flyout `size` value to a pixel width.
+	 * When `referenceWidth` is provided, named sizes are calculated as a percentage
+	 * of that width (container-relative). Otherwise falls back to `window.innerWidth`.
+	 */
+	export const getWidthFromSize: (size: string | number, referenceWidth?: number) => number;
 	/** Current layout mode for managed flyouts (`side-by-side` or `stacked`). */
 	export const useFlyoutLayoutMode: () => EuiFlyoutLayoutMode;
 
@@ -12800,18 +13030,17 @@ declare module '@elastic/eui/src/components/flyout/const' {
 declare module '@elastic/eui/src/components/flyout/flyout.styles' {
 	import { EuiFlyoutSize } from '@elastic/eui/src/components/flyout/const';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const EUI_FLYOUT_CONTAINER_NAME: "euiFlyout";
 	export const FLYOUT_BREAKPOINT: "m";
 	export const euiFlyoutSlideInRight: import("@emotion/serialize").Keyframes;
 	export const euiFlyoutSlideOutRight: import("@emotion/serialize").Keyframes;
 	export const euiFlyoutSlideInLeft: import("@emotion/serialize").Keyframes;
 	export const euiFlyoutSlideOutLeft: import("@emotion/serialize").Keyframes;
+	/**
+	 * When a `container` reference element is provided, the flyout's position
+	 * and dimensions are constrained to the container's bounding rect via
+	 * inline styles computed in JS.
+	 */
 	export const euiFlyoutStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiFlyout: import("@emotion/react").SerializedStyles;
-	    s: import("@emotion/react").SerializedStyles;
-	    m: import("@emotion/react").SerializedStyles;
-	    l: import("@emotion/react").SerializedStyles;
-	    fill: import("@emotion/react").SerializedStyles;
 	    noMaxWidth: import("@emotion/react").SerializedStyles;
 	    right: import("@emotion/react").SerializedStyles;
 	    left: import("@emotion/react").SerializedStyles;
@@ -12832,11 +13061,36 @@ declare module '@elastic/eui/src/components/flyout/flyout.styles' {
 	        m: import("@emotion/react").SerializedStyles;
 	        l: import("@emotion/react").SerializedStyles;
 	    };
+	    s: import("@emotion/react").SerializedStyles;
+	    m: import("@emotion/react").SerializedStyles;
+	    l: import("@emotion/react").SerializedStyles;
+	    fill: import("@emotion/react").SerializedStyles;
+	    euiFlyout: import("@emotion/react").SerializedStyles;
 	};
+	/**
+	 * Applies a max-width constraint at the flyout breakpoint.
+	 */
 	export const maxedFlyoutWidth: (euiThemeContext: UseEuiTheme) => string;
-	export const composeFlyoutSizing: (euiThemeContext: UseEuiTheme, size: EuiFlyoutSize) => string;
 	/**
-	 * Composes all inline styles for a flyout based on its configuration
+	 * Composes the full set of named size styles (`s`, `m`, `l`, `fill`).
+	 *
+	 * Uses `%` units for widths. Media queries drive responsive breakpoints.
+	 *
+	 * When a child flyout is stacked on top of the parent, the parent flyout
+	 * size will match the child flyout size. The `s` and `m` sizes include
+	 * overrides for this stacked-child behavior.
+	 */
+	export const composeFlyoutSizing: (euiThemeContext: UseEuiTheme) => {
+	    s: import("@emotion/react").SerializedStyles;
+	    m: import("@emotion/react").SerializedStyles;
+	    l: import("@emotion/react").SerializedStyles;
+	    fill: import("@emotion/react").SerializedStyles;
+	};
+	/**
+	 * Composes all inline styles for a flyout based on its configuration.
+	 * Uses a CSS custom property (`--euiFlyoutMainWidth`) for synchronous
+	 * tracking of the main flyout width during resize drag, falling back to
+	 * the pixel value from manager state when the variable is not set.
 	 */
 	export const composeFlyoutInlineStyles: (size: EuiFlyoutSize | string | number, layoutMode: "side-by-side" | "stacked", siblingFlyoutId: string | null, siblingFlyoutWidth: number | null, maxWidth: boolean | number | string | undefined, zIndex?: number) => React.CSSProperties;
 
@@ -12995,6 +13249,10 @@ declare module '@elastic/eui/src/components/flyout/manager/activity_stage' {
 	/**
 	 * Encapsulates all activity-stage transitions and animation-driven updates
 	 * for managed flyouts.
+	 *
+	 * Performance: reads `useFlyoutManager()` once and derives isActive,
+	 * hasChild, and layoutMode inline (replaces useIsFlyoutActive,
+	 * useHasChildFlyout, useFlyoutLayoutMode hooks).
 	 */
 	export const useFlyoutActivityStage: ({ flyoutId, level, }: UseFlyoutActivityStageParams) => {
 	    activityStage: EuiFlyoutActivityStage;
@@ -13206,6 +13464,11 @@ declare module '@elastic/eui/src/components/flyout/_flyout_overlay' {
 	    maskProps: EuiFlyoutComponentProps['maskProps'];
 	    isPushed: boolean;
 	    maskZIndex: number;
+	    /**
+	     * Use 'above' to stack the flyout and mask above fixed headers (mask-level
+	     * z-index); 'below' to keep them in the flyout stacking level.
+	     */
+	    headerZindexLocation?: 'above' | 'below';
 	}
 	/**
 	 * Light wrapper for conditionally rendering portals or overlay masks:
@@ -13215,7 +13478,7 @@ declare module '@elastic/eui/src/components/flyout/_flyout_overlay' {
 	 *
 	 * @internal
 	 */
-	export const EuiFlyoutOverlay: ({ children, isPushed, maskProps, hasOverlayMask, maskZIndex, }: EuiFlyoutOverlayProps) => React.JSX.Element;
+	export const EuiFlyoutOverlay: ({ children, isPushed, maskProps, hasOverlayMask, maskZIndex, headerZindexLocation, }: EuiFlyoutOverlayProps) => React.JSX.Element;
 
 }
 declare module '@elastic/eui/src/components/resizable_container/types' {
@@ -13929,12 +14192,14 @@ declare module '@elastic/eui/src/components/flyout/use_flyout_resizable' {
 	    enabled: boolean;
 	    minWidth?: number;
 	    maxWidth: number | undefined;
+	    siblingFlyoutWidth?: number | null;
+	    referenceWidth?: number;
 	    size: string | number;
 	};
 	/**
 	 * @internal
 	 */
-	export const useEuiFlyoutResizable: ({ enabled, minWidth, maxWidth, onResize, side, size: _size, }: UseEuiFlyoutResizable) => {
+	export const useEuiFlyoutResizable: ({ enabled, minWidth, maxWidth, siblingFlyoutWidth, referenceWidth, onResize, side, size: _size, }: UseEuiFlyoutResizable) => {
 	    onKeyDown: (e: React.KeyboardEvent) => void;
 	    onMouseDown: (e: React.MouseEvent | React.TouchEvent) => void;
 	    setFlyoutRef: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
@@ -13944,12 +14209,12 @@ declare module '@elastic/eui/src/components/flyout/use_flyout_resizable' {
 
 }
 declare module '@elastic/eui/src/components/flyout/use_flyout_z_index' {
-	import type { EuiOverlayMaskProps } from '@elastic/eui/src/components/overlay_mask';
 	/**
 	 * @internal
 	 */
 	export interface UseEuiFlyoutZIndex {
-	    maskProps?: EuiOverlayMaskProps;
+	    /** Use 'above' to stack the flyout above fixed headers (mask-level z-index); 'below' otherwise. */
+	    headerZindexLocation?: 'above' | 'below';
 	    isPushed: boolean;
 	    managedFlyoutIndex: number;
 	    isChildFlyout: boolean;
@@ -13957,7 +14222,7 @@ declare module '@elastic/eui/src/components/flyout/use_flyout_z_index' {
 	/**
 	 * @internal
 	 */
-	export const useEuiFlyoutZIndex: ({ maskProps, isPushed, managedFlyoutIndex, isChildFlyout, }: UseEuiFlyoutZIndex) => {
+	export const useEuiFlyoutZIndex: ({ headerZindexLocation, isPushed, managedFlyoutIndex, isChildFlyout, }: UseEuiFlyoutZIndex) => {
 	    flyoutZIndex: number;
 	    maskZIndex: number;
 	};
@@ -14041,7 +14306,11 @@ declare module '@elastic/eui/src/components/flyout/flyout.component' {
 	     */
 	    closeButtonPosition?: 'inside' | 'outside';
 	    /**
-	     * Adjustments to the EuiOverlayMask that is added when `ownFocus = true`
+	     * Adjustments to the EuiOverlayMask that is added when `ownFocus = true`.
+	     *
+	     * @deprecated Prefer the `container` prop to scope flyouts to an
+	     * application area. `maskProps` is still honored but may be removed
+	     * in a future major version.
 	     */
 	    maskProps?: EuiOverlayMaskProps;
 	    /**
@@ -14090,6 +14359,10 @@ declare module '@elastic/eui/src/components/flyout/flyout.component' {
 	     * within fixed headers.
 	     *
 	     * Set this to `false` if you need to disable this behavior for a specific reason.
+	     *
+	     * @deprecated Prefer `includeSelectorInFocusTrap` when using the
+	     * `container` prop. `includeFixedHeadersInFocusTrap` is still honored
+	     * but may be removed in a future major version.
 	     */
 	    includeFixedHeadersInFocusTrap?: boolean;
 	    /**
@@ -14110,6 +14383,30 @@ declare module '@elastic/eui/src/components/flyout/flyout.component' {
 	     * Optional callback that fires when the flyout is resized.
 	     */
 	    onResize?: (width: number) => void;
+	    /**
+	     * Optional reference container element. When not specified or set to
+	     * `null`, the flyout uses standard viewport-relative `position: fixed`
+	     * behavior with no additional positioning styles.
+	     *
+	     * When a specific element is provided, the flyout is visually constrained
+	     * to that element's bounds (e.g. does not overlap side navigation,
+	     * toolbars). The flyout remains mounted in `document.body` with
+	     * `position: fixed`; the container's bounding rect is read (via
+	     * `ResizeObserver` and window scroll/resize listeners) to compute inline
+	     * positioning styles that pin the flyout inside the container. No DOM
+	     * mutations are applied to the container except push-mode padding.
+	     *
+	     * Resize clamping and responsive breakpoints use the container's width
+	     * when provided, or the viewport width otherwise.
+	     *
+	     * Can be set globally via `EuiProvider` component defaults so all
+	     * flyouts are scoped to the application container by default. Individual
+	     * flyouts can override with `container={null}` to force viewport mode.
+	     *
+	     * A getter function `() => HTMLElement | null` or a CSS selector string
+	     * (e.g. `'#app-main'`) can also be passed.
+	     */
+	    container?: HTMLElement | null | (() => HTMLElement | null) | string;
 	}
 	type Props<T extends ElementType> = CommonProps & {
 	    /**
@@ -14269,16 +14566,16 @@ declare module '@elastic/eui/src/components/provider/component_defaults/componen
 	     */
 	    EuiTablePagination?: Pick<EuiTablePaginationProps, 'itemsPerPage' | 'itemsPerPageOptions' | 'showPerPageOptions'>;
 	    /**
-	     * Provide a global configuration for EuiTable's `responsiveBreakpoint` prop. Defaults to `'s'`.
+	     * Provide a global configuration for EuiTable's.
 	     *
 	     * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
 	     */
-	    EuiTable?: Pick<EuiTableProps, 'responsiveBreakpoint'>;
+	    EuiTable?: Pick<EuiTableProps, 'responsiveBreakpoint' | 'scrollableInline' | 'tableLayout'>;
 	    /**
 	     * Provide a global configuration for `EuiFlyout`s.
 	     * Defaults will be inherited by all `EuiFlyout`s.
 	     */
-	    EuiFlyout?: Pick<EuiFlyoutProps, 'includeSelectorInFocusTrap' | 'includeFixedHeadersInFocusTrap'>;
+	    EuiFlyout?: Pick<EuiFlyoutProps, 'includeSelectorInFocusTrap' | 'includeFixedHeadersInFocusTrap' | 'container'>;
 	    /**
 	     * Provide a global configuration for `EuiPopover`s.
 	     * Defaults will be inherited by every `EuiPopover`.
@@ -16934,69 +17231,57 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	export const euiBadgeColors: (euiThemeContext: UseEuiTheme) => {
 	    fill: {
 	        primary: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        neutral: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        success: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        warning: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        risk: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        danger: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        accent: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        default: {
+	            backgroundHover: string;
+	            backgroundActive: string;
 	            borderColor: string;
 	            backgroundColor: string;
 	            color: string;
@@ -17004,69 +17289,57 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	    };
 	    base: {
 	        primary: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        neutral: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        success: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        warning: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        risk: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        danger: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        accent: {
-	            border: string;
-	            color: string;
-	            backgroundColor: string;
-	        } | {
-	            border?: undefined;
 	            color: string;
 	            backgroundColor: string;
+	            borderColor: string;
+	            backgroundHover: string;
+	            backgroundActive: string;
 	        };
 	        default: {
+	            backgroundHover: string;
+	            backgroundActive: string;
 	            borderColor: string;
 	            backgroundColor: string;
 	            color: string;
@@ -17074,16 +17347,14 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	    };
 	    disabled: {
 	        borderColor: string;
-	        border: string;
-	        color: string;
-	        backgroundColor: string;
-	    } | {
-	        borderColor: string;
-	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
+	        backgroundHover: string;
+	        backgroundActive: string;
 	    };
 	    hollow: {
+	        backgroundHover: string;
+	        backgroundActive: string;
 	        borderColor: string;
 	        backgroundColor: string;
 	        color: string;
@@ -17104,6 +17375,15 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	    color: string;
 	};
 	export const getTextColor: ({ euiTheme }: UseEuiTheme, bgColor: string) => string;
+	/**
+	 * Generates the background hover and active colors for custom interactive badges by mixing
+	 * the background color with black or white depending on the background color luminance.
+	 * @returns { backgroundHover: string, backgroundActive: string }
+	 */
+	export const getCustomInteractiveColors: ({ euiTheme }: UseEuiTheme, bgColor: string) => {
+	    backgroundHover: string;
+	    backgroundActive: string;
+	};
 	export const getIsValidColor: (color?: string) => boolean;
 
 }
@@ -17113,7 +17393,18 @@ declare module '@elastic/eui/src/components/badge/badge.styles' {
 	export const euiBadgeStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiBadge: SerializedStyles;
 	    iconOnly: SerializedStyles;
-	    clickable: SerializedStyles;
+	    readonly clickable: {
+	        fill: SerializedStyles;
+	        base: SerializedStyles;
+	        hollow: SerializedStyles;
+	        custom: SerializedStyles;
+	    };
+	    readonly iconClickable: {
+	        fill: SerializedStyles;
+	        base: SerializedStyles;
+	        hollow: SerializedStyles;
+	        custom: SerializedStyles;
+	    };
 	    colors: {
 	        fill: {
 	            default: SerializedStyles;
@@ -27006,7 +27297,7 @@ declare module '@elastic/eui/src/components/filter_group/filter_button' {
 	     * Applies a visual state to the button.
 	     * Automatically applies `aria-pressed` when used with `isToggle={true}`.
 	     * Otherwise applies `aria-expanded` when used with `isToggle={false}` and
-	     * `iconType="arrowDown"` as trigger button for e.g. a popover.
+	     * `iconType="chevronSingleDown"` as trigger button for e.g. a popover.
 	     */
 	    isSelected?: boolean;
 	    /**
@@ -34575,7 +34866,6 @@ declare module '@elastic/eui/src/services/container_query' {
 declare module '@elastic/eui' {
   export type EuiTokensObject = {
     "euiTreeView.listNavigationInstructions": any;
-"euiIconTip.defaultAriaLabel": any;
 "euiTourStepIndicator.isActive": any;
 "euiTourStepIndicator.isComplete": any;
 "euiTourStepIndicator.isIncomplete": any;
@@ -34583,12 +34873,14 @@ declare module '@elastic/eui' {
 "euiTourFooter.endTour": any;
 "euiTourFooter.skipTour": any;
 "euiTourFooter.closeTour": any;
+"euiIconTip.defaultAriaLabel": any;
 "euiToast.newNotification": any;
 "euiToast.notification": any;
 "euiToast.dismissToast": any;
 "euiGlobalToastList.clearAllToastsButtonAriaLabel": any;
 "euiGlobalToastList.clearAllToastsButtonDisplayText": any;
 "euiTableHeaderCell.titleTextWithDesc": any;
+"euiStat.loadingText": any;
 "euiStepStrings.step": any;
 "euiStepStrings.simpleStep": any;
 "euiStepStrings.complete": any;
@@ -34605,30 +34897,29 @@ declare module '@elastic/eui' {
 "euiStepStrings.simpleLoading": any;
 "euiStepStrings.current": any;
 "euiStepStrings.simpleCurrent": any;
-"euiStat.loadingText": any;
 "euiSkeletonLoading.loadedAriaText": any;
 "euiSkeletonLoading.loadingAriaText": any;
-"euiSideNav.mobileToggleAriaLabel": any;
-"euiSearchBox.placeholder": any;
-"euiSearchBox.incrementalAriaLabel": any;
-"euiSearchBox.ariaLabel": any;
 "euiSelectable.loadingOptions": any;
 "euiSelectable.noMatchingOptions": any;
 "euiSelectable.noAvailableOptions": any;
 "euiSelectable.screenReaderInstructions": any;
 "euiSelectable.placeholderName": any;
 "euiSelectable.searchResults": any;
+"euiSideNav.mobileToggleAriaLabel": any;
+"euiSearchBox.placeholder": any;
+"euiSearchBox.incrementalAriaLabel": any;
+"euiSearchBox.ariaLabel": any;
 "euiResizablePanel.toggleButtonAriaLabel": any;
 "euiResizableButton.horizontalResizerAriaLabel": any;
 "euiResizableButton.verticalResizerAriaLabel": any;
 "euiProgress.valueText": any;
 "euiPopover.screenReaderAnnouncement": any;
-"euiPaginationButton.longPageString": any;
-"euiPaginationButton.shortPageString": any;
 "euiPaginationButtonArrow.firstPage": any;
 "euiPaginationButtonArrow.previousPage": any;
 "euiPaginationButtonArrow.nextPage": any;
 "euiPaginationButtonArrow.lastPage": any;
+"euiPaginationButton.longPageString": any;
+"euiPaginationButton.shortPageString": any;
 "euiPagination.pageOfTotalCompressed": any;
 "euiPagination.firstRangeAriaLabel": any;
 "euiPagination.lastRangeAriaLabel": any;
@@ -34637,10 +34928,10 @@ declare module '@elastic/eui' {
 "euiPagination.of": any;
 "euiPagination.collection": any;
 "euiPagination.fromEndLabel": any;
-"euiModal.screenReaderModalDialog": any;
-"euiModal.closeModal": any;
 "euiMark.highlightStart": any;
 "euiMark.highlightEnd": any;
+"euiModal.screenReaderModalDialog": any;
+"euiModal.closeModal": any;
 "euiMarkdownEditorToolbar.editor": any;
 "euiMarkdownEditorToolbar.previewMarkdown": any;
 "euiMarkdownEditorHelpButton.mdSyntaxLink": any;
@@ -34671,21 +34962,19 @@ declare module '@elastic/eui' {
 "euiFlyoutMenu.back": any;
 "euiFlyoutMenu.history": any;
 "euiFlyout.screenReaderModalDialog": any;
-"euiFlyout.screenReaderNonModalDialog": any;
+"euiFlyout.screenReaderNoOverlayMaskDialog": any;
 "euiFlyout.screenReaderFocusTrapShards": any;
 "euiFlyoutCloseButton.ariaLabel": any;
 "euiErrorBoundary.error": any;
 "euiDataGrid.ariaLabel": any;
 "euiDataGrid.ariaLabelledBy": any;
 "euiDataGrid.screenReaderNotice": any;
-"euiComboBox.listboxAriaLabel": any;
-"euiCollapsibleNavBeta.ariaLabel": any;
-"euiSaturation.ariaLabel": any;
-"euiSaturation.roleDescription": any;
-"euiSaturation.screenReaderInstructions": any;
 "euiHue.ariaValueText": any;
 "euiHue.ariaRoleDescription": any;
 "euiHue.label": any;
+"euiSaturation.ariaLabel": any;
+"euiSaturation.roleDescription": any;
+"euiSaturation.screenReaderInstructions": any;
 "euiColorPickerSwatch.ariaLabel": any;
 "euiColorPicker.popoverLabel": any;
 "euiColorPicker.colorLabel": any;
@@ -34695,13 +34984,15 @@ declare module '@elastic/eui' {
 "euiColorPicker.alphaLabel": any;
 "euiColorPicker.openLabel": any;
 "euiColorPicker.closeLabel": any;
-"euiCallOut.dismissAriaLabel": any;
+"euiCollapsibleNavBeta.ariaLabel": any;
+"euiComboBox.listboxAriaLabel": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;
 "euiCodeBlockFullScreen.ariaLabel": any;
-"euiCodeBlockCopy.copy": any;
 "euiCodeBlockAnnotations.ariaLabel": any;
+"euiCodeBlockCopy.copy": any;
 "euiCodeBlock.label": any;
+"euiCallOut.dismissAriaLabel": any;
 "euiBreadcrumbs.nav.ariaLabel": any;
 "euiBreadcrumb.collapsedBadge.ariaLabel": any;
 "euiBreadcrumb.popoverAriaLabel": any;
@@ -34725,7 +35016,6 @@ declare module '@elastic/eui' {
 "euiTablePagination.rowsPerPageOptionShowAllRows": any;
 "euiTablePagination.rowsPerPageOption": any;
 "euiTableSortMobile.sorting": any;
-"euiFieldValueSelectionFilter.buttonLabelHint": any;
 "euiSelectableTemplateSitewide.searchPlaceholder": any;
 "euiSelectableTemplateSitewide.loadingResults": any;
 "euiSelectableTemplateSitewide.noResults": any;
@@ -34739,6 +35029,7 @@ declare module '@elastic/eui' {
 "euiSelectableListItem.mixedOptionInstructions": any;
 "euiSelectableListItem.mixedOptionUncheckInstructions": any;
 "euiSelectableListItem.mixedOptionExcludeInstructions": any;
+"euiFieldValueSelectionFilter.buttonLabelHint": any;
 "euiPinnableListGroup.pinExtraActionLabel": any;
 "euiPinnableListGroup.pinnedExtraActionLabel": any;
 "euiHeaderLinks.appNavigation": any;
@@ -34757,15 +35048,6 @@ declare module '@elastic/eui' {
 "euiFieldPassword.showPassword": any;
 "euiFieldPassword.maskPassword": any;
 "euiFlyoutManaged.defaultTitle": any;
-"euiRefreshInterval.fullDescriptionOff": any;
-"euiRefreshInterval.fullDescriptionOn": any;
-"euiRefreshInterval.toggleLabel": any;
-"euiRefreshInterval.toggleAriaLabel": any;
-"euiRefreshInterval.valueAriaLabel": any;
-"euiRefreshInterval.unitsAriaLabel": any;
-"euiAutoRefresh.autoRefreshLabel": any;
-"euiAutoRefresh.buttonLabelOff": any;
-"euiAutoRefresh.buttonLabelOn": any;
 "euiTimeWindowButtons.previousDescription": any;
 "euiTimeWindowButtons.nextDescription": any;
 "euiTimeWindowButtons.invalidShiftLabel": any;
@@ -34852,6 +35134,15 @@ declare module '@elastic/eui' {
 "euiPrettyDuration.now": any;
 "euiPrettyDuration.invalid": any;
 "euiPrettyDuration.fallbackDuration": any;
+"euiRefreshInterval.fullDescriptionOff": any;
+"euiRefreshInterval.fullDescriptionOn": any;
+"euiRefreshInterval.toggleLabel": any;
+"euiRefreshInterval.toggleAriaLabel": any;
+"euiRefreshInterval.valueAriaLabel": any;
+"euiRefreshInterval.unitsAriaLabel": any;
+"euiAutoRefresh.autoRefreshLabel": any;
+"euiAutoRefresh.buttonLabelOff": any;
+"euiAutoRefresh.buttonLabelOn": any;
 "euiDataGridSchema.booleanSortTextAsc": any;
 "euiDataGridSchema.booleanSortTextDesc": any;
 "euiDataGridSchema.currencySortTextAsc": any;
@@ -34890,6 +35181,7 @@ declare module '@elastic/eui' {
 "euiKeyboardShortcuts.escapeDescription": any;
 "euiFullscreenSelector.fullscreenButton": any;
 "euiFullscreenSelector.fullscreenButtonActive": any;
+"euiDataGridToolbarControl.badgeAriaLabel": any;
 "euiDisplaySelector.densityLabel": any;
 "euiDisplaySelector.labelCompact": any;
 "euiDisplaySelector.labelNormal": any;
@@ -34900,13 +35192,6 @@ declare module '@elastic/eui' {
 "euiDisplaySelector.labelMax": any;
 "euiDisplaySelector.buttonText": any;
 "euiDisplaySelector.resetButtonText": any;
-"euiDataGridToolbarControl.badgeAriaLabel": any;
-"euiColumnSortingDraggable.defaultSortAsc": any;
-"euiColumnSortingDraggable.defaultSortDesc": any;
-"euiColumnSortingDraggable.dragHandleAriaLabel": any;
-"euiColumnSortingDraggable.activeSortLabel": any;
-"euiColumnSortingDraggable.removeSortLabel": any;
-"euiColumnSortingDraggable.toggleLegend": any;
 "euiColumnSorting.button": any;
 "euiColumnSorting.sortFieldAriaLabel": any;
 "euiColumnSorting.emptySorting": any;
@@ -34918,6 +35203,19 @@ declare module '@elastic/eui' {
 "euiColumnSelector.searchcolumns": any;
 "euiColumnSelector.selectAll": any;
 "euiColumnSelector.hideAll": any;
+"euiColumnSortingDraggable.defaultSortAsc": any;
+"euiColumnSortingDraggable.defaultSortDesc": any;
+"euiColumnSortingDraggable.dragHandleAriaLabel": any;
+"euiColumnSortingDraggable.activeSortLabel": any;
+"euiColumnSortingDraggable.removeSortLabel": any;
+"euiColumnSortingDraggable.toggleLegend": any;
+"euiCollapsibleNavButton.ariaLabelExpand": any;
+"euiCollapsibleNavButton.ariaLabelCollapse": any;
+"euiCollapsibleNavButton.ariaLabelOpen": any;
+"euiCollapsibleNavButton.ariaLabelClose": any;
+"euiCollapsibleNavKibanaSolution.switcherTitle": any;
+"euiCollapsibleNavKibanaSolution.switcherAriaLabel": any;
+"euiCollapsibleNavKibanaSolution.groupLabel": any;
 "euiComboBoxOptionsList.loadingOptions": any;
 "euiComboBoxOptionsList.delimiterMessage": any;
 "euiComboBoxOptionsList.alreadyAdded": any;
@@ -34926,13 +35224,6 @@ declare module '@elastic/eui' {
 "euiComboBoxOptionsList.noAvailableOptions": any;
 "euiComboBoxOptionsList.allOptionsSelected": any;
 "euiComboBoxPill.removeSelection": any;
-"euiCollapsibleNavButton.ariaLabelExpand": any;
-"euiCollapsibleNavButton.ariaLabelCollapse": any;
-"euiCollapsibleNavButton.ariaLabelOpen": any;
-"euiCollapsibleNavButton.ariaLabelClose": any;
-"euiCollapsibleNavKibanaSolution.switcherTitle": any;
-"euiCollapsibleNavKibanaSolution.switcherAriaLabel": any;
-"euiCollapsibleNavKibanaSolution.groupLabel": any;
 "euiCardSelect.selected": any;
 "euiCardSelect.unavailable": any;
 "euiCardSelect.select": any;
@@ -34961,10 +35252,10 @@ declare module '@elastic/eui' {
 "euiDatePopoverContent.nowTabContent": any;
 "euiDatePopoverContent.nowTabButtonStart": any;
 "euiDatePopoverContent.nowTabButtonEnd": any;
-"euiDatePopoverButton.invalidTitle": any;
-"euiDatePopoverButton.outdatedTitle": any;
 "euiAbsoluteTab.dateFormatButtonLabel": any;
 "euiAbsoluteTab.dateFormatError": any;
+"euiDatePopoverButton.invalidTitle": any;
+"euiDatePopoverButton.outdatedTitle": any;
 "euiDataGridHeaderCell.sortedByAscendingSingle": any;
 "euiDataGridHeaderCell.sortedByDescendingSingle": any;
 "euiDataGridHeaderCell.sortedByAscendingFirst": any;