@elastic/eui 64.0.1 → 65.0.0

package/optimize/lib/components/expression/expression.styles.js

@@ -21,35 +21,17 @@ var _colorCSS = function _colorCSS(color) {
   return "\n    &:focus {\n      background-color: ".concat((0, _color.transparentize)(color, 0.1), ";\n    }\n  ");
 };
 
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;"
-} : {
-  name: "6151l-base",
-  styles: "border-bottom-style:solid;label:base;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;"
-} : {
-  name: "1372s1f-truncate",
-  styles: "max-width:100%;label:truncate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
 var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";font-family:", euiTheme.font.familyCode, ";border-bottom:", euiTheme.border.width.thick, " solid transparent;", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";display:inline-block;text-align:left;padding:calc(", euiTheme.size.s, " / 2) 0;color:", euiTheme.colors.text, ";&:focus{border-bottom-style:solid;}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    euiExpression: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalTextAlignCSS)('left'), " padding:", parseFloat(euiTheme.size.s) / 2, "px 0;color:", euiTheme.colors.text, ";&:focus{", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";}&+.euiExpression{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
-    columns: /*#__PURE__*/(0, _react.css)("border-color:transparent;border-bottom-style:solid;", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " width:100%;display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
-    truncate: _ref4,
+    columns: /*#__PURE__*/(0, _react.css)("border-color:transparent;", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
+    truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:truncate;"),
     // States
-    isClickable: /*#__PURE__*/(0, _react.css)("cursor:pointer;border-bottom:", euiTheme.border.editable, ";&[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
+    isClickable: /*#__PURE__*/(0, _react.css)("cursor:pointer;", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
     isActive: {
-      base: _ref3,
+      base: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";;label:base;"),
       subdued: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.subduedText, ";;label:subdued;"),
       primary: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.primary, ";;label:primary;"),
       success: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.success, ";;label:success;"),
@@ -77,8 +59,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiExpression__description: /*#__PURE__*/(0, _react.css)(";label:euiExpression__description;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
@@ -89,7 +71,7 @@ var euiExpressionDescriptionStyles = function euiExpressionDescriptionStyles(_re
     danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.dangerText, ";;label:danger;"),
     accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
     isUppercase: _ref2,
-    columns: /*#__PURE__*/(0, _react.css)("text-align:end;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
+    columns: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";flex-shrink:0;;label:columns;")
   };
 };
 
@@ -104,8 +86,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
-  (0, _objectDestructuringEmpty2.default)(_ref6);
+var euiExpressionValueStyles = function euiExpressionValueStyles(_ref4) {
+  (0, _objectDestructuringEmpty2.default)(_ref4);
   return {
     euiExpression__value: /*#__PURE__*/(0, _react.css)(";label:euiExpression__value;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
@@ -115,8 +97,8 @@ var euiExpressionValueStyles = function euiExpressionValueStyles(_ref6) {
 
 exports.euiExpressionValueStyles = euiExpressionValueStyles;
 
-var euiExpressionIconStyles = function euiExpressionIconStyles(_ref7) {
-  var euiTheme = _ref7.euiTheme;
+var euiExpressionIconStyles = function euiExpressionIconStyles(_ref5) {
+  var euiTheme = _ref5.euiTheme;
   return {
     euiExpression__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:euiExpression__icon;"),
     columns: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), ";;label:columns;")

package/optimize/lib/components/facet/facet_button.js

@@ -47,7 +47,10 @@ var EuiFacetButton = function EuiFacetButton(_ref) {
       buttonRef = _ref.buttonRef,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // If in the loading state, force disabled to true
-  isDisabled = isLoading ? true : isDisabled;
+  isDisabled = (0, _button_display.isButtonDisabled)({
+    isDisabled: isDisabled,
+    isLoading: isLoading
+  });
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = (0, _classnames.default)('euiFacetButton', className);
   var theme = (0, _services.useEuiTheme)();
@@ -92,7 +95,6 @@ var EuiFacetButton = function EuiFacetButton(_ref) {
     return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
       className: classes,
       css: cssStyles,
-      element: "button",
       isDisabled: isDisabled,
       ref: buttonRef,
       title: rest['aria-label'] || innerText,

package/optimize/lib/components/image/image_button.styles.js

@@ -17,7 +17,7 @@ var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
+    euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;inset:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     shadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 's'), ";};label:shadowHover;"),
     hasShadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";};label:hasShadowHover;")

package/optimize/lib/components/image/image_wrapper.styles.js

@@ -34,8 +34,8 @@ var euiImageWrapperStyles = function euiImageWrapperStyles(euiThemeContext) {
     // Floats
     // 1: Logical properties/values in `float` is currently not yet supported by all browsers w/o flags
     // @see https://caniuse.com/mdn-css_properties_float_flow_relative_values for when we can remove left/right fallbacks
-    left: /*#__PURE__*/(0, _react.css)("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:left;float:", _global_styling.logicalSide.left, ";", (0, _global_styling.logicalCSS)('margin-left', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("@media only screen and (min-width: ", euiTheme.breakpoint.m, "px){float:right;float:", _global_styling.logicalSide.right, ";", (0, _global_styling.logicalCSS)('margin-right', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{float:left;float:", _global_styling.logicalSide.left, ";", (0, _global_styling.logicalCSS)('margin-left', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{float:right;float:", _global_styling.logicalSide.right, ";", (0, _global_styling.logicalCSS)('margin-right', '0'), ";", (0, _global_styling.logicalCSS)('margin-top', '0'), ";};label:right;"),
     // Sizes
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;")
   };

package/optimize/lib/components/link/link.styles.js

@@ -29,7 +29,7 @@ exports.euiLinkFocusCSS = euiLinkFocusCSS;
 
 var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 exports.euiLinkCSS = euiLinkCSS;

package/optimize/lib/components/loading/loading_chart.styles.js

@@ -19,7 +19,7 @@ var _templateObject;
 
 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)."; }
 
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "yovxj7-euiLoadingChart",
   styles: "overflow:hidden;display:inline-flex;label:euiLoadingChart;"
 } : {
@@ -28,43 +28,34 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiLoadingChartStyles = function euiLoadingChartStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiLoadingChartStyles = function euiLoadingChartStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
-    euiLoadingChart: _ref2,
-    m: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.base, ";gap:", euiTheme.size.xxs, ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.l, ";gap:", euiTheme.size.xxs, ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.xl, ";gap:", euiTheme.size.xs, ";;label:xl;")
+    euiLoadingChart: _ref,
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " gap:", euiTheme.size.xxs, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.l), " gap:", euiTheme.size.xxs, ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xl), " gap:", euiTheme.size.xs, ";;label:xl;")
   };
 };
 
 exports.euiLoadingChartStyles = euiLoadingChartStyles;
 
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;"
-} : {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
-    euiLoadingChart__bar: _ref,
-    m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.xs, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:xl;")
+    euiLoadingChart__bar: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " display:inline-block;;label:euiLoadingChart__bar;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:xl;")
   };
 };
 
 exports.euiLoadingChartBarStyles = euiLoadingChartBarStyles;
 var barAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(66%);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n"])));
 
