@elastic/eui 77.2.2 → 79.0.0

package/optimize/lib/components/skeleton/skeleton_circle.js

@@ -13,7 +13,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_circle = require("./skeleton_circle.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
@@ -23,6 +23,9 @@ var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -36,7 +39,10 @@ var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonCircle = EuiSkeletonCircle;

package/optimize/lib/components/skeleton/skeleton_loading.js

@@ -11,27 +11,33 @@ var _react = _interopRequireDefault(require("react"));
 var _screen_reader_live = require("../accessibility/screen_reader_live");
 var _i18n = require("../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent"];
+var _excluded = ["isLoading", "contentAriaLabel", "loadingContent", "loadedContent", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps"];
 var EuiSkeletonLoading = function EuiSkeletonLoading(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
     contentAriaLabel = _ref.contentAriaLabel,
-    loadingContent = _ref.loadingContent,
+    _loadingContent = _ref.loadingContent,
     loadedContent = _ref.loadedContent,
+    _ref$announceLoadingS = _ref.announceLoadingStatus,
+    announceLoadingStatus = _ref$announceLoadingS === void 0 ? false : _ref$announceLoadingS,
+    _ref$announceLoadedSt = _ref.announceLoadedStatus,
+    announceLoadedStatus = _ref$announceLoadedSt === void 0 ? true : _ref$announceLoadedSt,
+    ariaLiveProps = _ref.ariaLiveProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var loadingAriaLabel = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
+  var loadedAriaLive = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
-  var loadedAriaLive = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadedAriaText', 'Loaded {contentAriaLabel}', {
+  var loadingAriaLabel = (0, _i18n.useEuiI18n)('euiSkeletonLoading.loadingAriaText', 'Loading {contentAriaLabel}', {
     contentAriaLabel: contentAriaLabel
   });
   var loadingProps = {
     'aria-label': loadingAriaLabel,
     role: 'progressbar'
   };
+  var loadingContent = /*#__PURE__*/_react.default.cloneElement(_loadingContent, loadingProps);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     "aria-busy": isLoading,
     "data-test-subj": "euiSkeletonLoadingAriaWrapper"
-  }, rest), isLoading ? /*#__PURE__*/_react.default.cloneElement(loadingContent, loadingProps) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, null, loadedAriaLive), loadedContent));
+  }, rest), isLoading ? (0, _react2.jsx)(_react.default.Fragment, null, announceLoadingStatus && (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, ariaLiveProps, loadingAriaLabel), loadingContent) : (0, _react2.jsx)(_react.default.Fragment, null, announceLoadedStatus && (0, _react2.jsx)(_screen_reader_live.EuiScreenReaderLive, ariaLiveProps, loadedAriaLive), loadedContent));
 };
 exports.EuiSkeletonLoading = EuiSkeletonLoading;

package/optimize/lib/components/skeleton/skeleton_rectangle.js

@@ -15,7 +15,7 @@ var _global_styling = require("../../global_styling");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_rectangle = require("./skeleton_rectangle.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "borderRadius", "width", "height", "style", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RADIUS = ['s', 'm', 'none'];
@@ -32,6 +32,9 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     style = _ref.style,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -49,7 +52,10 @@ var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
       }))
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonRectangle = EuiSkeletonRectangle;

package/optimize/lib/components/skeleton/skeleton_text.js

@@ -13,7 +13,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_text = require("./skeleton_text.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "lines", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 var LINES = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 exports.LINES = LINES;
 var EuiSkeletonText = function EuiSkeletonText(_ref) {
@@ -25,6 +25,9 @@ var EuiSkeletonText = function EuiSkeletonText(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -44,7 +47,10 @@ var EuiSkeletonText = function EuiSkeletonText(_ref) {
       className: (0, _classnames.default)('euiSkeletonText', className)
     }, rest), lineElements),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonText = EuiSkeletonText;

package/optimize/lib/components/skeleton/skeleton_title.js

@@ -13,7 +13,7 @@ var _services = require("../../services");
 var _skeleton_loading = require("./skeleton_loading");
 var _skeleton_title = require("./skeleton_title.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "ariaWrapperProps", "children"];
+var _excluded = ["isLoading", "size", "className", "contentAriaLabel", "announceLoadingStatus", "announceLoadedStatus", "ariaLiveProps", "ariaWrapperProps", "children"];
 var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
   var _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
@@ -21,6 +21,9 @@ var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     className = _ref.className,
     contentAriaLabel = _ref.contentAriaLabel,
+    announceLoadingStatus = _ref.announceLoadingStatus,
+    announceLoadedStatus = _ref.announceLoadedStatus,
+    ariaLiveProps = _ref.ariaLiveProps,
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -34,7 +37,10 @@ var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
       css: cssStyles
     }, rest)),
     loadedContent: children || '',
