eidos-ui 2.0.0 → 3.0.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;
@@ -113,6 +119,11 @@
   --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;
 }
 
 * {
@@ -432,6 +443,10 @@ svg.lucide {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   line-height: 1.4;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 
 .eidos-alert-content {
@@ -511,22 +526,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);
@@ -622,22 +642,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);
@@ -692,20 +717,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 {
@@ -739,27 +761,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;
@@ -821,13 +843,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;
 }
@@ -835,7 +857,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;
@@ -867,7 +889,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;
@@ -890,7 +912,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);
@@ -909,7 +931,6 @@ svg.lucide {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: 2px;
 }
 .eidos-breadcrumb-icon svg {
   width: 0.875em;
@@ -963,42 +984,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);
@@ -1009,7 +1030,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);
@@ -1017,7 +1038,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);
@@ -1025,7 +1046,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);
@@ -1033,7 +1054,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);
@@ -1041,7 +1062,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);
@@ -1049,7 +1070,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);
@@ -1057,7 +1078,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;
@@ -1335,6 +1356,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;
@@ -1344,6 +1366,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;
@@ -1353,6 +1376,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;
@@ -1362,6 +1386,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;
@@ -1371,6 +1396,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;
@@ -1380,6 +1406,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);
@@ -1418,7 +1445,7 @@ svg.lucide {
 }
 
 .eidos-checkbox-icon {
-  color: var(--white);
+  color: inherit;
   flex-shrink: 0;
 }
 
@@ -1494,49 +1521,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);
@@ -1792,14 +1819,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;
 }
 
@@ -1835,6 +1863,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%;
@@ -1971,7 +2000,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;
@@ -2032,7 +2061,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;
@@ -2562,6 +2591,7 @@ kbd.eidos-cmd-kbd {
   background: var(--gray-50);
   border-bottom: 1px solid var(--gray-200);
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sm);
@@ -2570,17 +2600,23 @@ kbd.eidos-cmd-kbd {
 
 .eidos-datagrid-toolbar-left {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-sm);
-  flex: 1;
+  gap: var(--spacing-xs) var(--spacing-sm);
+  flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
 }
 
 .eidos-datagrid-toolbar-right {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-sm);
+  justify-content: flex-end;
+  gap: var(--spacing-xs) var(--spacing-sm);
   flex-shrink: 0;
+  max-width: 100%;
+  margin-left: auto;
 }
 
 .eidos-datagrid-quick-filters {
@@ -2589,6 +2625,15 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-sm);
   flex-wrap: wrap;
   min-width: 0;
+  max-width: 100%;
+}
+.eidos-datagrid-quick-filters--compact {
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+.eidos-datagrid-quick-filters--compact .eidos-datagrid-quick-filter {
+  width: 100%;
 }
 
 .eidos-datagrid-quick-filter {
@@ -2610,28 +2655,11 @@ kbd.eidos-cmd-kbd {
 
 .eidos-datagrid-bulk-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-xs);
-}
-
-.eidos-datagrid-clear-selection {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: none;
-  background: var(--gray-200);
-  color: var(--gray-600);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.eidos-datagrid-clear-selection:hover {
-  background: var(--gray-300);
-  color: var(--gray-800);
+  min-width: 0;
+  max-width: 100%;
 }
 
 .eidos-data-grid {
@@ -2869,6 +2897,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-data-grid-row-number-col {
   width: 40px;
+  min-width: 40px;
   text-align: right;
   padding-right: var(--spacing-md);
 }
@@ -2885,7 +2914,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);
@@ -2907,6 +2936,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-data-grid-actions-col {
   width: 48px;
+  min-width: 48px;
   text-align: center;
   padding: 0;
 }
@@ -3000,6 +3030,21 @@ kbd.eidos-cmd-kbd {
 .eidos-datagrid--compact .eidos-data-grid-cell {
   padding: 4px 12px;
 }
+.eidos-datagrid--compact .eidos-datagrid-cards {
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.eidos-datagrid--compact .eidos-datagrid-card {
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.eidos-datagrid--compact .eidos-datagrid-card-toolbar {
+  gap: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+.eidos-datagrid--compact .eidos-datagrid-card-fields {
+  gap: var(--spacing-xs);
+}
 
 .eidos-datagrid--spacious .eidos-data-grid-header-cell {
   padding: 16px 12px;
@@ -3007,6 +3052,43 @@ kbd.eidos-cmd-kbd {
 .eidos-datagrid--spacious .eidos-data-grid-cell {
   padding: 16px 12px;
 }
+.eidos-datagrid--spacious .eidos-datagrid-cards {
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+}
+.eidos-datagrid--spacious .eidos-datagrid-card {
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+}
+.eidos-datagrid--spacious .eidos-datagrid-card-toolbar {
+  gap: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+}
+.eidos-datagrid--spacious .eidos-datagrid-card-fields {
+  gap: var(--spacing-md);
+}
+
+.eidos-data-grid-header-cell.eidos-datagrid-drag-handle-cell,
+.eidos-data-grid-cell.eidos-datagrid-drag-handle-cell,
+.eidos-data-grid-header-cell.eidos-datagrid-expand-cell,
+.eidos-data-grid-cell.eidos-datagrid-expand-cell {
+  padding: 0 4px;
+}
+
+.eidos-data-grid-header-cell.eidos-datagrid-checkbox-cell,
+.eidos-data-grid-cell.eidos-datagrid-checkbox-cell {
+  padding: 0 var(--spacing-sm);
+}
+
+.eidos-data-grid-header-cell.eidos-data-grid-actions-col,
+.eidos-data-grid-cell.eidos-data-grid-actions-col {
+  padding: 0;
+}
+
+.eidos-data-grid-header-cell.eidos-data-grid-row-number-col,
+.eidos-data-grid-cell.eidos-data-grid-row-number-col {
+  padding: 0 var(--spacing-md) 0 0;
+}
 
 .eidos-datagrid-cell--pinned-left,
 .eidos-datagrid-header-cell--pinned-left {
@@ -3085,7 +3167,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-datagrid-cards {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--eidos-datagrid-card-min-width, 280px), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--eidos-datagrid-card-min-width, 280px), 100%), 1fr));
   align-items: start;
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
@@ -3214,6 +3296,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-datagrid-card-empty {
+  grid-column: 1/-1;
   padding: var(--spacing-xl) var(--spacing-md);
 }
 
@@ -3471,7 +3554,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) {
@@ -3488,7 +3571,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) {
@@ -3505,7 +3588,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;
 }
@@ -3514,7 +3597,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;
 }
@@ -3716,6 +3799,11 @@ kbd.eidos-cmd-kbd {
   font-size: var(--font-size-base);
   color: var(--dark-color);
   flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-width: 0;
 }
 
 .eidos-drawer-close {
@@ -3887,6 +3975,11 @@ kbd.eidos-cmd-kbd {
   margin: 0;
   color: var(--dark-color);
   font-weight: var(--font-weight-medium);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
 }
 .eidos-empty-state--sm .eidos-empty-state-title {
   font-size: var(--font-size-sm);
@@ -4912,6 +5005,8 @@ kbd.eidos-cmd-kbd {
   margin: 0;
   color: inherit;
   line-height: 1;
+  align-items: center;
+  flex-wrap: wrap;
 }
 .eidos-modal-header .eidos-modal-icon {
   flex-shrink: 0;
@@ -5354,26 +5449,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);
@@ -5459,6 +5559,11 @@ kbd.eidos-cmd-kbd {
   font-size: var(--font-size-sm);
   color: var(--dark-color);
   flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-width: 0;
 }
 
 .eidos-popover-close {
@@ -5641,6 +5746,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;
@@ -5649,6 +5755,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;
@@ -5657,6 +5764,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;
@@ -5665,6 +5773,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;
@@ -5673,6 +5782,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;
@@ -5681,6 +5791,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);
@@ -5716,7 +5827,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;
@@ -6666,63 +6777,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);
@@ -6770,7 +6881,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 {
@@ -6840,36 +6951,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);
@@ -6919,6 +7036,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);
@@ -6937,6 +7057,7 @@ kbd.eidos-cmd-kbd {
   background: var(--gray-50);
   border-bottom: 1px solid var(--gray-200);
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sm);
@@ -6945,17 +7066,23 @@ kbd.eidos-cmd-kbd {
 
 .eidos-table-toolbar-left {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-sm);
-  flex: 1;
+  gap: var(--spacing-xs) var(--spacing-sm);
+  flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
 }
 
 .eidos-table-toolbar-right {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-sm);
+  justify-content: flex-end;
+  gap: var(--spacing-xs) var(--spacing-sm);
   flex-shrink: 0;
+  max-width: 100%;
+  margin-left: auto;
 }
 
 .eidos-table-selection-count {
@@ -6967,28 +7094,11 @@ kbd.eidos-cmd-kbd {
 
 .eidos-table-bulk-actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-xs);
-}
-
-.eidos-table-clear-selection {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: none;
-  background: var(--gray-200);
-  color: var(--gray-600);
-  cursor: pointer;
-  padding: 0;
-  flex-shrink: 0;
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-.eidos-table-clear-selection:hover {
-  background: var(--gray-300);
-  color: var(--gray-800);
+  min-width: 0;
+  max-width: 100%;
 }
 
 .eidos-table {
@@ -7139,6 +7249,7 @@ kbd.eidos-cmd-kbd {
 .eidos-table-header-cell-icon,
 .eidos-table-cell-icon {
   width: var(--component-size-lg);
+  min-width: var(--component-size-lg);
   padding: 0 var(--spacing-md);
   text-align: center;
   overflow: visible;
@@ -7146,8 +7257,8 @@ kbd.eidos-cmd-kbd {
 
 .eidos-table-header-cell-action,
 .eidos-table-cell-action {
-  width: auto;
-  min-width: 120px;
+  width: var(--component-size-lg);
+  min-width: var(--component-size-lg);
   text-align: center;
   overflow: visible;
 }
@@ -7177,6 +7288,54 @@ kbd.eidos-cmd-kbd {
   padding: 16px 12px;
 }
 
+.eidos-table-header-cell.eidos-table-header-cell-icon,
+.eidos-table-cell.eidos-table-cell-icon,
+.eidos-table-header-cell.eidos-table-header-cell-action,
+.eidos-table-cell.eidos-table-cell-action,
+.eidos-table-header-cell.eidos-table-checkbox-cell,
+.eidos-table-cell.eidos-table-checkbox-cell {
+  text-align: center;
+}
+
+.eidos-table-header-cell.eidos-table-header-cell-action,
+.eidos-table-cell.eidos-table-cell-action,
+.eidos-table-header-cell.eidos-table-checkbox-cell,
+.eidos-table-cell.eidos-table-checkbox-cell {
+  padding: 0;
+}
+
+.eidos-table--compact .eidos-table-cards {
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.eidos-table--compact .eidos-table-card {
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.eidos-table--compact .eidos-table-card-toolbar {
+  gap: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+}
+.eidos-table--compact .eidos-table-card-fields {
+  gap: var(--spacing-xs);
+}
+
+.eidos-table--spacious .eidos-table-cards {
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+}
+.eidos-table--spacious .eidos-table-card {
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+}
+.eidos-table--spacious .eidos-table-card-toolbar {
+  gap: var(--spacing-md);
+  padding-bottom: var(--spacing-md);
+}
+.eidos-table--spacious .eidos-table-card-fields {
+  gap: var(--spacing-md);
+}
+
 .eidos-table-cell--pinned-left,
 .eidos-table-header-cell--pinned-left {
   position: relative;
@@ -7361,6 +7520,110 @@ kbd.eidos-cmd-kbd {
     font-size: var(--font-size-xs);
   }
 }
+.eidos-table-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--eidos-table-card-min-width, 280px), 100%), 1fr));
+  align-items: start;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+}
+
+.eidos-table-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--border-radius-md);
+  background: var(--white);
+  transition: background-color 0.1s ease;
+}
+.eidos-table-card--clickable {
+  cursor: pointer;
+}
+.eidos-table-card--clickable:hover {
+  background: var(--primary-50);
+}
+.eidos-table-card--selected {
+  background: var(--primary-50);
+  border-color: var(--primary-200);
+}
+.eidos-table-card--selected.eidos-table-card--clickable:hover {
+  background: var(--primary-100);
+}
+
+.eidos-table-card-toolbar {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--gray-100);
+}
+
+.eidos-table-card-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  justify-self: start;
+}
+
+.eidos-table-card-toolbar-right {
+  display: flex;
+  align-items: center;
+  justify-self: end;
+}
+
+.eidos-table-card-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  text-align: center;
+}
+
+.eidos-table-card-heading-title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--dark-color);
+}
+
+.eidos-table-card-heading-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--gray-500);
+}
+
+.eidos-table-card-fields {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: var(--spacing-sm);
+}
+
+.eidos-table-card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.eidos-table-card-field-label {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--gray-500);
+}
+
+.eidos-table-card-field-value {
+  font-size: var(--font-size-sm);
+  color: var(--gray-700);
+  min-width: 0;
+}
+
+.eidos-table-card-empty {
+  grid-column: 1/-1;
+  padding: var(--spacing-xl) var(--spacing-md);
+}
+
 .eidos-table-footer {
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
@@ -7431,6 +7694,7 @@ kbd.eidos-cmd-kbd {
   background: var(--white);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
+  width: min(480px, 100vw - 32px);
 }
 
 .eidos-table-filters-header {
@@ -7452,19 +7716,15 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-table-filter-row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
   gap: var(--spacing-md);
   align-items: center;
 }
 
-.eidos-table-column-select {
-  flex: 0 0 200px;
-  min-width: 200px;
-}
-
+.eidos-table-column-select,
 .eidos-table-value-input {
-  flex: 1;
-  min-width: 200px;
+  min-width: 0;
 }
 
 .eidos-table-filters-footer {
@@ -7496,26 +7756,30 @@ kbd.eidos-cmd-kbd {
 
 @media (max-width: 768px) {
   .eidos-table-filters-dropdown {
-    min-width: 300px;
-    max-width: 400px;
+    padding: var(--spacing-md);
   }
   .eidos-table-filter-row {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-sm);
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--spacing-sm);
+    row-gap: var(--spacing-xs);
+  }
+  .eidos-table-column-select {
+    grid-area: 1/1/2/2;
+  }
+  .eidos-table-filter-remove {
+    grid-area: 1/2/2/3;
   }
-  .eidos-table-column-select,
   .eidos-table-value-input {
-    flex: none;
-    min-width: auto;
+    grid-area: 2/1/3/3;
   }
-  .eidos-table-filter-row > :last-child {
-    align-self: flex-end;
+  .eidos-table-filter-rows {
+    gap: var(--spacing-md);
   }
-  .eidos-table-filters-actions {
-    flex-direction: column;
-    align-items: stretch;
+  .eidos-table-filter-row:not(:last-child) {
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--gray-100);
   }
+  .eidos-table-filters-actions,
   .eidos-table-filters-apply-actions {
     flex-direction: column;
     align-items: stretch;
@@ -7568,12 +7832,14 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tabs--pills .eidos-tab--active {
   background: var(--primary-color);
-  color: var(--white);
+  color: var(--primary-contrast);
 }
 
 .eidos-tabs-list {
   display: flex;
   align-items: center;
+  overflow-x: auto;
+  min-width: 0;
 }
 .eidos-tabs-list--fullWidth .eidos-tab {
   flex: 1;
@@ -7643,7 +7909,7 @@ 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);
@@ -7657,7 +7923,7 @@ 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);
@@ -7671,7 +7937,7 @@ 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);
@@ -7685,7 +7951,7 @@ 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);
@@ -7699,7 +7965,7 @@ 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);
@@ -7713,7 +7979,7 @@ 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);
@@ -8277,6 +8543,137 @@ 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;
+  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;
@@ -8317,22 +8714,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: "";
@@ -8653,9 +9050,14 @@ kbd.eidos-cmd-kbd {
   grid-area: content;
   display: grid;
   grid-template-rows: minmax(50px, auto) 1fr auto;
+  background-color: var(--gray-50);
+  min-height: 0;
+  min-width: 0;
 }
 .eidos-pagelayout__body {
-  background-color: var(--gray-50);
+  overflow: auto;
+  min-height: 0;
+  min-width: 0;
 }
 .eidos-pagelayout__footer.eidos-footer--copyright {
   padding: var(--spacing-md) var(--spacing-xl);
@@ -8663,13 +9065,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-sm);
+  gap: var(--spacing-sm) var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-xl);
   min-height: var(--toolbar-height);
   box-sizing: border-box;
@@ -8691,8 +9126,15 @@ 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;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-width: 0;
+  flex-shrink: 1;
 }
 .eidos-toolbar__actions {
   display: flex;
@@ -8707,7 +9149,6 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-sm);
   flex-wrap: wrap;
   will-change: transform;
-  background-color: var(--gray-50);
 }
 .eidos-header__content {
   display: flex;
@@ -8727,11 +9168,21 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-sm);
   flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  max-width: 100%;
+}
+.eidos-header__actions > * {
+  flex-shrink: 0;
 }
 .eidos-header__title {
   font-size: var(--font-size-2xl);
   margin-bottom: var(--spacing-xs);
   overflow-wrap: break-word;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-sm);
 }
 .eidos-header__subtitle {
   font-size: var(--font-size-sm);