@elastic/eui 101.1.0-classic.0 → 101.2.0-classic.0

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

@@ -38,14 +38,14 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     }), ";", (0, _global_styling.logicalTextAlignCSS)('left'), "color:var(--euiBadgeTextColor, ", badgeColors.default.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", badgeColors.default.backgroundColor, "\n      );*::selection{color:var(\n          --euiBadgeBackgroundColor,\n          ", badgeColors.default.backgroundColor, "\n        );background-color:var(\n          --euiBadgeTextColor,\n          ", badgeColors.default.color, "\n        );}&:focus-within{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
     // Colors
-    default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.default), ";label:default;"),
+    default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.default), " border-color:", badgeColors.default.borderColor, ";;label:default;"),
     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;"),
     warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     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), "*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    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)(
     // Ensure proper height in case of just displaying an icon

package/lib/components/badge/color_utils.js

@@ -28,7 +28,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
   return {
     // Colors shared between buttons and badges
     primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
@@ -37,16 +39,24 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
     danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
     accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
     accentSecondary: (0, _button.euiButtonFillColor)(euiThemeContext, 'accentSecondary'),
-    disabled: (0, _button.euiButtonColor)(euiThemeContext, 'disabled'),
+    disabled: _objectSpread(_objectSpread({}, (0, _button.euiButtonColor)(euiThemeContext, 'disabled')), {}, {
+      borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
+    }),
     // Colors unique to badges
-    default: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground),
+    default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: euiTheme.components.badgeBorderColorHollow
+      borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued),
-    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent),
+    subdued: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    }),
+    accentText: _objectSpread(_objectSpread({}, badgeColorsAccentText), {}, {
+      borderColor: highContrastMode ? badgeColorsAccentText.backgroundColor : ''
+    }),
     accentSecondaryText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccentSecondary)
   };
 };

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

@@ -21,7 +21,7 @@ var euiNotificationBadgeStyles = exports.euiNotificationBadgeStyles = function e
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   return {
     euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      forced: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
+      preferred: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
     }), " cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),

package/lib/components/basic_table/basic_table.js