-var _barIndex = function _barIndex(index, mono, _ref5) {
-  var euiTheme = _ref5.euiTheme,
-      colorMode = _ref5.colorMode;
+var _barIndex = function _barIndex(index, mono, _ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
   var backgroundColor = mono ? (0, _services.shadeOrTint)(euiTheme.colors.lightShade, index * 0.04, colorMode) : (0, _services.euiPaletteColorBlind)()[index];
   return /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor, ";transform:translateY(", 22 * index, "%);", _global_styling.euiCanAnimate, "{animation:", barAnimation, " 1s ", ".".concat(index, "s"), " infinite;}");
 };

package/optimize/lib/components/loading/loading_content.styles.js

@@ -25,7 +25,7 @@ var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
   var gradientStartStop = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
   var gradientMiddle = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
   return {
-    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;width:100%;height:", euiTheme.size.base, ";border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){margin-block-end:", euiTheme.size.s, ";}&:last-child:not(:only-child){width:75%;}&::after{content:'';display:block;width:220%;height:100%;background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
+    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";}&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', '220%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
   };
 };
 

package/optimize/lib/components/loading/loading_logo.styles.js

@@ -27,15 +27,15 @@ var loadingPadding = {
 var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&:before,&:after{position:absolute;content:'';width:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
+    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&:before,&:after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
 
     /**
      * 1. Requires pixel math for animation
      * 2. Add a half the amount of animation distance padding to the top to give it more room
      */
-    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{height:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
-    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{height:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{height:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
+    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
   };
 };
 

package/optimize/lib/components/loading/loading_spinner.styles.js

@@ -34,11 +34,11 @@ var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
   return {
     euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.l], ";height:", euiTheme.size[spinnerSizes.l], ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.xl], ";height:", euiTheme.size[spinnerSizes.xl], ";;label:xl;"),
-    xxl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.xxl], ";height:", euiTheme.size[spinnerSizes.xxl], ";;label:xxl;")
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
+    xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")
   };
 };
 

