eidos-ui 2.1.0 → 3.1.0

package/dist/index.css

@@ -1,42 +1,48 @@
 :root {
-  --primary-color: #6366f1;
-  --primary-rgb: 99, 102, 241;
-  --primary-dark: #4f46e5;
+  --primary-color: #5c5de8;
+  --primary-rgb: 92, 93, 232;
+  --primary-dark: #4a4dba;
   --primary-light: #a5b4fc;
   --primary-50: #eef2ff;
   --primary-100: #e0e7ff;
   --primary-200: #c7d2fe;
   --primary-300: #a5b4fc;
   --primary-400: #818cf8;
-  --primary-500: #6366f1;
+  --primary-500: #5c5de8;
   --primary-600: #4f46e5;
   --primary-700: #4338ca;
   --primary-800: #3730a3;
   --primary-900: #312e81;
-  --secondary-color: #64748b;
-  --secondary-rgb: 100, 116, 139;
-  --secondary-dark: #475569;
+  --secondary-color: #617087;
+  --secondary-rgb: 97, 112, 135;
+  --secondary-dark: #4d5b71;
   --secondary-light: #cbd5e1;
-  --hyperlink-color: #11a2ad;
-  --hyperlink-rgb: 6, 182, 212;
-  --hyperlink-dark: #0e919b;
+  --hyperlink-color: #007b84;
+  --hyperlink-rgb: 0, 123, 132;
+  --hyperlink-dark: #00646c;
   --hyperlink-light: #1fc1cd;
-  --success-color: #10b981;
-  --success-rgb: 16, 185, 129;
-  --success-dark: #059669;
+  --success-color: #007f57;
+  --success-rgb: 0, 127, 87;
+  --success-dark: #046847;
   --success-light: #6ee7b7;
-  --danger-color: #ef4444;
-  --danger-rgb: 239, 68, 68;
-  --danger-dark: #dc2626;
+  --danger-color: #d6272f;
+  --danger-rgb: 214, 39, 47;
+  --danger-dark: #ac2528;
   --danger-light: #fca5a5;
-  --warning-color: #f59e0b;
-  --warning-rgb: 245, 158, 11;
-  --warning-dark: #d97706;
+  --warning-color: #9c6300;
+  --warning-rgb: 156, 99, 0;
+  --warning-dark: #7f5003;
   --warning-light: #fcd34d;
-  --info-color: #06b6d4;
-  --info-rgb: 6, 182, 212;
-  --info-dark: #0891b2;
+  --info-color: #007a90;
+  --info-rgb: 0, 122, 144;
+  --info-dark: #006476;
   --info-light: #67e8f9;
+  --primary-contrast: var(--white);
+  --secondary-contrast: var(--white);
+  --success-contrast: var(--white);
+  --danger-contrast: var(--white);
+  --warning-contrast: var(--white);
+  --info-contrast: var(--white);
   --light-color: #f8fafc;
   --light-rgb: 248, 250, 252;
   --dark-color: #1e293b;
@@ -107,12 +113,19 @@
   --navigation-collapsed-width: 64px;
   --footer-height: 60px;
   --badge-offset: 0.3em;
+  --scrollbar-size: 10px;
+  --scrollbar-thumb: var(--primary-color);
   --z-index-drawer: 1200;
   --z-index-modal: 1300;
   --z-index-dropdown: 1400;
   --z-index-command-palette: 1500;
   --z-index-snackbar: 1600;
   --z-index-tooltip: 1700;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
 }
 
 * {
@@ -123,6 +136,11 @@
 
 html,
 body {
+  /* `100%`, not `100vh`: on mobile `100vh` resolves against the *large*
+     viewport, so a full-height app shell ends up taller than what is actually
+     visible and its bottom chrome hides behind the browser UI. `height: 100%`
+     on `html` already resolves against the viewport, and on `body` against
+     `html`, so this is the same thing on desktop without that bug. */
   height: 100%;
   font-family: var(--font-family-primary);
   -webkit-font-smoothing: antialiased;
@@ -130,7 +148,6 @@ body {
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   font-size: 14px;
   line-height: 1.4;
-  margin-bottom: var(--spacing-sm);
   color: var(--dark-color);
 }
 
@@ -213,6 +230,44 @@ svg.lucide {
   height: 1em;
 }
 
+/* Scrollbars, WebKit/Blink (Chrome, Brave, Edge, Safari).
+   Both dimensions are needed: `width` is the thickness of a *vertical* bar
+   only, so setting it alone left every horizontal scroller (`pre`, the
+   Table/DataGrid wrappers, Tabs' strip) at the OS default thickness.
+   Overridable through the `--scrollbar-*` tokens - see `variables.scss`. */
+*::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  /* A scrollbar thumb takes no `padding`, so a transparent border plus
+     `background-clip: padding-box` is what insets the visible bar from the
+     track - the clip does nothing on its own. The thumb still hit-tests over
+     its whole border box, so this keeps a slim look without shrinking the
+     target to something un-grabbable. */
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--scrollbar-size);
+}
+
+/* Firefox, which supports neither the pseudo-elements above nor an inset
+   thumb - `scrollbar-width`/`scrollbar-color` is its ceiling. Gated behind a
+   Firefox-only `@supports` test on purpose: the standard properties take
+   precedence over the pseudo-elements wherever both are supported, so
+   applying them unconditionally would replace the styling above in Chromium
+   with this coarser version. */
+@supports (scrollbar-width: auto) and (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+}
 .eidos-accordion {
   display: flex;
   flex-direction: column;
@@ -515,22 +570,27 @@ svg.lucide {
 }
 .eidos-avatar--primary {
   background-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-avatar--secondary {
   background-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-avatar--success {
   background-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-avatar--danger {
   background-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-avatar--warning {
   background-color: var(--warning-color);
-  color: var(--dark-color);
+  color: var(--warning-contrast);
 }
 .eidos-avatar--info {
   background-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-avatar--gray {
   background-color: var(--gray-400);
@@ -626,22 +686,27 @@ svg.lucide {
 }
 .eidos-badge--primary {
   background-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-badge--secondary {
   background-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-badge--success {
   background-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-badge--danger {
   background-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-badge--warning {
   background-color: var(--warning-color);
-  color: var(--dark-color);
+  color: var(--warning-contrast);
 }
 .eidos-badge--info {
   background-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-badge--top-right.eidos-badge--rectangular {
   top: var(--badge-offset);
@@ -696,20 +761,17 @@ svg.lucide {
 }
 .eidos-pill--sm {
   min-width: 16px;
-  height: 2.2em;
   padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-xs);
 }
 .eidos-pill--md {
   min-width: 20px;
-  height: 2.2em;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-sm);
 }
 .eidos-pill--lg {
   min-width: 24px;
-  height: 2.2em;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-base);
 }
 .eidos-pill--dot {
@@ -743,27 +805,27 @@ svg.lucide {
 }
 .eidos-pill--filled.eidos-pill--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-pill--filled.eidos-pill--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-pill--filled.eidos-pill--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-pill--filled.eidos-pill--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-pill--filled.eidos-pill--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-pill--filled.eidos-pill--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-pill--outlined {
   background-color: transparent;
@@ -825,13 +887,13 @@ svg.lucide {
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
 }
 
 .eidos-breadcrumb-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   line-height: 1;
   will-change: transform;
 }
@@ -839,7 +901,7 @@ svg.lucide {
 .eidos-breadcrumb-link {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-500);
   text-decoration: none;
@@ -871,7 +933,7 @@ svg.lucide {
 .eidos-breadcrumb-link--button {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   color: var(--gray-500);
   text-decoration: none;
@@ -894,7 +956,7 @@ svg.lucide {
 .eidos-breadcrumb-current {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   color: var(--dark-color);
@@ -913,7 +975,6 @@ svg.lucide {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: 2px;
 }
 .eidos-breadcrumb-icon svg {
   width: 0.875em;
@@ -967,42 +1028,42 @@ svg.lucide {
 }
 .eidos-button--filled.eidos-button--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--filled.eidos-button--primary:hover:not(:disabled) {
-  background-color: var(--secondary-dark);
+  background-color: var(--primary-dark);
 }
 .eidos-button--filled.eidos-button--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-button--filled.eidos-button--secondary:hover:not(:disabled) {
   background-color: var(--secondary-dark);
 }
 .eidos-button--filled.eidos-button--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-button--filled.eidos-button--success:hover:not(:disabled) {
   background-color: var(--success-dark);
 }
 .eidos-button--filled.eidos-button--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-button--filled.eidos-button--danger:hover:not(:disabled) {
   background-color: var(--danger-dark);
 }
 .eidos-button--filled.eidos-button--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-button--filled.eidos-button--warning:hover:not(:disabled) {
   background-color: var(--warning-dark);
 }
 .eidos-button--filled.eidos-button--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-button--filled.eidos-button--info:hover:not(:disabled) {
   background-color: var(--info-dark);
@@ -1013,7 +1074,7 @@ svg.lucide {
 }
 .eidos-button--outlined:hover:not(:disabled) {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--outlined.eidos-button--primary {
   border-color: var(--primary-color);
@@ -1021,7 +1082,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--primary:hover:not(:disabled) {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-button--outlined.eidos-button--secondary {
   border-color: var(--secondary-color);
@@ -1029,7 +1090,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--secondary:hover:not(:disabled) {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-button--outlined.eidos-button--success {
   border-color: var(--success-color);
@@ -1037,7 +1098,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--success:hover:not(:disabled) {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-button--outlined.eidos-button--danger {
   border-color: var(--danger-color);
@@ -1045,7 +1106,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--danger:hover:not(:disabled) {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-button--outlined.eidos-button--warning {
   border-color: var(--warning-color);
@@ -1053,7 +1114,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--warning:hover:not(:disabled) {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-button--outlined.eidos-button--info {
   border-color: var(--info-color);
@@ -1061,7 +1122,7 @@ svg.lucide {
 }
 .eidos-button--outlined.eidos-button--info:hover:not(:disabled) {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-button--text {
   background-color: transparent;
@@ -1290,6 +1351,7 @@ svg.lucide {
   align-items: center;
   cursor: pointer;
   width: fit-content;
+  position: relative;
 }
 .eidos-checkbox-wrapper--disabled {
   cursor: not-allowed;
@@ -1339,6 +1401,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--indeterminate {
   background: var(--primary-color);
   border-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1348,6 +1411,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--indeterminate {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1357,6 +1421,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--indeterminate {
   background: var(--success-color);
   border-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1366,6 +1431,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--indeterminate {
   background: var(--danger-color);
   border-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1375,6 +1441,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--indeterminate {
   background: var(--warning-color);
   border-color: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
@@ -1384,6 +1451,7 @@ svg.lucide {
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--indeterminate {
   background: var(--info-color);
   border-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-checkbox-wrapper:hover:not(.eidos-checkbox-wrapper--disabled) .eidos-checkbox-control:not(.eidos-checkbox-control--checked):not(.eidos-checkbox-control--indeterminate):not(.eidos-checkbox-control--disabled) {
   border-color: var(--gray-500);
@@ -1422,7 +1490,7 @@ svg.lucide {
 }
 
 .eidos-checkbox-icon {
-  color: var(--white);
+  color: inherit;
   flex-shrink: 0;
 }
 
@@ -1498,49 +1566,49 @@ svg.lucide {
 }
 .eidos-chip--filled {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-chip--filled:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--primary {
   background-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-chip--filled.eidos-chip--primary:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--secondary {
   background-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-chip--filled.eidos-chip--secondary:hover:not(.eidos-chip--disabled) {
   background-color: var(--secondary-dark);
 }
 .eidos-chip--filled.eidos-chip--success {
   background-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-chip--filled.eidos-chip--success:hover:not(.eidos-chip--disabled) {
   background-color: var(--success-dark);
 }
 .eidos-chip--filled.eidos-chip--danger {
   background-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-chip--filled.eidos-chip--danger:hover:not(.eidos-chip--disabled) {
   background-color: var(--danger-dark);
 }
 .eidos-chip--filled.eidos-chip--warning {
   background-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-chip--filled.eidos-chip--warning:hover:not(.eidos-chip--disabled) {
   background-color: var(--warning-dark);
 }
 .eidos-chip--filled.eidos-chip--info {
   background-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-chip--filled.eidos-chip--info:hover:not(.eidos-chip--disabled) {
   background-color: var(--info-dark);
@@ -1796,14 +1864,15 @@ svg.lucide {
   border-radius: var(--border-radius-sm);
   cursor: crosshair;
   user-select: none;
+  height: 160px;
 }
-.eidos-color-picker--sm .eidos-color-picker-canvas {
+.eidos-color-picker-panel--sm .eidos-color-picker-canvas {
   height: 120px;
 }
-.eidos-color-picker--md .eidos-color-picker-canvas {
+.eidos-color-picker-panel--md .eidos-color-picker-canvas {
   height: 160px;
 }
-.eidos-color-picker--lg .eidos-color-picker-canvas {
+.eidos-color-picker-panel--lg .eidos-color-picker-canvas {
   height: 200px;
 }
 
@@ -1839,6 +1908,7 @@ svg.lucide {
 
 .eidos-color-picker-alpha::-webkit-slider-thumb, .eidos-color-picker-hue::-webkit-slider-thumb {
   -webkit-appearance: none;
+  appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
@@ -1975,7 +2045,7 @@ svg.lucide {
 }
 .eidos-color-picker-format-btn--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-color-picker-format-btn:disabled {
   cursor: not-allowed;
@@ -2036,7 +2106,7 @@ svg.lucide {
 .eidos-color-picker-copy--copied {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-color-picker-copy:disabled {
   opacity: 0.5;
@@ -2889,7 +2959,7 @@ kbd.eidos-cmd-kbd {
 .eidos-data-grid-cell-error {
   position: fixed;
   font-size: 10px;
-  color: var(--white);
+  color: var(--danger-contrast);
   background: var(--danger-color);
   white-space: nowrap;
   z-index: var(--z-index-tooltip);
@@ -3529,7 +3599,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-today.eidos-calendar-selected {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-color: var(--primary-300);
 }
 .eidos-calendar-date-cell.eidos-calendar-today.eidos-calendar-selected:hover:not(.eidos-calendar-disabled) {
@@ -3546,7 +3616,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-selected {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   font-weight: var(--font-weight-semibold);
 }
 .eidos-calendar-date-cell.eidos-calendar-selected:hover:not(.eidos-calendar-disabled) {
@@ -3563,7 +3633,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-range-start {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -3572,7 +3642,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-calendar-date-cell.eidos-calendar-range-end {
   background-color: var(--primary-600);
-  color: var(--white);
+  color: var(--primary-contrast);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -5048,6 +5118,7 @@ kbd.eidos-cmd-kbd {
   display: inline-flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  position: relative;
 }
 .eidos-number-input--fullWidth {
   width: 100%;
@@ -5424,26 +5495,31 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-pagination-page--active {
   border-color: transparent;
-  color: var(--white);
   cursor: text;
 }
 .eidos-pagination-page--active.eidos-pagination-page--primary {
   background: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--secondary {
   background: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--success {
   background: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--danger {
   background: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--warning {
   background: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-pagination-page--active.eidos-pagination-page--info {
   background: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-pagination-page--active:focus {
   box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
@@ -5668,6 +5744,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   cursor: pointer;
   width: fit-content;
+  position: relative;
 }
 .eidos-radio-wrapper--disabled {
   cursor: not-allowed;
@@ -5716,6 +5793,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--primary .eidos-radio-control--checked {
   background: var(--primary-color);
   border-color: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-radio-wrapper--secondary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5724,6 +5802,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--secondary .eidos-radio-control--checked {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-radio-wrapper--success .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5732,6 +5811,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--success .eidos-radio-control--checked {
   background: var(--success-color);
   border-color: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-radio-wrapper--danger .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5740,6 +5820,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--danger .eidos-radio-control--checked {
   background: var(--danger-color);
   border-color: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-radio-wrapper--warning .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5748,6 +5829,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--warning .eidos-radio-control--checked {
   background: var(--warning-color);
   border-color: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-radio-wrapper--info .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
@@ -5756,6 +5838,7 @@ kbd.eidos-cmd-kbd {
 .eidos-radio-wrapper--info .eidos-radio-control--checked {
   background: var(--info-color);
   border-color: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-radio-wrapper:hover:not(.eidos-radio-wrapper--disabled) .eidos-radio-control:not(.eidos-radio-control--checked):not(.eidos-radio-control--disabled) {
   border-color: var(--gray-500);
@@ -5791,7 +5874,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-radio-dot {
   border-radius: 50%;
-  background: var(--white);
+  background: currentColor;
   flex-shrink: 0;
   transform: scale(0);
   transition: transform 0.2s ease;
@@ -6741,63 +6824,63 @@ kbd.eidos-cmd-kbd {
 .eidos-stepper-step--active.eidos-stepper-step--primary .eidos-stepper-dot {
   background: var(--primary-color);
   border-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--secondary .eidos-stepper-dot {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--success .eidos-stepper-dot {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--danger .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--warning .eidos-stepper-dot {
   background: var(--warning-color);
   border-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-stepper-step--active.eidos-stepper-step--info .eidos-stepper-dot {
   background: var(--info-color);
   border-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 
 .eidos-stepper-step--completed.eidos-stepper-step--primary .eidos-stepper-dot {
   background: var(--primary-color);
   border-color: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--secondary .eidos-stepper-dot {
   background: var(--secondary-color);
   border-color: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--success .eidos-stepper-dot {
   background: var(--success-color);
   border-color: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--danger .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--warning .eidos-stepper-dot {
   background: var(--warning-color);
   border-color: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--info .eidos-stepper-dot {
   background: var(--info-color);
   border-color: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-stepper-step--completed.eidos-stepper-step--primary .eidos-stepper-connector, .eidos-stepper-step--completed.eidos-stepper-step--primary + .eidos-stepper-connector--extend {
   background: var(--primary-color);
@@ -6845,7 +6928,7 @@ kbd.eidos-cmd-kbd {
 .eidos-stepper-step--error .eidos-stepper-dot {
   background: var(--danger-color);
   border-color: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 
 .eidos-stepper-label {
@@ -6867,6 +6950,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-sm);
   cursor: pointer;
+  position: relative;
 }
 .eidos-switch-wrapper--disabled {
   cursor: not-allowed;
@@ -6915,36 +6999,42 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-switch-wrapper--primary .eidos-switch-track--checked {
   background: var(--primary-color);
+  color: var(--primary-contrast);
 }
 .eidos-switch-wrapper--primary .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-track--checked {
   background: var(--secondary-color);
+  color: var(--secondary-contrast);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
 }
 .eidos-switch-wrapper--success .eidos-switch-track--checked {
   background: var(--success-color);
+  color: var(--success-contrast);
 }
 .eidos-switch-wrapper--success .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
 }
 .eidos-switch-wrapper--danger .eidos-switch-track--checked {
   background: var(--danger-color);
+  color: var(--danger-contrast);
 }
 .eidos-switch-wrapper--danger .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
 }
 .eidos-switch-wrapper--warning .eidos-switch-track--checked {
   background: var(--warning-color);
+  color: var(--warning-contrast);
 }
 .eidos-switch-wrapper--warning .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
 }
 .eidos-switch-wrapper--info .eidos-switch-track--checked {
   background: var(--info-color);
+  color: var(--info-contrast);
 }
 .eidos-switch-wrapper--info .eidos-switch-input:focus-visible + .eidos-switch-track {
   box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
@@ -6994,6 +7084,9 @@ kbd.eidos-cmd-kbd {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   transition: left 0.2s ease;
 }
+.eidos-switch-track--checked .eidos-switch-thumb {
+  background: currentColor;
+}
 
 .eidos-table-container {
   background: var(--white);
@@ -7759,13 +7852,21 @@ kbd.eidos-cmd-kbd {
   flex-direction: column;
 }
 .eidos-tabs--line .eidos-tabs-list {
-  border-bottom: 2px solid var(--gray-200);
+  padding-bottom: 2px;
+  box-shadow: inset 0 -2px 0 var(--gray-200);
   position: relative;
   gap: 0;
 }
 .eidos-tabs--line .eidos-tab {
   border-radius: 0;
 }
+.eidos-tabs--enclosed .eidos-tabs-bar {
+  background: var(--gray-100);
+  border-radius: var(--border-radius-md);
+}
+.eidos-tabs--enclosed .eidos-tabs-scroll-button:hover {
+  background: var(--gray-200);
+}
 .eidos-tabs--enclosed .eidos-tabs-list {
   background: var(--gray-100);
   border-radius: var(--border-radius-md);
@@ -7783,11 +7884,73 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-xs);
 }
 .eidos-tabs--pills .eidos-tab {
+  height: auto;
+  padding-block: var(--spacing-sm);
+  min-height: 24px;
   border-radius: 9999px;
 }
 .eidos-tabs--pills .eidos-tab--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
+}
+
+.eidos-tabs-bar {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  position: relative;
+}
+
+.eidos-tabs-scroll-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+}
+.eidos-tabs-scroll-button:focus {
+  outline: none;
+}
+.eidos-tabs-scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  padding: var(--spacing-sm);
+  background: rgb(var(--white-rgb), 0.9);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  color: var(--gray-500);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+.eidos-tabs-scroll-button--prev {
+  left: 0;
+}
+.eidos-tabs-scroll-button--next {
+  right: 0;
+}
+.eidos-tabs-scroll-button:hover {
+  color: var(--gray-700);
+  background: var(--gray-100);
+}
+.eidos-tabs-scroll-button--sm {
+  font-size: var(--font-size-xs);
+}
+.eidos-tabs-scroll-button--md {
+  font-size: var(--font-size-sm);
+}
+.eidos-tabs-scroll-button--lg {
+  font-size: var(--font-size-base);
+}
+
+.eidos-tabs-scroll-button-icon {
+  width: 1.25em;
+  height: 1.25em;
 }
 
 .eidos-tabs-list {
@@ -7796,9 +7959,24 @@ kbd.eidos-cmd-kbd {
   overflow-x: auto;
   min-width: 0;
 }
+.eidos-tabs-list--sm {
+  height: var(--component-size-sm);
+}
+.eidos-tabs-list--md {
+  height: var(--component-size-md);
+}
+.eidos-tabs-list--lg {
+  height: var(--component-size-lg);
+}
 .eidos-tabs-list--fullWidth .eidos-tab {
   flex: 1;
 }
+.eidos-tabs-list--hideScrollbar {
+  scrollbar-width: none;
+}
+.eidos-tabs-list--hideScrollbar::-webkit-scrollbar {
+  display: none;
+}
 
 .eidos-tab {
   background: none;
@@ -7819,24 +7997,22 @@ kbd.eidos-cmd-kbd {
   white-space: nowrap;
   color: var(--gray-500);
   font-weight: var(--font-weight-medium);
+  line-height: 1;
   transition: all 0.2s ease;
   border-radius: 0;
-  will-change: transform;
+  height: 100%;
 }
 .eidos-tab--sm {
   font-size: var(--font-size-xs);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  height: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
 }
 .eidos-tab--md {
   font-size: var(--font-size-sm);
-  padding: var(--spacing-xs) var(--spacing-md);
-  height: var(--component-size-md);
+  padding-inline: var(--spacing-md);
 }
 .eidos-tab--lg {
   font-size: var(--font-size-base);
-  padding: var(--spacing-sm) var(--spacing-md);
-  height: var(--component-size-lg);
+  padding-inline: var(--spacing-md);
 }
 .eidos-tab:hover:not(.eidos-tab--disabled):not(.eidos-tab--active) {
   color: var(--gray-700);
@@ -7864,10 +8040,10 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--primary.eidos-tabs--pills .eidos-tab--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-tabs--primary .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
 }
 
 .eidos-tabs--secondary .eidos-tab--active {
@@ -7878,10 +8054,10 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--secondary.eidos-tabs--pills .eidos-tab--active {
   background: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-tabs--secondary .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
 }
 
 .eidos-tabs--success .eidos-tab--active {
@@ -7892,10 +8068,10 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--success.eidos-tabs--pills .eidos-tab--active {
   background: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-tabs--success .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), 0.5);
 }
 
 .eidos-tabs--danger .eidos-tab--active {
@@ -7906,10 +8082,10 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--danger.eidos-tabs--pills .eidos-tab--active {
   background: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-tabs--danger .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.5);
 }
 
 .eidos-tabs--warning .eidos-tab--active {
@@ -7920,10 +8096,10 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--warning.eidos-tabs--pills .eidos-tab--active {
   background: var(--warning-color);
-  color: var(--white);
+  color: var(--warning-contrast);
 }
 .eidos-tabs--warning .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--warning-rgb), 0.5);
 }
 
 .eidos-tabs--info .eidos-tab--active {
@@ -7934,15 +8110,19 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--info.eidos-tabs--pills .eidos-tab--active {
   background: var(--info-color);
-  color: var(--white);
+  color: var(--info-contrast);
 }
 .eidos-tabs--info .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--info-rgb), 0.5);
+}
+
+.eidos-tabs--pills .eidos-tab--active:focus-visible {
+  box-shadow: inset 0 0 0 2px currentColor;
 }
 
 .eidos-tabs-indicator {
   position: absolute;
-  bottom: -2px;
+  bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
@@ -8498,6 +8678,138 @@ kbd.eidos-cmd-kbd {
     border-width: 3px;
   }
 }
+.eidos-theme-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.eidos-theme-editor-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.eidos-theme-editor-section__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.eidos-theme-editor-section__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--dark-color);
+}
+
+.eidos-theme-editor-section__hint {
+  font-size: var(--font-size-sm);
+  color: var(--gray-500);
+}
+.eidos-theme-editor-section__hint code {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--gray-100);
+  border-radius: var(--border-radius-xs);
+  padding: 0 0.25em;
+}
+
+.eidos-theme-editor-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.eidos-theme-editor-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.eidos-theme-editor-row__label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--dark-color);
+  flex: 0 0 auto;
+  min-width: 6.5em;
+}
+.eidos-theme-editor-row__diagnostics {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.eidos-theme-editor-row__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 0 0 auto;
+  position: relative;
+  margin-left: auto;
+}
+.eidos-theme-editor-row--wide > .eidos-theme-editor-row__control {
+  flex: 1 1 18em;
+  min-width: 0;
+}
+
+.eidos-theme-editor-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  white-space: nowrap;
+  border-radius: 9999px;
+  padding: 0.15em 0.6em;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border: 1px solid var(--gray-300);
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+}
+.eidos-theme-editor-badge__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+.eidos-theme-editor-badge--aa-large {
+  border-color: var(--gray-400);
+  color: var(--gray-800);
+}
+.eidos-theme-editor-badge--fail {
+  border-color: var(--gray-700);
+  background-color: var(--gray-800);
+  color: var(--gray-50);
+}
+
+.eidos-theme-editor-file {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.eidos-theme-editor-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 767.98px) {
+  .eidos-theme-editor-row {
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+  .eidos-theme-editor-row__label {
+    min-width: 100%;
+  }
+}
 .eidos-timeline {
   list-style: none;
   margin: 0;
@@ -8538,22 +8850,22 @@ kbd.eidos-cmd-kbd {
 .eidos-timeline-item--primary .eidos-timeline-dot {
   border-color: var(--primary-color);
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 .eidos-timeline-item--secondary .eidos-timeline-dot {
   border-color: var(--secondary-color);
   background: var(--secondary-color);
-  color: var(--white);
+  color: var(--secondary-contrast);
 }
 .eidos-timeline-item--success .eidos-timeline-dot {
   border-color: var(--success-color);
   background: var(--success-color);
-  color: var(--white);
+  color: var(--success-contrast);
 }
 .eidos-timeline-item--danger .eidos-timeline-dot {
   border-color: var(--danger-color);
   background: var(--danger-color);
-  color: var(--white);
+  color: var(--danger-contrast);
 }
 .eidos-timeline-dot::after {
   content: "";
@@ -8872,16 +9184,18 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-pagelayout__content {
   grid-area: content;
-  display: grid;
-  grid-template-rows: minmax(50px, auto) 1fr auto;
+  display: flex;
+  flex-direction: column;
   background-color: var(--gray-50);
   min-height: 0;
   min-width: 0;
+  overflow: auto;
+}
+.eidos-pagelayout__header, .eidos-pagelayout__footer {
+  flex: 0 0 auto;
 }
 .eidos-pagelayout__body {
-  overflow: auto;
-  min-height: 0;
-  min-width: 0;
+  flex: 1 0 auto;
 }
 .eidos-pagelayout__footer.eidos-footer--copyright {
   padding: var(--spacing-md) var(--spacing-xl);
@@ -8889,16 +9203,46 @@ kbd.eidos-cmd-kbd {
 .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
   padding: var(--spacing-xl) var(--spacing-xl) 0;
 }
+@media (max-width: 1279.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-lg) var(--spacing-lg) 0;
+  }
+}
+@media (max-width: 1023.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-md) var(--spacing-md) 0;
+  }
+}
+@media (max-width: 767.98px) {
+  .eidos-pagelayout__header, .eidos-pagelayout__body, .eidos-pagelayout__footer {
+    padding: var(--spacing-sm) var(--spacing-sm) 0;
+  }
+}
 .eidos-pagelayout__body {
   padding-bottom: var(--spacing-xl);
 }
+@media (max-width: 1279.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-lg);
+  }
+}
+@media (max-width: 1023.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-md);
+  }
+}
+@media (max-width: 767.98px) {
+  .eidos-pagelayout__body {
+    padding-bottom: var(--spacing-sm);
+  }
+}
 
 .eidos-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  row-gap: var(--spacing-xs);
+  gap: var(--spacing-sm) var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-xl);
   min-height: var(--toolbar-height);
   box-sizing: border-box;
@@ -8920,8 +9264,8 @@ kbd.eidos-cmd-kbd {
 .eidos-toolbar__content {
   display: flex;
   align-items: center;
-  gap: var(--spacing-lg);
-  flex-shrink: 0;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
 }
 .eidos-toolbar__slot {
   display: flex;