@@ -1129,6 +1129,15 @@ EuiBasicTable.propTypes = {
            * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
            */
         repositionOnScroll: _propTypes.default.bool,
+        /**
+           * Disables the tooltip content being read by screen readers when focusing the trigger element.
+           * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+           * information (action & additional information).
+           * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+           * the tooltip content and would result in repetitive output.
+           * @default false
+           */
+        disableScreenReaderOutput: _propTypes.default.bool,
         /**
            * If supplied, called when mouse movement causes the tool tip to be
            * hidden.
@@ -1244,6 +1253,7 @@ EuiBasicTable.propTypes = {
         title: _propTypes.default.node,
         id: _propTypes.default.string,
         repositionOnScroll: _propTypes.default.bool,
+        disableScreenReaderOutput: _propTypes.default.bool,
         onMouseOut: _propTypes.default.func,
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
@@ -1384,6 +1394,7 @@ EuiBasicTable.propTypes = {
         title: _propTypes.default.node,
         id: _propTypes.default.string,
         repositionOnScroll: _propTypes.default.bool,
+        disableScreenReaderOutput: _propTypes.default.bool,
         onMouseOut: _propTypes.default.func,
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,

package/lib/components/basic_table/in_memory_table.js

@@ -622,6 +622,15 @@ EuiInMemoryTable.propTypes = {
            * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
            */
         repositionOnScroll: _propTypes.default.bool,
+        /**
+           * Disables the tooltip content being read by screen readers when focusing the trigger element.
+           * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+           * information (action & additional information).
+           * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+           * the tooltip content and would result in repetitive output.
+           * @default false
+           */
+        disableScreenReaderOutput: _propTypes.default.bool,
         /**
            * If supplied, called when mouse movement causes the tool tip to be
            * hidden.
@@ -737,6 +746,7 @@ EuiInMemoryTable.propTypes = {
         title: _propTypes.default.node,
         id: _propTypes.default.string,
         repositionOnScroll: _propTypes.default.bool,
+        disableScreenReaderOutput: _propTypes.default.bool,
         onMouseOut: _propTypes.default.func,
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
@@ -877,6 +887,7 @@ EuiInMemoryTable.propTypes = {
         title: _propTypes.default.node,
         id: _propTypes.default.string,
         repositionOnScroll: _propTypes.default.bool,
+        disableScreenReaderOutput: _propTypes.default.bool,
         onMouseOut: _propTypes.default.func,
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,

package/lib/components/code/code.styles.js

@@ -29,7 +29,9 @@ var euiCodeStyles = exports.euiCodeStyles = function euiCodeStyles(euiThemeConte
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background:", codeSyntaxVariables.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
+    euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background-color:", codeSyntaxVariables.backgroundColor, ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n          border: ".concat(euiTheme.border.thin, ";\n        ")
+    }), " border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
     transparentBackground: _ref
   };
 };

package/lib/components/code/code_syntax.styles.js

@@ -20,9 +20,12 @@ var euiCodeTextColors = exports.euiCodeTextColors = function euiCodeTextColors(_
   };
 };
 
-// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+/**
+ * These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+ */
 var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
     backgroundColor = _euiCodeTextColors.backgroundColor,
     color = _euiCodeTextColors.color;
@@ -52,7 +55,7 @@ var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSy
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/lib/components/color_picker/color_picker_swatch.js

@@ -12,8 +12,9 @@ var _services = require("../../services");
 var _i18n = require("../i18n");
 var _utils = require("./utils");
 var _color_picker_swatch = require("./color_picker_swatch.styles");
+var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "color", "style"];
+var _excluded = ["className", "color", "style", "toolTipProps", "showToolTip"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,9 +34,13 @@ 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 EuiColorPickerSwatch = exports.EuiColorPickerSwatch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _toolTipProps$anchorP;
   var className = _ref.className,
     color = _ref.color,
     style = _ref.style,
+    toolTipProps = _ref.toolTipProps,
+    _ref$showToolTip = _ref.showToolTip,
+    showToolTip = _ref$showToolTip === void 0 ? true : _ref$showToolTip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiColorPickerSwatch', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_color_picker_swatch.euiColorPickerSwatchStyles);
@@ -48,7 +53,7 @@ var EuiColorPickerSwatch = exports.EuiColorPickerSwatch = /*#__PURE__*/(0, _reac
   var ariaLabel = (0, _i18n.useEuiI18n)('euiColorPickerSwatch.ariaLabel', 'Select {color} as the color', {
     color: color
   });
-  return (0, _react2.jsx)("button", _extends({
+  var element = (0, _react2.jsx)("button", _extends({
     type: "button",
     css: styles.euiColorPickerSwatch,
     className: classes,
@@ -58,12 +63,89 @@ var EuiColorPickerSwatch = exports.EuiColorPickerSwatch = /*#__PURE__*/(0, _reac
       background: background
     }, style)
   }, rest));
+  return showToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
+    content: color
+  }, toolTipProps, {
+    anchorProps: _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      css: [toolTipProps === null || toolTipProps === void 0 || (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css, styles.tooltip]
+    })
+    // since the button already has a descriptive `ariaLabel` we can disable
+    // the tooltip content from being read additionally by screen readers
+    ,
+    disableScreenReaderOutput: true
+  }), element) : element;
 });
 EuiColorPickerSwatch.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  color: _propTypes.default.string
+  color: _propTypes.default.string,
+  /**
+       * renders a tooltip with the color value to provide a visual text alternative
+       * @default true
+       */
+  showToolTip: _propTypes.default.bool,
+  /** Additional props for the EuiToolip when `showToolTip={true}` */toolTipProps: _propTypes.default.shape({
+    /**
+       * Passes onto the span wrapping the trigger.
+       */
+    anchorClassName: _propTypes.default.string,
+    /**
+       * Passes onto the span wrapping the trigger.
+       */
+    anchorProps: _propTypes.default.shape({
+      className: _propTypes.default.string,
+      "aria-label": _propTypes.default.string,
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
+    }),
+    /**
+       * Passes onto the tooltip itself, not the trigger.
+       */
+    className: _propTypes.default.string,
+    /**
+       * The main content of your tooltip.
+       */
+    content: _propTypes.default.node,
+    /**
+       * Common display alternatives for the anchor wrapper
+       */
+    display: _propTypes.default.any,
+    /**
+       * An optional title for your tooltip.
+       */
+    title: _propTypes.default.node,
+    /**
+       * Unless you provide one, this will be randomly generated.
+       */
+    id: _propTypes.default.string,
+    /**
+       * When `true`, the tooltip's position is re-calculated when the user
+       * scrolls. This supports having fixed-position tooltip anchors.
+       *
+       * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: _propTypes.default.bool,
+    /**
+       * Disables the tooltip content being read by screen readers when focusing the trigger element.
+       * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+       * information (action & additional information).
+       * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+       * the tooltip content and would result in repetitive output.
+       * @default false
+       */
+    disableScreenReaderOutput: _propTypes.default.bool,
+    /**
+       * If supplied, called when mouse movement causes the tool tip to be
+       * hidden.
+       */
+    onMouseOut: _propTypes.default.func,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+    delay: _propTypes.default.any,
+    position: _propTypes.default.any
+  })
 };
 EuiColorPickerSwatch.displayName = 'EuiColorPickerSwatch';