package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -195,6 +195,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: button.iconType
     }));
   })) : null), isPreviewing ? (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_edit_button",
     iconType: "editorCodeBlock",
     color: "text",
     size: "s",
@@ -204,6 +205,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
     token: "euiMarkdownEditorToolbar.editor",
     default: "Editor"
   })) : (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_preview_button",
     iconType: "eye",
     color: "text",
     size: "s",

package/optimize/lib/components/page/page_template.js

@@ -77,7 +77,7 @@ var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
       minHeight = _ref$minHeight === void 0 ? 460 : _ref$minHeight,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // BWC page header margin to match padding
-  var headerMargin = /*#__PURE__*/(0, _react2.css)("margin-bottom: ".concat((0, _global_styling.useEuiPaddingSize)(paddingSize)), ";label:headerMargin;");
+  var headerMargin = /*#__PURE__*/(0, _react2.css)((0, _global_styling.logicalCSS)('margin-bottom', (0, _global_styling.useEuiPaddingSize)(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */

package/optimize/lib/components/page_template/inner/page_inner.styles.js

@@ -26,8 +26,8 @@ var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
     euiPageInner: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/(0, _react.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/(0, _react.css)("border-top:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:top;"),
-      left: /*#__PURE__*/(0, _react.css)("border-left:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:left;")
+      top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
     }
   };
 };

package/optimize/lib/components/page_template/outer/page_outer.styles.js

@@ -7,6 +7,8 @@ exports.euiPageOuterStyles = void 0;
 
 var _react = require("@emotion/react");
 
+var _global_styling = require("../../../global_styling");
+
 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)."; }
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,7 +41,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;max-width:100%;;label:euiPageOuter;"),
+    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+    ), ";;label:euiPageOuter;"),
     // Grow
     grow: _ref3,
     // Direction

package/optimize/lib/components/panel/panel.js

@@ -23,7 +23,7 @@ var _global_styling = require("../../global_styling");
 
 var _common = require("../common");
 
-var _panel = require("./panel.style");
+var _panel = require("./panel.styles");
 
 var _react2 = require("@emotion/react");
 

package/{test-env/components/panel/panel.style.js → optimize/lib/components/panel/panel.styles.js}

@@ -44,7 +44,7 @@ var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;width:100%;", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };
 

package/optimize/lib/components/progress/progress.styles.js

@@ -48,7 +48,7 @@ var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNa
 
 
 var nonStaticPositioning = function nonStaticPositioning(isNative) {
-  return "\n  top: 0;\n  left: 0;\n  right: 0;\n  background-color: transparent;\n  ".concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
+  return "\n  ".concat((0, _global_styling.logicalCSS)('top', 0), "\n  ").concat((0, _global_styling.logicalCSS)('left', 0), "\n  ").concat((0, _global_styling.logicalCSS)('right', 0), "\n  background-color: transparent;\n  ").concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
 };
 /**
  * Animations
@@ -80,7 +80,7 @@ var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " top:0;bottom:0;left:0;transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), ";;label:s;"),

package/optimize/lib/components/title/title.styles.js

@@ -64,7 +64,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 
 var euiTitleStyles = function euiTitleStyles(euiThemeContext) {
   return {
-    euiTitle: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), " &+&{margin-top:", euiThemeContext.euiTheme.size.l, ";};label:euiTitle;"),
+    euiTitle: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextBreakWord)(), " &+&{", (0, _global_styling.logicalCSS)('margin-top', euiThemeContext.euiTheme.size.l), ";};label:euiTitle;"),
     uppercase: _ref,
     // Sizes
     xxxs: /*#__PURE__*/(0, _react.css)(euiTitle(euiThemeContext, 'xxxs'), ";;label:xxxs;"),

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

