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

package/src/lib/forms/selection-card-styles.component.css

@@ -44,7 +44,7 @@
     padding: var(--et-selection-card-padding);
     border-radius: var(--et-selection-card-border-radius);
     background-color: var(--et-surface-background-solid, transparent);
-    border: var(--et-selection-card-border-width) solid var(--et-surface-border-solid, currentColor);
+    border: var(--et-selection-card-border-width) solid var(--et-surface-interaction-solid, currentColor);
 
     /* Every state guard sits in `:where()` so source order decides; the checked rule below relies on it. */
     @media (hover: hover) {
@@ -65,7 +65,8 @@
     /* Each host resets its own control's focus ring, so the card shows one ring. */
     &:where(:focus-visible, :has(:focus-visible)) {
       border-color: var(--et-theme-color-primary-solid, currentColor);
-      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;
     }
 

package/src/lib/forms/selection-list/checkbox-group/checkbox-group-select-all.component.css

@@ -10,11 +10,12 @@
   }
 
   .et-checkbox-group-select-all-box {
+    box-sizing: border-box;
     display: grid;
     place-items: center;
     inline-size: var(--et-checkbox-option-size, 20px);
     block-size: var(--et-checkbox-option-size, 20px);
-    border: var(--et-checkbox-option-border-width, 2px) solid var(--et-surface-border-solid, currentColor);
+    border: var(--et-checkbox-option-border-width, 2px) solid var(--et-surface-interaction-solid, currentColor);
     border-radius: var(--et-checkbox-option-border-radius, 4px);
     transition:
       border-color var(--et-checkbox-option-transition-duration, 150ms) ease,
@@ -68,7 +69,8 @@
   }
 
   .et-checkbox-group-select-all:focus-visible .et-checkbox-group-select-all-box {
-    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;
   }
 

package/src/lib/forms/selection-list/checkbox-group/checkbox-option.component.css

@@ -49,12 +49,13 @@
     user-select: none;
 
     .et-checkbox-option-box {
+      box-sizing: border-box;
       flex-shrink: 0;
       inline-size: var(--et-checkbox-option-size);
       block-size: var(--et-checkbox-option-size);
       border-radius: var(--et-checkbox-option-border-radius);
       border: var(--et-checkbox-option-border-width) solid
-        var(--_et-control-border, var(--et-surface-border-solid, currentColor));
+        var(--_et-control-border, var(--et-surface-interaction-solid, currentColor));
       background-color: transparent;
       display: grid;
       place-items: center;
@@ -94,7 +95,8 @@
 
     &:focus-visible .et-checkbox-option-box {
       border-color: var(--et-theme-color-primary-solid);
-      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;
     }
 

package/src/lib/forms/selection-list/radio-group/radio.component.css

@@ -49,11 +49,13 @@
     user-select: none;
 
     .et-radio-circle {
+      box-sizing: border-box;
       flex-shrink: 0;
       inline-size: var(--et-radio-size);
       block-size: var(--et-radio-size);
       border-radius: 50%;
-      border: var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));
+      border: var(--et-radio-border-width) solid
+        var(--_et-control-border, var(--et-surface-interaction-solid, currentColor));
       background-color: transparent;
       display: grid;
       place-items: center;
@@ -90,7 +92,8 @@
 
     &:focus-visible .et-radio-circle {
       border-color: var(--et-theme-color-primary-solid);
-      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;
     }
 

package/src/lib/forms/selection-list/segmented-button-group/segmented-button.component.css

@@ -114,7 +114,8 @@
     }
 
     &:focus-visible {
-      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: var(--et-segmented-button-focus-ring-offset, 1px);
     }
 

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

@@ -58,28 +58,54 @@
       width: var(--et-switch-track-width);
       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);
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 38%, transparent);
+    }
+
+    :where(et-choice-field[data-error])
+      &:not([aria-disabled='true']):not([aria-checked='true']):not([data-indeterminate])
+      .et-switch-track {
+      background-color: color-mix(in srgb, var(--et-theme-color-primary-solid) 40%, transparent);
     }
 
-    /* hover-capable pointers only — on touch, :hover sticks after a tap */
     @media (hover: hover) {
-      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
+      :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:has(.et-choice-field-label-area:hover))
+      :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, var(--et-surface-interaction-solid, currentColor) 30%, transparent);
+        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
+        );
       }
     }
 
-    :where(et-choice-field[data-error])
-      &:not([aria-disabled='true']):not([aria-checked='true']):not([data-indeterminate])
-      .et-switch-track {
-      background-color: color-mix(in srgb, var(--et-theme-color-primary-solid) 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 +143,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 +176,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/kbd/kbd.component.css

@@ -52,7 +52,7 @@
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     border-radius: var(--et-kbd-key-border-radius);
     background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 8%, transparent);
-    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    color: var(--et-kbd-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55)));
     font: inherit;
     font-size: var(--et-kbd-font-size);
     font-weight: var(--et-kbd-font-weight);

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);
   }
 }