package/lib/components/color_picker/color_picker_swatch.styles.js

@@ -8,14 +8,21 @@ var _react = require("@emotion/react");
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
-/*
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "164u3xw-tooltip",
+  styles: "display:inline-flex;label:tooltip;"
+} : {
+  name: "164u3xw-tooltip",
+  styles: "display:inline-flex;label:tooltip;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiColorPickerSwatchStyles = exports.euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -25,6 +32,7 @@ var euiColorPickerSwatchStyles = exports.euiColorPickerSwatchStyles = function e
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid\n            ").concat(euiTheme.colors.borderBaseFormsColorSwatch, ";\n          box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n            ").concat((0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";\n        "),
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       forced: (0, _high_contrast.preventForcedColors)(euiThemeContext)
-    }), " cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+    }), " cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;"),
+    tooltip: _ref
   };
 };

package/lib/components/header/header.styles.js

@@ -64,5 +64,8 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
     borderColor: euiTheme.components.headerDarkSearchBorderColor,
     placeholderColor: (0, _services.makeHighContrastColor)(controlPlaceholderText, 8)(backgroundColor)
   };
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat((0, _services.makeHighContrastColor)(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(
+  // the header is in a faux dark mode, we can't rely on color
+  // switch tokens as they'd be in the wrong color mode
+  highContrastMode ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &__append {\n        border-color: ").concat(highContrastMode ? euiTheme.colors.plainLight : '', "\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/lib/components/panel/panel.styles.js

@@ -27,7 +27,7 @@ var euiPanelBorderStyles = exports.euiPanelBorderStyles = function euiPanelBorde
    euiTheme.colors.borderBaseFloating is enough then */
   var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
   return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::before {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 1;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
+    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::after {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 0;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
 };

package/lib/components/table/table_header_cell.js

@@ -198,6 +198,15 @@ EuiTableHeaderCell.propTypes = {
          * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
          */
       repositionOnScroll: _propTypes.default.bool,
+      /**
+         * Disables the tooltip content being read by screen readers when focusing the trigger element.
+         * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+         * information (action & additional information).
+         * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+         * the tooltip content and would result in repetitive output.
+         * @default false
+         */
+      disableScreenReaderOutput: _propTypes.default.bool,
       /**
          * If supplied, called when mouse movement causes the tool tip to be
          * hidden.

package/lib/components/toast/toast.styles.js

@@ -22,7 +22,7 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var highlightStyles = function highlightStyles(color, width) {
-    return "\n    &:after {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat((0, _global_styling.logicalCSS)('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
+    return "\n    &:before {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat((0, _global_styling.logicalCSS)('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
   };
   return {
     // Base
@@ -42,11 +42,11 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
         }) : euiTheme.border.width.thick;
         return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
           none: highlightStyles(color, borderWidth),
-          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::after {\n              ").concat((0, _global_styling.logicalCSS)('width', "calc(100% + ".concat((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::before {\n              ").concat((0, _global_styling.logicalCSS)('width', "calc(100% + ".concat((0, _euiThemeCommon.mathWithUnits)(euiTheme.border.width.thin, function (x) {
             return x * 2;
           }), ")")), "\n              ").concat((0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
           // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
-          forced: "\n            overflow: hidden;\n\n            &::after {\n              content: '';\n              position: absolute;\n              ".concat((0, _global_styling.logicalCSS)('top', 0), "\n              ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n              ").concat((0, _global_styling.logicalCSS)('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
+          forced: "\n            overflow: hidden;\n\n            &::before {\n              content: '';\n              position: absolute;\n              ".concat((0, _global_styling.logicalCSS)('top', 0), "\n              ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n              ").concat((0, _global_styling.logicalCSS)('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
         });
       },
       get primary() {

package/lib/components/tool_tip/icon_tip.js

@@ -87,6 +87,15 @@ EuiIconTip.propTypes = {
      * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
      */
   repositionOnScroll: _propTypes.default.bool,
+  /**
+     * Disables the tooltip content being read by screen readers when focusing the trigger element.
+     * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+     * information (action & additional information).
+     * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+     * the tooltip content and would result in repetitive output.
+     * @default false
+     */
+  disableScreenReaderOutput: _propTypes.default.bool,
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/lib/components/tool_tip/tool_tip.js

@@ -16,7 +16,7 @@ var _tool_tip_anchor = require("./tool_tip_anchor");
 var _tool_tip_arrow = require("./tool_tip_arrow");
 var _tool_tip_manager = require("./tool_tip_manager");
 var _react3 = require("@emotion/react");
-var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll", "disableScreenReaderOutput"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -252,6 +252,8 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/function (_Component) {
         delay = _this$props.delay,
         display = _this$props.display,
         repositionOnScroll = _this$props.repositionOnScroll,
+        _this$props$disableSc = _this$props.disableScreenReaderOutput,
+        disableScreenReaderOutput = _this$props$disableSc === void 0 ? false : _this$props$disableSc,
         rest = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         arrowStyles = _this$state.arrowStyles,
@@ -267,8 +269,10 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
-        onMouseOut: this.onMouseOut,
-        id: id,
+        onMouseOut: this.onMouseOut
+        // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
+        ,
+        id: !disableScreenReaderOutput ? id : undefined,
         className: anchorClasses,
         display: display,
         isVisible: visible
@@ -298,7 +302,8 @@ var EuiToolTip = exports.EuiToolTip = /*#__PURE__*/function (_Component) {
 _defineProperty(EuiToolTip, "defaultProps", {
   position: 'top',
   delay: 'regular',
-  display: 'inlineBlock'
+  display: 'inlineBlock',
+  disableScreenReaderOutput: false
 });
 EuiToolTip.propTypes = {
   /**
@@ -353,6 +358,15 @@ EuiToolTip.propTypes = {
      * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
      */
   repositionOnScroll: _propTypes.default.bool,
+  /**
+     * Disables the tooltip content being read by screen readers when focusing the trigger element.
+     * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+     * information (action & additional information).
+     * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+     * the tooltip content and would result in repetitive output.
+     * @default false
+     */
+  disableScreenReaderOutput: _propTypes.default.bool,
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/lib/components/tool_tip/tool_tip_anchor.js

@@ -56,7 +56,7 @@ var EuiToolTipAnchor = exports.EuiToolTipAnchor = /*#__PURE__*/(0, _react.forwar
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
       },
-      'aria-describedby': isVisible ? (0, _classnames.default)(id, children.props['aria-describedby']) : children.props['aria-describedby']
+      'aria-describedby': isVisible && id ? (0, _classnames.default)(id, children.props['aria-describedby']) : children.props['aria-describedby']
     }))
   );
 });

