@elastic/eui 97.3.0 → 97.3.1-rc.0

package/optimize/es/components/filter_group/filter_select_item.styles.js

@@ -13,7 +13,7 @@ export var euiFilterSelectItemStyles = function euiFilterSelectItemStyles(euiThe
   var euiTheme = euiThemeContext.euiTheme;
   var focusStyles = "\n    color: ".concat(euiTheme.colors.primary, ";\n    background-color: ").concat(euiTheme.focus.backgroundColor, ";\n    outline-offset: -").concat(euiTheme.focus.width, ";\n    text-decoration: underline;\n\n    &:disabled {\n      background-color: ").concat(transparentize(euiTheme.colors.disabled, 0.1), ";\n    }\n  ");
   return {
-    euiFilterSelectItem: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", euiFontSize(euiThemeContext, 's'), " ", logicalTextAlignCSS('left'), " color:", euiTheme.colors.text, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.lightestShade)), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
+    euiFilterSelectItem: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " ", logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", euiFontSize(euiThemeContext, 's'), " ", logicalTextAlignCSS('left'), " color:", euiTheme.colors.text, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(transparentize(euiTheme.border.color, 0.4))), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
     isFocused: /*#__PURE__*/css(focusStyles, ";;label:isFocused;")
   };
 };

package/optimize/es/components/flyout/_flyout_close_button.styles.js

@@ -16,7 +16,9 @@ export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiT
   return {
     euiFlyout__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
     inside: /*#__PURE__*/css("background-color:", transparentize(euiTheme.colors.emptyShade, 0.9), ";;label:inside;"),
-    outside: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), "animation:none!important;;label:outside;"),
+    outside: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), "animation:none!important;;label:outside;"),
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons

package/optimize/es/components/flyout/flyout.styles.js

@@ -38,7 +38,9 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     // Left-side flyouts should only be used for navigation
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
-    overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
+    overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), ";;label:overlay;"),
     push: {
       push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
       right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),

package/optimize/es/components/form/file_picker/file_picker.styles.js

@@ -63,7 +63,7 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
       euiFilePicker__input: _ref4,
       largeInteractive: _ref3
     },
-    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.border.color, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
     disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,

package/optimize/es/components/form/form.styles.js

@@ -9,6 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
+import { keyframes } from '@emotion/css';
 import { shade, tint, darken, transparentize, makeHighContrastColor } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
@@ -24,7 +25,8 @@ export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
 };
 export var euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var isColorDark = colorMode === 'DARK';
   var backgroundColor = isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.6);
   var controlHeight = euiTheme.size.xxl;
@@ -42,14 +44,17 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     }),
     iconCompressedAffordance: mathWithUnits(euiTheme.size.m, function (x) {
       return x * 1.5;
-    })
+    }),
+    stateUnderlineHeight: highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+      return x * 2;
+    }) : euiTheme.border.width.thick
   };
   var colors = {
     textColor: euiTheme.colors.text,
     backgroundColor: backgroundColor,
     backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.05),
     backgroundReadOnlyColor: euiTheme.colors.emptyShade,
