@elastic/eui 90.0.0 → 91.1.0

package/dist/eui_theme_light.css

@@ -376,7 +376,7 @@ The following files still use the Sass version:
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -504,7 +504,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -1196,6 +1196,7 @@ The following files still use the Sass version:
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
 }
 .euiComboBox--fullWidth {
@@ -1222,7 +1223,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -1308,23 +1309,85 @@ The following files still use the Sass version:
           flex-wrap: wrap; /* 1 */
   -webkit-align-content: flex-start;
           align-content: flex-start;
-}
-.euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
   cursor: text;
 }
+.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap {
+  -webkit-align-items: center;
+          align-items: center;
+}
+.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap--plainText {
+  -webkit-padding-start: 8px;
+          padding-inline-start: 8px;
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__prepend, .euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__append {
+  -webkit-flex-shrink: 0;
+          flex-shrink: 0;
+  margin-inline: 2px;
+  display: -webkit-flex;
+  display: flex; /* Vertically centers any icons */
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__prepend {
+  -webkit-margin-start: 4px;
+          margin-inline-start: 4px;
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__append {
+  -webkit-margin-end: 4px;
+          margin-inline-end: 4px;
+}
 .euiComboBox .euiComboBox__input {
   block-size: 24px; /* 2 */
   min-inline-size: 2px;
   max-inline-size: 100%;
   margin: 4px;
   /* 3 */
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  outline: none;
-  border: none;
   background: transparent;
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  letter-spacing: normal;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-font-kerning: normal;
+          font-kerning: normal;
+  font-size: 14px;
   color: #343741;
+  /* 4 */
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+.euiComboBox .euiComboBox__input::-webkit-input-placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::-moz-placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled {
+  color: #98A2B3;
+  -webkit-text-fill-color: #98A2B3;
+  cursor: not-allowed;
+  background: #eef2f7;
+  box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1);
+}
+.euiComboBox .euiComboBox__input:disabled::-webkit-input-placeholder {
+  color: #98A2B3;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::-moz-placeholder {
+  color: #98A2B3;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::placeholder {
+  color: #98A2B3;
+  opacity: 1;
 }
 .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap {
   background-color: white;
@@ -1364,27 +1427,17 @@ The following files still use the Sass version:
   color: #98A2B3;
   opacity: 1;
 }
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPlaceholder,
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPill--plainText {
-  color: #98A2B3;
-  -webkit-text-fill-color: #98A2B3;
-}
-.euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+.euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap,
+.euiComboBox.euiComboBox-isDisabled .euiComboBoxPill {
   cursor: not-allowed;
 }
 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap {
   line-height: 32px; /* 2 */
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.euiComboBox__input {
-  max-width: 100%;
+  padding-block: 0;
 }
-.euiComboBox__input input {
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
+.euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap--plainText {
+  -webkit-padding-start: 4px;
+          padding-inline-start: 4px;
 }
 
 /*
@@ -1403,59 +1456,22 @@ The following files still use the Sass version:
 .euiComboBox--compressed .euiComboBoxPill, .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill {
   margin: 5px 4px 0 0;
 }
-.euiComboBox--compressed .euiComboBoxPill--plainText {
-  margin-top: 4px;
-}
-.euiComboBoxPill--plainText {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 400;
-  letter-spacing: normal;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -webkit-font-kerning: normal;
-          font-kerning: normal;
-  line-height: 24px;
-  font-size: 14px;
-  padding: 0;
-  color: #343741;
-  vertical-align: middle;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .euiComboBoxPill__prepend {
   margin-right: 4px;
 }
 .euiComboBoxPill__append {
   margin-left: 4px;
 }
-.euiComboBoxPill--plainText,
 .euiComboBoxPill .euiBadge__text {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
           align-items: center;
 }
-.euiComboBoxPill--plainText .euiIcon,
 .euiComboBoxPill .euiBadge__text .euiIcon {
   display: block;
 }
 
-.euiComboBoxPlaceholder {
-  max-width: 100%;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  padding-right: 40px;
-  position: absolute;
-  pointer-events: none;
-  padding-left: 4px;
-  line-height: 32px;
-  color: #69707D;
-  margin-bottom: 0 !important;
-}
-
 /**
  * 1. Using specificity to override panel shadow
  * 2. Prevent really long input from overflowing the container.
@@ -1965,10 +1981,32 @@ The following files still use the Sass version:
 }
 .euiSuperDatePicker__absoluteDateFormRow {
   padding: 0 8px 8px;
+  /* A bit of a visual trickery to make the format "hint" become an "error" text.
+     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
+     but as the help text is already read out via `aria-describedby`, and the error text
+     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormRow__fieldWrapper {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormControlLayout {
+  -webkit-order: 0;
+          order: 0;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormHelpText {
+  -webkit-order: 1;
+          order: 1;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormErrorText {
+  -webkit-order: 2;
+          order: 2;
 }
 
 .euiDatePopoverButton {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -2096,10 +2134,6 @@ The following files still use the Sass version:
   gap: 4px;
 }
 
-.euiQuickSelectPopover__anchor {
-  height: 100%;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: 14px;
   line-height: 14px;
@@ -2177,7 +2211,7 @@ The following files still use the Sass version:
 }
 
 .euiSuperDatePicker__prettyFormat {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -2367,7 +2401,7 @@ The following files still use the Sass version:
 .euiDataGridHeader {
   display: -webkit-flex;
   display: flex;
-  z-index: 3;
+  z-index: 999;
   background: #FFF;
   position: -webkit-sticky;
   position: sticky;
@@ -2391,12 +2425,6 @@ The following files still use the Sass version:
   display: -webkit-flex;
   display: flex;
 }
-.euiDataGridHeaderCell.euiDataGridHeaderCell--numeric {
-  text-align: right;
-}
-.euiDataGridHeaderCell.euiDataGridHeaderCell--currency {
-  text-align: right;
-}
 .euiDataGridHeaderCell:focus {
   outline: none;
   border-top: none;
@@ -2409,8 +2437,8 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #0071c2;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #0071c2);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
@@ -2426,50 +2454,57 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #0071c2;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #0071c2);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow {
-  margin-right: 4px;
-}
 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
-  -webkit-flex: 0 0 auto;
-          flex: 0 0 auto;
   position: relative;
-  -webkit-align-items: center;
-          align-items: center;
   display: -webkit-flex;
   display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  gap: 4px;
   width: 100%;
   font-weight: 700;
   outline: none;
 }
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button .euiDataGridHeaderCell__sortingArrow {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
 .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content {
   max-width: 100%;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__sortingArrow {
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon {
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  margin-left: auto;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  height: 16px;
   overflow: hidden;
-  white-space: nowrap;
-  text-align: left;
+  width: 0;
+  opacity: 0;
+  transition: width 150ms ease-in, opacity 350ms ease-in;
+}
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):focus-within .euiDataGridHeaderCell__icon, .euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn):hover .euiDataGridHeaderCell__icon,
+.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiPopover-isOpen .euiDataGridHeaderCell__icon {
+  width: 16px;
+  opacity: 1;
+}
+.euiDataGridHeaderCell.euiDataGridHeaderCell--numeric .euiDataGridHeaderCell__content, .euiDataGridHeaderCell.euiDataGridHeaderCell--currency .euiDataGridHeaderCell__content {
   -webkit-flex-grow: 1;
           flex-grow: 1;
-  -webkit-align-self: baseline;
-          align-self: baseline;
-}
-.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__icon {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-  -webkit-flex-basis: auto;
-          flex-basis: auto;
-  width: auto;
-  padding-left: 4px;
+  text-align: right;
 }
 
 .euiDataGridHeader__action--selected {
@@ -2632,15 +2667,23 @@ The following files still use the Sass version:
 }
 
 .euiDataGridRowCell {
+  position: relative;
+  border-right: solid 1px #edf0f5;
+  border-bottom: 1px solid #D3DAE6;
+  --euiDataGridCellOutlineColor: #07C;
+}
+.euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 14px;
   font-size: 1rem;
   line-height: 1.7142857143rem;
   padding: 6px;
-  border-right: solid 1px #edf0f5;
-  border-bottom: 1px solid #D3DAE6;
+  height: 100%;
   overflow: hidden;
 }
-.euiDataGridRowCell > * {
+.euiDataGridRowCell .euiDataGridRowCell__content--autoHeight {
+  height: auto;
+}
+.euiDataGridRowCell > [data-focus-lock-disabled] {
   height: 100%;
 }
 .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
@@ -2649,11 +2692,10 @@ The following files still use the Sass version:
 .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
   border-right-color: #D3DAE6;
 }
-.euiDataGridRowCell:focus {
-  position: relative;
+.euiDataGridRowCell:hover, .euiDataGridRowCell:focus, .euiDataGridRowCell.euiDataGridRowCell--open {
   outline: none;
 }
-.euiDataGridRowCell:focus::after {
+.euiDataGridRowCell:hover::after, .euiDataGridRowCell:focus::after, .euiDataGridRowCell.euiDataGridRowCell--open::after {
   content: "";
   display: block;
   width: 100%;
@@ -2661,30 +2703,29 @@ The following files still use the Sass version:
   position: absolute;
   top: 0;
   left: 0;
-  border: 2px solid #0071c2;
-  border-radius: 4px;
+  border: 2px solid var(--euiDataGridCellOutlineColor, #0071c2);
+  border-radius: 3px;
   z-index: 2;
   pointer-events: none;
 }
-.euiDataGridRowCell:hover .euiDataGridRowCell__actionButtonIcon {
+.euiDataGridRowCell:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+  --euiDataGridCellOutlineColor: #69707D;
+}
+.euiDataGridRowCell:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) .euiDataGridRowCell__actions {
+  -webkit-animation-delay: 350ms;
+          animation-delay: 350ms;
+}
+.euiDataGridRowCell:hover .euiDataGridRowCell__actions, .euiDataGridRowCell:focus .euiDataGridRowCell__actions, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actions, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actions, .euiDataGridRowCell[data-keyboard-closing] .euiDataGridRowCell__actions {
   -webkit-animation-duration: 90ms;
           animation-duration: 90ms;
   -webkit-animation-name: euiDataGridCellActionsSlideIn;
           animation-name: euiDataGridCellActionsSlideIn;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
-  -webkit-animation-delay: 250ms;
-          animation-delay: 250ms;
   -webkit-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
 }
-.euiDataGridRowCell:focus .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell:focus-within .euiDataGridRowCell__actionButtonIcon, .euiDataGridRowCell.euiDataGridRowCell--open .euiDataGridRowCell__actionButtonIcon {
-  -webkit-animation: none;
-          animation: none;
-  margin-left: 6px;
-  width: 12px;
-}
-.euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open) .euiDataGridRowCell__actionButtonIcon {
+.euiDataGridRowCell:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) .euiDataGridRowCell__actions {
   display: none;
 }
 .euiDataGridRowCell.euiDataGridRowCell--numeric {
@@ -2707,12 +2748,14 @@ The following files still use the Sass version:
   scrollbar-color: rgba(105, 112, 125, 0.5) transparent;
   scrollbar-width: thin;
   overflow: auto;
-  max-width: 400px !important;
-  max-height: 400px !important;
   z-index: 1000 !important;
   -webkit-filter: none;
           filter: none;
   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 3.6px 13px rgba(0, 0, 0, 0.07), 0 8.4px 23px rgba(0, 0, 0, 0.06), 0 23px 35px rgba(0, 0, 0, 0.05);
+  -webkit-animation-duration: 250ms;
+          animation-duration: 250ms;
+  -webkit-animation-name: euiDataGridCellPopover;
+          animation-name: euiDataGridCellPopover;
 }
 .euiDataGridRowCell__popover::-webkit-scrollbar {
   width: 16px;
@@ -2728,67 +2771,93 @@ The following files still use the Sass version:
   background-color: transparent;
 }
 
-.euiDataGridRowCell__contentWrapper {
-  position: relative;
-  height: 100%;
-}
-
-.euiDataGridRowCell__defaultHeight {
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
+  max-height: 100%;
+  height: auto;
   display: -webkit-flex;
   display: flex;
-  -webkit-align-items: baseline;
-          align-items: baseline;
-  max-width: 100%;
-}
-.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__content {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-}
-.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-.euiDataGridRowCell--controlColumn .euiDataGridRowCell__defaultHeight {
-  height: 100%;
   -webkit-align-items: center;
           align-items: center;
 }
 
-.euiDataGridRowCell__numericalHeight [data-euiportal],
-.euiDataGridRowCell__numericalHeight .euiPopover,
-.euiDataGridRowCell__numericalHeight .euiPopover__anchor {
-  height: 100%;
+.euiDataGridRowCell__actions,
+.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  position: absolute;
+  bottom: 100%;
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions,
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  left: 0;
+}
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions,
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  right: 0;
 }
 
 .euiDataGridRowCell__actions {
+  z-index: 998;
+  margin-bottom: -1px;
   display: -webkit-flex;
   display: flex;
+  gap: 2px;
+  padding-inline: 2px;
+  background-color: var(--euiDataGridCellOutlineColor);
+  color: #FFF;
+  border: 1px solid var(--euiDataGridCellOutlineColor);
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  -webkit-transform: scaleY(0);
+          transform: scaleY(0);
+  -webkit-transform-origin: bottom;
+          transform-origin: bottom;
+}
+.euiDataGridRowCell[data-gridcell-visible-row-index="0"] > .euiDataGridRowCell__actions {
+  z-index: 999;
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions {
+  border-bottom-right-radius: 3px;
 }
-.euiDataGridRowCell__actions--overlay {
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions {
+  border-bottom-left-radius: 3px;
+}
+.euiDataGridRowCell__actions::after {
+  content: "";
   position: absolute;
-  right: 0;
-  top: 0;
-  padding: 6px 0;
-  background-color: #FFF;
+  top: 100%;
+  height: 2px;
+  width: 2px;
+  background-color: var(--euiDataGridCellOutlineColor);
+}
+.euiDataGridRowCell--alignLeft .euiDataGridRowCell__actions::after {
+  left: -1px;
+}
+.euiDataGridRowCell--alignRight .euiDataGridRowCell__actions::after {
+  right: -1px;
 }
 
 .euiDataGridRowCell__actionButtonIcon {
-  height: 12px;
-  border-radius: 3px;
-  width: 0;
-  overflow: hidden;
-  transition: none;
-  box-shadow: none !important;
-  border: none;
+  height: 20px;
+  width: 16px;
+  border-radius: 0;
+  /* Force all cell action buttons to match EUI colors */
+  /* Manually increase the size of the expand cell icon - it's a bit small by default */
+}
+.euiDataGridRowCell__actionButtonIcon,
+.euiDataGridRowCell__actionButtonIcon svg {
+  background-color: transparent !important;
+  color: currentColor !important;
+  fill: currentColor !important;
+}
+.euiDataGridRowCell__actionButtonIcon.euiDataGridRowCell__expandCell .euiIcon {
+  width: 120%;
+  height: 100%;
 }
 
-.euiDataGrid--stripes .euiDataGridRow--striped,
-.euiDataGrid--stripes .euiDataGridRow--striped .euiDataGridRowCell__actions--overlay {
+.euiDataGrid--stripes .euiDataGridRow--striped {
   background-color: #F5F7FA;
 }
 
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
+.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
   background-color: #fff9e8;
 }
 
@@ -2801,53 +2870,61 @@ The following files still use the Sass version:
   border-left-color: transparent;
 }
 
-.euiDataGrid--fontSizeSmall .euiDataGridRowCell {
+.euiDataGrid--fontSizeSmall .euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 12px;
   font-size: 0.8571428571rem;
   line-height: 1.1428571429rem;
 }
 
-.euiDataGrid--fontSizeLarge .euiDataGridRowCell {
+.euiDataGrid--fontSizeLarge .euiDataGridRowCell .euiDataGridRowCell__content {
   font-size: 14px;
   font-size: 1rem;
   line-height: 1.7142857143rem;
 }
 
-.euiDataGrid--paddingSmall .euiDataGridRowCell {
+.euiDataGrid--paddingSmall .euiDataGridRowCell .euiDataGridRowCell__content {
   padding: 4px;
 }
 
-.euiDataGrid--paddingLarge .euiDataGridRowCell {
+.euiDataGrid--paddingLarge .euiDataGridRowCell .euiDataGridRowCell__content {
   padding: 8px;
 }
 
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__actions--overlay {
-  padding: 2px 0;
-}
-.euiDataGrid--fontSizeSmall.euiDataGrid--paddingSmall .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-  -webkit-transform: translateY(1px);
-          transform: translateY(1px);
-}
-
 @-webkit-keyframes euiDataGridCellActionsSlideIn {
   from {
-    margin-left: 0;
-    width: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
   }
   to {
-    margin-left: 6px;
-    width: 12px;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
   }
 }
 
 @keyframes euiDataGridCellActionsSlideIn {
   from {
-    margin-left: 0;
-    width: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+  }
+  to {
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes euiDataGridCellPopover {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes euiDataGridCellPopover {
+  from {
+    opacity: 0;
   }
   to {
-    margin-left: 6px;
-    width: 12px;
+    opacity: 1;
   }
 }
 .euiDataGrid__controls {
@@ -2878,11 +2955,6 @@ The following files still use the Sass version:
   margin-left: 2px;
 }
 
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: 600;
-}
-
 .euiDataGrid--bordersNone .euiDataGrid__controls {
   border: none;
   background: #FFF;
@@ -3398,7 +3470,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -3554,7 +3626,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -3715,7 +3787,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -3881,7 +3953,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4291,7 +4363,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4518,7 +4590,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4767,7 +4839,6 @@ The following files still use the Sass version:
   }
 }
 .euiFormControlLayout--group > *,
-.euiFormControlLayout--group .euiPopover__anchor,
 .euiFormControlLayout--group .euiButtonEmpty,
 .euiFormControlLayout--group .euiText,
 .euiFormControlLayout--group .euiFormLabel,
@@ -5212,7 +5283,7 @@ The following files still use the Sass version:
 }
 
 .euiFormRow--hasEmptyLabelSpace {
-  margin-top: 18px; /* 2 */
+  margin-top: 20px; /* 2 */
   min-height: 40px;
   padding-bottom: 0;
   -webkit-justify-content: center;
@@ -5567,7 +5638,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -6083,7 +6154,7 @@ The following files still use the Sass version:
 }
 
 .euiMarkdownEditorTextArea {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -7157,15 +7228,13 @@ The following files still use the Sass version:
   transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
   transition: opacity 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1), -webkit-filter 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
 }
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:hover,
-.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled:focus, .euiTableRow:hover .euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide:disabled {
+.euiTableRow-hasActions .euiTableCellContent--showOnHover .expandedItemActions__completelyHide {
   -webkit-filter: grayscale(0%);
           filter: grayscale(0%);
   opacity: 0;
 }
-.euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled), .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):hover, .euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled):focus {
+.euiTableRow-hasActions:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem,
+.euiTableRow-hasActions .euiTableCellContent--showOnHover:focus-within .euiTableCellContent__hoverItem {
   opacity: 1;
   -webkit-filter: grayscale(0%);
           filter: grayscale(0%);
@@ -7358,6 +7427,21 @@ The following files still use the Sass version:
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink {
     padding: 4px;
   }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+    width: 100%;
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba(152, 162, 179, 0.1);
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child .euiTableCellContent {
+    position: relative;
+    top: 4px;
+  }
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander {
     top: auto;
     bottom: 16px;
@@ -7556,6 +7640,21 @@ The following files still use the Sass version:
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-isExpandable .euiTableRowCell--isExpander .euiTableCellContent .euiLink, .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions .euiTableRowCell--hasActions .euiTableCellContent .euiLink {
     padding: 4px;
   }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+    width: 100%;
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: rgba(152, 162, 179, 0.1);
+  }
+  .euiTable.euiTable--responsive .euiTableRow:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child .euiTableCellContent {
+    position: relative;
+    top: 4px;
+  }
   .euiTable.euiTable--responsive .euiTableRow.euiTableRow-hasActions.euiTableRow-isExpandable .euiTableRowCell--isExpander {
     top: auto;
     bottom: 16px;