@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

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

@@ -56,7 +56,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       // preceding table row via negative margins
       'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
         return (x + y * 2) * -1;
-      })), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 100vh, -50% 100vh);>.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      })), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), " &:after{", logicalCSS('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);>.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

package/es/components/tool_tip/tool_tip.js

@@ -28,9 +28,11 @@ import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
+import { createRepositionOnScroll } from '../../services/popover/reposition_on_scroll';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiComponentDefaultsContext } from '../provider/component_defaults';
 import { EuiToolTipPopover } from './tool_tip_popover';
 import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
@@ -56,25 +58,15 @@ var DEFAULT_TOOLTIP_STYLES = {
   visibility: 'hidden'
 };
 export var EuiToolTip = /*#__PURE__*/function (_Component) {
-  function EuiToolTip() {
+  function EuiToolTip(props) {
     var _this;
     _classCallCheck(this, EuiToolTip);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiToolTip, [].concat(args));
+    _this = _callSuper(this, EuiToolTip, [props]);
+    _defineProperty(_this, "repositionOnScroll", void 0);
     _defineProperty(_this, "_isMounted", false);
     _defineProperty(_this, "anchor", null);
     _defineProperty(_this, "popover", null);
     _defineProperty(_this, "timeoutId", void 0);
-    _defineProperty(_this, "state", {
-      visible: false,
-      hasFocus: false,
-      calculatedPosition: _this.props.position,
-      toolTipStyles: DEFAULT_TOOLTIP_STYLES,
-      arrowStyles: undefined,
-      id: _this.props.id || htmlIdGenerator()()
-    });
     _defineProperty(_this, "clearAnimationTimeout", function () {
       if (_this.timeoutId) {
         _this.timeoutId = clearTimeout(_this.timeoutId);
@@ -203,6 +195,21 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         _this.props.onMouseOut(event);
       }
     });
+    _this.state = {
+      visible: false,
+      hasFocus: false,
+      calculatedPosition: _this.props.position,
+      toolTipStyles: DEFAULT_TOOLTIP_STYLES,
+      arrowStyles: undefined,
+      id: _this.props.id || htmlIdGenerator()()
+    };
+    _this.repositionOnScroll = createRepositionOnScroll(function () {
+      return {
+        repositionOnScroll: _this.props.repositionOnScroll,
+        componentDefaults: _this.context.EuiToolTip,
+        repositionFn: _this.positionToolTip
+      };
+    });
     return _this;
   }
   _inherits(EuiToolTip, _Component);
@@ -210,16 +217,14 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
-      if (this.props.repositionOnScroll) {
-        window.addEventListener('scroll', this.positionToolTip, true);
-      }
+      this.repositionOnScroll.subscribe();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.clearAnimationTimeout();
       this._isMounted = false;
-      window.removeEventListener('scroll', this.positionToolTip, true);
+      this.repositionOnScroll.cleanup();
     }
   }, {
     key: "componentDidUpdate",
@@ -229,13 +234,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       }
 
       // update scroll listener
-      if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
-        if (this.props.repositionOnScroll) {
-          window.addEventListener('scroll', this.positionToolTip, true);
-        } else {
-          window.removeEventListener('scroll', this.positionToolTip, true);
-        }
-      }
+      this.repositionOnScroll.update();
     }
   }, {
     key: "render",
@@ -297,6 +296,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(EuiToolTip, "contextType", EuiComponentDefaultsContext);
 _defineProperty(EuiToolTip, "defaultProps", {
   position: 'top',
   delay: 'regular',

package/es/global_styling/index.js

@@ -10,4 +10,5 @@ export * from './reset/global_styles';
 export * from './functions';
 export * from './variables';
 export * from './mixins';
-export * from './utility/animations';
+export * from './utility/animations';
+export { euiDisabledSelector } from './utility/selectors';

package/es/global_styling/mixins/_button.js

@@ -138,7 +138,7 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'empty':

package/es/global_styling/utility/selectors.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export var euiDisabledSelector = ":disabled, [aria-disabled=\"true\"]";

package/es/services/focus_trap/focus_trap_pub_sub.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var listeners = new Set();
+
+/**
+ * Subscribes a listener function to be called whenever focus trap updates are published.
+ *
+ * @param listener The function to be called on updates.
+ * @returns A function that, when called, will unsubscribe the listener. Please remember
+ * to call this function for proper cleanup.
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   const unsubscribe = focusTrapPubSub.subscribe(() => {
+ *     console.log('focus trap updated');
+ *   });
+ *
+ *   return () => unsubscribe();
+ * }, []);
+ * ```
+ */
+var subscribe = function subscribe(listener) {
+  listeners.add(listener);
+  return function () {
+    return unsubscribe(listener);
+  };
+};
+
+/**
+ * Unsubscribes a listener from the focus trap PubSub service.
+ *
+ * @param listener The function to unsubscribe.
+ */
+var unsubscribe = function unsubscribe(listener) {
+  listeners.delete(listener);
+};
+
+/**
+ * Publishes an event to all subscribed listeners, signaling that
+ * components managing focus traps should re-evaluate their tracked elements.
+ */
+var publish = function publish() {
+  listeners.forEach(function (listener) {
+    return listener();
+  });
+};
+
+/**
+ * A lightweight, global PubSub service for loose coupling of components
+ * that need to interact with the same focus trap.
+ *
+ * This allows a component (like `EuiPopover`) to be rendered in a React Portal
+ * and still be included in the focus trap of another component (like `EuiFlyout`)
+ * without either component needing a direct reference to the other.
+ *
+ * How it works:
+ *
+ * 1. A container component (e.g., `EuiFlyout`) `subscribe`s to this service on mount.
+ * 2. An ephemeral component (e.g., `EuiPopover`) calls `publish` when its state
+ *    changes in a way that affects the DOM (e.g., opening, closing, unmounting).
+ * 3. The container component's subscribed callback fires, causing it to re-query
+ *    the DOM for any elements it should include in its focus trap.
+ */
+export var focusTrapPubSub = {
+  subscribe: subscribe,
+  unsubscribe: unsubscribe,
+  publish: publish
+};

package/es/services/focus_trap/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { focusTrapPubSub } from './focus_trap_pub_sub';

package/es/services/hooks/index.js

@@ -12,4 +12,5 @@ export * from './useForceRender';
 export * from './useLatest';
 export * from './useDeepEqual';
 export * from './useMouseMove';
-export * from './useUpdateEffect';
+export * from './useUpdateEffect';
+export { useEuiDisabledElement } from './useEuiDisabledElement';

package/es/services/hooks/useEuiDisabledElement.js

@@ -0,0 +1,195 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import { keys } from '../../services/keys';
+var DISABLED_ELEMENT_EVENTS = {
+  click: 'onClick',
+  mousedown: 'onMouseDown',
+  mouseup: 'onMouseUp',
+  mouseenter: 'onMouseEnter',
+  mouseleave: 'onMouseLeave',
+  mouseout: 'onMouseOut',
+  mousemove: 'onMouseMove',
+  mouseover: 'onMouseOver',
+  pointerdown: 'onPointerDown',
+  pointerup: 'onPointerUp',
+  pointerenter: 'onPointerEnter',
+  pointerleave: 'onPointerLeave',
+  pointermove: 'onPointerMove',
+  pointerover: 'onPointerOver',
+  touchstart: 'onTouchStart',
+  touchend: 'onTouchEnd',
+  touchmove: 'onTouchMove',
+  keydown: 'onKeyDown',
+  keyup: 'onKeyUp',
+  keypress: 'onKeyPress',
+  submit: 'onSubmit'
+};
+var ALLOWED_KEY_EVENTS = [keys.TAB, keys.ESCAPE];
+var getReactEventHandlers = function getReactEventHandlers() {
+  return Object.values(DISABLED_ELEMENT_EVENTS).reduce(function (acc, curr) {
+    acc[curr] = undefined;
+    return acc;
+  }, {});
+};
+var UNSET_REACT_EVENT_HANDLERS = getReactEventHandlers();
+var useCustomDisabledEvents = function useCustomDisabledEvents() {
+  var elementMethodsRef = useRef(null);
+  var isAllowedKeyEvent = function isAllowedKeyEvent(event) {
+    return event instanceof KeyboardEvent && ALLOWED_KEY_EVENTS.includes(event.key);
+  };
+  var preventEvent = useCallback(function (event) {
+    if (isAllowedKeyEvent(event)) {
+      return;
+    }
+    event.stopImmediatePropagation();
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  var preventElementEvents = useCallback(function (element) {
+    if (elementMethodsRef.current) return;
+    var originalEvents = {
+      click: 'click' in element ? element.click : undefined,
+      dispatchEvent: element.dispatchEvent
+    };
+    try {
+      elementMethodsRef.current = originalEvents;
+
+      // Add prevention listeners
+      Object.keys(DISABLED_ELEMENT_EVENTS).forEach(function (eventType) {
+        element.addEventListener(eventType, preventEvent, {
+          capture: true
+        });
+      });
+      if ('click' in element && typeof element.click === 'function') {
+        element.click = function () {};
+      }
+      element.dispatchEvent = function (event) {
+        if (Object.keys(DISABLED_ELEMENT_EVENTS).includes(event.type)) {
+          if (isAllowedKeyEvent(event)) {
+            return originalEvents.dispatchEvent.call(element, event);
+          }
+          return false;
+        }
+        return originalEvents.dispatchEvent.call(element, event);
+      };
+    } catch (error) {
+      elementMethodsRef.current = null;
+    }
+  }, [preventEvent]);
+  var resetElementEvents = useCallback(function (element) {
+    if (!elementMethodsRef.current) return;
+    var _elementMethodsRef$cu = elementMethodsRef.current,
+      click = _elementMethodsRef$cu.click,
+      dispatchEvent = _elementMethodsRef$cu.dispatchEvent;
+    try {
+      // remove prevention listeners
+      Object.keys(DISABLED_ELEMENT_EVENTS).forEach(function (eventType) {
+        element.removeEventListener(eventType, preventEvent, {
+          capture: true
+        });
+      });
+
+      // restore click method
+      if (click && 'click' in element) {
+        element.click = click;
+      }
+
+      // restore dispatchEvent
+      element.dispatchEvent = dispatchEvent;
+    } catch (error) {}
+    elementMethodsRef.current = null;
+  }, [preventEvent]);
+  return {
+    preventElementEvents: preventElementEvents,
+    resetElementEvents: resetElementEvents
+  };
+};
+
+/**
+ * NOTE: Beta feature, may be changed or removed in the future
+ *
+ * Utility to apply either the native or a custom semantic disabled state.
+ *
+ * It applies `aria-disabled` instead of `disabled`  when `hasAriaDisabled=true`
+ * to ensure the element is semantically disabled while still focusable.
+ *
+ * It mimics the native `disabled` behavior by removing any programmatic mouse, pointer, touch
+ * or keyboard event handler but it differs to the native `disabled` behavior in that it preserves
+ * the focus, blur and tabIndex behavior.
+ */
+export var useEuiDisabledElement = function useEuiDisabledElement(_ref) {
+  var _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
+    onKeyPress = _ref.onKeyPress;
+  var elementRef = useRef(null);
+  var _useCustomDisabledEve = useCustomDisabledEvents(),
+    preventElementEvents = _useCustomDisabledEve.preventElementEvents,
+    resetElementEvents = _useCustomDisabledEve.resetElementEvents;
+  var shouldBeDisabled = hasAriaDisabled && isDisabled;
+  var setRef = useCallback(function (node) {
+    if (elementRef.current) {
+      resetElementEvents(elementRef.current);
+    }
+    elementRef.current = node;
+    if (node && shouldBeDisabled) {
+      preventElementEvents(node);
+    }
+  }, [shouldBeDisabled, preventElementEvents, resetElementEvents]);
+  useEffect(function () {
+    if (!elementRef.current) return;
+    if (shouldBeDisabled) {
+      preventElementEvents(elementRef.current);
+    } else {
+      resetElementEvents(elementRef.current);
+    }
+    return function () {
+      if (elementRef.current) {
+        resetElementEvents(elementRef.current);
+      }
+    };
+  }, [shouldBeDisabled, preventElementEvents, resetElementEvents]);
+  if (!hasAriaDisabled) {
+    return {
+      ref: setRef,
+      disabled: isDisabled
+    };
+  }
+  var onKeyboardEvent = function onKeyboardEvent(e, callback) {
+    if (ALLOWED_KEY_EVENTS.includes(e.key)) {
+      callback === null || callback === void 0 || callback(e);
+    }
+  };
+  var eventHandlers = shouldBeDisabled && _objectSpread(_objectSpread({}, UNSET_REACT_EVENT_HANDLERS), {}, {
+    onKeyDown: onKeyDown ? function (e) {
+      return onKeyboardEvent(e, onKeyDown);
+    } : undefined,
+    onKeyUp: onKeyUp ? function (e) {
+      return onKeyboardEvent(e, onKeyUp);
+    } : undefined,
+    onKeyPress: onKeyPress ? function (e) {
+      return onKeyboardEvent(e, onKeyPress);
+    } : undefined
+  });
+  return _objectSpread({
+    ref: setRef,
+    'aria-disabled': isDisabled ? true : undefined,
+    disabled: isDisabled ? undefined : false
+  }, eventHandlers);
+};

package/es/services/index.js

@@ -19,6 +19,7 @@ export * from './console';
 export * from './copy';
 export * from './emotion';
 export * from './findElement';
+export { focusTrapPubSub } from './focus_trap';
 export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText } from './format';
 export * from './hooks';
 export { isEvenlyDivisibleBy, isWithinRange } from './number';

package/es/services/popover/reposition_on_scroll.js

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Returns the value of the `repositionOnScroll` from the props, component's defaults context
+ * or default to `false`.
+ *
+ * @param args The arguments for `getRepositionOnScroll`. See {@link RepositionOnScrollArgs}.
+ * @returns The value of the `repositionOnScroll`.
+ */
+export var getRepositionOnScroll = function getRepositionOnScroll(args) {
+  var repositionOnScroll = args.repositionOnScroll,
+    componentDefaults = args.componentDefaults;
+  if (repositionOnScroll !== undefined) return repositionOnScroll;
+  if (componentDefaults && 'repositionOnScroll' in componentDefaults && typeof componentDefaults.repositionOnScroll === 'boolean') {
+    var contextValue = componentDefaults.repositionOnScroll;
+    return contextValue !== null && contextValue !== void 0 ? contextValue : false;
+  }
+  return false;
+};
+/**
+ * Creates a manager for handling `repositionOnScroll` logic in overlay components.
+ * This utility abstracts the adding, updating, and removing of window scroll event listeners.
+ *
+ * @param getArgs A function that returns the arguments for `getRepositionOnScroll`. See {@link RepositionOnScrollArgs}.
+ * @returns An object with `subscribe`, `update`, and `cleanup` methods to manage the scroll listener.
+ */
+export var createRepositionOnScroll = function createRepositionOnScroll(getArgs) {
+  var lastResolvedRepositionOnScroll;
+  var subscribe = function subscribe() {
+    var repositionOnScroll = getRepositionOnScroll(getArgs());
+    lastResolvedRepositionOnScroll = repositionOnScroll;
+    if (repositionOnScroll) {
+      window.addEventListener('scroll', getArgs().repositionFn, true);
+    }
+  };
+  var update = function update() {
+    var repositionOnScroll = getRepositionOnScroll(getArgs());
+    if (lastResolvedRepositionOnScroll !== repositionOnScroll) {
+      if (repositionOnScroll) {
+        window.addEventListener('scroll', getArgs().repositionFn, true);
+      } else {
+        window.removeEventListener('scroll', getArgs().repositionFn, true);
+      }
+      lastResolvedRepositionOnScroll = repositionOnScroll;
+    }
+  };
+  var cleanup = function cleanup() {
+    window.removeEventListener('scroll', getArgs().repositionFn, true);
+  };
+  return {
+    subscribe: subscribe,
+    update: update,
+    cleanup: cleanup
+  };
+};

package/es/services/theme/high_contrast_overrides.js

@@ -36,19 +36,23 @@ export var useHighContrastModifications = function useHighContrastModifications(
       borderBasePrimary: systemTheme.colors.textPrimary,
       borderBaseAccent: systemTheme.colors.textAccent,
       borderBaseAccentSecondary: systemTheme.colors.textAccentSecondary,
+      borderBaseNeutral: systemTheme.colors.textNeutral,
       borderBaseSuccess: systemTheme.colors.textSuccess,
       borderBaseWarning: systemTheme.colors.textWarning,
+      borderBaseRisk: systemTheme.colors.textRisk,
       borderBaseDanger: systemTheme.colors.textDanger,
       borderBasePlain: borderColor,
       borderBaseSubdued: borderColor,
+      borderBaseProminent: borderColor,
       borderBaseDisabled: systemTheme.colors.textDisabled,
       borderBaseFloating: borderColor,
-      borderBaseFormsControl: borderColor,
       borderStrongPrimary: systemTheme.colors.textPrimary,
       borderStrongAccent: systemTheme.colors.textAccent,
       borderStrongAccentSecondary: systemTheme.colors.textAccentSecondary,
+      borderStrongNeutral: systemTheme.colors.textNeutral,
       borderStrongSuccess: systemTheme.colors.textSuccess,
       borderStrongWarning: systemTheme.colors.textWarning,
+      borderStrongRisk: systemTheme.colors.textRisk,
       borderStrongDanger: systemTheme.colors.textDanger
     };
     return {

package/es/test/cypress/index.d.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export {
+  registerEuiCypressMatchers,
+  setupEuiCypressMatchers,
+} from './matchers';

package/es/test/cypress/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { registerEuiCypressMatchers, setupEuiCypressMatchers } from './matchers';

package/es/test/cypress/matchers.d.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+declare global {
+  namespace Chai {
+    interface Assertion {
+      euiDisabled: Assertion;
+      euiEnabled: Assertion;
+    }
+  }
+}
+
+export declare const registerEuiCypressMatchers: () => void;
+export declare const setupEuiCypressMatchers: () => void;

package/es/test/cypress/matchers.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="cypress" />
+
+export function registerEuiCypressMatchers() {
+  var chai = window.chai;
+  if (chai && !chai.__euiMatchersRegistered) {
+    chai.use(function (_chai) {
+      _chai.Assertion.addProperty('euiDisabled', function () {
+        var element = this._obj[0] || this._obj;
+        var hasDisabledAttribute = element.hasAttribute('disabled');
+        var hasAriaDisabled = element.getAttribute('aria-disabled') === 'true';
+        var isDisabled = hasDisabledAttribute || hasAriaDisabled;
+        this.assert(isDisabled, 'expected element to be EUI disabled (= have `disabled` attribute or `aria-disabled="true"`)', 'expected element not to be EUI disabled (= not have `disabled` attribute or `aria-disabled="true"`)', true, isDisabled);
+      });
+      _chai.Assertion.addProperty('euiEnabled', function () {
+        var element = this._obj[0] || this._obj;
+        var hasDisabledAttribute = element.hasAttribute('disabled');
+        var hasAriaDisabled = element.getAttribute('aria-disabled') === 'true';
+        var isDisabled = hasDisabledAttribute || hasAriaDisabled;
+        this.assert(!isDisabled, 'expected element to be EUI enabled (= not have `disabled` attribute or `aria-disabled="true"`)', 'expected element not to be EUI enabled (= have `disabled` attribute or `aria-disabled="true"`)', false, isDisabled);
+      });
+    });
+
+    // Mark as registered to prevent double registration
+    chai.__euiMatchersRegistered = true;
+  }
+}
+
+// Register matchers when support file loads
+export var setupEuiCypressMatchers = function setupEuiCypressMatchers() {
+  if (typeof window !== 'undefined') {
+    // Try to register immediately
+    if (window.chai) {
+      registerEuiCypressMatchers();
+    } else {
+      // Wait for chai to be available
+      var pollForChai = function pollForChai() {
+        if (window.chai) {
+          registerEuiCypressMatchers();
+        } else {
+          setTimeout(pollForChai, 10);
+        }
+      };
+      pollForChai();
+    }
+  }
+};