-    borderColor: transparentize(colorMode === 'DARK' ? euiTheme.colors.ghost : darken(euiTheme.border.color, 4), 0.1),
+    borderColor: highContrastMode ? euiTheme.border.color : transparentize(colorMode === 'DARK' ? euiTheme.colors.ghost : darken(euiTheme.border.color, 4), 0.1),
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
@@ -78,6 +83,7 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
   });
 };
 export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
   return {
     shared: "\n      ".concat(euiFormControlText(euiThemeContext), "\n      ").concat(euiFormControlDefaultShadow(euiThemeContext), "\n    "),
@@ -85,7 +91,7 @@ export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext)
     uncompressed: "\n      ".concat(logicalCSS('height', form.controlHeight), "\n      ").concat(logicalCSS('padding-vertical', form.controlPadding), "\n      ").concat(logicalCSS('padding-left', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat(logicalCSS('padding-right', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n      border-radius: ").concat(form.controlBorderRadius, ";\n    "),
     compressed: "\n      ".concat(logicalCSS('height', form.controlCompressedHeight), "\n      ").concat(logicalCSS('padding-vertical', form.controlCompressedPadding), "\n      ").concat(logicalCSS('padding-left', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat(logicalCSS('padding-right', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n      border-radius: ").concat(form.controlCompressedBorderRadius, ";\n    "),
     // In group
-    inGroup: "\n      ".concat(logicalCSS('height', '100%'), "\n      box-shadow: none;\n      border-radius: 0;\n    "),
+    inGroup: "\n      ".concat(logicalCSS('height', '100%'), "\n      ").concat(highContrastMode ? 'border: none' : 'box-shadow: none', ";\n      border-radius: 0;\n    "),
     // Widths
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat(logicalCSS('max-width', '100%'), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
@@ -114,24 +120,27 @@ export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(eu
     withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
     _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
     withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
 
   // We use inset box-shadow instead of border to skip extra height calculations
-  var border = "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim();
+  var border = !highContrastMode ? "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim() : "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";");
   var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
-  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n  ").trim();
+  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(form.stateUnderlineHeight, ",\n      transparent ").concat(form.stateUnderlineHeight, ",\n      transparent 100%\n    );\n  ").trim();
   var backgroundAnimation = "\n    ".concat(euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
   return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
-export var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
+export var euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var focusColor = euiTheme.colors.primary;
+  return "\n    --euiFormControlStateColor: ".concat(focusColor, ";\n    background-color: ").concat(colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n    background-size: 100% 100%;\n    outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n    ").concat(euiFormControlHighContrastFallback(euiThemeContext, focusColor), "\n  ");
 };
-export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
+export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var invalidColor = euiTheme.colors.danger;
+  return "\n    --euiFormControlStateColor: ".concat(invalidColor, ";\n    background-size: 100% 100%;\n    ").concat(euiFormControlHighContrastFallback(euiThemeContext, invalidColor), "\n  ");
 };
 export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -165,6 +174,19 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
   return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(invalidBorder), ", ").concat(backgroundShadow, ";\n      }\n    }\n  ");
 };
+var euiFormControlHighContrastFallback = function euiFormControlHighContrastFallback(euiThemeContext, color) {
+  if (!euiThemeContext.highContrastMode) return '';
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight,
+    animationTiming = _euiFormVariables.animationTiming;
+
+  // Windows high contrast themes ignore all background-images that aren't url-based,
+  // so to restore the linear-gradient that provides important visual information, we're
+  // using a static inline SVG workaround
+  var fill = encodeURIComponent(color);
+  var inlineSVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='".concat(fill, "' /%3E%3C/svg%3E");
+  return "\n    @media (forced-colors: active) {\n      background-size: 100% ".concat(stateUnderlineHeight, ";\n      background-position: bottom left;\n      background-origin: border-box;\n      background-image: url(\"").concat(inlineSVG, "\");\n    }\n    /* Override the default transition with an animation, since we have to use a static height */\n    @media (forced-colors: active) and (prefers-reduced-motion: no-preference) {\n      transition: none;\n      animation: ").concat( /*#__PURE__*/keyframes("from{background-size:0% ", stateUnderlineHeight, ";}to{background-size:100% ", stateUnderlineHeight, ";};label:euiFormControlHighContrastFallback;"), " ").concat(animationTiming, " 1 forwards;\n    }\n  ");
+};
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
 };
@@ -175,7 +197,8 @@ var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
 
 export var euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var sizes = {
     control: euiTheme.size.base,
     lineHeight: euiTheme.size.l,
@@ -183,7 +206,7 @@ export var euiFormCustomControlVariables = function euiFormCustomControlVariable
   };
   var colors = {
     unselected: euiTheme.colors.emptyShade,
-    unselectedBorder: colorMode === 'DARK' ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    unselectedBorder: highContrastMode ? euiTheme.border.color : colorMode === 'DARK' ? tint(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
     : shade(euiTheme.colors.lightestShade, 0.4),
     selected: euiTheme.colors.primary,
     selectedIcon: euiTheme.colors.emptyShade,
@@ -202,7 +225,8 @@ export var euiFormCustomControlVariables = function euiFormCustomControlVariable
   };
 };
 export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var controlVars = euiFormCustomControlVariables(euiThemeContext);
   var centerWithLabel = mathWithUnits([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
     return (x - y) / 2;
@@ -210,18 +234,26 @@ export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiT
   return {
     wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
     input: {
-      fauxInput: "\n        position: relative;\n        ".concat(logicalCSS('height', controlVars.sizes.control), "\n        ").concat(logicalCSS('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      fauxInput: "\n        position: relative;\n        ".concat(logicalCSS('height', controlVars.sizes.control), "\n        ").concat(logicalCSS('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        /* For Windows high contrast themes, a border must always be rendered, not just a background */\n        border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
       // TODO: Revert https://github.com/elastic/eui/pull/7981
       // once https://github.com/dperini/nwsapi/issues/123
       // has been fixed, and restore `&:has(+ label)` selector
       hasLabel: "\n        ".concat(logicalCSS('margin-top', centerWithLabel), "\n      "),
       enabled: {
-        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n        "),
-        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border: ").concat(euiTheme.border.width.thin, " solid ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
+        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n          border-color: ").concat(controlVars.colors.selected, ";\n        "),
+        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border-color: ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
       },
       disabled: {
-        selected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabledIcon, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n        "),
-        unselected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabled, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n          cursor: not-allowed;\n        ")
+        get shared() {
+          var borderColor = highContrastMode ? controlVars.colors.disabledIcon : controlVars.colors.disabled;
+          return "\n            label: disabled;\n            cursor: not-allowed;\n            background-color: ".concat(controlVars.colors.disabled, ";\n            border-color: ").concat(borderColor, ";\n          ");
+        },
+        get selected() {
+          return "\n            ".concat(this.shared, "\n            color: ").concat(controlVars.colors.disabledIcon, ";\n          ");
+        },
+        get unselected() {
+          return "\n            ".concat(this.shared, "\n            color: ").concat(controlVars.colors.disabled, ";\n          ");
+        }
       },
       // Looks better centered at different zoom levels than just <EuiIcon size="s" />
       icon: "\n        transform: scale(0.75);\n      ",

package/optimize/es/components/form/form_control_layout/form_control_layout.styles.js

@@ -52,7 +52,8 @@ export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiT
   };
 };
 export var euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
   var uncompressedHeight = mathWithUnits([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
     return x - y * 2;
@@ -64,8 +65,8 @@ export var euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSid
   var text = '*:is(.euiFormLabel, .euiText)';
   return {
     euiFormControlLayout__side: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", euiTextTruncate('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", logicalCSS('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", logicalCSS('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
-    append: /*#__PURE__*/css(";label:append;"),
-    prepend: /*#__PURE__*/css(";label:prepend;"),
+    append: /*#__PURE__*/css(highContrastMode ? logicalCSS('border-left', euiTheme.border.thin) : '', ";;label:append;"),
+    prepend: /*#__PURE__*/css(highContrastMode ? logicalCSS('border-right', euiTheme.border.thin) : '', ";;label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat(logicalCSS('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat(logicalCSS('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat(logicalCSS('width', euiTheme.size.xl), "\n      }\n    "),
     compressed: /*#__PURE__*/css(text, "{", logicalCSS('padding-horizontal', euiTheme.size.xxs), " line-height:", compressedHeight, ";}", buttons, "{", logicalCSS('height', compressedHeight), ";}.euiButtonIcon{flex-shrink:0;", logicalCSS('width', euiTheme.size.xl), ";};label:compressed;")
   };

package/optimize/es/components/form/form_control_layout/form_control_layout_clear_button.js

@@ -24,11 +24,12 @@ export var EuiFormControlLayoutClearButton = function EuiFormControlLayoutClearB
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormControlLayoutClearButton', className);
   var styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles);
-  var iconStyles = [styles.euiFormControlLayoutClearButton__icon, styles.size[size]];
+  var cssStyles = [styles.euiFormControlLayoutClearButton, styles.size[size]];
+  var iconStyles = [styles.icon.euiFormControlLayoutClearButton__icon, styles.icon.size[size]];
   var ariaLabel = useEuiI18n('euiFormControlLayoutClearButton.label', 'Clear input');
   return ___EmotionJSX("button", _extends({
     type: "button",
-    css: styles.euiFormControlLayoutClearButton,
+    css: cssStyles,
     className: classes,
     onClick: onClick,
     "aria-label": ariaLabel

package/optimize/es/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -7,16 +7,27 @@
  */
 
 import { css } from '@emotion/react';
+import { logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 export var EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     colorMode = _ref.colorMode;
   var backgroundColor = colorMode === 'DARK' ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/css("pointer-events:all;background-color:", backgroundColor, ";border-radius:50%;line-height:0;&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
-    euiFormControlLayoutClearButton__icon: /*#__PURE__*/css("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+    euiFormControlLayoutClearButton: /*#__PURE__*/css("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
     size: {
-      s: /*#__PURE__*/css("stroke-width:", euiTheme.size.xs, ";;label:s;"),
-      m: /*#__PURE__*/css("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      s: "\n        ".concat(logicalSizeCSS(euiTheme.size.m), "\n        border-width: ").concat(mathWithUnits(euiTheme.size.m, function (x) {
+        return x / 2;
+      }), ";\n      "),
+      m: "\n        ".concat(logicalSizeCSS(euiTheme.size.base), "\n        border-width: ").concat(mathWithUnits(euiTheme.size.base, function (x) {
+        return x / 2;
+      }), ";\n      ")
+    },
+    icon: {
+      euiFormControlLayoutClearButton__icon: /*#__PURE__*/css("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+      size: {
+        s: /*#__PURE__*/css("stroke-width:", euiTheme.size.xs, ";;label:s;"),
+        m: /*#__PURE__*/css("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      }
     }
   };
 };

package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -49,4 +49,4 @@ export var euiFormControlLayoutDelimited__delimiter = process.env.NODE_ENV === "
   styles: "align-self:stretch;flex-grow:0;display:flex;align-items:center;line-height:1;label:euiFormControlLayoutDelimited__delimiter;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFormControlLayoutDelimited__input = /*#__PURE__*/css("box-shadow:none;border-radius:0;text-align:center;", logicalCSS('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
+export var euiFormControlLayoutDelimited__input = /*#__PURE__*/css("box-shadow:none;border:none;border-radius:0;text-align:center;", logicalCSS('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/optimize/es/components/form/radio/radio.js

@@ -40,7 +40,7 @@ export var EuiRadio = function EuiRadio(_ref) {
     className: "euiRadio__circle"
   }, ___EmotionJSX(EuiIcon, {
     css: styles.input.euiRadio__icon,
-    type: "dot"
+    type: checked ? 'dot' : 'empty' // Note that the icon does explicitly need to be empty for Windows high contrast themes
   }), ___EmotionJSX("input", {
     css: styles.input.euiRadio__input,
     className: "euiRadio__input",

package/optimize/es/components/form/range/range.styles.js

@@ -35,6 +35,7 @@ export var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
     trackBorderRadius: euiTheme.border.radius.medium,
     tickHeight: trackHeight,
     tickWidth: euiTheme.size.xs,
+    tickColor: euiTheme.colors.lightShade,
     disabledOpacity: 0.5,
     highlightHeight: trackHeight,
     height: form.controlHeight,
@@ -86,7 +87,10 @@ export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
 };
 export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = color || range.focusColor;
+  return "\n    ".concat(euiRangeThumbBorder(euiThemeContext), ";\n    ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n    background-color: ").concat(backgroundColor, ";\n    ").concat(highContrastMode ? "outline: ".concat(euiTheme.border.width.thick, " solid ").concat(backgroundColor, ";") : '', "\n  ");
 };
 export var euiRangeStyles = function euiRangeStyles(_ref) {
   var euiTheme = _ref.euiTheme;

package/optimize/es/components/form/range/range_highlight.styles.js

@@ -18,7 +18,8 @@ export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeCo
 export var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    // Use border instead of height+background-color to account for Windows high contrast themes
+    euiRangeHighlight__progress: /*#__PURE__*/css("border-block-start:", range.highlightHeight, " solid ", range.highlightColor, ";border-radius:", range.trackBorderRadius, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{border-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 export var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

package/optimize/es/components/form/range/range_levels.js

@@ -29,7 +29,7 @@ export var EuiRangeLevels = function EuiRangeLevels(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
   var styles = euiRangeLevelsStyles(euiTheme);
-  var cssStyles = [styles.euiRangeLevels, showTicks && styles.hasTicks, showRange && styles.hasRange];
+  var cssStyles = [styles.euiRangeLevels, showTicks && styles.hasTicks];
   return ___EmotionJSX("div", _extends({
     className: "euiRangeLevels",
     css: cssStyles
@@ -41,6 +41,14 @@ export var EuiRangeLevels = function EuiRangeLevels(_ref) {
       max: max,
       trackWidth: trackWidth
     });
+  }), showRange &&
+  // This must be an <svg> element (as opposed to a pseudo element or standard div)
+  // in order for Windows high contrast themes to respect its background image
+  ___EmotionJSX("svg", {
+    className: "euiRangeLevels__overlay",
+    css: styles.euiRangeLevels__overlay,
+    role: "img",
+    "aria-hidden": "true"
   }));
 };
 
@@ -81,6 +89,7 @@ var EuiRangeLevelElement = function EuiRangeLevelElement(_ref2) {
     return logicalStyles({
       left: "calc(".concat(left, "% + ").concat(leftOffset, "px)"),
       right: "calc(".concat(100 - right, "% - ").concat(rightOffset, "px)"),
+      width: "calc(".concat(right - left, "% + ").concat(rightOffset - leftOffset, "px)"),
       backgroundColor: !isNamedColor ? color : undefined
     });
   }, [levelMin, levelMax, min, max, trackWidth, isNamedColor, color]);
@@ -88,11 +97,17 @@ var EuiRangeLevelElement = function EuiRangeLevelElement(_ref2) {
   var euiTheme = useEuiTheme();
   var levelStyles = euiRangeLevelStyles(euiTheme);
   var cssLevelStyles = [levelStyles.euiRangeLevel, isNamedColor ? levelStyles[color] : levelStyles.customColor];
-  return ___EmotionJSX("span", _extends({
-    style: styles,
-    className: levelClasses,
-    css: cssLevelStyles
-  }, levelRest));
+  return (
+    // This must be an <svg> element (as opposed to a span/div) in order
+    // for Windows high contrast themes to respect its background colors
+    ___EmotionJSX("svg", _extends({
+      style: styles,
+      className: levelClasses,
+      css: cssLevelStyles,
+      role: "img",
+      "aria-hidden": "true"
+    }, levelRest))
+  );
 };
 var validateLevelIsInRange = function validateLevelIsInRange(level, _ref3) {
   var min = _ref3.min,

package/optimize/es/components/form/range/range_levels.styles.js

@@ -19,7 +19,7 @@ export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext)
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(transparentize(stripeColor, 0.5), ",\n    ").concat(transparentize(stripeColor, 0.5), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 50%,\n    ").concat(transparentize(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/css("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    euiRangeLevels__overlay: /*#__PURE__*/css("position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";;label:euiRangeLevels__overlay;"),
     hasTicks: /*#__PURE__*/css("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };
@@ -27,7 +27,7 @@ export var euiRangeLevelStyles = function euiRangeLevelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var range = euiRangeVariables(euiThemeContext);
   return {
-    euiRangeLevel: /*#__PURE__*/css("display:block;position:absolute;block-size:", range.trackHeight, ";margin-block:0;&:first-child{margin-inline-start:0;border-start-start-radius:", range.trackBorderRadius, ";border-end-start-radius:", range.trackBorderRadius, ";}&:last-child{margin-inline-end:0;border-start-end-radius:", range.trackBorderRadius, ";border-end-end-radius:", range.trackBorderRadius, ";};label:euiRangeLevel;"),
+    euiRangeLevel: /*#__PURE__*/css("display:block;position:absolute;block-size:", range.trackHeight, ";margin-block:0;&:first-child{margin-inline-start:0;border-start-start-radius:", range.trackBorderRadius, ";border-end-start-radius:", range.trackBorderRadius, ";}&:last-child,&:has(+ .euiRangeLevels__overlay){margin-inline-end:0;border-start-end-radius:", range.trackBorderRadius, ";border-end-end-radius:", range.trackBorderRadius, ";};label:euiRangeLevel;"),
     primary: /*#__PURE__*/css("background-color:", euiRangeLevelColor('primary', euiTheme), ";;label:primary;"),
     success: /*#__PURE__*/css("background-color:", euiRangeLevelColor('success', euiTheme), ";;label:success;"),
     warning: /*#__PURE__*/css("background-color:", euiRangeLevelColor('warning', euiTheme), ";;label:warning;"),

package/optimize/es/components/form/range/range_thumb.styles.js

@@ -19,12 +19,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiRangeThumbStyles = function euiRangeThumbStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
     euiRangeThumb: /*#__PURE__*/css(euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
       return x / 2 * -1;
-    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), " ", highContrastMode ?
+    // For whatever reason, the outline renders oddly on the non-native thumbs,
+    // so opt to only show it on Windows high contrast themes
+    '@media (forced-colors: none) { outline: none; }' : '', ";};label:euiRangeThumb;"),
     hasTicks: _ref
   };
 };

package/optimize/es/components/form/range/range_ticks.styles.js

@@ -8,11 +8,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalSizeCSS, logicalCSSWithFallback, euiFontSize, mathWithUnits } from '../../../global_styling';
+import { logicalCSS, logicalCSSWithFallback, euiFontSize, mathWithUnits } from '../../../global_styling';
 import { euiRangeVariables } from './range.styles';
 var tickStyles = function tickStyles(_ref4, range) {
   var euiTheme = _ref4.euiTheme;
-  return "\n    position: absolute;\n    ".concat(logicalCSS('top', 0), ";\n    ").concat(logicalSizeCSS(euiTheme.size.xs, euiTheme.size.xs), ";\n    background-color: ").concat(euiTheme.colors.lightShade, ";\n    inline-size: ").concat(range.tickWidth, ";\n    block-size: ").concat(range.tickHeight, ";\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n  ");
+  return "\n    position: absolute;\n    ".concat(logicalCSS('top', 0), ";\n    block-size: ").concat(range.tickHeight, ";\n    ").concat(logicalCSS('border-left', "".concat(range.tickWidth, " solid ").concat(range.tickColor)), "\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n  ");
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "1sbhdc4-euiRangeTicks",

package/optimize/es/components/form/range/range_tooltip.styles.js

@@ -7,9 +7,9 @@
  */
 
 import { css } from '@emotion/react';
-import { COLOR_MODES_STANDARD, tint, shade } from '../../../services';
+import { tint, shade } from '../../../services';
 import { euiRangeVariables } from './range.styles';
-import { euiFontSize, mathWithUnits } from '../../../global_styling';
+import { euiFontSize, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var euiRangeTooltipStyles = function euiRangeTooltipStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
@@ -20,24 +20,25 @@ export var euiRangeTooltipStyles = function euiRangeTooltipStyles(euiThemeContex
   };
 };
 var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
-  return colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.emptyShade, 1) : tint(euiTheme.colors.fullShade, 0.25);
+  return colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 1) : tint(euiTheme.colors.fullShade, 0.25);
 };
 export var euiRangeTooltipValueStyles = function euiRangeTooltipValueStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var arrowSize = euiTheme.size.m;
-  var arrowSizeInt = parseInt(arrowSize, 10);
-  var arrowMinusSize = "".concat((arrowSizeInt / 2 - 1) * -1, "px"); // Shift arrow 1px more than half its size to account for border radius
-
+  var arrowMinusSize = mathWithUnits(arrowSize, function (x) {
+    return x / -2;
+  });
   return {
     euiRangeTooltip__value: /*#__PURE__*/css("position:absolute;inset-block-start:50%;max-inline-size:", mathWithUnits(euiTheme.size.base, function (x) {
       return x * 16;
-    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateX(0) translateY(-50%);", euiFontSize(euiThemeContext, 's'), " line-height:", euiFontSize(euiThemeContext, 's').lineHeight, ";color:", euiTheme.colors.ghost, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border:", euiTheme.border.width.thin, " solid ", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';position:absolute;inset-block-end:50%;inline-size:", arrowSize, ";block-size:", arrowSize, ";transform-origin:center;transform:translateY(50%) rotateZ(45deg);background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateX(0) translateY(-50%);", euiFontSize(euiThemeContext, 's'), " line-height:", euiFontSize(euiThemeContext, 's').lineHeight, ";color:", euiTheme.colors.ghost, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border:", euiTheme.border.width.thin, " solid ", highContrastMode ? euiTheme.border.color : colorMode === 'DARK' ? euiTheme.colors.mediumShade : euiTheme.colors.fullShade, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';position:absolute;inset-block-end:50%;inline-size:", arrowSize, ";block-size:", arrowSize, ";transform-origin:center;transform:translateY(50%) rotateZ(45deg);background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiRangeTooltip__value;"),
-    left: /*#__PURE__*/css("margin-inline-end:", euiTheme.size.l, ";&::before{inset-inline-end:", arrowMinusSize, ";};label:left;"),
-    right: /*#__PURE__*/css("margin-inline-start:", euiTheme.size.l, ";&::before{inset-inline-start:", arrowMinusSize, ";};label:right;"),
+    left: /*#__PURE__*/css("margin-inline-end:", euiTheme.size.l, ";&::before{inset-inline-end:", arrowMinusSize, ";", logicalCSS('border-top', 'inherit'), " ", logicalCSS('border-right', 'inherit'), ";};label:left;"),
+    right: /*#__PURE__*/css("margin-inline-start:", euiTheme.size.l, ";&::before{inset-inline-start:", arrowMinusSize, ";", logicalCSS('border-bottom', 'inherit'), " ", logicalCSS('border-left', 'inherit'), ";};label:right;"),
     hasTicks: /*#__PURE__*/css("inset-block-start:", mathWithUnits(range.thumbWidth, function (x) {
       return x / 2;
     }), ";;label:hasTicks;")

package/optimize/es/components/form/range/range_track.styles.js

@@ -9,10 +9,11 @@
 import { css } from '@emotion/react';
 import { euiRangeVariables } from './range.styles';
 export var euiRangeTrackStyles = function euiRangeTrackStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeTrack: /*#__PURE__*/css("block-size:100%;flex-grow:1;position:relative;align-self:flex-start;&::after{content:'';display:block;position:absolute;inset-block-start:", range.trackTopPositionWithoutTicks, ";inset-inline-start:0;block-size:", range.trackHeight, ";inline-size:", range.trackWidth, ";background:", range.trackColor, ";border-radius:", range.trackBorderRadius, ";};label:euiRangeTrack;"),
+    euiRangeTrack: /*#__PURE__*/css("block-size:100%;flex-grow:1;position:relative;align-self:flex-start;&::after{content:'';display:block;position:absolute;inset-block-start:", range.trackTopPositionWithoutTicks, ";inset-inline-start:0;inline-size:", range.trackWidth, ";border-block-start:", range.trackHeight, " solid ", range.trackColor, ";border-radius:", range.trackBorderRadius, ";", highContrastMode ? '@media (forced-colors:active) { opacity: 0.25; }' : '', ";};label:euiRangeTrack;"),
     hasTicks: /*#__PURE__*/css("margin-inline-start:1em;margin-inline-end:1em;&::after{inset-block-start:", range.trackTopPositionWithTicks, ";};label:hasTicks;"),
     disabled: /*#__PURE__*/css("opacity:", range.disabledOpacity, ";;label:disabled;"),
     hasLevels: /*#__PURE__*/css(";label:hasLevels;")