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

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

@@ -255,6 +255,32 @@
   et-dropzone[data-error] {
     .et-dropzone-trigger {
       border-color: var(--et-theme-color-primary-solid, currentColor);
+
+      @media (hover: hover) {
+        &:hover:not(:disabled, [aria-disabled='true']) {
+          border-color: 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)))
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          );
+        }
+      }
     }
   }
 

package/src/lib/forms/form-field/form-field-control-suffix-styles.component.css

@@ -70,7 +70,8 @@
     }
 
     &:focus-visible::before {
-      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: 1px;
     }
 
@@ -125,7 +126,8 @@
     }
 
     &: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;
       border-radius: 4px;
     }

package/src/lib/forms/form-field/form-field-text-shell-styles.component.css

@@ -47,6 +47,63 @@
        injected by the control, so a control instantiated before any form-field would inject it
        *before* the base sheet and lose every source-order tie against the base frame/label rules. */
     &[data-text-shell] {
+      --_et-form-field-frame-border: var(--et-surface-interaction-solid, currentColor);
+      --_et-form-field-frame-border-hover: color-mix(
+        in srgb,
+        var(--et-surface-interaction-solid, currentColor) 75%,
+        var(--et-surface-color-solid, currentColor)
+      );
+      --_et-form-field-frame-focus: var(--et-surface-color-solid, currentColor);
+      --_et-form-field-label-color: var(--et-surface-color-muted-solid, currentColor);
+      --_et-form-field-label-color-active: var(--et-surface-color-solid, currentColor);
+
+      &[data-error] {
+        --_et-form-field-frame-border: var(--et-theme-color-primary-solid);
+        --_et-form-field-frame-border-hover: 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)))
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
+        --_et-form-field-frame-focus: var(--et-theme-color-ink-solid);
+        --_et-form-field-label-color: var(--et-theme-color-ink-solid);
+        --_et-form-field-label-color-active: var(--et-theme-color-ink-solid);
+      }
+
+      &:not(:has(> .et-form-field-shell > .et-form-field-control-frame > .et-form-field-prefix svg)) {
+        --_et-form-field-prefix-gap: 4px;
+      }
+
+      .et-form-field-control-frame {
+        border-color: var(--_et-form-field-frame-border);
+      }
+
+      .et-form-field-prefix {
+        margin-inline-end: calc(
+          var(--_et-form-field-prefix-gap, var(--et-form-field-control-affix-gap)) -
+            var(--et-form-field-control-affix-gap)
+        );
+      }
+
+      .et-form-field-affix {
+        color: var(--_et-form-field-label-color);
+      }
+
       &[data-label-mode='static'] {
         &[data-has-label]:not(:has(et-label[hidden])) .et-form-field-shell {
           padding-block-start: calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap));
@@ -178,6 +235,7 @@
       }
 
       .et-form-field-label-area {
+        color: var(--_et-form-field-label-color);
         max-inline-size: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -194,12 +252,12 @@
             :has(.et-form-field-label-area:hover)
           ) {
           .et-form-field-control-frame {
-            border-color: var(--et-surface-interaction-hover-solid, currentColor);
+            border-color: var(--_et-form-field-frame-border-hover);
           }
 
           .et-form-field-label-area,
           .et-form-field-affix {
-            color: var(--et-surface-color-solid, currentColor);
+            color: var(--_et-form-field-label-color-active);
             opacity: 1;
           }
         }
@@ -208,7 +266,8 @@
       &:where(:has(:focus-visible):not([data-readonly])) .et-form-field-control-frame,
       &:where([data-expanded]:not([data-readonly])) .et-form-field-control-frame,
       &:where([data-focused]:not([data-readonly])) .et-form-field-control-frame {
-        border-color: var(--et-theme-color-primary-solid);
+        border-color: var(--_et-form-field-frame-focus);
+        box-shadow: inset 0 0 0 var(--et-form-field-control-border-width) var(--_et-form-field-frame-focus);
       }
 
       &:where(:has(:focus-visible):not([data-readonly])) .et-form-field-label-area,
@@ -217,7 +276,7 @@
       &:where([data-expanded]:not([data-readonly])) .et-form-field-affix,
       &:where([data-focused]:not([data-readonly])) .et-form-field-label-area,
       &:where([data-focused]:not([data-readonly])) .et-form-field-affix {
-        color: var(--et-surface-color-solid, currentColor);
+        color: var(--_et-form-field-label-color-active);
         opacity: 1;
       }
 
@@ -227,9 +286,20 @@
         }
 
         .et-form-field-control-frame {
+          border-style: dashed;
           cursor: default;
         }
 
