@elastic/eui 115.0.0 → 116.0.0

package/lib/components/datagrid/controls/column_sorting.js

@@ -333,22 +333,28 @@ DataGridSortingControl.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -469,10 +475,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -513,10 +519,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -557,10 +563,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -601,10 +607,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -645,10 +651,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

package/lib/components/datagrid/utils/in_memory.js

@@ -260,22 +260,28 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -396,10 +402,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -440,10 +446,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -484,10 +490,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -528,10 +534,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -572,10 +578,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

package/lib/components/filter_group/filter_group.a11y.js

@@ -239,10 +239,16 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 4);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
+      cy.get('input[role="combobox"]').then(function ($input) {
+        var activeOptionId = $input.attr('aria-activedescendant');
+        cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
+      });
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
+      cy.get('input[role="combobox"]').then(function ($input) {
+        var activeOptionId = $input.attr('aria-activedescendant');
+        cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
+      });
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/lib/components/flyout/flyout_menu.js

@@ -78,14 +78,11 @@ var HistoryPopover = function HistoryPopover(_ref) {
     },
     panelPaddingSize: "xs",
     anchorPosition: "downLeft"
-  }, (0, _react2.jsx)(_list_group.EuiListGroup, {
-    gutterSize: "none"
-  }, items.map(function (item, index) {
+  }, (0, _react2.jsx)(_list_group.EuiListGroup, null, items.map(function (item, index) {
     return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
       key: "history-item-".concat(index),
       label: item.title,
       iconType: item.iconType,
-      size: "s",
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);

package/lib/components/form/checkbox/checkbox.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _icon = require("../../icon");
+var _checkbox_control = require("./checkbox_control");
 var _checkbox = require("./checkbox.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
@@ -45,10 +45,9 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiCheckbox', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_checkbox.euiCheckboxStyles);
-  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, readOnly && styles.input.readOnly];
   var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
   var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
-  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = (0, _react.useCallback)(function (input) {
@@ -61,9 +60,10 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   }, (0, _react2.jsx)("div", {
     css: inputStyles,
     className: "euiCheckbox__square"
-  }, (0, _react2.jsx)(_icon.EuiIcon, {
-    css: iconStyles,
-    type: indeterminate ? 'stopFill' : checked ? 'check' : 'empty'
+  }, (0, _react2.jsx)(_checkbox_control.EuiCheckboxControl, {
+    checked: checked,
+    indeterminate: indeterminate,
+    disabled: disabled
   }), (0, _react2.jsx)("input", _extends({
     css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",

package/lib/components/form/checkbox/checkbox.styles.js

@@ -21,14 +21,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:default;label:readOnly;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;"
-} : {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
@@ -37,25 +29,12 @@ var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(e
   return {
     euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
     input: {
-      euiCheckbox__square: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)("position:relative;", controlStyles.input.focusVisible, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
-      enabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;")
-      },
-      disabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
-      },
       // Readonly checkboxes are used by EuiMarkdownEditor
       // Maintain the initial color to enforce that clicks are not doing anything
       readOnly: /*#__PURE__*/(0, _react.css)("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
-      icon: {
-        euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
-        check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
-        indeterminate: _ref2
-      },
       euiCheckbox__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
     },
     label: {

package/lib/components/form/checkbox/checkbox_control.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCheckboxControl = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _icon = require("../../icon");
+var _checkbox_control = require("./checkbox_control.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "checked", "indeterminate", "excluded", "disabled"];
+/*
+ * 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.
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/**
+ * Presentation-only checkbox control element. Renders a checkbox square and state icon only without functionality.
+ */
+var EuiCheckboxControl = exports.EuiCheckboxControl = function EuiCheckboxControl(_ref) {
+  var className = _ref.className,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+    _ref$excluded = _ref.excluded,
+    excluded = _ref$excluded === void 0 ? false : _ref$excluded,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isSelected = checked || indeterminate || excluded;
+  var isExcluded = excluded && !indeterminate;
+  var classes = (0, _classnames.default)('euiCheckboxControl', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_checkbox_control.euiCheckboxControlStyles);
+  var cssStyles = [styles.euiCheckboxControl, disabled ? isSelected ? styles.disabled.selected : styles.disabled.unselected : isExcluded ? styles.enabled.excluded : isSelected ? styles.enabled.selected : styles.enabled.unselected];
+  var iconStyles = [styles.icon.euiCheckbox__icon, indeterminate ? styles.icon.indeterminate : styles.icon.check];
+  var iconType = indeterminate ? 'stopFill' : excluded ? 'cross' : checked ? 'check' : 'empty';
+  return (0, _react2.jsx)("span", _extends({
+    css: cssStyles,
+    className: classes
+  }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
+    role: "presentation",
+    css: iconStyles,
+    type: iconType,
+    size: "m"
+  }));
+};
+EuiCheckboxControl.propTypes = {
+  /**
+     * Renders a checked variant.
+     * @default false
+     */
+  checked: _propTypes.default.bool,
+  /**
+     * Renders an indeterminate variant.
+     * This overrides any other variant.
+     * @default false
+     */
+  indeterminate: _propTypes.default.bool,
+  /**
+     * Renders an excluded variant.
+     * This overrides the checked variant.
+     * @default false
+     */
+  excluded: _propTypes.default.bool,
+  /**
+     * Renders a disabled variant.
+     * @default false
+     */
+  disabled: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
+};

package/lib/components/form/checkbox/checkbox_control.styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCheckboxControlStyles = void 0;
+var _react = require("@emotion/react");
+var _form = require("../form.styles");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * 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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;"
+} : {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiCheckboxControlStyles = exports.euiCheckboxControlStyles = function euiCheckboxControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
+  return {
+    euiCheckboxControl: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckboxControl;"),
+    enabled: {
+      selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
+      unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;"),
+      excluded: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, " background-color:", euiTheme.colors.backgroundFilledDanger, ";border-color:", euiTheme.colors.backgroundFilledDanger, ";;label:excluded;")
+    },
+    disabled: {
+      selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
+      unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
+    },
+    icon: {
+      euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
+      check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
+      indeterminate: _ref
+    }
+  };
+};

package/lib/components/form/checkbox/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "EuiCheckbox", {
     return _checkbox.EuiCheckbox;
   }
 });
+Object.defineProperty(exports, "EuiCheckboxControl", {
+  enumerable: true,
+  get: function get() {
+    return _checkbox_control.EuiCheckboxControl;
+  }
+});
 Object.defineProperty(exports, "EuiCheckboxGroup", {
   enumerable: true,
   get: function get() {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "EuiCheckboxGroup", {
   }
 });
 var _checkbox = require("./checkbox");
+var _checkbox_control = require("./checkbox_control");
 var _checkbox_group = require("./checkbox_group");

package/lib/components/form/form.styles.js

@@ -282,7 +282,8 @@ var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function e
   return {
     wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
     input: {
-      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.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(_global_styling.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((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.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        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      focusVisible: "\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      "),
       // 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

package/lib/components/form/radio/radio.styles.js

@@ -19,7 +19,7 @@ var euiRadioStyles = exports.euiRadioStyles = function euiRadioStyles(euiThemeCo
   return {
     euiRadio: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiRadio;"),
     input: {
-      euiRadio__circle: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:50%;;label:euiRadio__circle;"),
+      euiRadio__circle: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " ", controlStyles.input.focusVisible, " border-radius:50%;;label:euiRadio__circle;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
       enabled: {