@ethlete/components 1.0.0-next.78 → 1.0.0-next.79

package/src/lib/forms/slider/range-slider.component.css

@@ -91,9 +91,10 @@
       position: relative;
       display: flex;
       align-items: center;
-      block-size: max(28px, var(--et-slider-thumb-size));
+      block-size: max(44px, var(--et-slider-thumb-size));
       /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
       margin-inline: calc(var(--et-slider-thumb-size) / 2);
+      container-type: inline-size;
       cursor: pointer;
     }
 
@@ -131,7 +132,8 @@
       /* not `:focus-visible` alone: the track focuses the thumb programmatically on a press, and
          Chrome matches `:focus-visible` for that - the ring then stayed on after every click */
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
 
@@ -168,7 +170,13 @@
       left: 50%;
       /* clear the thumb (which overhangs the tick by half the size difference), then add the gap */
       inset-block-start: calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-mark-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       font-size: var(--et-slider-mark-label-font-size);
       line-height: 1.2;
@@ -189,7 +197,13 @@
       /* physical centering is direction-safe — 50% of the thumb is 50% in both directions */
       left: 50%;
       bottom: calc(100% + 8px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-thumb-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       padding: 2px 8px;
       border-radius: 6px;
@@ -203,6 +217,21 @@
       user-select: none;
     }
 
+    .et-range-slider-mark-label:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-mark-position, 0)) * 1cqi);
+    }
+
+    .et-range-slider-thumb-value:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-thumb-position, 0)) * 1cqi);
+    }
+
+    &:where([data-thumb-value]) .et-range-slider-interaction {
+      margin-block-start: calc(
+        var(--et-slider-thumb-value-font-size) * 1.4 + 14px -
+          (max(44px, var(--et-slider-thumb-size)) - var(--et-slider-thumb-size)) / 2
+      );
+    }
+
     /* an unresolved bulk-edit range parks both thumbs at the track start — the dashed accent rail
        (not a muted/grey one, which would read as disabled) makes that read as "provisional /
        values differ", not "minimum". The fill is already zero-width while mixed. Consumers
@@ -261,11 +290,12 @@
       .et-range-slider-interaction {
         flex-direction: column;
         align-items: center;
-        inline-size: max(28px, var(--et-slider-thumb-size));
+        inline-size: max(44px, var(--et-slider-thumb-size));
         block-size: var(--et-slider-vertical-size);
         margin-inline: 0;
         /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
         margin-block: calc(var(--et-slider-thumb-size) / 2);
+        container-type: normal;
       }
 
       .et-range-slider-rail {
@@ -296,7 +326,17 @@
         bottom: auto;
         inset-block-start: 50%;
         inset-inline-start: calc(100% + 8px);
-        translate: 0 -50%;
+        translate: 0
+          clamp(
+            -1 *
+              (
+                (100 - var(--_et-slider-thumb-position, 0)) * var(--et-slider-vertical-size) / 100 +
+                  var(--et-slider-thumb-size) / 2
+              ),
+            -50%,
+            var(--_et-slider-thumb-position, 0) * var(--et-slider-vertical-size) / 100 + var(--et-slider-thumb-size) /
+              2 - 100%
+          );
       }
 
       .et-range-slider-mark {
@@ -315,6 +355,58 @@
         translate: 0 -50%;
       }
 
+      &:where([data-mark-labels]) {
+        .et-range-slider-interaction {
+          display: grid;
+          grid-template-columns: auto max(44px, var(--et-slider-thumb-size));
+          align-self: flex-start;
+          inline-size: auto;
+        }
+
+        .et-range-slider-rail {
+          grid-area: 1 / 2;
+          justify-self: center;
+        }
+
+        .et-range-slider-fill,
+        .et-range-slider-thumb {
+          grid-area: 1 / 2;
+        }
+
+        .et-range-slider-marks,
+        .et-range-slider-mark {
+          display: contents;
+        }
+
+        .et-range-slider-mark::before {
+          content: '';
+          position: absolute;
+          grid-area: 1 / 2;
+          left: 50%;
+          bottom: calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);
+          translate: -50% 0;
+          inline-size: var(--et-slider-mark-size);
+          block-size: var(--et-slider-mark-size);
+          border-radius: 50%;
+          background: inherit;
+        }
+
+        .et-range-slider-mark-label {
+          position: relative;
+          grid-area: 1 / 1;
+          justify-self: end;
+          align-self: end;
+          inset: auto;
+          bottom: clamp(
+            var(--et-slider-thumb-size) / -2,
+            var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-label-font-size) * 0.6,
+            100% + var(--et-slider-thumb-size) / 2 - var(--et-slider-mark-label-font-size) * 1.2
+          );
+          translate: none;
+          margin-inline-end: calc(var(--et-slider-thumb-size) / 2 + 6px - max(44px, var(--et-slider-thumb-size)) / 2);
+        }
+      }
+
       &[data-mixed] {
         .et-range-slider-rail {
           background: repeating-linear-gradient(

package/src/lib/forms/slider/slider.component.css

@@ -93,6 +93,7 @@
       block-size: max(44px, var(--et-slider-thumb-size));
       /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
       margin-inline: calc(var(--et-slider-thumb-size) / 2);
+      container-type: inline-size;
       cursor: pointer;
     }
 
@@ -130,7 +131,8 @@
       /* not `:focus-visible` alone: the track focuses the thumb programmatically on a press, and
          Chrome matches `:focus-visible` for that - the ring then stayed on after every click */
       &:focus-visible:not([data-pointer-focused]) {
-        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline: 2px solid
+          light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
         outline-offset: 2px;
       }
     }