-    contentAriaLabel: contentAriaLabel
+    contentAriaLabel: contentAriaLabel,
+    announceLoadingStatus: announceLoadingStatus,
+    announceLoadedStatus: announceLoadedStatus,
+    ariaLiveProps: ariaLiveProps
   }, ariaWrapperProps));
 };
 exports.EuiSkeletonTitle = EuiSkeletonTitle;

package/optimize/lib/test/rtl/custom_render.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.screen = exports.render = void 0;
+exports.within = exports.screen = exports.render = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@testing-library/react");
@@ -40,4 +40,13 @@ exports.render = customRender;
  * @see https://github.com/testing-library/dom-testing-library/issues/516
  */
 var customScreen = _objectSpread(_objectSpread({}, _react.screen), (0, _react.within)(document.body, dataTestSubjQueries));
-exports.screen = customScreen;
+exports.screen = customScreen;
+/**
+ * Custom within util with EUI query helpers
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+var customWithin = function customWithin(element) {
+  return (0, _react.within)(element, _objectSpread(_objectSpread({}, _react.queries), dataTestSubjQueries));
+};
+exports.within = customWithin;

package/optimize/lib/test/rtl/index.d.ts

@@ -1,3 +1,3 @@
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';

package/optimize/lib/test/rtl/index.js

@@ -11,7 +11,8 @@ var _exportNames = {
   findAllByTestSubject: true,
   findByTestSubject: true,
   render: true,
-  screen: true
+  screen: true,
+  within: true
 };
 Object.defineProperty(exports, "findAllByTestSubject", {
   enumerable: true,
@@ -61,6 +62,12 @@ Object.defineProperty(exports, "screen", {
     return _custom_render.screen;
   }
 });
+Object.defineProperty(exports, "within", {
+  enumerable: true,
+  get: function get() {
+    return _custom_render.within;
+  }
+});
 var _component_helpers = require("./component_helpers");
 Object.keys(_component_helpers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "77.2.2",
+  "version": "79.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "node:16.18.1",
+  "docker_image": "node:16.19.1",
   "sideEffects": [
     "*.css",
     "*.scss"

package/src/components/form/switch/_switch.scss

@@ -2,6 +2,9 @@
 // stylelint-disable max-nesting-depth
 
 .euiSwitch {
+  $euiSwitchOffDisabledColor: lightOrDarkTheme(transparentize($euiColorLightShade, .5), transparentize($euiColorDarkShade, .4));
+  $euiSwitchDisabledThumbColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .5), $euiColorDarkShade);
+
   position: relative;
   display: inline-flex;
   align-items: flex-start;
@@ -24,30 +27,6 @@
       @include euiCustomControlFocused;
     }
 
-    &:disabled {
-      &:hover,
-      ~ .euiSwitch__label:hover {
-        cursor: not-allowed;
-      }
-
-      .euiSwitch__body {
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__thumb {
-        @include euiCustomControlDisabled;
-        background-color: $euiSwitchOffColor;
-      }
-
-      .euiSwitch__icon {
-        fill: $euiFormCustomControlDisabledIconColor;
-      }
-
-      + .euiSwitch__label {
-        color: $euiFormControlDisabledColor;
-      }
-    }
-
     &[aria-checked='false'] {
       .euiSwitch__body {
         background-color: $euiSwitchOffColor;
@@ -67,6 +46,31 @@
         }
       }
     }
+
+    &:disabled {
+      &:hover,
+      ~ .euiSwitch__label:hover {
+        cursor: not-allowed;
+      }
+
+      .euiSwitch__body {
+        background-color: $euiSwitchOffDisabledColor;
+      }
+
+      .euiSwitch__thumb {
+        background-color: rgba(0,0,0,0);
+        border-color: $euiSwitchDisabledThumbColor;
+        box-shadow: none;
+      }
+
+      .euiSwitch__icon {
+        fill: $euiColorDarkShade;
+      }
+
+      + .euiSwitch__label {
+        color: $euiFormControlDisabledColor;
+      }
+    }
   }
 
   .euiSwitch__body {
@@ -107,7 +111,7 @@
     width: $euiSwitchWidth - ($euiSwitchThumbSize / 2) + $euiSizeS;
     height: $euiSwitchIconHeight;
     transition: left $euiAnimSpeedNormal $euiAnimSlightBounce, right $euiAnimSpeedNormal $euiAnimSlightBounce;
-    fill: $euiTextColor;
+    fill: $euiColorEmptyShade;
   }
 
   .euiSwitch__icon--checked {
@@ -194,7 +198,7 @@
     .euiSwitch__button[aria-checked='false'],
     .euiSwitch__button[aria-checked='true']:disabled {
       .euiSwitch__thumb {
-        border-color: $euiFormCustomControlBorderColor;
+        border-color: $euiSwitchDisabledThumbColor;
       }
     }
 

package/src/global_styling/variables/_form.scss

@@ -33,13 +33,13 @@ $euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 2
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
-$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
+$euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 40%, 31%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 0 transparent !default;
 $euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
 $euiFormInputGroupBorder: none !default;
-$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
+$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorDarkShade, .25), transparentize($euiColorDarkShade, .4)) !default;
 
 // Icons sizes
 $euiFormControlIconSizes: (

package/test-env/components/avatar/avatar.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
+exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = exports.CASING = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -17,13 +17,16 @@ var _services = require("../../services");
 var _icon = require("../icon");
 var _avatar = require("./avatar.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"],
+  _excluded2 = ["casing"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
 exports.TYPES = TYPES;
+var CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
+exports.CASING = CASING;
 var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
   var className = _ref.className,
@@ -42,14 +45,17 @@ var EuiAvatar = function EuiAvatar(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     style = _ref.style,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _props$casing = props.casing,
+    casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var classes = (0, _classnames.default)('euiAvatar', (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(size), size), (0, _defineProperty2.default)(_classNames, "euiAvatar--".concat(type), type), (0, _defineProperty2.default)(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
-  var cssStyles = [styles.euiAvatar, styles[size], styles[type], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
   checkValidInitials(initials);
   var avatarStyle = _objectSpread({}, style);
   var iconCustomColor = iconColor;
@@ -142,6 +148,13 @@ EuiAvatar.propTypes = {
        */
   type: _propTypes.default.any,
   size: _propTypes.default.any,
