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

package/src/lib/floating-action/floating-action-styles.component.css

@@ -46,10 +46,37 @@
          reader cannot see. */
       visibility: hidden;
     }
+
+    .et-floating-action-trigger:where(
+        [data-floating-action-state='floating'],
+        [data-floating-action-state='hidden']
+      )::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      opacity: 0;
+      box-shadow:
+        0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.2),
+        0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.12);
+    }
+
+    .et-floating-action-trigger:where([data-floating-action-state='floating']) {
+      --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+    }
+
+    .et-floating-action-trigger:where([data-floating-action-state='floating'])::before {
+      opacity: 1;
+    }
   }
 
   @media (prefers-reduced-motion: no-preference) {
     .et-floating-action {
+      .et-floating-action-trigger::before {
+        transition: opacity var(--et-floating-action-duration) var(--ease-3, ease-out);
+      }
+
       /* Scaling *in* is a keyframe rather than a transition: the first time the trigger detaches there is no
          previous scale to animate from. */
       .et-floating-action-trigger:where([data-floating-action-state='floating']) {

package/src/lib/focus-ring/focus-ring-styles.component.css

@@ -2,7 +2,10 @@
   .et-focus-ring {
     --_et-focus-ring-offset: 3px;
     --_et-focus-ring-width: 2px;
-    --_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);
+    --_et-focus-ring-color: light-dark(
+      var(--et-theme-color-ink-solid, currentColor),
+      var(--et-theme-color-primary-solid, currentColor)
+    );
     outline: var(--_et-focus-ring-width) solid transparent;
     outline-offset: var(--_et-focus-ring-offset);
   }

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

@@ -51,12 +51,13 @@
     }
 
     .et-checkbox-box {
+      box-sizing: border-box;
       position: relative;
       display: grid;
       place-items: center;
       width: var(--et-checkbox-size);
       height: var(--et-checkbox-size);
-      border: var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);
+      border: var(--et-checkbox-border-width) solid var(--et-surface-interaction-solid, currentColor);
       border-radius: var(--et-checkbox-border-radius);
     }
 
@@ -79,11 +80,33 @@
     }
 
     @media (hover: hover) {
-      :where(et-choice-field[data-error]) &:hover:not([aria-disabled='true']):not([data-readonly]) .et-checkbox-box,
+      :where(et-choice-field[data-error])
+        &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+        .et-checkbox-box,
       :where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover))
-        &:not([aria-disabled='true']):not([data-readonly])
+        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
         .et-checkbox-box {
-        border-color: var(--et-theme-color-primary-solid);
+        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)))
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
       }
     }
 
@@ -100,7 +123,10 @@
     }
 
     et-choice-field[data-error] &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) {
-      --_et-focus-ring-color: var(--et-theme-color-primary-solid);
+      --_et-focus-ring-color: light-dark(
+        var(--et-theme-color-ink-solid, currentColor),
+        var(--et-theme-color-primary-solid, currentColor)
+      );
     }
 
     et-choice-field[data-error]

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

@@ -47,6 +47,7 @@
     --_et-color-input-checker: color-mix(in srgb, currentColor 18%, transparent);
     --_et-color-input-swatch-color: transparent;
 
+    box-sizing: border-box;
     inline-size: var(--et-color-input-swatch-size);
     block-size: var(--et-color-input-swatch-size);
     border-radius: var(--et-color-input-swatch-radius);
@@ -86,7 +87,8 @@
     outline: none;
 
     .et-color-input-swatch {
-      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/color-input/color-picker-panel.component.css

@@ -88,7 +88,8 @@
     cursor: crosshair;
 
     &:has(.et-color-picker-channel: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;
     }
   }
@@ -99,7 +100,8 @@
     border-radius: 999px;
 
     &:has(.et-color-picker-channel: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;
     }
   }
@@ -148,6 +150,7 @@
      choosing, so it has to stay legible over every hue a token could not anticipate */
   .et-color-picker-area-thumb,
   .et-color-picker-track-thumb {
+    box-sizing: border-box;
     position: absolute;
     inline-size: var(--et-color-picker-thumb-size);
     block-size: var(--et-color-picker-thumb-size);
@@ -227,6 +230,7 @@
     --_et-color-picker-preview-color: transparent;
 
     flex: none;
+    box-sizing: border-box;
     inline-size: 20px;
     block-size: 20px;
     border-radius: 4px;

package/src/lib/forms/date-time/date-input/date-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/date-time-input/date-time-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/duration-input/duration-input.component.css

@@ -20,7 +20,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/range-input-shell-styles.component.css

@@ -32,7 +32,7 @@
     font-variant-numeric: tabular-nums;
 
     &::placeholder {
-      color: color-mix(in srgb, currentColor 46%, transparent);
+      color: color-mix(in srgb, currentColor 60%, transparent);
     }
 
     &:disabled {

package/src/lib/forms/date-time/time-input/time-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

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

@@ -0,0 +1,7 @@
+@layer components {
+  et-description {
+    display: block;
+    font-size: var(--et-description-font-size, 12px);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}

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,22 +47,59 @@
        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-border-solid, currentColor);
-      --_et-form-field-frame-border-hover: var(--et-surface-interaction-hover-solid, currentColor);
+      --_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: color-mix(in srgb, var(--et-theme-color-primary-solid) 50%, transparent);
-        --_et-form-field-frame-border-hover: var(--et-theme-color-ink-solid);
+        --_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);
       }
@@ -229,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,
@@ -248,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;
         }

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