package/lib/global_styling/mixins/_button.js

@@ -48,10 +48,11 @@ var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeCo
  * @returns Style object `{ backgroundColor, color }`
  */
 var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = (0, _euiThemeCommon.getTokenName)('backgroundFilled', color);
   var textColorTokenName = (0, _euiThemeCommon.getTokenName)('textColorFilled', color);
-  var foreground = euiTheme.components.buttons[textColorTokenName];
+  var foreground = highContrastMode ? color === 'warning' ? euiTheme.colors.ink : euiTheme.colors.textInverse : euiTheme.components.buttons[textColorTokenName];
   var background = euiTheme.components.buttons[backgroundTokenName];
   return _objectSpread({
     color: foreground,

package/optimize/es/components/badge/badge.styles.js

@@ -34,14 +34,14 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     }), ";", logicalTextAlignCSS('left'), "color:var(--euiBadgeTextColor, ", badgeColors.default.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", badgeColors.default.backgroundColor, "\n      );*::selection{color:var(\n          --euiBadgeBackgroundColor,\n          ", badgeColors.default.backgroundColor, "\n        );background-color:var(\n          --euiBadgeTextColor,\n          ", badgeColors.default.color, "\n        );}&:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
     // Colors
-    default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.default), ";label:default;"),
+    default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.default), " border-color:", badgeColors.default.borderColor, ";;label:default;"),
     hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
     warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
     success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
-    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), "*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(
     // Ensure proper height in case of just displaying an icon