+  /**
+       * Sets the letter casing of the displayed initials.
+       * Defaults to `uppercase` for `type="user"` avatars.
+       * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+       * @default uppercase
+       */
+  casing: _propTypes.default.any,
   /**
        * Grays out the avatar to simulate being disabled
        */

package/test-env/components/avatar/avatar.styles.js

@@ -7,12 +7,44 @@ exports.euiAvatarStyles = 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 _avatarSize = function _avatarSize(_ref3) {
-  var size = _ref3.size,
-    fontSize = _ref3.fontSize;
+var _avatarSize = function _avatarSize(_ref7) {
+  var size = _ref7.size,
+    fontSize = _ref7.fontSize;
   return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;"
+} : {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;"
+} : {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;"
+} : {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;"
+} : {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "14sj6wh-isDisabled",
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;"
 } : {
@@ -20,7 +52,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref6 = process.env.NODE_ENV === "production" ? {
   name: "ont6vs-user",
   styles: "border-radius:50%;label:user;"
 } : {
@@ -28,18 +60,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:user;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiAvatarStyles = function euiAvatarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiAvatarStyles = function euiAvatarStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", (0, _global_styling.logicalTextAlignCSS)('center'), ";", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref2,
+    user: _ref6,
     space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
     // States
-    isDisabled: _ref,
+    isDisabled: _ref5,
     // Sizes
     s: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: euiTheme.size.l,
@@ -56,7 +88,12 @@ var euiAvatarStyles = function euiAvatarStyles(_ref4) {
     xl: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: "calc(".concat(euiTheme.size.base, " * 4)"),
       fontSize: "calc(".concat(euiTheme.size.xl, " * 0.8)")
-    }), ";label:xl;")
+    }), ";label:xl;"),
+    // Casing
+    capitalize: _ref4,
+    uppercase: _ref3,
+    lowercase: _ref2,
+    none: _ref
   };
 };
 exports.euiAvatarStyles = euiAvatarStyles;