+        &:is([data-focused], :has(:focus-visible)) .et-form-field-control-frame {
+          border-color: var(--_et-form-field-frame-focus);
+        }
+
+        &:not([data-appearance='underline']):is([data-focused], :has(:focus-visible)) .et-form-field-control-frame {
+          border-color: transparent;
+          outline: calc(2 * var(--et-form-field-control-border-width)) dashed var(--_et-form-field-frame-focus);
+          outline-offset: calc(-2 * var(--et-form-field-control-border-width));
+        }
+
         .et-form-field-label-area {
           cursor: default;
         }
@@ -242,19 +312,6 @@
         }
       }
 
-      &[data-error] .et-form-field-control-frame {
-        border-color: var(--et-theme-color-primary-solid);
-      }
-
-      &[data-error] .et-form-field-label-area {
-        color: var(--et-theme-color-ink-solid);
-      }
-
-      &[data-error] .et-form-field-affix {
-        color: var(--et-theme-color-ink-solid);
-        opacity: 1;
-      }
-
       /* Driven by the registered control's disabled state (data-disabled), NOT :has(:disabled) —
          a composite control like the rich text editor legitimately disables individual toolbar
          buttons while fully enabled, and :has(:disabled) would dim (and pointer-events-kill) the

package/src/lib/forms/form-field/form-field-textarea-styles.component.css

@@ -4,6 +4,68 @@
       align-items: stretch;
     }
 
+    &[data-appearance='box']:not([data-label-mode='floating-inside']) {
+      --_et-form-field-textarea-font-size: var(--et-form-field-control-font-size);
+      --_et-form-field-textarea-padding-block: max(
+        var(--et-form-field-control-padding-block),
+        (
+            var(--et-form-field-control-min-height) - var(--_et-form-field-textarea-font-size) *
+              var(--et-form-field-control-line-height) - 2 * var(--et-form-field-control-border-width)
+          ) /
+          2
+      );
+
+      .et-form-field-control-frame {
+        padding-block: 0;
+      }
+
+      .et-form-field-affix {
+        padding-block: var(--_et-form-field-textarea-padding-block);
+      }
+
+      .et-textarea-native {
+        box-sizing: border-box;
+        padding-block: var(--_et-form-field-textarea-padding-block);
+      }
+
+      .et-form-field-control-frame:not(:has(> .et-form-field-suffix:not(:empty))) {
+        padding-inline-end: 0;
+
+        .et-textarea-native {
+          padding-inline-end: var(--et-form-field-control-padding-inline);
+        }
+      }
+
+      :where(.et-textarea-native[data-resize='vertical']) {
+        min-block-size: calc(1lh + 2 * var(--_et-form-field-textarea-padding-block));
+      }
+
+      textarea[data-et-textarea-autosize] {
+        min-block-size: calc(var(--et-textarea-min-rows, 1) * 1lh + 2 * var(--_et-form-field-textarea-padding-block));
+        max-block-size: calc(
+          var(--et-textarea-max-block-size, 1000lh) + 2 * var(--_et-form-field-textarea-padding-block)
+        );
+      }
+
+      &[data-label-mode='floating-outside'] .et-form-field-label-area--floating {
+        margin-block-start: var(--_et-form-field-textarea-padding-block);
+      }
+
+      &[data-label-mode='inline'] .et-form-field-label-area--inline {
+        margin-block: 0;
+        padding-block-start: calc(
+          var(--_et-form-field-textarea-padding-block) +
+            (var(--_et-form-field-textarea-font-size) - var(--et-form-field-control-font-size)) *
+            var(--et-form-field-control-line-height) / 2
+        );
+      }
+
+      /* Mirrors the 16px floor form-field.component.css puts on a coarse-pointer textarea. */
+      @media (pointer: coarse) {
+        --_et-form-field-textarea-font-size: max(var(--et-form-field-control-font-size), 16px);
+      }
+    }
+
     .et-form-field-control-area,
     .et-form-field-control-slot {
       align-items: stretch;

package/src/lib/forms/form-field/form-field.component.css

@@ -305,6 +305,12 @@
       );
     }
 
+    > et-description {
+      padding-inline-start: calc(
+        var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width)
+      );
+    }
+
     .et-form-field-support[data-can-animate] {
       transition: block-size var(--et-form-field-support-duration) ease;
 

package/src/lib/forms/form-field/headless/label.directive.css

@@ -14,7 +14,7 @@
 
   .et-label-required-marker {
     display: inline-block;
-    color: var(--et-theme-color-primary-solid);
+    color: var(--et-theme-color-ink-solid);
     margin-inline-start: 0.45ch;
     transition: color 150ms ease;
   }

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

@@ -23,7 +23,11 @@
       }
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
+      }
+
+      &::-webkit-search-cancel-button {
+        appearance: none;
       }
 
       &[data-text-align='start'] {
@@ -40,7 +44,7 @@
     }
 
     /* 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-input-native::placeholder {
       font-style: italic;
       color: color-mix(in srgb, currentColor 72%, transparent);

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

@@ -102,7 +102,7 @@
       }
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &[data-text-align='start'] {
@@ -119,7 +119,7 @@
     }
 
     /* 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-number-input-native::placeholder {
       font-style: italic;
       color: color-mix(in srgb, currentColor 72%, transparent);

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

@@ -32,12 +32,12 @@
       }
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
     }
 
     /* 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-password-input-native::placeholder {
       font-style: italic;
       color: color-mix(in srgb, currentColor 72%, transparent);
@@ -86,7 +86,8 @@
     }
 
     &: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: 1px;
     }
 

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

@@ -61,6 +61,8 @@
     display: inline-flex;
     flex-direction: column;
     gap: 6px;
+    max-inline-size: 100%;
+    min-inline-size: 0;
     color: var(--et-surface-color-solid, currentColor);
 
     --et-form-support-duration: var(--et-otp-input-support-duration);
@@ -78,9 +80,14 @@
       user-select: none;
     }
 
+    > et-label .et-label-required-marker {
+      color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    }
+
     .et-otp-input-field {
       position: relative;
       inline-size: fit-content;
+      max-inline-size: 100%;
     }
 
     .et-otp-input-segments {
@@ -89,11 +96,13 @@
     }
 
     .et-otp-input-segment {
+      box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: center;
       inline-size: var(--et-otp-input-segment-size);
-      block-size: var(--et-otp-input-segment-size);
+      min-inline-size: 0;
+      aspect-ratio: 1;
       border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
       border-radius: var(--et-otp-input-segment-radius);
       font-size: calc(var(--et-otp-input-segment-size) * 0.45);
@@ -102,8 +111,8 @@
       user-select: none;
 
       &[data-caret] {
-        border-color: var(--et-theme-color-primary-solid, currentColor);
-        outline: 1px solid var(--et-theme-color-primary-solid, currentColor);
+        border-color: var(--et-theme-color-ink-solid, currentColor);
+        outline: 1px solid var(--et-theme-color-ink-solid, currentColor);
         outline-offset: -1px;
       }
 
@@ -116,7 +125,7 @@
         inline-size: 2px;
         block-size: 1.1em;
         border-radius: 1px;
-        background: var(--et-theme-color-primary-solid, currentColor);
+        background: var(--et-theme-color-ink-solid, currentColor);
         animation: et-otp-input-caret-blink 1.1s steps(2, jump-none) infinite;
       }
     }
@@ -156,6 +165,16 @@
       border-color: var(--et-theme-color-primary-solid, currentColor);
     }
 
+    @media (hover: hover) {
+      &:not(:has(.et-otp-input-native:read-only)):hover .et-otp-input-segment:not([data-caret]) {
+        border-color: var(--et-surface-interaction-hover-solid);
+      }
+
+      &[data-error]:not(:has(.et-otp-input-native:read-only)):hover .et-otp-input-segment:not([data-caret]) {
+        border-color: var(--et-theme-color-ink-solid);
+      }
+    }
+
     &:has(.et-otp-input-native:disabled) {
       opacity: 0.4;
 

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

@@ -27,7 +27,8 @@
       }
 
       &: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;
         border-radius: 4px;
       }
@@ -61,7 +62,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {
@@ -70,7 +71,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-phone-input-field::placeholder {
       font-style: italic;

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

@@ -64,7 +64,8 @@
     }
 
     &:focus-visible .et-rating-icons {
-      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;
       border-radius: 4px;
     }

package/src/lib/forms/rich-text-editor/rich-text-editor.component.css

@@ -167,7 +167,7 @@
 
       &:empty::before {
         content: attr(data-placeholder);
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
         pointer-events: none;
       }
     }

package/src/lib/forms/select/select-option-styles.component.css

@@ -61,7 +61,8 @@
       opacity 120ms ease;
 
     &:where([data-active][data-active-source='keyboard']) {
-      background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent);
+      outline: 2px solid var(--et-theme-color-ink-solid, currentColor);
+      outline-offset: -2px;
     }
 
     @media (hover: hover) {
@@ -90,7 +91,7 @@
       flex: none;
       inline-size: var(--et-select-option-check-size);
       block-size: var(--et-select-option-check-size);
-      color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
       /* hidden via opacity, NOT visibility — an explicit `visibility: visible` would punch
          through the pane's positioning phase (`visibility: hidden`) and paint the check
          before the panel itself becomes visible */

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