@elastic/eui 63.0.3 → 65.0.0

package/es/components/tour/tour.js

@@ -34,220 +34,7 @@ export var EuiTour = function EuiTour(_ref) {
 };
 EuiTour.propTypes = {
   children: PropTypes.func.isRequired,
-  steps: PropTypes.arrayOf(PropTypes.shape({
-    className: PropTypes.string,
-
-    /**
-       * Provide a name to the popover panel
-       */
-    "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string,
-
-    /**
-       * Class name passed to the direct parent of the button
-       */
-    anchorClassName: PropTypes.string,
-
-    /**
-       * Alignment of the popover and arrow relative to the button
-       */
-    anchorPosition: PropTypes.any,
-
-    /**
-       * Style and position alteration for arrow-less, left-aligned
-       * attachment. Intended for use with inputs as anchors, e.g.
-       * EuiInputPopover
-       */
-    attachToAnchor: PropTypes.bool,
-    buttonRef: PropTypes.any,
-
-    /**
-       * Restrict the popover's position within this element
-       */
-    container: PropTypes.any,
-
-    /**
-       * CSS display type for both the popover and anchor
-       */
-    display: PropTypes.any,
-
-    /**
-       * Object of props passed to EuiFocusTrap
-       */
-    focusTrapProps: PropTypes.any,
-
-    /**
-       * Show arrow indicating to originating button
-       */
-    hasArrow: PropTypes.bool,
-
-    /**
-       * Specifies what element should initially have focus; Can be a DOM
-       * node, or a selector string (which will be passed to
-       * document.querySelector() to find the DOM node), or a function that
-       * returns a DOM node.
-       *
-       * If not passed, initial focus defaults to the popover panel.
-       */
-    initialFocus: PropTypes.any,
-
-    /**
-       * Passed directly to EuiPortal for DOM positioning. Both properties are
-       * required if prop is specified
-       */
-    insert: PropTypes.shape({
-      sibling: PropTypes.any.isRequired,
-      position: PropTypes.oneOf(["before", "after"]).isRequired
-    }),
-
-    /**
-       * Visibility state of the popover
-       */
-    isOpen: PropTypes.bool,
-
-    /**
-       * Traps tab focus within the popover contents
-       */
-    ownFocus: PropTypes.bool,
-
-    /**
-       * Custom class added to the EuiPanel containing the popover contents
-       */
-    panelClassName: PropTypes.string,
-
-    /**
-       * EuiPanel padding on all sides
-       */
-    panelPaddingSize: PropTypes.any,
-
-    /**
-       * Standard DOM `style` attribute. Passed to the EuiPanel
-       */
-    panelStyle: PropTypes.any,
-
-    /**
-       * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
-       */
-    panelProps: PropTypes.any,
-    panelRef: PropTypes.any,
-
-    /**
-       * Optional screen reader instructions to announce upon popover open,
-       * in addition to EUI's default popover instructions for Escape on close.
-       * Useful for popovers that may have additional keyboard capabilities such as
-       * arrow navigation.
-       */
-    popoverScreenReaderText: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),
-    popoverRef: PropTypes.any,
-
-    /**
-       * When `true`, the popover's position is re-calculated when the user
-       * scrolls, this supports having fixed-position popover anchors. When nesting
-       * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
-       */
-    repositionOnScroll: PropTypes.bool,
-
-    /**
-       * By default, popover content inherits the z-index of the anchor
-       * component; pass `zIndex` to override
-       */
-    zIndex: PropTypes.number,
-
-    /**
-       * Function callback for when the focus trap is deactivated
-       */
-    onTrapDeactivation: PropTypes.any,
-
-    /**
-       * Distance away from the anchor that the popover will render
-       */
-    offset: PropTypes.number,
-
-    /**
-       * Minimum distance between the popover and the bounding container;
-       * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
-       * Default is 16
-       */
-    buffer: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.any.isRequired]),
-
-    /**
-       * Element to pass as the child element of the arrow;
-       * Use case is typically limited to an accompanying `EuiBeacon`
-       */
-    arrowChildren: PropTypes.node,
-
-    /**
-       * Alternative option to `aria-label` that takes an `id`.
-       * Usually takes the `id` of the popover title
-       */
-    "aria-labelledby": PropTypes.string,
-
-    /**
-         * Element to which the tour step popover attaches when open
-         */
-    children: PropTypes.element,
-    anchor: PropTypes.any,
-
-    /**
-         * Contents of the tour step popover
-         */
-    content: PropTypes.node.isRequired,
-
-    /**
-         * Step will display if set to `true`
-         */
-    isStepOpen: PropTypes.bool,
-
-    /**
-         * Change the default min width of the popover panel
-         */
-    minWidth: PropTypes.any,
-
-    /**
-         * Change the default max width of the popover panel
-         */
-    maxWidth: PropTypes.any,
-
-    /**
-         * Function to call for 'Skip tour' and 'End tour' actions
-         */
-    onFinish: PropTypes.func.isRequired,
-
-    /**
-         * The number of the step within the parent tour. 1-based indexing.
-         */
-    step: PropTypes.number.isRequired,
-
-    /**
-         * The total number of steps in the tour
-         */
-    stepsTotal: PropTypes.number.isRequired,
-
-    /**
-         * Optional, standard DOM `style` attribute. Passed to the EuiPopover panel.
-         */
-    style: PropTypes.any,
-
-    /**
-         * Smaller title text that appears atop each step in the tour. The subtitle gets wrapped in the appropriate heading level.
-         */
-    subtitle: PropTypes.node,
-
-    /**
-         * Larger title text specific to this step. The title gets wrapped in the appropriate heading level.
-         */
-    title: PropTypes.node.isRequired,
-
-    /**
-         * Extra visual indication of step location
-         */
-    decoration: PropTypes.oneOf(["none", "beacon"]),
-
-    /**
-         * Element to replace the 'Skip tour' link in the footer
-         */
-    footerAction: PropTypes.element
-  }).isRequired).isRequired,
+  steps: PropTypes.arrayOf(PropTypes.any.isRequired).isRequired,
   initialState: PropTypes.shape({
     currentTourStep: PropTypes.number.isRequired,
     isTourActive: PropTypes.bool.isRequired,

package/es/components/tour/tour.styles.js

@@ -0,0 +1,57 @@
+/*
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { shade, tint, COLOR_MODES_STANDARD } from '../../services';
+import { logicalCSS } from '../../global_styling';
+import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
+import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
+
+var backgroundColor = function backgroundColor(color, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(color, 0.45) : tint(color, 0.5);
+};
+
+export var euiTourStyles = function euiTourStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+  return {
+    // Targets EuiPopoverPanel
+    euiTour: /*#__PURE__*/css("&[data-popover-open='true']{[class*='euiTourBeacon']{opacity:1;}}[data-popover-arrow='top']{&:before{", logicalCSS('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";}};label:euiTour;")
+  };
+};
+export var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var arrowSize = euiTheme.size[popoverArrowSize];
+  var arrowSizeInt = parseInt(arrowSize, 10);
+  return {
+    // Base
+    euiTourBeacon: /*#__PURE__*/css("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[openAnimationTiming], ";;label:euiTourBeacon;"),
+    // Positions
+    right: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
+    left: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt / 2, "px")), ";", logicalCSS('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/css(logicalCSS('top', arrowSize), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
+    bottom: /*#__PURE__*/css(logicalCSS('top', "".concat(arrowSizeInt * -2, "px")), ";", logicalCSS('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+  };
+};
+export var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiTourHeader: /*#__PURE__*/css(logicalCSS('border-bottom', 'none'), ";", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    // Elements
+    euiTourHeader__title: /*#__PURE__*/css(logicalCSS('margin-top', 0), ";;label:euiTourHeader__title;"),
+    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+  };
+};
+export var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Base
+    euiTourFooter: /*#__PURE__*/css("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium), ";", logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+  };
+};

package/es/components/tour/tour_step.js

@@ -49,7 +49,8 @@ import { EuiI18n } from '../i18n';
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle, EuiWrappingPopover } from '../popover';
 import { EuiTitle } from '../title';
 import { EuiTourStepIndicator } from './tour_step_indicator';
-import { useGeneratedHtmlId, findElementBySelectorOrRef } from '../../services';
+import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiTheme } from '../../services';
+import { euiTourStyles, euiTourBeaconStyles, euiTourFooterStyles, euiTourHeaderStyles } from './tour.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTourStep = function EuiTourStep(_ref) {
   var _ref$anchorPosition = _ref.anchorPosition,
@@ -91,6 +92,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = useRef();
   var anchorNode = useRef(null);
+
+  var _useState3 = useState(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverPosition = _useState4[0],
+      setPopoverPosition = _useState4[1];
+
+  var onPositionChange = function onPositionChange(position) {
+    setPopoverPosition(position);
+  };
+
   useEffect(function () {
     if (anchor) {
       animationFrameId.current = window.requestAnimationFrame(function () {
@@ -104,6 +115,12 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     };
   }, [anchor]);
   var classes = classNames('euiTour', className);
+  var euiTheme = useEuiTheme();
+  var tourStyles = euiTourStyles(euiTheme);
+  var headerStyles = euiTourHeaderStyles(euiTheme);
+  var footerStyles = euiTourFooterStyles(euiTheme);
+  var beaconStyles = euiTourBeaconStyles(euiTheme);
+  var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
   var finishButtonProps = {
     color: 'text',
     flush: 'right',
@@ -164,11 +181,16 @@ export var EuiTourStep = function EuiTourStep(_ref) {
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
+    panelProps: {
+      css: tourStyles.euiTour
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && ___EmotionJSX(EuiBeacon, {
+      css: beaconCss,
       className: "euiTour__beacon"
-    })
+    }),
+    onPositionChange: onPositionChange
   }, rest);
 
   var layout = ___EmotionJSX("div", {
@@ -177,17 +199,19 @@ export var EuiTourStep = function EuiTourStep(_ref) {
       maxWidth: maxWidth
     }
   }, ___EmotionJSX(EuiPopoverTitle, {
+    css: headerStyles.euiTourHeader,
     className: "euiTourHeader",
     id: titleId
   }, subtitle && ___EmotionJSX(EuiTitle, {
-    size: "xxxs",
-    className: "euiTourHeader__subtitle"
+    css: headerStyles.euiTourHeader__subtitle,
+    size: "xxxs"
   }, ___EmotionJSX("h2", null, subtitle)), ___EmotionJSX(EuiTitle, {
-    size: "xxs",
-    className: "euiTourHeader__title"
+    css: headerStyles.euiTourHeader__title,
+    size: "xxs"
   }, subtitle ? ___EmotionJSX("h3", null, title) : ___EmotionJSX("h2", null, title))), ___EmotionJSX("div", {
     className: "euiTour__content"
   }, content), ___EmotionJSX(EuiPopoverFooter, {
+    css: footerStyles.euiTourFooter,
     className: "euiTourFooter"
   }, footer));
 
@@ -209,6 +233,7 @@ EuiTourStep.propTypes = {
      */
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Class name passed to the direct parent of the button
@@ -349,6 +374,11 @@ EuiTourStep.propTypes = {
      */
   "aria-labelledby": PropTypes.string,
 
+  /**
+     * Function callback for when the popover positon changes
+     */
+  onPositionChange: PropTypes.func,
+
   /**
        * Element to which the tour step popover attaches when open
        */

package/es/components/tour/tour_step_indicator.js

@@ -6,6 +6,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+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)."; }
+
+import PropTypes from "prop-types";
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,25 +18,28 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 import React from 'react';
-import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../common';
+import { css } from '@emotion/react';
 import { EuiIcon } from '../icon';
 import { EuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var statusToClassNameMap = {
-  complete: 'euiTourStepIndicator--complete',
-  incomplete: 'euiTourStepIndicator--incomplete',
-  active: 'euiTourStepIndicator--active'
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;"
+} : {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var STATUS = keysOf(statusToClassNameMap);
-export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
-  var className = _ref.className,
-      number = _ref.number,
-      status = _ref.status,
-      rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var classes = classNames('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -83,6 +90,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return ___EmotionJSX("li", _extends({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);
@@ -93,5 +101,6 @@ EuiTourStepIndicator.propTypes = {
   status: PropTypes.oneOf(["complete", "incomplete", "active"]).isRequired,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/tree_view/tree_view.js

@@ -360,6 +360,7 @@ _defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
 EuiTreeView.propTypes = {
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /** An array of EuiTreeViewNodes
        */

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-block',
-  'overflow-y': 'overflow-inline'
-};
-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);
 
 /**
@@ -107,6 +37,20 @@ export var LOGICAL_PROPERTIES = keysOf(logicals);
 export var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+export var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property

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

@@ -7,6 +7,7 @@
  */
 import { useEuiTheme } from '../../services/theme';
 import { transparentize } from '../../services/color';
+import { logicalCSS, logicalCSSWithFallback } from '../functions';
 /**
  * Set scroll bar appearance on Chrome (and firefox).
  * All parameters are optional and default to specific global settings.
@@ -34,7 +35,7 @@ export var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat(logicalCSS('width', scrollBarSize), "\n      ").concat(logicalCSS('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 export var useEuiScrollBar = function useEuiScrollBar(options) {
   var euiTheme = useEuiTheme();
@@ -82,12 +83,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSS('height', height || '100%'), "\n  ").concat(logicalCSSWithFallback('overflow-y', 'auto'), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
   var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -118,7 +118,7 @@ export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
   });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiXScroll = function useEuiXScroll() {
   var euiTheme = useEuiTheme();
@@ -158,4 +158,17 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     direction: direction,
     mask: mask
   });
-};
+};
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+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)))';