@elastic/eui 101.4.0-amsterdam.0 → 102.0.0-amsterdam.0

package/es/themes/amsterdam/global_styling/variables/_colors_vis.js

@@ -103,21 +103,6 @@ export var colorVis = {
   euiColorVisDanger0: '#CC5642',
   euiColorVisDanger1: euiPaletteColorBlind.euiColorVis9.graphic,
   euiColorVisNeutral0: '#FFFFFF',
-  euiColorSeverity0: '#D3DAE6',
-  euiColorSeverity1: '#6092C0',
-  euiColorSeverity2: '#78A2C9',
-  euiColorSeverity3: '#90B0D1',
-  euiColorSeverity4: '#A6C0DA',
-  euiColorSeverity5: '#BECFE3',
-  euiColorSeverity6: '#DECC79',
-  euiColorSeverity7: '#D6BF57',
-  euiColorSeverity8: '#E69D8F',
-  euiColorSeverity9: '#E2907F',
-  euiColorSeverity10: '#E18773',
-  euiColorSeverity11: '#DD7B67',
-  euiColorSeverity12: '#D66E5C',
-  euiColorSeverity13: '#D2634E',
-  euiColorSeverity14: '#CC5642',
   euiColorVisGrey0: '#d3dae6',
   euiColorVisGrey1: '#98a2b3',
   euiColorVisGrey2: '#69707d',

package/eui.d.ts

@@ -641,7 +641,7 @@ declare module '@elastic/eui/src/services/color/eui_palettes_hooks' {
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	import { SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "highlighted", "accent", "accentSecondary", "primary", "success", "warning", "danger"];
+	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "highlighted", "accent", "accentSecondary", "primary", "neutral", "success", "warning", "risk", "danger"];
 	export type _EuiBackgroundColor = (typeof BACKGROUND_COLORS)[number];
 	export interface _EuiBackgroundColorOptions {
 	    /**
@@ -664,7 +664,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	 * @returns An object map of color keys to CSS,
 	 * e.g. { danger: css``, success: css``, ... }
 	 */
-	export const useEuiBackgroundColorCSS: () => Record<"primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "transparent" | "plain" | "subdued" | "highlighted", SerializedStyles>;
+	export const useEuiBackgroundColorCSS: () => Record<"primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "neutral" | "risk" | "transparent" | "plain" | "subdued" | "highlighted", SerializedStyles>;
 	/**
 	 * Border colors
 	 * @deprecated - use border tokens directly or use
@@ -676,7 +676,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	 * @returns An object map of color keys to CSS,
 	 * e.g. { danger: css``, success: css``, ... }
 	 */
-	export const useEuiBorderColorCSS: () => Record<"primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "transparent" | "plain" | "subdued" | "highlighted", SerializedStyles>;
+	export const useEuiBorderColorCSS: () => Record<"primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "neutral" | "risk" | "transparent" | "plain" | "subdued" | "highlighted", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/global_styling/functions/high_contrast' {
@@ -724,7 +724,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    horizontal: string;
 	    vertical: string;
 	};
-	export const LOGICAL_SIDES: ("left" | "right" | "bottom" | "top" | "horizontal" | "vertical")[];
+	export const LOGICAL_SIDES: ("left" | "right" | "top" | "bottom" | "horizontal" | "vertical")[];
 	export type LogicalSides = (typeof LOGICAL_SIDES)[number];
 	export const logicals: {
 	    height: string;
@@ -783,7 +783,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    "border-bottom-right-radius": string;
 	    _shorthands: string[];
 	};
-	export const LOGICAL_PROPERTIES: ("left" | "right" | "width" | "bottom" | "height" | "top" | "horizontal" | "vertical" | "max-height" | "max-width" | "min-height" | "min-width" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
+	export const LOGICAL_PROPERTIES: ("left" | "right" | "width" | "top" | "bottom" | "horizontal" | "vertical" | "height" | "max-height" | "max-width" | "min-height" | "min-width" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
 	export type LogicalProperties = (typeof LOGICAL_PROPERTIES)[number];
 	/**
 	 *
@@ -1024,7 +1024,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	 */
 	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingSize: (size: EuiPaddingSize) => string;
-	export const useEuiPaddingCSS: (side?: "left" | "right" | "bottom" | "top" | "horizontal" | "vertical" | undefined) => Record<"s" | "none" | "xs" | "m" | "l" | "xl", SerializedStyles>;
+	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | undefined) => Record<"s" | "none" | "xs" | "m" | "l" | "xl", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_states' {
@@ -1162,7 +1162,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
 declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	import { type SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const BUTTON_COLORS: readonly ["text", "accent", "accentSecondary", "primary", "success", "warning", "danger"];
+	export const BUTTON_COLORS: readonly ["text", "accent", "accentSecondary", "primary", "neutral", "success", "warning", "risk", "danger"];
 	export type _EuiButtonColor = (typeof BUTTON_COLORS)[number];
 	export const BUTTON_DISPLAYS: readonly ["base", "fill", "empty"];
 	export type _EuiButtonDisplay = (typeof BUTTON_DISPLAYS)[number];
@@ -1214,7 +1214,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	 * @param options Button display type
 	 * @returns An object of `_EuiButtonColor` keys including `disabled`
 	 */
-	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled", SerializedStyles>;
+	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled" | "neutral" | "risk", SerializedStyles>;
 	/**
 	 * Creates the translate animation when button is in focus.
 	 * @returns string
@@ -2828,7 +2828,7 @@ declare module '@elastic/eui/src/services/react' {
 
 }
 declare module '@elastic/eui/src/components/icon/named_colors' {
-	export const COLORS: readonly ["default", "primary", "success", "accent", "accentSecondary", "warning", "danger", "text", "subdued", "ghost", "inherit"];
+	export const COLORS: readonly ["default", "primary", "neutral", "success", "accent", "accentSecondary", "warning", "risk", "danger", "text", "subdued", "ghost", "inherit"];
 	export type NamedColor = (typeof COLORS)[number];
 	export function isNamedColor(name: string): boolean;
 
@@ -2838,15 +2838,17 @@ declare module '@elastic/eui/src/components/icon/icon.styles' {
 	export const iconLoadingOpacity = 0.05;
 	export const euiIconStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiIcon: import("@emotion/react").SerializedStyles;
+	    primary: import("@emotion/react").SerializedStyles;
 	    accent: import("@emotion/react").SerializedStyles;
 	    accentSecondary: import("@emotion/react").SerializedStyles;
-	    danger: import("@emotion/react").SerializedStyles;
 	    ghost: import("@emotion/react").SerializedStyles;
-	    primary: import("@emotion/react").SerializedStyles;
-	    success: import("@emotion/react").SerializedStyles;
 	    subdued: import("@emotion/react").SerializedStyles;
 	    text: import("@emotion/react").SerializedStyles;
+	    neutral: import("@emotion/react").SerializedStyles;
+	    success: import("@emotion/react").SerializedStyles;
 	    warning: import("@emotion/react").SerializedStyles;
+	    risk: import("@emotion/react").SerializedStyles;
+	    danger: import("@emotion/react").SerializedStyles;
 	    inherit: import("@emotion/react").SerializedStyles;
 	    default: import("@emotion/react").SerializedStyles;
 	    customColor: import("@emotion/react").SerializedStyles;
@@ -3675,7 +3677,7 @@ declare module '@elastic/eui/src/components/button/button' {
 	import { CommonProps, ExclusiveUnion, PropsForAnchor, PropsForButton } from '@elastic/eui/src/components/common';
 	import { _EuiButtonColor } from '@elastic/eui/src/global_styling/mixins/_button';
 	import { EuiButtonDisplayCommonProps } from '@elastic/eui/src/components/button/button_display/_button_display';
-	export const COLORS: readonly ["text", "accent", "accentSecondary", "primary", "success", "warning", "danger"];
+	export const COLORS: readonly ["text", "accent", "accentSecondary", "primary", "neutral", "success", "warning", "risk", "danger"];
 	export type EuiButtonColor = _EuiButtonColor;
 	export const SIZES: readonly ["s", "m"];
 	export type EuiButtonSize = (typeof SIZES)[number];
@@ -3797,7 +3799,7 @@ declare module '@elastic/eui/src/components/button/button_icon/button_icon.style
 	    s: SerializedStyles;
 	    m: SerializedStyles;
 	};
-	export const _emptyHoverStyles: (euiThemeContext: UseEuiTheme) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger", SerializedStyles>;
+	export const _emptyHoverStyles: (euiThemeContext: UseEuiTheme) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "neutral" | "risk", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/components/button/button_icon/button_icon' {
@@ -4000,7 +4002,7 @@ declare module '@elastic/eui/src/components/button/button_group/button_group_but
 	        euiButtonGroupButton__iconOnly: SerializedStyles;
 	    };
 	};
-	export const _compressedButtonFocusColors: (euiThemeContext: UseEuiTheme) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled", SerializedStyles>;
+	export const _compressedButtonFocusColors: (euiThemeContext: UseEuiTheme) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled" | "neutral" | "risk", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/components/button/button_group/button_group_button' {
@@ -5690,7 +5692,7 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	export type PanelPaddingSize = (typeof _SIZES)[number];
 	export const BORDER_RADII: readonly ["none", "m"];
 	export type PanelBorderRadius = (typeof BORDER_RADII)[number];
-	export const COLORS: readonly ["transparent", "plain", "subdued", "highlighted", "accent", "accentSecondary", "primary", "success", "warning", "danger"];
+	export const COLORS: readonly ["transparent", "plain", "subdued", "highlighted", "accent", "accentSecondary", "primary", "neutral", "success", "warning", "risk", "danger"];
 	export type PanelColor = _EuiBackgroundColor | 'highlighted';
 	export interface _EuiPanelProps extends CommonProps {
 	    /**
@@ -6948,6 +6950,21 @@ declare module '@elastic/eui/src/services/color/manipulation' {
 	 */
 	export const brighten: (color: string, amount: number) => string;
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_colors_severity' {
+	/**
+	 * These are not actually used, but we map them to ensure token parity.
+	 * They are mapped to other vis colors
+	 */
+	export const severityColors: {
+	    unknown: string;
+	    neutral: string;
+	    success: string;
+	    warning: string;
+	    risk: string;
+	    danger: string;
+	};
+
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_colors' {
 	import { _EuiThemeColors, _EuiThemeBrandColors, _EuiThemeBrandTextColors, _EuiThemeShadeColors, _EuiThemeSpecialColors, _EuiThemeTextColors, _EuiThemeColorsMode, _EuiThemeBackgroundColors, _EuiThemeBorderColors, _EuiThemeTransparentBackgroundColors } from '@elastic/eui-theme-common';
@@ -8108,6 +8125,15 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	        color: string;
 	        backgroundColor: string;
 	    };
+	    neutral: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
+	        color: string;
+	        backgroundColor: string;
+	    };
 	    success: {
 	        border: string;
 	        color: string;
@@ -8126,6 +8152,15 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	        color: string;
 	        backgroundColor: string;
 	    };
+	    risk: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
+	        color: string;
+	        backgroundColor: string;
+	    };
 	    danger: {
 	        border: string;
 	        color: string;
@@ -8207,9 +8242,11 @@ declare module '@elastic/eui/src/components/badge/badge.styles' {
 	    hollow: import("@emotion/react").SerializedStyles;
 	    primary: import("@emotion/react").SerializedStyles;
 	    accent: import("@emotion/react").SerializedStyles;
+	    neutral: import("@emotion/react").SerializedStyles;
+	    success: import("@emotion/react").SerializedStyles;
 	    warning: import("@emotion/react").SerializedStyles;
+	    risk: import("@emotion/react").SerializedStyles;
 	    danger: import("@emotion/react").SerializedStyles;
-	    success: import("@emotion/react").SerializedStyles;
 	    disabled: import("@emotion/react").SerializedStyles;
 	    euiBadge__content: import("@emotion/react").SerializedStyles;
 	    text: {
@@ -8235,7 +8272,7 @@ declare module '@elastic/eui/src/components/badge/badge' {
 	import { CommonProps, ExclusiveUnion, PropsOf } from '@elastic/eui/src/components/common';
 	import { EuiIcon, IconType } from '@elastic/eui/src/components/icon';
 	export const ICON_SIDES: readonly ["left", "right"]; type IconSide = (typeof ICON_SIDES)[number];
-	export const COLORS: readonly ["default", "hollow", "primary", "success", "accent", "warning", "danger"]; type BadgeColor = (typeof COLORS)[number]; type WithButtonProps = {
+	export const COLORS: readonly ["default", "hollow", "primary", "accent", "neutral", "success", "warning", "risk", "danger"]; type BadgeColor = (typeof COLORS)[number]; type WithButtonProps = {
 	    /**
 	     * Will apply an onclick to the badge itself
 	     */
@@ -16186,10 +16223,9 @@ declare module '@elastic/eui/src/components/datagrid/body/header/column_sorting'
 	/**
 	 * Column sorting utility helpers
 	 */
-	export const useColumnSorting: ({ sorting, id, hasColumnActions, }: {
+	export const useColumnSorting: ({ sorting, id, }: {
 	    sorting?: EuiDataGridSorting | undefined;
 	    id: string;
-	    hasColumnActions: boolean;
 	}) => {
 	    sortingArrow: React.JSX.Element | null;
 	    ariaSort: "ascending" | "descending" | undefined;
@@ -18627,8 +18663,10 @@ declare module '@elastic/eui/src/components/empty_prompt/empty_prompt.styles' {
 	        accent: import("@emotion/react").SerializedStyles;
 	        accentSecondary: import("@emotion/react").SerializedStyles;
 	        danger: import("@emotion/react").SerializedStyles;
+	        risk: import("@emotion/react").SerializedStyles;
 	        warning: import("@emotion/react").SerializedStyles;
 	        success: import("@emotion/react").SerializedStyles;
+	        neutral: import("@emotion/react").SerializedStyles;
 	    };
 	};
 

package/lib/components/badge/badge.js

@@ -41,7 +41,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var ICON_SIDES = exports.ICON_SIDES = ['left', 'right'];
-var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'accent', 'neutral', 'success', 'warning', 'risk', 'danger'];
 var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

package/lib/components/badge/badge.styles.js

@@ -42,9 +42,11 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
+    neutral: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.neutral), ";label:neutral;"),
+    success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
     warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
+    risk: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.risk), ";label:risk;"),
     danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
-    success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
     disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(

package/lib/components/badge/color_utils.js

@@ -34,8 +34,10 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
   return {
     // Colors shared between buttons and badges
     primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
+    neutral: (0, _button.euiButtonFillColor)(euiThemeContext, 'neutral'),
     success: (0, _button.euiButtonFillColor)(euiThemeContext, 'success'),
     warning: (0, _button.euiButtonFillColor)(euiThemeContext, 'warning'),
+    risk: (0, _button.euiButtonFillColor)(euiThemeContext, 'risk'),
     danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
     accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
     accentSecondary: (0, _button.euiButtonFillColor)(euiThemeContext, 'accentSecondary'),

package/lib/components/datagrid/body/header/column_sorting.js

@@ -29,8 +29,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref) {
   var _sorting$columns;
   var sorting = _ref.sorting,
-    id = _ref.id,
-    hasColumnActions = _ref.hasColumnActions;
+    id = _ref.id;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -52,26 +51,28 @@ var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref
   }, [id, isColumnSorted, sortedColumn]);
 
   /**
-   * aria-sort attribute - should only be used when a single column is being sorted
+   * `aria-sort` attribute - should only be used when a single column is being sorted
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
    * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
-  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+  var hasAriaSortOnly = isColumnSorted && hasOnlyOneSort;
+  var ariaSort = hasAriaSortOnly ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
 
-  // aria-describedby ID for when aria-sort isn't sufficient
+  /**
+   * `aria-describedby` ID for when `aria-sort` cannot be used
+   */
   var sortingAriaId = (0, _services.useGeneratedHtmlId)({
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
 
   /**
-   * Sorting status - screen reader text
+   * Screen-reader-only sorting status, an alternative to `aria-sort` for multi-column sorting
    */
   var sortingScreenReaderText = (0, _react.useMemo)(function () {
     var _sorting$columns2;
-    if (!isColumnSorted) return null;
-    if (!hasColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
+    if (!isColumnSorted || hasAriaSortOnly) return null;
     return (0, _react2.jsx)("p", {
       id: sortingAriaId,
       hidden: true
@@ -134,7 +135,7 @@ var useColumnSorting = exports.useColumnSorting = function useColumnSorting(_ref
         }
       }
     }), ".");
-  }, [isColumnSorted, hasColumnActions, hasOnlyOneSort, sorting, sortingAriaId]);
+  }, [isColumnSorted, hasAriaSortOnly, sortingAriaId, sorting === null || sorting === void 0 ? void 0 : sorting.columns, hasOnlyOneSort]);
   return {
     sortingArrow: sortingArrow,
     ariaSort: ariaSort,

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -73,8 +73,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var actionsButtonRef = (0, _react.useRef)(null);
   var _useColumnSorting = (0, _column_sorting.useColumnSorting)({
       sorting: sorting,
-      id: id,
-      hasColumnActions: hasColumnActions
+      id: id
     }),
     sortingArrow = _useColumnSorting.sortingArrow,
     ariaSort = _useColumnSorting.ariaSort,

package/lib/components/empty_prompt/empty_prompt.styles.js

@@ -121,8 +121,10 @@ var euiEmptyPromptStyles = exports.euiEmptyPromptStyles = function euiEmptyPromp
       accent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accent')), ";;label:accent;"),
       accentSecondary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accentSecondary')), ";;label:accentSecondary;"),
       danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      risk: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('risk')), ";;label:risk;"),
       warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('warning')), ";;label:warning;"),