package/test-env/components/form/form.styles.js

@@ -41,10 +41,10 @@ var euiFormVariables = function euiFormVariables(euiThemeContext) {
     inputGroupBorder: 'none'
   };
 
-  // Colors - specific for checkboxes and radios
+  // Colors - specific to checkboxes, radios, switches, and range thumbs
   var customControlColors = {
     customControlDisabledIconColor: isColorDark ? (0, _services.shade)(euiTheme.colors.mediumShade, 0.38) : (0, _services.tint)(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.18) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.3)
+    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.31)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {

package/test-env/components/loading/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "EuiLoadingChart", {
     return _loading_chart.EuiLoadingChart;
   }
 });
-Object.defineProperty(exports, "EuiLoadingContent", {
-  enumerable: true,
-  get: function get() {
-    return _loading_content.EuiLoadingContent;
-  }
-});
 Object.defineProperty(exports, "EuiLoadingElastic", {
   enumerable: true,
   get: function get() {
@@ -35,6 +29,5 @@ Object.defineProperty(exports, "EuiLoadingSpinner", {
 });
 var _loading_elastic = require("./loading_elastic");
 var _loading_chart = require("./loading_chart");
-var _loading_content = require("./loading_content");
 var _loading_spinner = require("./loading_spinner");
 var _loading_logo = require("./loading_logo");

package/test-env/components/page/page_header/page_header_content.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiPageHeaderContent = exports.ALIGN_ITEMS = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -156,21 +157,19 @@ var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   }
   var rightSideFlexItem;
   if (rightSideItems && rightSideItems.length) {
-    var wrapWithFlex = function wrapWithFlex() {
-      return rightSideItems.map(function (item, index) {
-        return (0, _react2.jsx)(_flex.EuiFlexItem, {
-          grow: false,
-          key: index
-        }, item);
-      });
-    };
+    var itemsToRender = isResponsiveBreakpoint ? rightSideItems : (0, _toConsumableArray2.default)(rightSideItems).reverse();
+    var rightSideFlexItems = itemsToRender.map(function (item, index) {
+      return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        grow: false,
+        key: index
+      }, item);
+    });
     rightSideFlexItem = (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
       wrap: true,
-      responsive: false,
-      direction: isResponsiveBreakpoint ? undefined : 'rowReverse'
-    }, rightSideGroupProps), wrapWithFlex()));
+      responsive: false
+    }, rightSideGroupProps), rightSideFlexItems));
   }
   return alignItems === 'top' || isResponsiveBreakpoint ? (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,

package/test-env/components/search_bar/query/ast_to_es_query_dsl.js

@@ -61,9 +61,9 @@ var _termValuesToQuery = function _termValuesToQuery(values, options) {
   var body = {
     query: values.map(function (value) {
       if ((0, _predicate.isString)(value) && value.match(/\s/)) {
-        return "\"".concat(value, "\"");
+        return "+\"".concat(value, "\"");
       }
-      return value;
+      return "+".concat(value);
     }).join(' ')
   };
   if (body.query === '') {

package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -302,6 +302,13 @@ EuiSelectableTemplateSitewide.propTypes = {
            */
       type: _propTypes.default.any,
       size: _propTypes.default.any,
+      /**
+           * Sets the letter casing of the displayed initials.
+           * Defaults to `uppercase` for `type="user"` avatars.
+           * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+           * @default uppercase
+           */
+      casing: _propTypes.default.any,
       /**
            * Grays out the avatar to simulate being disabled
            */