@elastic/eui 64.0.1 → 65.0.2

package/es/components/markdown_editor/markdown_editor_toolbar.js

@@ -175,6 +175,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       icon: button.iconType
     }));
   })) : null), isPreviewing ? ___EmotionJSX(EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_edit_button",
     iconType: "editorCodeBlock",
     color: "text",
     size: "s",
@@ -184,6 +185,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
     token: "euiMarkdownEditorToolbar.editor",
     default: "Editor"
   })) : ___EmotionJSX(EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_preview_button",
     iconType: "eye",
     color: "text",
     size: "s",

package/es/components/modal/confirm_modal.js

@@ -134,7 +134,7 @@ EuiConfirmModal.propTypes = {
   confirmButtonDisabled: PropTypes.bool,
   className: PropTypes.string,
   defaultFocusedButton: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]),
-  buttonColor: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  buttonColor: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   // For docs only, will get passed with ...rest
 
   /**

package/es/components/notification/notification_event.js

@@ -188,13 +188,15 @@ EuiNotificationEvent.propTypes = {
     onClick: PropTypes.func,
 
     /**
-       * Any of our named colors
+       * Any of the named color palette options.
+       * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
 
     /**
-       * Any of our named colors
+       * Any of the named color palette options.
+       * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
-    color: PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]),
+    color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
     size: PropTypes.oneOf(["xs", "s", "m"]),
 
     /**

package/es/components/notification/notification_event_read_button.js

@@ -51,8 +51,9 @@ export var EuiNotificationEventReadButton = function EuiNotificationEventReadBut
 EuiNotificationEventReadButton.propTypes = {
   /**
      * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
 

package/es/components/page/page_template.js

@@ -31,7 +31,7 @@ import { EuiPageContent_Deprecated as EuiPageContent, EuiPageContentBody_Depreca
 import { EuiBottomBar } from '../bottom_bar';
 import { useIsWithinBreakpoints } from '../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { useEuiPaddingSize } from '../../global_styling';
+import { useEuiPaddingSize, logicalCSS } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 
@@ -67,7 +67,7 @@ export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // BWC page header margin to match padding
-  var headerMargin = /*#__PURE__*/css("margin-bottom: ".concat(useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
+  var headerMargin = /*#__PURE__*/css(logicalCSS('margin-bottom', useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */

package/es/components/page_template/inner/page_inner.styles.js

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

package/es/components/page_template/outer/page_outer.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "15mvjmo-row",
@@ -39,7 +40,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
-    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;max-width:100%;;label:euiPageOuter;"),
+    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+    ), ";;label:euiPageOuter;"),
     // Grow
     grow: _ref3,
     // Direction

package/es/components/pagination/pagination_button.js

@@ -77,13 +77,15 @@ EuiPaginationButton.propTypes = {
   onClick: PropTypes.func,
 
   /**
-     * Any of our named colors
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
 
   /**
-     * Any of our named colors
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   size: PropTypes.oneOf(["xs", "s", "m"]),
 
   /**

package/es/components/panel/panel.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
-import { euiPanelStyles } from './panel.style';
+import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = PADDING_SIZES; // Exported padding sizes and class names necessary for EuiPopover and EuiCard.
 // Which currently will only maintain support for the original values until conversion.

package/es/components/panel/{panel.style.js → panel.styles.js}

@@ -9,7 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
-import { euiCanAnimate, logicalTextAlignCSS } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "122lw0e-grow",
@@ -42,6 +42,6 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;width:100%;", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

package/es/components/progress/progress.styles.js

@@ -43,7 +43,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(logicalCSS('top', 0), "\n  ").concat(logicalCSS('left', 0), "\n  ").concat(logicalCSS('right', 0), "\n  background-color: transparent;\n  ").concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
 };
 /**
  * Animations
@@ -75,7 +75,7 @@ export 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__*/css("&:before{position:absolute;content:'';", logicalCSS('width', '100%'), " top:0;bottom:0;left:0;transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/css("&:before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xs), ";;label:s;"),

package/es/components/title/title.styles.js

@@ -15,7 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { useEuiTheme } from '../../services';
-import { euiTextBreakWord, euiFontSize } from '../../global_styling';
+import { euiTextBreakWord, euiFontSize, logicalCSS } from '../../global_styling';
 export var euiTitle = function euiTitle(euiThemeContext) {
   var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'm';
   var options = arguments.length > 2 ? arguments[2] : undefined;
@@ -53,7 +53,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 
 export var euiTitleStyles = function euiTitleStyles(euiThemeContext) {
   return {
-    euiTitle: /*#__PURE__*/css(euiTextBreakWord(), " &+&{margin-top:", euiThemeContext.euiTheme.size.l, ";};label:euiTitle;"),
+    euiTitle: /*#__PURE__*/css(euiTextBreakWord(), " &+&{", logicalCSS('margin-top', euiThemeContext.euiTheme.size.l), ";};label:euiTitle;"),
     uppercase: _ref,
     // Sizes
     xxxs: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxxs'), ";;label:xxxs;"),

package/es/components/toast/toast.styles.js

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

package/es/components/tool_tip/icon_tip.js

@@ -45,10 +45,20 @@ export var EuiIconTip = function EuiIconTip(_ref) {
 };
 EuiIconTip.propTypes = {
   /**
-     * Passes onto the the trigger.
+     * Passes onto the span wrapping the trigger.
      */
   anchorClassName: PropTypes.string,
 
+  /**
+     * Passes onto the span wrapping the trigger.
+     */
+  anchorProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
   /**
      * Passes onto the tooltip itself, not the trigger.
      */

package/es/components/tool_tip/tool_tip.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _excluded = ["children", "className", "anchorClassName", "content", "title", "delay", "display"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
 
 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; }
 
@@ -273,6 +273,7 @@ export 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,
@@ -285,7 +286,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
           toolTipStyles = _this$state.toolTipStyles,
           visible = _this$state.visible;
       var classes = classNames('euiToolTip', positionsToClassNameMap[this.state.calculatedPosition], className);
-      var anchorClasses = classNames('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName);
+      var anchorClasses = classNames('euiToolTipAnchor', display ? displayToClassNameMap[display] : null, anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
       var tooltip;
 
       if (visible && (content || title)) {
@@ -310,14 +311,15 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       }
 
       var anchor = // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-      ___EmotionJSX("span", {
+      ___EmotionJSX("span", _extends({
         ref: function ref(anchor) {
           return _this2.anchor = anchor;
-        },
+        }
+      }, anchorProps, {
         className: anchorClasses,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut
-      }, /*#__PURE__*/cloneElement(children, _objectSpread({
+      }), /*#__PURE__*/cloneElement(children, _objectSpread({
         onFocus: function onFocus(e) {
           _this2.onFocus();
 
@@ -347,10 +349,20 @@ _defineProperty(EuiToolTip, "defaultProps", {
 
 EuiToolTip.propTypes = {
   /**
-     * Passes onto the the trigger.
+     * Passes onto the span wrapping the trigger.
      */
   anchorClassName: PropTypes.string,
 
+  /**
+     * Passes onto the span wrapping the trigger.
+     */
+  anchorProps: PropTypes.shape({
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
+
   /**
      * The in-view trigger for your tooltip.
      */

package/es/global_styling/functions/logicals.js

@@ -1,7 +1,3 @@
-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) { _defineProperty(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; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,6 +8,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  * Side Public License, v 1.
  */
 import { keysOf } from '../../components/common';
+import LOGICALS from './logicals.json';
 /**
  * EUI utilizes logical CSS properties to enable directional writing-modes.
  * To encourage use of logical properties, we provide a few helper utilities to
@@ -28,74 +25,7 @@ export var logicalSide = {
   vertical: 'block'
 };
 export var LOGICAL_SIDES = keysOf(logicalSide);
-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'
-};
-export var logicals = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, logicalMargins), logicalPaddings), logicalPosition), logicalSize), logicalOverflow), logicalBorders);
+export var logicals = LOGICALS;
 export var LOGICAL_PROPERTIES = keysOf(logicals);
 
 /**

package/es/global_styling/functions/logicals.json

@@ -0,0 +1,56 @@
+{
+  "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",
+  "top": "inset-block-start",
+  "right": "inset-inline-end",
+  "bottom": "inset-block-end",
+  "left": "inset-inline-start",
+  "horizontal": "inset-block",
+  "vertical": "inset-inline",
+  "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",
+  "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",
+  "overflow-x": "overflow-inline",
+  "overflow-y": "overflow-block",
+  "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"
+}

package/es/global_styling/functions/typography.js

@@ -5,6 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { logicalCSS } from './logicals';
 
 /**
  * Calculates the font-size value based on the provided scale key
@@ -82,5 +83,5 @@ export 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(logicalCSS('height', 0), "\n    overflow: hidden;\n    visibility: hidden;\n  }");
 };

package/es/global_styling/mixins/_color.js

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

package/es/global_styling/mixins/_helpers.js

@@ -165,4 +165,10 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
 
 export var euiFullHeight = function euiFullHeight() {
   return "\n  ".concat(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.
+ */
+
+export var euiSupportsHas = '@supports(selector(:has(p)))';

package/es/global_styling/reset/global_styles.js

@@ -10,6 +10,7 @@ function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("
 import React from 'react';
 import { Global, css } from '@emotion/react';
 import { euiFocusRing, euiScrollBarStyles } from '../mixins';
+import { logicalCSS } from '../functions';
 import { shade, tint, transparentize } from '../../services/color';
 import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
@@ -42,7 +43,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });