eidos-ui 3.2.1 → 3.4.0

package/dist/index.css

@@ -62,6 +62,8 @@
   --gray-800: #1e293b;
   --gray-900: #0f172a;
   --gray-rgb: 100, 116, 139;
+  --text-muted: var(--gray-600);
+  --text-disabled: var(--gray-400);
   --font-family-primary:
     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -185,23 +187,46 @@ h3 {
 
 h4 {
   font-size: 1.25rem;
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
   line-height: 1.4;
   margin-bottom: var(--spacing-sm);
   letter-spacing: -0.025em;
   color: var(--dark-color);
 }
 
+h5 {
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.45;
+  margin-bottom: var(--spacing-sm);
+  letter-spacing: -0.02em;
+  color: var(--dark-color);
+}
+
+h6 {
+  font-size: 1rem;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.5;
+  margin-bottom: var(--spacing-sm);
+  letter-spacing: -0.01em;
+  color: var(--dark-color);
+}
+
+small {
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
 a {
   color: var(--hyperlink-color);
-  text-decoration: none;
+  text-decoration: underline;
   text-underline-offset: 0.1em;
   transition: all 0.2s ease;
   cursor: pointer;
 }
 a:hover {
   color: var(--hyperlink-dark);
-  text-decoration: underline;
 }
 
 button {
@@ -392,7 +417,7 @@ svg.lucide {
   flex-shrink: 0;
   width: 1em;
   height: 1em;
-  color: var(--gray-400);
+  color: var(--text-muted);
   transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .eidos-accordion-trigger--open .eidos-accordion-chevron {
@@ -427,40 +452,40 @@ svg.lucide {
   border-color: rgba(var(--primary-rgb), 0.2);
 }
 .eidos-alert--info .eidos-alert-icon-wrapper {
-  color: var(--primary-color);
+  color: var(--primary-dark);
 }
 .eidos-alert--info .eidos-alert-title {
-  color: var(--primary-color);
+  color: var(--primary-dark);
 }
 .eidos-alert--success {
   background-color: rgba(var(--success-rgb), 0.08);
   border-color: rgba(var(--success-rgb), 0.2);
 }
 .eidos-alert--success .eidos-alert-icon-wrapper {
-  color: var(--success-color);
+  color: var(--success-dark);
 }
 .eidos-alert--success .eidos-alert-title {
-  color: var(--success-color);
+  color: var(--success-dark);
 }
 .eidos-alert--warning {
   background-color: rgba(var(--warning-rgb), 0.08);
   border-color: rgba(var(--warning-rgb), 0.2);
 }
 .eidos-alert--warning .eidos-alert-icon-wrapper {
-  color: var(--warning-color);
+  color: var(--warning-dark);
 }
 .eidos-alert--warning .eidos-alert-title {
-  color: var(--warning-color);
+  color: var(--warning-dark);
 }
 .eidos-alert--danger {
   background-color: rgba(var(--danger-rgb), 0.08);
   border-color: rgba(var(--danger-rgb), 0.2);
 }
 .eidos-alert--danger .eidos-alert-icon-wrapper {
-  color: var(--danger-color);
+  color: var(--danger-dark);
 }
 .eidos-alert--danger .eidos-alert-title {
-  color: var(--danger-color);
+  color: var(--danger-dark);
 }
 
 .eidos-alert-icon-wrapper {
@@ -517,7 +542,7 @@ svg.lucide {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--gray-400);
+  color: var(--text-muted);
   padding: 2px;
   border-radius: var(--border-radius-sm);
   transition: all 0.2s ease;
@@ -622,7 +647,7 @@ svg.lucide {
 .eidos-avatar-fallback-icon {
   width: 55%;
   height: 55%;
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-avatar-group {
@@ -902,7 +927,7 @@ svg.lucide {
   align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   text-decoration: none;
   border-radius: var(--border-radius-xs);
   transition: color 0.15s ease;
@@ -929,7 +954,7 @@ svg.lucide {
   align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   text-decoration: none;
   cursor: pointer;
   border-radius: var(--border-radius-xs);
@@ -1184,14 +1209,14 @@ svg.lucide {
 }
 .eidos-button--disabled {
   background-color: var(--gray-200) !important;
-  color: var(--gray-500) !important;
+  color: var(--text-disabled) !important;
   border-color: var(--gray-200) !important;
   cursor: not-allowed !important;
   opacity: 0.6;
 }
 .eidos-button--disabled:hover {
   background-color: var(--gray-200) !important;
-  color: var(--gray-500) !important;
+  color: var(--text-disabled) !important;
   transform: none !important;
 }
 .eidos-button--loading {
@@ -1494,7 +1519,7 @@ svg.lucide {
   user-select: none;
 }
 .eidos-checkbox-wrapper--disabled .eidos-checkbox-label {
-  color: var(--gray-400);
+  color: var(--text-disabled);
 }
 
 .eidos-checkbox-error-message {
@@ -1694,7 +1719,7 @@ svg.lucide {
 }
 .eidos-chip--disabled {
   background-color: var(--gray-100) !important;
-  color: var(--gray-400) !important;
+  color: var(--text-disabled) !important;
   border-color: var(--gray-200) !important;
   cursor: not-allowed !important;
   opacity: 0.6;
@@ -1729,6 +1754,28 @@ svg.lucide {
   min-width: 0;
 }
 
+.eidos-chip--action {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.eidos-chip--action:focus-visible {
+  outline: none;
+  border-radius: var(--border-radius-sm);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
+
 .eidos-chip--remove-button {
   background: none;
   border: none;
@@ -1883,7 +1930,7 @@ svg.lucide {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
-  height: 20px;
+  height: 24px;
   background: transparent;
   cursor: pointer;
   outline: none;
@@ -1945,7 +1992,7 @@ svg.lucide {
 
 .eidos-color-picker-alpha-wrapper {
   position: relative;
-  height: 20px;
+  height: 24px;
   display: flex;
   align-items: center;
 }
@@ -2014,7 +2061,7 @@ svg.lucide {
   font-weight: var(--font-weight-medium);
   padding: 4px 6px;
   background: var(--gray-50);
-  color: var(--gray-500);
+  color: var(--text-muted);
   border: none;
   cursor: pointer;
   letter-spacing: 0.02em;
@@ -2071,7 +2118,7 @@ svg.lucide {
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--gray-200);
   background: var(--gray-50);
-  color: var(--gray-500);
+  color: var(--text-muted);
   cursor: pointer;
   transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
 }
@@ -2095,6 +2142,15 @@ svg.lucide {
   gap: var(--spacing-xs);
 }
 
+.eidos-color-picker-hue:focus-visible::-webkit-slider-thumb,
+.eidos-color-picker-alpha:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+}
+.eidos-color-picker-hue:focus-visible::-moz-range-thumb,
+.eidos-color-picker-alpha:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+}
+
 .eidos-color-picker-swatch {
   background: none;
   border: none;
@@ -2102,8 +2158,8 @@ svg.lucide {
   margin: 0;
   font: inherit;
   cursor: pointer;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border-radius: var(--border-radius-sm);
   border: 2px solid transparent;
   cursor: pointer;
@@ -2186,7 +2242,7 @@ svg.lucide {
   padding-bottom: var(--spacing-xs);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
-  color: var(--gray-500);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   user-select: none;
@@ -2249,7 +2305,7 @@ svg.lucide {
 
 .eidos-combobox-option-description {
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
   flex-shrink: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2261,7 +2317,7 @@ svg.lucide {
   padding: var(--spacing-md);
   text-align: center;
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-combobox-loading {
@@ -2271,7 +2327,7 @@ svg.lucide {
   gap: var(--spacing-sm);
   padding: var(--spacing-md);
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-combobox-loading-icon {
@@ -2283,7 +2339,7 @@ svg.lucide {
 
 .eidos-combobox-hint {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   line-height: 1.4;
 }
 
@@ -2315,7 +2371,7 @@ svg.lucide {
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
   background: var(--gray-50);
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: var(--font-size-sm);
   font-family: inherit;
   cursor: pointer;
@@ -2375,9 +2431,12 @@ svg.lucide {
   border-bottom: 1px solid var(--gray-200);
   flex-shrink: 0;
 }
+.eidos-cmd-search:focus-within {
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
 
 .eidos-cmd-search-icon {
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -2406,7 +2465,7 @@ svg.lucide {
   line-height: 1.5;
 }
 .eidos-cmd-input::placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-cmd-search-badge {
@@ -2418,7 +2477,7 @@ svg.lucide {
   border-radius: var(--border-radius-sm);
   font-size: 11px;
   font-family: var(--font-family-mono);
-  color: var(--gray-400);
+  color: var(--text-muted);
   background: var(--gray-50);
   flex-shrink: 0;
   user-select: none;
@@ -2449,7 +2508,7 @@ svg.lucide {
   padding: var(--spacing-xs) var(--spacing-md);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
-  color: var(--gray-500);
+  color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   line-height: 1.6;
@@ -2487,7 +2546,7 @@ svg.lucide {
   justify-content: center;
   width: 16px;
   height: 16px;
-  color: var(--gray-500);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -2505,7 +2564,7 @@ svg.lucide {
 
 .eidos-cmd-item-description {
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
   line-height: 1.4;
   margin-top: 1px;
   overflow: hidden;
@@ -2536,7 +2595,7 @@ kbd.eidos-cmd-kbd {
 .eidos-cmd-empty {
   padding: var(--spacing-xl) var(--spacing-md);
   text-align: center;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: var(--font-size-sm);
   margin: 0;
 }
@@ -2545,7 +2604,7 @@ kbd.eidos-cmd-kbd {
   border-top: 1px solid var(--gray-200);
   padding: var(--spacing-sm) var(--spacing-md);
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2606,7 +2665,7 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 .eidos-conversation-separator::before, .eidos-conversation-separator::after {
   content: "";
@@ -2630,7 +2689,7 @@ kbd.eidos-cmd-kbd {
   margin: 0;
   padding: var(--spacing-md);
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   text-align: center;
   border-top: 1px solid var(--gray-200);
 }
@@ -2694,7 +2753,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-message-time {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 .eidos-message-time--inline {
@@ -2703,7 +2762,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-message-edited {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   font-style: italic;
 }
 
@@ -2740,12 +2799,12 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-message-quote-body {
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-message-reply-target {
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-message-status {
@@ -2753,7 +2812,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-xs);
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 .eidos-message-status svg {
   width: 14px;
@@ -2832,7 +2891,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-message-attachment-size {
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -2855,7 +2914,7 @@ kbd.eidos-cmd-kbd {
   justify-content: space-between;
   gap: var(--spacing-sm);
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-composer-row {
@@ -2898,6 +2957,12 @@ kbd.eidos-cmd-kbd {
 .eidos-composer-input {
   width: 100%;
   resize: none;
+}
+.eidos-composer-input:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+  border-radius: var(--border-radius-sm);
+}
+.eidos-composer-input {
   font-size: var(--font-size-sm);
   color: var(--dark-color);
   line-height: 1.55;
@@ -2905,10 +2970,10 @@ kbd.eidos-cmd-kbd {
   background: transparent;
 }
 .eidos-composer-input::placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 .eidos-composer-input:disabled {
-  color: var(--gray-400);
+  color: var(--text-disabled);
   cursor: not-allowed;
 }
 
@@ -2922,15 +2987,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-composer-file-input {
-  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;
+  display: none;
 }
 
 .eidos-composer-actions {
@@ -2952,7 +3009,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-composer-hint {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 .eidos-composer-hint kbd {
   font-family: var(--font-family-mono);
@@ -3020,17 +3077,19 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-message--chat.eidos-message--own .eidos-message-time--inline {
   color: var(--primary-contrast);
-  opacity: 0.75;
 }
 .eidos-message--chat.eidos-message--own .eidos-message-quote {
   background: rgba(var(--white-rgb), 0.15);
   border-left-color: rgba(var(--white-rgb), 0.5);
 }
 .eidos-message--chat.eidos-message--own .eidos-message-attachment-link {
-  background: rgba(var(--white-rgb), 0.15);
+  background: rgba(var(--black-rgb), 0.18);
   border-color: rgba(var(--white-rgb), 0.35);
   color: inherit;
 }
+.eidos-message--chat.eidos-message--own .eidos-message-attachment-size {
+  color: inherit;
+}
 
 .eidos-message--chat.eidos-message--grouped .eidos-message-bubble {
   margin-top: calc(-1 * var(--spacing-xs));
@@ -3049,7 +3108,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-chat-typing {
@@ -3171,7 +3230,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-comment-thread-count {
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-comment-thread-list {
@@ -3229,7 +3288,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-sm);
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-comment-thread-skeleton {
@@ -3404,7 +3463,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-datagrid-sort-icon {
   display: flex;
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
   transition: color 0.2s ease;
 }
@@ -3510,7 +3569,7 @@ kbd.eidos-cmd-kbd {
   background: rgba(var(--danger-rgb), 0.18);
 }
 .eidos-data-grid-cell--readonly {
-  color: var(--gray-500);
+  color: var(--text-muted);
   cursor: default;
 }
 
@@ -3534,7 +3593,7 @@ kbd.eidos-cmd-kbd {
   justify-content: center;
   padding: 2px;
   border-radius: var(--border-radius-sm);
-  color: var(--gray-400);
+  color: var(--text-muted);
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 .eidos-datagrid-expand-toggle:hover {
@@ -3590,7 +3649,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-data-grid-row-number {
-  color: var(--gray-400);
+  color: var(--text-muted);
   font-size: var(--font-size-xs);
   text-align: right;
   width: 40px;
@@ -3640,7 +3699,7 @@ kbd.eidos-cmd-kbd {
   justify-content: center;
   padding: var(--spacing-xs);
   border-radius: var(--border-radius-sm);
-  color: var(--gray-400);
+  color: var(--text-muted);
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 .eidos-datagrid-actions-trigger:hover {
@@ -3893,7 +3952,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-datagrid-card-row-number {
-  color: var(--gray-400);
+  color: var(--text-muted);
   font-size: var(--font-size-xs);
   user-select: none;
 }
@@ -3915,7 +3974,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-datagrid-card-heading-subtitle {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   border-radius: var(--border-radius-sm);
 }
 
@@ -3934,7 +3993,7 @@ kbd.eidos-cmd-kbd {
 .eidos-datagrid-card-field-label {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-datagrid-card-field-value,
@@ -3969,7 +4028,7 @@ kbd.eidos-cmd-kbd {
 .eidos-datagrid-card-field-value.eidos-data-grid-cell--readonly,
 .eidos-datagrid-card-heading-title.eidos-data-grid-cell--readonly,
 .eidos-datagrid-card-heading-subtitle.eidos-data-grid-cell--readonly {
-  color: var(--gray-500);
+  color: var(--text-muted);
   cursor: default;
 }
 
@@ -4000,10 +4059,10 @@ kbd.eidos-cmd-kbd {
   cursor: pointer;
 }
 .eidos-date-picker-trigger .eidos-input-pre-icon {
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 .eidos-date-picker-trigger .eidos-input-pos-icon-button {
-  color: var(--gray-500) !important;
+  color: var(--text-muted) !important;
   background: none !important;
   border: none !important;
   padding: var(--spacing-xs) !important;
@@ -4150,7 +4209,7 @@ kbd.eidos-cmd-kbd {
   height: 36px;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-calendar-content {
@@ -4218,7 +4277,7 @@ kbd.eidos-cmd-kbd {
   background-color: var(--gray-200);
 }
 .eidos-calendar-date-cell.eidos-calendar-other-month {
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 .eidos-calendar-date-cell.eidos-calendar-other-month:hover:not(.eidos-calendar-disabled) {
   color: var(--gray-600);
@@ -4356,7 +4415,7 @@ kbd.eidos-cmd-kbd {
 .eidos-time-input-separator {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
   user-select: none;
 }
 
@@ -4511,7 +4570,7 @@ kbd.eidos-cmd-kbd {
   width: 32px;
   height: 32px;
   border-radius: var(--border-radius-sm);
-  color: var(--gray-400);
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: color 0.15s ease, background-color 0.15s ease;
@@ -4681,7 +4740,7 @@ kbd.eidos-cmd-kbd {
 .eidos-empty-state-description {
   margin: 0;
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   line-height: 1.6;
 }
 
@@ -4730,7 +4789,7 @@ kbd.eidos-cmd-kbd {
   height: 48px;
   border-radius: 50%;
   background: var(--gray-100);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 .eidos-file-upload-icon svg {
   width: 24px;
@@ -4757,7 +4816,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-file-upload-hint {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-file-upload-error {
@@ -4801,7 +4860,7 @@ kbd.eidos-cmd-kbd {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-file-upload-item-name {
@@ -4815,7 +4874,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-file-upload-item-size {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -4833,7 +4892,7 @@ kbd.eidos-cmd-kbd {
   height: 24px;
   border-radius: var(--border-radius-xs);
   cursor: pointer;
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
   transition: background 0.15s ease, color 0.15s ease;
 }
@@ -4887,7 +4946,7 @@ kbd.eidos-cmd-kbd {
 .eidos-inline-edit .eidos-inline-edit__icon {
   display: inline-flex;
   align-items: center;
-  color: var(--gray-400);
+  color: var(--text-muted);
   opacity: 0;
   transition: opacity 0.15s ease;
   flex-shrink: 0;
@@ -4904,7 +4963,7 @@ kbd.eidos-cmd-kbd {
   white-space: nowrap;
 }
 .eidos-inline-edit .eidos-inline-edit__placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
   font-style: italic;
 }
 .eidos-inline-edit:not(.eidos-inline-edit--disabled):hover, .eidos-inline-edit:not(.eidos-inline-edit--disabled):focus-visible {
@@ -4919,7 +4978,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-inline-edit--disabled {
   cursor: not-allowed;
-  color: var(--gray-400);
+  color: var(--text-disabled);
 }
 .eidos-inline-edit--editing {
   display: block;
@@ -5256,7 +5315,7 @@ kbd.eidos-cmd-kbd {
   appearance: none;
 }
 .eidos-input::placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
   opacity: 1;
 }
 .eidos-input--sm {
@@ -5276,7 +5335,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input:disabled:not(.eidos-input--loading) {
   cursor: not-allowed;
-  color: var(--gray-500);
+  color: var(--text-disabled);
 }
 .eidos-input--error {
   color: var(--danger-color);
@@ -5287,7 +5346,7 @@ kbd.eidos-cmd-kbd {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: 1.1em;
   line-height: 1;
   flex-shrink: 0;
@@ -5310,7 +5369,7 @@ kbd.eidos-cmd-kbd {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-500);
+  color: var(--text-muted);
   cursor: pointer;
   padding: var(--spacing-xs);
   border-radius: var(--border-radius-sm);
@@ -5344,7 +5403,7 @@ kbd.eidos-cmd-kbd {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-400);
+  color: var(--text-muted);
   cursor: pointer;
   padding: var(--spacing-xs);
   border-radius: var(--border-radius-sm);
@@ -5408,7 +5467,7 @@ kbd.eidos-cmd-kbd {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: 1.1em;
   line-height: 1;
   flex-shrink: 0;
@@ -5512,7 +5571,7 @@ kbd.eidos-cmd-kbd {
 .eidos-menu-item.eidos-menu-item--disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--gray-400);
+  color: var(--text-disabled);
 }
 .eidos-menu-item.eidos-menu-item--disabled:hover {
   background-color: transparent;
@@ -5586,7 +5645,7 @@ kbd.eidos-cmd-kbd {
 .eidos-menu-nested-arrow {
   width: 16px;
   height: 16px;
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
   transition: transform 0.15s ease;
 }
@@ -5795,7 +5854,7 @@ kbd.eidos-cmd-kbd {
   flex-shrink: 0;
   height: 100%;
   cursor: pointer;
-  color: var(--gray-500);
+  color: var(--text-muted);
   transition: background 0.15s ease, color 0.15s ease;
   border: none;
 }
@@ -5849,7 +5908,7 @@ kbd.eidos-cmd-kbd {
   border: none;
   outline: none;
   padding: 0 var(--spacing-xs);
-  min-width: 0;
+  min-width: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -5862,7 +5921,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-number-input-helper {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-number-input-error {
@@ -5970,7 +6029,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-otp .eidos-otp-hint {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   line-height: 1.4;
 }
 .eidos-otp .eidos-otp-error-message {
@@ -6058,6 +6117,8 @@ kbd.eidos-cmd-kbd {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
 .eidos-pagination-page {
@@ -6065,6 +6126,11 @@ kbd.eidos-cmd-kbd {
   -webkit-appearance: none;
   font-family: inherit;
   outline: none;
+}
+.eidos-pagination-page:focus-visible {
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+}
+.eidos-pagination-page {
   padding: 0;
   margin: 0;
   display: flex;
@@ -6143,7 +6209,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-sm);
-  color: var(--gray-400);
+  color: var(--text-muted);
   padding: 0 var(--spacing-xs);
   user-select: none;
 }
@@ -6234,7 +6300,7 @@ kbd.eidos-cmd-kbd {
   width: 24px;
   height: 24px;
   border-radius: var(--border-radius-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   cursor: pointer;
   transition: color 0.15s ease, background 0.15s ease;
   flex-shrink: 0;
@@ -6493,7 +6559,7 @@ kbd.eidos-cmd-kbd {
   user-select: none;
 }
 .eidos-radio-wrapper--disabled .eidos-radio-label {
-  color: var(--gray-400);
+  color: var(--text-disabled);
 }
 
 .eidos-radio-error-message {
@@ -6581,7 +6647,7 @@ kbd.eidos-cmd-kbd {
   border: 1px solid var(--gray-200);
   border-radius: 50%;
   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);
+  color: var(--text-muted);
   transition: color 0.2s ease, background-color 0.2s ease;
 }
 .eidos-segmented-scroll-button--prev {
@@ -6626,7 +6692,7 @@ kbd.eidos-cmd-kbd {
   border-radius: var(--border-radius-lg);
   cursor: pointer;
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
   transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
   white-space: nowrap;
   line-height: 1;
@@ -6797,7 +6863,7 @@ kbd.eidos-cmd-kbd {
 .eidos-select-option--disabled {
   opacity: 0.5;
   cursor: not-allowed;
-  color: var(--gray-400);
+  color: var(--text-disabled);
 }
 .eidos-select-option--disabled:hover {
   background-color: transparent;
@@ -6914,7 +6980,7 @@ kbd.eidos-cmd-kbd {
 .eidos-slider-value {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
   min-width: 2.5ch;
   text-align: right;
 }
@@ -7140,7 +7206,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   justify-content: space-between;
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-snackbar {
@@ -7288,7 +7354,7 @@ kbd.eidos-cmd-kbd {
   width: 24px;
   height: 24px;
   border-radius: var(--border-radius-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   margin-left: var(--spacing-sm);
   transition: all 0.2s ease;
 }
@@ -7399,7 +7465,7 @@ kbd.eidos-cmd-kbd {
   margin-left: -1.5px;
   padding-left: var(--spacing-sm);
   padding-right: var(--spacing-sm);
-  min-width: unset;
+  min-width: 24px;
   align-self: stretch;
   align-items: center;
   justify-content: center;
@@ -7532,7 +7598,7 @@ kbd.eidos-cmd-kbd {
   flex-shrink: 0;
   border: 2px solid var(--gray-300);
   background: var(--white);
-  color: var(--gray-400);
+  color: var(--text-muted);
   transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
 }
 .eidos-stepper-dot svg {
@@ -7656,12 +7722,12 @@ kbd.eidos-cmd-kbd {
   color: var(--dark-color);
 }
 .eidos-stepper-step--pending .eidos-stepper-label {
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-stepper-description {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-switch-wrapper {
@@ -7912,7 +7978,7 @@ kbd.eidos-cmd-kbd {
 .eidos-table-sort-indicator {
   display: flex;
   font-size: var(--font-size-xs);
-  color: var(--gray-500);
+  color: var(--text-muted);
   transition: color 0.2s ease;
 }
 .eidos-table-sortable:hover .eidos-table-sort-indicator {
@@ -8185,7 +8251,7 @@ kbd.eidos-cmd-kbd {
   display: inline-flex;
   align-items: center;
   cursor: grab;
-  color: var(--gray-400);
+  color: var(--text-muted);
   line-height: 0;
   opacity: 0;
   transition: opacity 0.15s ease;
@@ -8353,7 +8419,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-table-card-heading-subtitle {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-table-card-fields {
@@ -8372,7 +8438,7 @@ kbd.eidos-cmd-kbd {
 .eidos-table-card-field-label {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-table-card-field-value {
@@ -8639,7 +8705,7 @@ kbd.eidos-cmd-kbd {
   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);
+  color: var(--text-muted);
   transition: color 0.2s ease, background-color 0.2s ease;
 }
 .eidos-tabs-scroll-button--prev {
@@ -8704,7 +8770,7 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-xs);
   cursor: pointer;
   white-space: nowrap;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-weight: var(--font-weight-medium);
   line-height: 1;
   transition: all 0.2s ease;
@@ -8959,7 +9025,7 @@ kbd.eidos-cmd-kbd {
   line-height: 1.4;
 }
 .eidos-tag-input-input::placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-tag-input-dropdown-anchor {
@@ -8996,12 +9062,12 @@ kbd.eidos-cmd-kbd {
   padding: var(--spacing-md);
   text-align: center;
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-tag-input-hint {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   margin-top: var(--spacing-xs);
   line-height: 1.4;
 }
@@ -9307,7 +9373,7 @@ kbd.eidos-cmd-kbd {
   min-height: 80px;
 }
 .eidos-textarea::placeholder {
-  color: var(--gray-400);
+  color: var(--text-muted);
   opacity: 1;
 }
 .eidos-textarea--resize-none {
@@ -9336,7 +9402,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea:disabled:not(.eidos-textarea--loading) {
   cursor: not-allowed;
-  color: var(--gray-500);
+  color: var(--text-disabled);
 }
 .eidos-textarea--error {
   color: var(--danger-color);
@@ -9348,7 +9414,7 @@ kbd.eidos-cmd-kbd {
 .eidos-textarea-count {
   align-self: flex-end;
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
   line-height: 1;
   user-select: none;
 }
@@ -9407,7 +9473,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-theme-editor-section__hint {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 .eidos-theme-editor-section__hint code {
   font-family: var(--font-family-mono);
@@ -9486,15 +9552,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .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;
+  display: none;
 }
 
 .eidos-theme-editor-actions {
@@ -9623,7 +9681,7 @@ kbd.eidos-cmd-kbd {
 
 .eidos-timeline-timestamp {
   font-size: var(--font-size-xs);
-  color: var(--gray-400);
+  color: var(--text-muted);
 }
 
 .eidos-timeline-title {
@@ -9635,7 +9693,7 @@ kbd.eidos-cmd-kbd {
 .eidos-timeline-description {
   margin: 0;
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   line-height: 1.6;
 }
 
@@ -9655,7 +9713,6 @@ kbd.eidos-cmd-kbd {
   box-shadow: var(--box-shadow-lg);
   max-width: 300px;
   word-wrap: break-word;
-  pointer-events: none;
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 .eidos-tooltip--top {
@@ -9764,7 +9821,7 @@ kbd.eidos-cmd-kbd {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
-  color: var(--gray-400);
+  color: var(--text-muted);
   transition: transform 0.15s ease;
 }
 .eidos-tree-toggle svg {
@@ -9774,7 +9831,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tree-toggle--expanded {
   transform: rotate(90deg);
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 .eidos-tree-toggle--leaf {
   opacity: 0;
@@ -9787,7 +9844,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--gray-500);
+  color: var(--text-muted);
 }
 
 .eidos-tree-label {
@@ -9835,7 +9892,7 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-sm);
   padding: var(--spacing-xl);
   min-height: 120px;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: var(--font-size-sm);
   text-align: center;
 }
@@ -10111,7 +10168,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-header__subtitle {
   font-size: var(--font-size-sm);
-  color: var(--gray-500);
+  color: var(--text-muted);
   overflow-wrap: break-word;
 }
 .eidos-header__meta {
@@ -10136,11 +10193,11 @@ kbd.eidos-cmd-kbd {
 .eidos-header__meta-icon {
   width: var(--font-size-sm);
   height: var(--font-size-sm);
-  color: var(--gray-400);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 .eidos-header__meta-label {
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-weight: var(--font-weight-normal);
   flex-shrink: 0;
 }
@@ -10166,7 +10223,7 @@ kbd.eidos-cmd-kbd {
 .eidos-footer--copyright {
   display: flex;
   justify-content: center;
-  color: var(--gray-500);
+  color: var(--text-muted);
   font-size: var(--font-size-sm);
 }
 .eidos-footer--component > *:only-child {