-      success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('success')), ";;label:success;")
+      success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('success')), ";;label:success;"),
+      neutral: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('neutral')), ";;label:neutral;")
     }, generatePaddingStyles())
   };
 };

package/lib/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -24,6 +24,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlPadding = _euiFormVariables.controlPadding,
     controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
     controlDisabledColor = _euiFormVariables.controlDisabledColor;
@@ -31,10 +33,10 @@ var euiFormControlLayoutIconsStyles = exports.euiFormControlLayoutIconsStyles =
     euiFormControlLayoutIcons: _ref,
     uncompressed: "\n      gap: ".concat((0, _global_styling.mathWithUnits)(controlPadding, function (x) {
       return x / 2;
-    }), ";\n    "),
+    }), ";\n      max-block-size: ").concat(controlHeight, ";\n    "),
     compressed: /*#__PURE__*/(0, _react.css)("gap:", (0, _global_styling.mathWithUnits)(controlCompressedPadding, function (x) {
       return x / 2;
-    }), ";;label:compressed;"),
+    }), ";max-block-size:", controlCompressedHeight, ";;label:compressed;"),
     disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
     position: {
       absolute: {

package/lib/components/icon/icon.styles.js

@@ -39,15 +39,17 @@ var euiIconStyles = exports.euiIconStyles = function euiIconStyles(_ref3) {
     // Base
     euiIcon: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;vertical-align:middle;fill:currentColor;transform:translate(0, 0);.euiIcon__fillNegative{fill:", euiTheme.colors.darkestShade, ";};label:euiIcon;"),
     // Colors
+    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
     accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     accentSecondary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     ghost: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     text: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:text;"),
+    neutral: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textNeutral, ";;label:neutral;"),
+    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    risk: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textRisk, ";;label:risk;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     inherit: _ref2,
     default: /*#__PURE__*/(0, _react.css)(";label:default;"),
     customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;"),

package/lib/components/icon/named_colors.js

@@ -13,7 +13,7 @@ exports.isNamedColor = isNamedColor;
  * Side Public License, v 1.
  */
 
-var COLORS = exports.COLORS = ['default', 'primary', 'success', 'accent', 'accentSecondary', 'warning', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
+var COLORS = exports.COLORS = ['default', 'primary', 'neutral', 'success', 'accent', 'accentSecondary', 'warning', 'risk', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
 function isNamedColor(name) {
   return COLORS.includes(name);
 }

package/lib/global_styling/mixins/_button.js

@@ -21,7 +21,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 var BUTTON_DISPLAYS = exports.BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -52,7 +52,7 @@ var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColo
     highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = (0, _euiThemeCommon.getTokenName)('backgroundFilled', color);
   var textColorTokenName = (0, _euiThemeCommon.getTokenName)('textColorFilled', color);
-  var highContrastForeground = color === 'warning' ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
+  var highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
   var foreground = highContrastMode ? highContrastForeground : euiTheme.components.buttons[textColorTokenName];
   var background = euiTheme.components.buttons[backgroundTokenName];
   return _objectSpread({

package/lib/global_styling/mixins/_color.js

@@ -19,7 +19,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 /**
  * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency