@elastic/eui 122.0.0 → 122.1.0

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

@@ -15,14 +15,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var euiLinkCSS = exports.euiLinkCSS = function euiLinkCSS(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      text-decoration: underline;\n      text-decoration-thickness: ").concat(euiTheme.border.width.thick, ";\n    }\n  ");
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n    color: ").concat(euiTheme.colors.textParagraph, ";\n    text-decoration: underline dotted;\n    /* use a fallback as \"from-font\" isn't fully supported by all last major versions yet */\n    text-decoration-thickness: ").concat(euiTheme.border.width.thin, ";\n    text-decoration-thickness: from-font;\n\n    &:hover,\n    &:focus {\n      text-decoration: underline solid;\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      text-decoration-thickness: ").concat(euiTheme.border.width.thick, ";\n    }\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "9njbi5-disabled",
-  styles: "font-weight:inherit;&:hover{cursor:auto;}&:hover,&:focus,&:target{text-decoration:none;};label:disabled;"
+  name: "1ypp78e-disabled",
+  styles: "font-weight:inherit;color:inherit;text-decoration:none;&:hover{cursor:auto;}&:hover,&:focus,&:target{color:inherit;text-decoration:none;};label:disabled;"
 } : {
-  name: "9njbi5-disabled",
-  styles: "font-weight:inherit;&:hover{cursor:auto;}&:hover,&:focus,&:target{text-decoration:none;};label:disabled;",
+  name: "1ypp78e-disabled",
+  styles: "font-weight:inherit;color:inherit;text-decoration:none;&:hover{cursor:auto;}&:hover,&:focus,&:target{color:inherit;text-decoration:none;};label:disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiLinkStyles = exports.euiLinkStyles = function euiLinkStyles(euiThemeContext) {
@@ -38,9 +38,10 @@ var euiLinkStyles = exports.euiLinkStyles = function euiLinkStyles(euiThemeConte
     danger: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textDanger), ";label:danger;"),
     warning: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textWarning), ";label:warning;"),
     ghost: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textGhost), ";label:ghost;"),
-    text: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textParagraph), ";label:text;")
+    text: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textParagraph, euiTheme.colors.textPrimary), ";label:text;")
   };
 };
-var _colorCSS = function _colorCSS(color) {
-  return "\n    color: ".concat(color, ";\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
+var _colorCSS = function _colorCSS(color, interactionColor) {
+  var focusColor = interactionColor !== null && interactionColor !== void 0 ? interactionColor : color;
+  return "\n    color: ".concat(color, ";\n\n    &:where(:hover, :focus) {\n      color: ").concat(focusColor, ";\n    }\n\n    &:target {\n      color: color-mix(in oklab, ").concat(color, ", #000 10%);\n    }\n  ");
 };

package/lib/components/list_group/list_group.styles.js

@@ -28,7 +28,7 @@ var euiListGroupStyles = exports.euiListGroupStyles = function euiListGroupStyle
   return {
     // Base
     euiListGroup: _ref,
-    bordered: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.thin, ";;label:bordered;"),
+    bordered: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.panel, ";border:", euiTheme.border.thin, ";;label:bordered;"),
     maxWidthDefault: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', formMaxWidth), ";;label:maxWidthDefault;")
   };
 };

package/lib/components/list_item_layout/_list_item_layout.styles.js

@@ -33,7 +33,7 @@ var euiListItemVariables = exports.euiListItemVariables = function euiListItemVa
 };
 var listItemCommonStyles = function listItemCommonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return "\n    display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */\n    align-items: center;\n    ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n    line-height: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').lineHeight, ";\n    font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n    color: ").concat(euiTheme.colors.textParagraph, ";\n    overflow: hidden;\n  ");
+  return "\n    display: inline-flex; /* Necessary to make sure it doesn't force the whole popover to be too wide */\n    align-items: center;\n    ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    border-radius: ").concat(euiTheme.border.radius.control, ";\n    line-height: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').lineHeight, ";\n    font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n    color: ").concat(euiTheme.colors.textParagraph, ";\n    overflow: hidden;\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8595p9-isDisabled",
@@ -61,7 +61,7 @@ var euiListItemLayoutStyles = exports.euiListItemLayoutStyles = function euiList
   var notDisabledSelector = "&:not([aria-disabled=\"true\"])";
   var sharedFlexStyles = "\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  ";
   var highlightedStyles = "\n    ".concat(notDisabledSelector, " {\n      background-color: ").concat(euiTheme.colors.backgroundBaseInteractiveHover, ";\n\n      ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
-    preferred: "\n          text-decoration: underline;\n        "
+    preferred: "\n          text-decoration: underline;\n\n          &:not(:focus, :focus-visible) {\n            /* uses outline to prevent layout jumps between navigated items */\n            outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n            outline-offset: -").concat(euiTheme.border.width.thin, ";\n          }\n        ")
   }), "\n    }\n  ");
   return {
     euiListItemLayout: /*#__PURE__*/(0, _react.css)(listItemCommonStyles(euiThemeContext), " ", (0, _global_styling.logicalCSS)('padding-horizontal', spacing.horizontal), ";;label:euiListItemLayout;"),
@@ -79,7 +79,9 @@ var euiListItemLayoutStyles = exports.euiListItemLayoutStyles = function euiList
     isDisabled: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDisabled, ";cursor:not-allowed;background-color:transparent;;label:isDisabled;"),
     buttonIsDisabled: _ref2,
     isFocused: /*#__PURE__*/(0, _react.css)(highlightedStyles, ";;label:isFocused;"),
-    isSelected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", notDisabledSelector, "{&:hover{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";}}.euiIcon,.euiButtonIcon{color:inherit;}.euiListItemLayout__prepend,.euiListItemLayout__append{.euiIcon{color:", euiTheme.colors.textPrimary, ";}};label:isSelected;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";background-color:", euiTheme.colors.backgroundBaseInteractiveSelect, ";", notDisabledSelector, "{&:hover{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";}}", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderStrongPrimary, ";\n          outline-offset: -").concat(euiTheme.border.width.thin, ";\n        ")
+    }), " .euiIcon,.euiButtonIcon{color:inherit;}.euiListItemLayout__prepend,.euiListItemLayout__append{.euiIcon{color:", euiTheme.colors.textPrimary, ";}};label:isSelected;"),
     isSelectedFocused: /*#__PURE__*/(0, _react.css)(notDisabledSelector, "{background-color:", euiTheme.colors.backgroundBaseInteractiveSelectHover, ";};label:isSelectedFocused;"),
     tooltip: {
       isDisabled: _ref

package/lib/components/markdown_editor/markdown_editor.styles.js

@@ -18,7 +18,7 @@ var euiMarkdownEditorVariables = exports.euiMarkdownEditorVariables = function e
   var euiTheme = _ref.euiTheme;
   return {
     minHeight: '150px',
-    borderRadius: euiTheme.border.radius.medium,
+    borderRadius: euiTheme.border.radius.panel,
     barsBackgroundColor: euiTheme.colors.lightestShade
   };
 };

package/lib/components/modal/modal.styles.js

@@ -20,8 +20,8 @@ var euiModalStyles = exports.euiModalStyles = function euiModalStyles(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiModal: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
-      borderAllInHighContrastMode: true
-    }), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+      border: 'none'
+    }), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.frame, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/(0, _react.css)("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/(0, _react.css)("min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {

package/lib/components/panel/panel.js

@@ -60,9 +60,9 @@ var EuiPanel = exports.EuiPanel = function EuiPanel(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'plain' : _ref$color,
     _ref$hasShadow = _ref.hasShadow,
-    hasShadow = _ref$hasShadow === void 0 ? true : _ref$hasShadow,
+    hasShadow = _ref$hasShadow === void 0 ? false : _ref$hasShadow,
     _ref$hasBorder = _ref.hasBorder,
-    hasBorder = _ref$hasBorder === void 0 ? false : _ref$hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder,
     _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? true : _ref$grow,
     panelRef = _ref.panelRef,
@@ -101,35 +101,45 @@ var EuiPanel = exports.EuiPanel = function EuiPanel(_ref) {
 EuiPanel.propTypes = {
   element: _propTypes.default.oneOfType([_propTypes.default.oneOf(["button"]), _propTypes.default.oneOf(["div"])]),
   /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
+     * Adds a medium shadow to the panel.
+     * Only applies when `color="plain"` and `hasBorder={false}`.
+     * @default false
      */
   /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
+     * Adds a medium shadow to the panel.
+     * Only applies when `color="plain"` and `hasBorder={false}`.
+     * @default false
      */
   hasShadow: _propTypes.default.bool,
   /**
      * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
+     * Only applies when `color="plain | transparent"`.
+     * @default true
      */
   /**
      * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
+     * Only applies when `color="plain | transparent"`.
+     * @default true
      */
   hasBorder: _propTypes.default.bool,
   /**
-     * Padding for all four sides
+     * Padding for all four sides.
+     * Do not use `xs` and `xl` values, they will be removed in the future.
+     * @default m
      */
   /**
-     * Padding for all four sides
+     * Padding for all four sides.
+     * Do not use `xs` and `xl` values, they will be removed in the future.
+     * @default m
      */
   paddingSize: _propTypes.default.any,
   /**
-     * Corner border radius
+     * Corner border radius.
+     * @default m
      */
   /**
-     * Corner border radius
+     * Corner border radius.
+     * @default m
      */
   borderRadius: _propTypes.default.any,
   /**

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

@@ -54,7 +54,7 @@ var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeCo
     }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/(0, _react.css)(";label:none;"),
-      m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
+      m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.panel, ";;label:m;")
     },
     // Setup interactive behavior
     isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {

package/lib/components/panel/split_panel/split_panel.js

@@ -59,7 +59,9 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
 };
 _EuiSplitPanelInner.propTypes = {
   /**
-     * Padding for all four sides
+     * Padding for all four sides.
+     * Do not use `xs` and `xl` values, they will be removed in the future.
+     * @default m
      */
   paddingSize: _propTypes.default.any,
   /**

package/lib/components/popover/popover.js

@@ -268,7 +268,8 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           offset: _this.props.attachToAnchor ? offset : _this.props.hasArrow ? 16 + offset : 8 + offset,
           arrowConfig: _this.props.hasArrow ? {
             arrowWidth: 16,
-            arrowBuffer: 10
+            arrowBuffer: 10,
+            borderRadius: 12
           } : {
             arrowWidth: 0,
             arrowBuffer: 0
@@ -518,6 +519,7 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
           isAttached: attachToAnchor,
           className: (0, _classnames.default)(panelClassName, panelProps === null || panelProps === void 0 ? void 0 : panelProps.className),
           hasShadow: false,
+          hasBorder: false,
           paddingSize: panelPaddingSize,
           tabIndex: tabIndex,
           "aria-live": ariaLive,

package/lib/components/popover/popover_footer.styles.js

@@ -19,7 +19,7 @@ var euiPopoverFooterStyles = exports.euiPopoverFooterStyles = function euiPopove
     highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.popoverFooterBorderColor)), (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.popoverFooterBorderColor)), (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.panel), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.panel), ";;label:euiPopoverFooter;"),
     // If the popover's containing panel has padding applied,
     // ensure the footer expands to cover that padding via negative margins
     panelPaddingSizes: {

package/lib/components/popover/popover_title.styles.js

@@ -19,7 +19,7 @@ var euiPopoverTitleStyles = exports.euiPopoverTitleStyles = function euiPopoverT
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), (0, _global_styling.logicalCSS)('border-top-left-radius', euiTheme.border.radius.medium), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', euiTheme.border.radius.medium), ";;label:euiPopoverTitle;"),
+    euiPopoverTitle: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), (0, _global_styling.logicalCSS)('border-top-left-radius', euiTheme.border.radius.panel), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', euiTheme.border.radius.panel), ";;label:euiPopoverTitle;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

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

@@ -112,7 +112,7 @@ var euiProgressStyles = exports.euiProgressStyles = function euiProgressStyles(e
     },
     // Positioning
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) + 1, ";", nonStaticPositioning(isNative), ";;label:fixed;"),
-    absolute: /*#__PURE__*/(0, _react.css)("position:absolute;", nonStaticPositioning(isNative), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), ";;label:absolute;"),
+    absolute: /*#__PURE__*/(0, _react.css)("position:absolute;z-index:", Number(euiTheme.levels.content) + 1, ";", nonStaticPositioning(isNative), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), ";;label:absolute;"),
     static: _ref2,
     // Colors
     primary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative, highContrastMode), ";;label:primary;"),

package/lib/components/resizable_container/resizable_panel.js

@@ -17,7 +17,7 @@ var _i18n = require("../i18n");
 var _resizable_collapse_button = require("./resizable_collapse_button");
 var _resizable_panel = require("./resizable_panel.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "css", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
+var _excluded = ["children", "className", "css", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "hasBorder", "borderRadius", "color", "paddingSize", "wrapperPadding"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -75,6 +75,8 @@ var EuiResizablePanel = exports.EuiResizablePanel = function EuiResizablePanel(_
     wrapperProps = _ref.wrapperProps,
     _ref$hasShadow = _ref.hasShadow,
     hasShadow = _ref$hasShadow === void 0 ? false : _ref$hasShadow,
+    _ref$hasBorder = _ref.hasBorder,
+    hasBorder = _ref$hasBorder === void 0 ? false : _ref$hasBorder,
     _ref$borderRadius = _ref.borderRadius,
     borderRadius = _ref$borderRadius === void 0 ? 'none' : _ref$borderRadius,
     _ref$color = _ref.color,
@@ -232,6 +234,7 @@ var EuiResizablePanel = exports.EuiResizablePanel = function EuiResizablePanel(_
     css: contentCssStyles,
     className: panelClasses,
     hasShadow: hasShadow,
+    hasBorder: hasBorder,
     borderRadius: borderRadius,
     color: color,
     paddingSize: isCollapsed ? 'none' : paddingSize
@@ -298,21 +301,26 @@ EuiResizablePanel.propTypes = {
      */
   wrapperPadding: _propTypes.default.any,
   /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
+     * Adds a medium shadow to the panel.
+     * Only applies when `color="plain"` and `hasBorder={false}`.
+     * @default false
      */
   hasShadow: _propTypes.default.bool,
   /**
      * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
+     * Only applies when `color="plain | transparent"`.
+     * @default true
      */
   hasBorder: _propTypes.default.bool,
   /**
-     * Padding for all four sides
+     * Padding for all four sides.
+     * Do not use `xs` and `xl` values, they will be removed in the future.
+     * @default m
      */
   paddingSize: _propTypes.default.any,
   /**
-     * Corner border radius
+     * Corner border radius.
+     * @default m
      */
   borderRadius: _propTypes.default.any,
   /**

package/lib/components/selectable/selectable_list/selectable_list.styles.js

@@ -31,7 +31,7 @@ var euiSelectableListStyles = exports.euiSelectableListStyles = function euiSele
   return {
     euiSelectableList: /*#__PURE__*/(0, _react.css)("&:has(:focus-visible){", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiSelectableList;"),
     fullHeight: _ref,
-    bordered: /*#__PURE__*/(0, _react.css)("overflow:hidden;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";;label:bordered;"),
+    bordered: /*#__PURE__*/(0, _react.css)("overflow:hidden;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.panel, ";;label:bordered;"),
     paddingSize: {
       s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:s;")
     },

package/lib/components/selectable/selectable_message/selectable_message.styles.js

@@ -18,6 +18,6 @@ var euiSelectableMessageStyles = exports.euiSelectableMessageStyles = function e
   return {
     euiSelectableMessage: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;justify-content:center;align-items:center;padding:", euiTheme.size.s, ";text-align:center;word-wrap:break-word;;label:euiSelectableMessage;"),
     // Match border from selectable_list
-    bordered: /*#__PURE__*/(0, _react.css)("overflow:hidden;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";;label:bordered;")
+    bordered: /*#__PURE__*/(0, _react.css)("overflow:hidden;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.panel, ";;label:bordered;")
   };
 };

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

@@ -30,8 +30,8 @@ var euiSkeletonRectangleStyles = exports.euiSkeletonRectangleStyles = function e
       gradientSize: '400%'
     }), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;label:euiSkeletonRectangle;"),
     // Border radius
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.inline, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.inline, ";;label:m;"),
     none: _ref
   };
 };

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

@@ -29,7 +29,7 @@ var calculateLineSize = function calculateLineSize(euiThemeContext, size) {
 var euiSkeletonTextStyles = exports.euiSkeletonTextStyles = function euiSkeletonTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSkeletonText: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " border-radius:", euiTheme.border.radius.small, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), "transform:translateY(-25%);&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";};label:euiSkeletonText;"),
+    euiSkeletonText: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " border-radius:", euiTheme.border.radius.inline, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), "transform:translateY(-25%);&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";};label:euiSkeletonText;"),
     // Sizes
     m: /*#__PURE__*/(0, _react.css)(calculateLineSize(euiThemeContext, 'm'), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)(calculateLineSize(euiThemeContext, 's'), ";;label:s;"),

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

@@ -20,13 +20,13 @@ var _utils = require("./utils");
 var euiSkeletonTitleStyles = exports.euiSkeletonTitleStyles = function euiSkeletonTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), " border-radius:", euiTheme.border.radius.medium, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;label:euiSkeletonTitle;"),
+    euiSkeletonTitle: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '45%'), " border-radius:", euiTheme.border.radius.inline, ";", (0, _utils.euiSkeletonGradientAnimation)(euiThemeContext), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;label:euiSkeletonTitle;"),
     // Sizes
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'l').lineHeight), ";;label:l;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'm').lineHeight), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 's').lineHeight), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xs').lineHeight), ";;label:xs;"),
     xxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxs').lineHeight), ";;label:xxs;"),
-    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), " border-radius:", euiTheme.border.radius.small, ";;label:xxxs;")
+    xxxs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _title.euiTitle)(euiThemeContext, 'xxxs').lineHeight), " border-radius:", euiTheme.border.radius.inline, ";;label:xxxs;")
   };
 };

package/lib/components/table/sticky_header/sticky_header.js

@@ -133,12 +133,14 @@ var EuiTableStickyHeader = exports.EuiTableStickyHeader = function EuiTableStick
     css: styles.wrapper,
     "aria-hidden": "true"
   }, (0, _react2.jsx)("div", {
+    className: "euiTableStickyHeader__container",
     css: [
     // This CSS container is needed to feed `<EuiTableHeaderCell>`
     // with `sticky` prop set the necessary scroll state
     (0, _global_styling.euiContainerCSS)('normal', _const.EUI_TABLE_CSS_CONTAINER_NAME, true), styles.innerWrapper, ";label:EuiTableStickyHeader;"],
     ref: stickyTableWrapperRef
   }, (0, _react2.jsx)("table", {
+    className: "euiTableStickyHeader",
     css: tableStyles,
     ref: stickyTableRef
   }, (0, _react2.jsx)(_table_header.EuiTableHeader, {

package/lib/components/table/sticky_scrollbar/sticky_scrollbar.styles.js

@@ -26,6 +26,6 @@ var euiTableStickyScrollbarStyles = exports.euiTableStickyScrollbarStyles = func
   return {
     wrapper: /*#__PURE__*/(0, _react.css)("block-size:", euiTheme.size.base, ";padding:", euiTheme.size.xs, ";position:sticky;background:", euiTheme.components.scrollbarTrackColor, ";inset-block-end:var(--euiTableStickyScrollbarOffsetBottom, 0);z-index:var(--euiTableStickyScrollbarZIndex, 0);;label:wrapper;"),
     wrapperHidden: _ref,
-    track: /*#__PURE__*/(0, _react.css)("block-size:100%;background:", (0, _services.transparentize)(euiTheme.colors.darkShade, 0.5), ";border-radius:", euiTheme.border.radius.small, ";;label:track;")
+    track: /*#__PURE__*/(0, _react.css)("block-size:100%;background:", (0, _services.transparentize)(euiTheme.colors.darkShade, 0.5), ";border-radius:", euiTheme.border.radius.inline, ";;label:track;")
   };
 };

package/lib/components/table/table.js

@@ -74,6 +74,7 @@ var EuiTable = exports.EuiTable = function EuiTable(originalProps) {
     compressed: compressed,
     isResponsive: isResponsive
   }), (0, _react2.jsx)("div", {
+    className: "euiTable__wrapper",
     css: cssStyles,
     ref: tableWrapperRef
   }, (0, _react2.jsx)("table", _extends({

package/lib/components/table/table_header_cell.js

@@ -62,7 +62,8 @@ var CellContents = function CellContents(_ref) {
     position: "top",
     iconProps: _objectSpread({
       role: 'button'
-    }, tooltipProps.iconProps)
+    }, tooltipProps.iconProps),
+    display: "flex"
   }, tooltipProps.tooltipProps)) : null;
   return (0, _react2.jsx)(_table_cell_content.EuiTableCellContent, {
     className: className,

package/lib/components/table/table_row.styles.js

@@ -43,7 +43,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.medium, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n              ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
+      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), " border-radius:", euiTheme.border.radius.panel, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n              ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
       /* Omitting adding a class via css here as it's a default style on mobile, not a standalone prop-related style.
       Adding it separate allows better appliance control via props without the need to override the styles. */
       hasBorder: "\n        ".concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {

package/lib/components/tabs/tab.styles.js

@@ -28,10 +28,10 @@ var euiTabStyles = exports.euiTabStyles = function euiTabStyles(euiThemeContext)
     return x * 2;
   }) : euiTheme.border.width.thick;
   return {
-    euiTab: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";}&::after{position:absolute;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
+    euiTab: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', 0), " border-radius:", euiTheme.border.radius.control, ";font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textSubdued, ";&:focus{outline-offset:-", euiTheme.focus.width, ";}&::after{position:absolute;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";&::after{content:'';border-color:", euiTheme.colors.primary, ";};label:selected;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";&::after{content:'';border-color:", euiTheme.colors.primary, ";};label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";;label:disabled;"),
       selected: /*#__PURE__*/(0, _react.css)("&::after{content:'';border-color:", euiTheme.colors.textDisabled, ";};label:selected;")
@@ -41,7 +41,7 @@ var euiTabStyles = exports.euiTabStyles = function euiTabStyles(euiThemeContext)
 var euiTabContentStyles = exports.euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTab__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight[euiTheme.font.title.weight], ";;label:euiTab__content;"),
+    euiTab__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.semiBold, ";;label:euiTab__content;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.size.xl, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";line-height:", euiTheme.size.xxl, ";;label:m;"),

package/lib/components/text/text.js

@@ -32,7 +32,7 @@ var EuiText = exports.EuiText = function EuiText(_ref) {
   var _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     color = _ref.color,
     _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? true : _ref$grow,
@@ -90,6 +90,7 @@ EuiText.propTypes = {
   textAlign: _propTypes.default.any,
   /**
        * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.
+       * @default 's'
        */
   size: _propTypes.default.any,
   grow: _propTypes.default.bool

package/lib/components/text/text.styles.js

@@ -79,7 +79,7 @@ var euiTextStyles = exports.euiTextStyles = function euiTextStyles(euiThemeConte
   return {
     euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.textSubdued, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock > pre){white-space:pre-wrap;background-color:", codeColors.backgroundColor, ";color:", codeColors.color, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: "border: ".concat(euiTheme.border.thin)
-    }), ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    }), ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.inline, function (x) {
       return x / 2;
     }), ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // Fixes an odd border issue in Windows high contrast themes

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

@@ -37,7 +37,8 @@ var euiTitle = exports.euiTitle = function euiTitle(euiThemeContext) {
   };
   return _objectSpread(_objectSpread({}, (0, _global_styling.euiFontSize)(euiThemeContext, titleScaleToFontSizeScaleMap[scale], options)), {}, {
     fontWeight: euiTheme.font.weight[euiTheme.font.title.weight],
-    color: euiTheme.colors.textHeading
+    color: euiTheme.colors.textHeading,
+    letterSpacing: euiTheme.font.title.letterSpacing
   });
 };
 

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

@@ -10,7 +10,7 @@ var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _title = require("../title/title.styles");
 var _panel = require("../panel/panel.styles");
-var _templateObject;
+var _templateObject, _templateObject2;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,11 +22,21 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 var TEXT_MAX_WIDTH = 1200;
 var CONTAINER_NAME = 'euiToast';
 var CQC_BREAKPOINT_NARROWEST = '(max-width: 320px)';
-var euiToastAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: scaleX(1);\n  }\n  to {\n    transform: scaleX(0);\n  }\n"])));
+var decorClipSize = '9px'; // the height of the decor clip that includes the border rounding
+var decorClipPath = "polygon(0 0, 100% 0, 100% ".concat(decorClipSize, ", 0 ").concat(decorClipSize, ")");
+var euiToastAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(0 0, 0% 0, 0% ", ", 0 ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
+var euiToastAnimationRTL = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    clip-path: ", ";\n  }\n  to {\n    clip-path: polygon(100% 0, 100% 0, 100% ", ", 100% ", ");\n  }\n"])), decorClipPath, decorClipSize, decorClipSize);
 var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var borderRadius = euiTheme.border.radius.panel;
+  var decorLevel = Number(euiTheme.levels.content) + 1;
   var highlightSize = (0, _euiThemeCommon.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
-    return x + y;
+    return highContrastMode ? x * 2 + y : x + y;
+  });
+  var highlightOffset = euiTheme.border.width.thin;
+  var highlightSizeOffset = (0, _euiThemeCommon.mathWithUnits)([highlightOffset], function (x) {
+    return x * 2;
   });
   var paddingTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.base, highlightSize], function (x, y) {
     return x + y;
@@ -34,12 +44,17 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
   var offsetTop = (0, _euiThemeCommon.mathWithUnits)([euiTheme.size.s, highlightSize], function (x, y) {
     return x + y;
   });
+  var decorCommonStyles = "\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: ".concat(euiTheme.border.radius.panel, ";\n    border-end-start-radius: 0;\n    border-block-start: ").concat(highlightSize, " solid;\n    clip-path: ").concat(decorClipPath, ";\n    pointer-events: none;\n\n    ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n        inset-block-start: -".concat(highlightOffset, ";\n      inset-inline-start: -").concat(highlightOffset, ";\n      inline-size: calc(100% + ").concat(highlightSizeOffset, ");\n      ")
+  }), "\n  ");
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;border-radius:", euiTheme.border.radius.medium, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
+    euiToast: /*#__PURE__*/(0, _react.css)("container-type:inline-size;container-name:", CONTAINER_NAME, ";position:relative;border-radius:", borderRadius, ";", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), " ", (0, _global_styling.logicalCSS)('padding-top', paddingTop), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " background-color:", euiTheme.colors.backgroundBasePlain, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), (0, _panel.euiPanelBorderStyles)(euiThemeContext), ";;label:euiToast;"),
-    decor: /*#__PURE__*/(0, _react.css)("position:absolute;overflow:hidden;inset-block-start:0;inset-inline:0;", (0, _global_styling.logicalCSS)('height', highlightSize), " border-start-start-radius:", euiTheme.border.radius.medium, ";border-start-end-radius:", euiTheme.border.radius.medium, ";background-color:var(--euiToastTypeBackgroundColor);", (0, _high_contrast.preventForcedColors)(euiThemeContext), " &::before{content:'';position:absolute;z-index:", euiTheme.levels.content, ";inset-block-start:0;inset-inline:0;", (0, _global_styling.logicalCSS)('height', '100%'), " border-radius:1px;border-end-start-radius:0;background-color:var(--euiToastTypeColor);pointer-events:none;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " transform-origin:left center;[dir='rtl'] &{transform-origin:right center;border-end-start-radius:1px;border-end-end-radius:0;}};label:decor;"),
+    decor: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;pointer-events:none;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          --euiToastTypeBackgroundColor: ".concat(euiTheme.colors.borderBasePlain, ";\n        ")
+    }), " &::before{", decorCommonStyles, " z-index:", decorLevel, ";border-block-start-color:var(--euiToastTypeBackgroundColor);}&::after{", decorCommonStyles, "z-index:", decorLevel + 1, ";border-block-start-color:var(--euiToastTypeColor);};label:decor;"),
     // handles content + actions layout
     wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;gap:", euiTheme.size.m, ";inline-size:100%;;label:wrapper;"),
     // handles icon + text layout
@@ -50,7 +65,7 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
     icon: /*#__PURE__*/(0, _react.css)("grid-area:icon;position:relative;", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xxs), ";;label:icon;"),
     actions: /*#__PURE__*/(0, _react.css)("grid-area:actions;display:flex;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xl), "@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}};label:actions;"),
     dismissButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', offsetTop), ";", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), ";;label:dismissButton;"),
-    hasAnimation: /*#__PURE__*/(0, _react.css)("&::before{", _euiThemeCommon.euiCanAnimate, "{animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;}};label:hasAnimation;")
+    hasAnimation: /*#__PURE__*/(0, _react.css)("&::after{", _euiThemeCommon.euiCanAnimate, "{will-change:clip-path;animation:", euiToastAnimation, " var(--euiToastAnimationMs) linear forwards;[dir='rtl'] &{animation:", euiToastAnimationRTL, " var(--euiToastAnimationMs) linear forwards;}}};label:hasAnimation;")
   };
 };
 var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {

package/lib/components/token/token.styles.js

@@ -72,10 +72,10 @@ var euiTokenStyles = exports.euiTokenStyles = function euiTokenStyles(euiThemeCo
     euiToken: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;justify-content:center;svg{", (0, _global_styling.logicalCSS)('height', '100%'), " margin:auto;};label:euiToken;"),
     // Shapes
     circle: _ref,
-    square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
-    rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
+    square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.inline, ";;label:square;"),
+    rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.inline, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), " &[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), " &[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.inline, function (x) {
       return x / 2;
     }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base), " &[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),