@@ -23,10 +23,10 @@ var euiToastStyles = function euiToastStyles(euiThemeContext) {
     // Elements
     euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
-    primary: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.primary, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.success, ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.warning, ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("border-top:2px solid ", euiTheme.colors.danger, ";;label:danger;")
+    primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.warning)), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.danger)), ";;label:danger;")
   };
 };
 

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -45,7 +45,7 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _react3 = require("@emotion/react");
 
-var _excluded = ["children", "className", "anchorClassName", "content", "title", "delay", "display"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -268,6 +268,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           className = _this$props.className,
           anchorClassName = _this$props.anchorClassName,
+          anchorProps = _this$props.anchorProps,
           content = _this$props.content,
           title = _this$props.title,
           delay = _this$props.delay,
@@ -279,7 +280,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
           toolTipStyles = _this$state.toolTipStyles,
           visible = _this$state.visible;
       var classes = (0, _classnames.default)('euiToolTip', positionsToClassNameMap[this.state.calculatedPosition], className);
-      var anchorClasses = (0, _classnames.default)('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName);
+      var anchorClasses = (0, _classnames.default)('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
       var tooltip;
 
       if (visible && (content || title)) {
@@ -304,14 +305,15 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       }
 
       var anchor = // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      (0, _react3.jsx)("span", {
+      (0, _react3.jsx)("span", (0, _extends2.default)({
         ref: function ref(anchor) {
           return _this2.anchor = anchor;
-        },
+        }
+      }, anchorProps, {
         className: anchorClasses,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut
-      }, /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread({
+      }), /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread({
         onFocus: function onFocus(e) {
           _this2.onFocus();
 

package/optimize/lib/global_styling/functions/logicals.js

@@ -11,9 +11,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _common = require("../../components/common");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _logicals = _interopRequireDefault(require("./logicals.json"));
+
+/*
+ * 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.
+ */
 
 /**
  * EUI utilizes logical CSS properties to enable directional writing-modes.
@@ -32,76 +38,7 @@ var logicalSide = {
 exports.logicalSide = logicalSide;
 var LOGICAL_SIDES = (0, _common.keysOf)(logicalSide);
 exports.LOGICAL_SIDES = LOGICAL_SIDES;
-var logicalMargins = {
-  'margin-left': 'margin-inline-start',
-  'margin-right': 'margin-inline-end',
-  'margin-top': 'margin-block-start',
-  'margin-bottom': 'margin-block-end',
-  'margin-horizontal': 'margin-inline',
-  'margin-vertical': 'margin-block'
-};
-var logicalPaddings = {
-  'padding-left': 'padding-inline-start',
-  'padding-right': 'padding-inline-end',
-  'padding-top': 'padding-block-start',
-  'padding-bottom': 'padding-block-end',
-  'padding-horizontal': 'padding-inline',
-  'padding-vertical': 'padding-block'
-};
-var logicalPosition = {
-  top: 'inset-block-start',
-  right: 'inset-inline-end',
-  bottom: 'inset-block-end',
-  left: 'inset-inline-start',
-  horizontal: 'inset-block',
-  vertical: 'inset-inline',
-  inset: 'inset'
-};
-var logicalSize = {
-  height: 'block-size',
-  width: 'inline-size',
-  'max-height': 'max-block-size',
-  'max-width': 'max-inline-size',
-  'min-height': 'min-block-size',
-  'min-width': 'min-inline-size'
-};
-var logicalOverflow = {
-  'overflow-x': 'overflow-inline',
-  'overflow-y': 'overflow-block'
-};
-var logicalBorders = {
-  'border-horizontal': 'border-inline',
-  'border-horizontal-color': 'border-inline-color',
-  'border-horizontal-width': 'border-inline-width',
-  'border-horizontal-style': 'border-inline-style',
-  'border-vertical': 'border-block',
-  'border-vertical-color': 'border-block-color',
-  'border-vertical-width': 'border-block-width',
-  'border-vertical-style': 'border-block-style',
-  'border-bottom': 'border-block-end',
-  'border-bottom-color': 'border-block-end-color',
-  'border-bottom-style': 'border-block-end-style',
-  'border-bottom-width': 'border-block-end-width',
-  'border-top': 'border-block-start',
-  'border-top-color': 'border-block-start-color',
-  'border-top-style': 'border-block-start-style',
-  'border-top-width': 'border-block-start-width',
-  'border-right': 'border-inline-end',
-  'border-right-color': 'border-inline-end-color',
-  'border-right-style': 'border-inline-end-style',
-  'border-right-width': 'border-inline-end-width',
-  'border-left': 'border-inline-start',
-  'border-left-color': 'border-inline-start-color',
-  'border-left-style': 'border-inline-start-style',
-  'border-left-width': 'border-inline-start-width',
-  'border-top-left-radius': 'border-start-start-radius',
-  'border-top-right-radius': 'border-start-end-radius',
-  'border-bottom-left-radius': 'border-end-start-radius',
-  'border-bottom-right-radius': 'border-end-end-radius'
-};
-
-var logicals = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, logicalMargins), logicalPaddings), logicalPosition), logicalSize), logicalOverflow), logicalBorders);
-
+var logicals = _logicals.default;
 exports.logicals = logicals;
 var LOGICAL_PROPERTIES = (0, _common.keysOf)(logicals);
 exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;

package/optimize/lib/global_styling/functions/typography.js

@@ -7,6 +7,8 @@ exports.euiFontSizeFromScale = euiFontSizeFromScale;
 exports.euiLineHeightFromBaseline = euiLineHeightFromBaseline;
 exports.euiTextShift = void 0;
 
+var _logicals = require("./logicals");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -93,7 +95,7 @@ var euiTextShift = function euiTextShift() {
   var fontWeight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bold';
   var attribute = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'data-text';
   var euiTheme = arguments.length > 2 ? arguments[2] : undefined;
-  return "\n  &::after {\n    display: block;\n    content: attr(".concat(attribute, ");\n    font-weight: ").concat(euiTheme.font.weight[fontWeight], ";\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n  }");
+  return "\n  &::after {\n    display: block;\n    content: attr(".concat(attribute, ");\n    font-weight: ").concat(euiTheme.font.weight[fontWeight], ";\n    ").concat((0, _logicals.logicalCSS)('height', 0), "\n    overflow: hidden;\n    visibility: hidden;\n  }");
 };
 
 exports.euiTextShift = euiTextShift;

package/optimize/lib/global_styling/mixins/_color.js

@@ -32,7 +32,7 @@ var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
     if (color === 'plain') {
       return (0, _services.transparentize)(euiTheme.colors.ghost, 0.2);
     } else if (color === 'subdued') {
-      return (0, _services.transparentize)(euiTheme.colors.lightShade, 0.2);
+      return colorMode === 'DARK' ? (0, _services.transparentize)(euiTheme.colors.lightShade, 0.4) : (0, _services.transparentize)(euiTheme.colors.lightShade, 0.2);
     } else {
       return (0, _services.transparentize)(euiTheme.colors[color], 0.1);
     }

package/optimize/lib/global_styling/mixins/_helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiSupportsHas = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 
 var _theme = require("../../services/theme");
 
@@ -207,5 +207,12 @@ exports.useEuiOverflowScroll = useEuiOverflowScroll;
 var euiFullHeight = function euiFullHeight() {
   return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
 };
+/**
+ * A constant storing the support for the `:has()` selector through a
+ * media query that will only apply the content it is supported.
+ */
+
 
-exports.euiFullHeight = euiFullHeight;
+exports.euiFullHeight = euiFullHeight;
+var euiSupportsHas = '@supports(selector(:has(p)))';
+exports.euiSupportsHas = euiSupportsHas;