@@ -162,7 +164,13 @@
       left: 50%;
       /* clear the thumb (which overhangs the tick by half the size difference), then add the gap */
       inset-block-start: calc(100% + (var(--et-slider-thumb-size) - var(--et-slider-mark-size)) / 2 + 6px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-mark-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       font-size: var(--et-slider-mark-label-font-size);
       line-height: 1.2;
@@ -183,7 +191,13 @@
       /* physical centering is direction-safe — 50% of the thumb is 50% in both directions */
       left: 50%;
       bottom: calc(100% + 8px);
-      translate: -50% 0;
+      --_et-slider-edge-x: calc(var(--_et-slider-thumb-position, 0) * 1cqi);
+      translate: clamp(
+          -1 * (var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2),
+          -50%,
+          100cqi - var(--_et-slider-edge-x) + var(--et-slider-thumb-size) / 2 - 100%
+        )
+        0;
       inline-size: max-content;
       padding: 2px 8px;
       border-radius: 6px;
@@ -197,6 +211,21 @@
       user-select: none;
     }
 
+    .et-slider-mark-label:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-mark-position, 0)) * 1cqi);
+    }
+
+    .et-slider-thumb-value:dir(rtl) {
+      --_et-slider-edge-x: calc((100 - var(--_et-slider-thumb-position, 0)) * 1cqi);
+    }
+
+    &:where([data-thumb-value]) .et-slider-interaction {
+      margin-block-start: calc(
+        var(--et-slider-thumb-value-font-size) * 1.4 + 14px -
+          (max(44px, var(--et-slider-thumb-size)) - var(--et-slider-thumb-size)) / 2
+      );
+    }
+
     /* an unresolved bulk-edit value parks the thumb at the track start — the dashed accent rail
        (not a muted/grey one, which would read as disabled) makes that read as "provisional /
        values differ", not "minimum". The fill is already zero-width while mixed. Consumers
@@ -260,6 +289,7 @@
         margin-inline: 0;
         /* thumbs overhang the rail by half their size at the extremes — keep them inside the box */
         margin-block: calc(var(--et-slider-thumb-size) / 2);
+        container-type: normal;
       }
 
       .et-slider-rail {
@@ -290,7 +320,17 @@
         bottom: auto;
         inset-block-start: 50%;
         inset-inline-start: calc(100% + 8px);
-        translate: 0 -50%;
+        translate: 0
+          clamp(
+            -1 *
+              (
+                (100 - var(--_et-slider-thumb-position, 0)) * var(--et-slider-vertical-size) / 100 +
+                  var(--et-slider-thumb-size) / 2
+              ),
+            -50%,
+            var(--_et-slider-thumb-position, 0) * var(--et-slider-vertical-size) / 100 + var(--et-slider-thumb-size) /
+              2 - 100%
+          );
       }
 
       .et-slider-mark {
@@ -309,6 +349,58 @@
         translate: 0 -50%;
       }
 
+      &:where([data-mark-labels]) {
+        .et-slider-interaction {
+          display: grid;
+          grid-template-columns: auto max(44px, var(--et-slider-thumb-size));
+          align-self: flex-start;
+          inline-size: auto;
+        }
+
+        .et-slider-rail {
+          grid-area: 1 / 2;
+          justify-self: center;
+        }
+
+        .et-slider-fill,
+        .et-slider-thumb {
+          grid-area: 1 / 2;
+        }
+
+        .et-slider-marks,
+        .et-slider-mark {
+          display: contents;
+        }
+
+        .et-slider-mark::before {
+          content: '';
+          position: absolute;
+          grid-area: 1 / 2;
+          left: 50%;
+          bottom: calc(var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-size) / 2);
+          translate: -50% 0;
+          inline-size: var(--et-slider-mark-size);
+          block-size: var(--et-slider-mark-size);
+          border-radius: 50%;
+          background: inherit;
+        }
+
+        .et-slider-mark-label {
+          position: relative;
+          grid-area: 1 / 1;
+          justify-self: end;
+          align-self: end;
+          inset: auto;
+          bottom: clamp(
+            var(--et-slider-thumb-size) / -2,
+            var(--_et-slider-mark-position, 0) * 1% - var(--et-slider-mark-label-font-size) * 0.6,
+            100% + var(--et-slider-thumb-size) / 2 - var(--et-slider-mark-label-font-size) * 1.2
+          );
+          translate: none;
+          margin-inline-end: calc(var(--et-slider-thumb-size) / 2 + 6px - max(44px, var(--et-slider-thumb-size)) / 2);
+        }
+      }
+
       &[data-mixed] {
         .et-slider-rail {
           background: repeating-linear-gradient(

package/src/lib/forms/switch/switch.component.css

@@ -59,6 +59,7 @@
       height: var(--et-switch-track-height);
       border-radius: calc(var(--et-switch-track-height) / 2);
       background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 22%, transparent);
+      box-shadow: inset 0 0 0 1px var(--et-surface-interaction-solid);
     }
 
     /* hover-capable pointers only — on touch, :hover sticks after a tap */
@@ -69,6 +70,7 @@
         &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
         .et-switch-track {
         background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 30%, transparent);
+        box-shadow: inset 0 0 0 1px var(--et-surface-interaction-hover-solid);
       }
     }
 
@@ -78,8 +80,45 @@
       background-color: color-mix(in srgb, var(--et-theme-color-primary-solid) 40%, transparent);
     }
 
+    @media (hover: hover) {
+      :where(et-choice-field[data-error])
+        &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+        .et-switch-track,
+      :where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover))
+        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+        .et-switch-track {
+        background-color: color-mix(
+          in srgb,
+          light-dark(
+              rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+              rgb(
+                var(
+                  --et-color-primary-ink-active,
+                  var(
+                    --et-color-primary-ink-focus,
+                    var(
+                      --et-color-primary-ink-hover,
+                      var(
+                        --et-color-primary-ink,
+                        var(
+                          --et-color-primary-active,
+                          var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                        )
+                      )
+                    )
+                  )
+                )
+              )
+            )
+            40%,
+          transparent
+        );
+      }
+    }
+
     &:focus-visible .et-switch-track {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 2px;
     }
 
@@ -117,6 +156,7 @@
     &[aria-checked='true'] {
       .et-switch-track {
         background-color: var(--et-theme-color-primary-solid, currentColor);
+        box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
       }
 
       .et-switch-thumb {
@@ -149,25 +189,28 @@
     &[data-indeterminate] {
       .et-switch-track {
         background-color: transparent;
+        box-shadow: none;
 
         &::before {
           content: '';
           position: absolute;
           inset: 0;
           border-radius: inherit;
-          border: 1px dashed var(--et-theme-color-primary-solid, currentColor);
+          border: 1px dashed var(--et-theme-color-ink-solid, currentColor);
         }
       }
 
       .et-switch-thumb {
         left: calc((var(--et-switch-track-width) - (var(--et-switch-thumb-size) - 4px)) / 2);
-        background-color: var(--et-theme-color-primary-solid, currentColor);
+        background-color: var(--et-theme-color-ink-solid, currentColor);
       }
     }
 
     &[data-can-animate] {
       .et-switch-track {
-        transition: background-color var(--et-switch-transition-duration) ease;
+        transition:
+          background-color var(--et-switch-transition-duration) ease,
+          box-shadow var(--et-switch-transition-duration) ease;
       }
 
       .et-switch-thumb {

package/src/lib/forms/tag-input/tag-input.component.css

@@ -35,7 +35,7 @@
       caret-color: var(--et-theme-color-primary-solid, currentColor);
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {
@@ -44,7 +44,7 @@
     }
 
     /* an unresolved bulk-edit value reads as provisional — the mixedLabel placeholder sits
-       between committed text (full strength) and the regular placeholder (46%). Consumers
+       between committed text (full strength) and the regular placeholder (60%). Consumers
        restyle via [data-mixed]. */
     &[data-mixed] .et-tag-input-field::placeholder {
       font-style: italic;

package/src/lib/forms/textarea/textarea-autosize-styles.component.css

@@ -4,9 +4,8 @@
      run at once - the directive skips measuring exactly when this `@supports` condition holds.
      Delete the fallback once Firefox ESR and iOS Safari 26 both support `field-sizing`.
 
-     The row bounds hold only while the native textarea has no block padding: it is a border box,
-     so any padding on it eats into the clamp, and CSS cannot add the padding back. Pad the form
-     field's frame instead. */
+     The row bounds count only the content: the native textarea is a border box, so a rule that
+     pads it must add its block padding to both bounds, as form-field-textarea-styles does. */
   @supports (field-sizing: content) {
     textarea[data-et-textarea-autosize] {
       field-sizing: content;

package/src/lib/forms/textarea/textarea.component.css

@@ -18,7 +18,11 @@
       min-width: 0;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
+      }
+
+      &[rows='1']::placeholder {
+        white-space: pre;
       }
 
       &[data-resize='none'] {
@@ -27,11 +31,12 @@
 
       &[data-resize='vertical'] {
         resize: vertical;
+        min-block-size: 1lh;
       }
     }
 
     /* an unresolved bulk-edit value reads as provisional — the mixed label shows as the
-       placeholder, between a committed value (full strength) and a real placeholder (46%) */
+       placeholder, between a committed value (full strength) and a real placeholder (60%) */
     &[data-mixed] .et-textarea-native::placeholder {
       font-style: italic;
       color: color-mix(in srgb, currentColor 72%, transparent);

package/src/lib/grid/grid-item-toolbar.component.css

@@ -0,0 +1,10 @@
+@layer components {
+  .et-grid-item-toolbar {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--et-grid-item-toolbar-gap, 4px);
+    padding: var(--et-grid-item-toolbar-padding, 4px);
+    border-radius: var(--et-grid-item-toolbar-radius, 8px);
+    background: var(--et-grid-item-toolbar-background, transparent);
+  }
+}

package/src/lib/grid/grid-item.component.css

@@ -23,7 +23,8 @@
     background: var(--et-grid-item-bg, var(--et-surface-background-solid));
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
 
@@ -152,6 +153,10 @@
     min-height: 0;
   }
 
+  .et-grid-item:has(> .et-grid-item__actions:not(:empty)) > .et-grid-item__content {
+    padding-inline-end: var(--et-grid-item-actions-reserve, calc(2.4rem + 12px));
+  }
+
   .et-grid:not(.et-grid--readonly) .et-grid-item__content {
     cursor: grab;
     user-select: none;

package/src/lib/loader/brand-loader/brand-loader.component.css

@@ -109,7 +109,7 @@
 
   .et-brand-loader__outline {
     fill: none;
-    stroke: var(--_et-brand-loader-accent);
+    stroke: var(--et-brand-loader-accent, var(--et-theme-color-ink-solid, #00ffa1));
     stroke-width: 1.4;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -121,6 +121,9 @@
 
   .et-brand-loader__fill {
     fill: var(--_et-brand-loader-accent);
+    stroke: var(--et-theme-color-ink-solid);
+    stroke-width: 0.7;
+    stroke-linejoin: round;
     animation: et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite;
   }
 

package/src/lib/loader/progress-bar/progress-bar.component.css

@@ -172,6 +172,6 @@
   }
 
   .et-progress-bar:where(.et-progress-bar--themed) {
-    --et-progress-bar-indicator-color: var(--et-theme-color-primary-solid, currentColor);
+    --et-progress-bar-indicator-color: var(--et-theme-color-ink-solid);
   }
 }

package/src/lib/loader/spinner/spinner-styles.component.css

@@ -226,6 +226,6 @@
   /* `--et-spinner-color` is declared via `@property`, whose `initial-value` cannot contain `var()`, so the theme
      colour can only be applied by a rule - and only when `color` is set, hence the class gate. */
   .et-spinner:where(.et-spinner--themed) {
-    --et-spinner-color: var(--et-theme-color-primary-solid, currentColor);
+    --et-spinner-color: var(--et-theme-color-ink-solid);
   }
 }

package/src/lib/match/match-card.component.css

@@ -267,7 +267,7 @@
     flex: none;
     inline-size: 6px;
     block-size: 6px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     border-radius: 50%;
     animation: et-match-card-live-pulse 2s ease-in-out infinite;
   }
@@ -395,9 +395,15 @@
   .et-match-card:where([data-winner='home']) .et-match-card-side:where([data-side='home']),
   .et-match-card:where([data-winner='away']) .et-match-card-side:where([data-side='away']) {
     --_et-match-card-side-color: var(--et-surface-color-solid, currentColor);
-    --_et-match-card-side-marker-color: var(--et-theme-color-primary-solid, currentColor);
+    --_et-match-card-side-marker-color: light-dark(
+      var(--et-theme-color-ink-solid),
+      var(--et-theme-color-primary-solid)
+    );
     --_et-match-card-side-marker-display: block;
-    font-weight: 600;
+
+    .et-match-participant-name {
+      font-weight: 600;
+    }
   }
 
   .et-match-card-games {

package/src/lib/match/match-score.component.css

@@ -6,11 +6,14 @@
     flex: none;
     place-items: center end;
     min-inline-size: 1ch;
-    overflow: hidden;
     font-variant-numeric: tabular-nums;
     line-height: 1.2;
   }
 
+  .et-match-score:has(.et-match-score-digit:is([data-state='in'], [data-state='out']), .et-match-score-flash) {
+    overflow: hidden;
+  }
+
   /* Both values occupy the same cell — that is what lets one leave while the other arrives. */
   .et-match-score-digit {
     grid-area: 1 / 1;

package/src/lib/menu/menu-selection-item.component.css

@@ -10,7 +10,7 @@
       flex: none;
       inline-size: var(--et-menu-item-icon-size, 16px);
       block-size: var(--et-menu-item-icon-size, 16px);
-      color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &.et-menu-radio-item .et-menu-item-check::before {

package/src/lib/menu/menu.component.css

@@ -245,6 +245,11 @@
         color 120ms ease,
         opacity 120ms ease;
 
+      &[data-active]:focus-visible {
+        outline: 2px solid var(--et-theme-color-ink-solid);
+        outline-offset: -2px;
+      }
+
       /* the roving focus is applied programmatically on mouse-open too, so :focus-visible (instead
        of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
        interaction; a trigger whose submenu is open stays highlighted the whole time, and an item

package/src/lib/overlay/overlay-container.component.css

@@ -164,4 +164,8 @@
   .et-force-invisible {
     visibility: hidden !important;
   }
+
+  .et-overlay--dialog .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/pagination/pagination.component.css

@@ -168,4 +168,8 @@
     white-space: nowrap;
     color: var(--et-surface-color-muted-solid, CanvasText);
   }
+
+  .et-pagination-host .et-pagination-button:where([aria-current='page']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/progress-steps/progress-step.component.css

@@ -47,7 +47,7 @@
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
         :last-child
       )::after {
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: var(--et-theme-color-ink-solid);
     }
 
     .et-progress-step-marker {
@@ -83,13 +83,13 @@
     }
 
     &[data-state='current'] .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error'])
       .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       background: var(--et-theme-color-primary-solid, currentColor);
       color: var(--et-theme-color-on-primary-solid, white);
     }
@@ -175,7 +175,7 @@
       @media (hover: hover) {
         &:hover {
           .et-progress-step-marker {
-            border-color: var(--et-theme-color-primary-solid, currentColor);
+            border-color: var(--et-theme-color-ink-solid);
           }
 
           .et-progress-step-label {