@elastic/eui 90.0.1 → 91.0.0-backport.0

package/dist/eui_theme_dark.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(255, 255, 255, 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(255, 255, 255, 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: #DFE5EF;
+  /* 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: #81858f;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::-moz-placeholder {
+  color: #81858f;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::placeholder {
+  color: #81858f;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled {
+  color: #535966;
+  -webkit-text-fill-color: #535966;
+  cursor: not-allowed;
+  background: #202128;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.euiComboBox .euiComboBox__input:disabled::-webkit-input-placeholder {
+  color: #535966;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::-moz-placeholder {
+  color: #535966;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::placeholder {
+  color: #535966;
+  opacity: 1;
 }
 .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap {
   background-color: #111216;
@@ -1364,27 +1427,17 @@ The following files still use the Sass version:
   color: #535966;
   opacity: 1;
 }
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPlaceholder,
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPill--plainText {
-  color: #535966;
-  -webkit-text-fill-color: #535966;
-}
-.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;
+  padding-block: 0;
 }
-
-.euiComboBox__input {
-  max-width: 100%;
-}
-.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: #DFE5EF;
-  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: #81858f;
-  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%;
@@ -2755,8 +2789,7 @@ The following files still use the Sass version:
 }
 
 .euiDataGridRowCell__numericalHeight [data-euiportal],
-.euiDataGridRowCell__numericalHeight .euiPopover,
-.euiDataGridRowCell__numericalHeight .euiPopover__anchor {
+.euiDataGridRowCell__numericalHeight .euiPopover {
   height: 100%;
 }
 
@@ -3398,7 +3431,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +3587,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +3748,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +3914,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +4324,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +4551,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +4800,6 @@ The following files still use the Sass version:
   }
 }
 .euiFormControlLayout--group > *,
-.euiFormControlLayout--group .euiPopover__anchor,
 .euiFormControlLayout--group .euiButtonEmpty,
 .euiFormControlLayout--group .euiText,
 .euiFormControlLayout--group .euiFormLabel,
@@ -5567,7 +5599,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 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 +6115,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%;