@ethlete/components 1.0.0-next.73 → 1.0.0-next.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.73",
+  "version": "1.0.0-next.74",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/accordion/accordion.component.css

@@ -47,7 +47,6 @@
     display: block;
     color: var(--et-surface-color-solid, CanvasText);
     border-block-end: 1px solid var(--_et-accordion-border-color);
-    transition: border-color var(--et-accordion-color-duration) ease;
 
     /* The hover lives on the trigger and the border on the host, so this has to reach back up with
        `:has()` - moving the rule onto `.et-accordion-trigger` would silently stop it applying. */
@@ -63,7 +62,10 @@
   }
 
   .et-accordion-heading {
+    --_et-accordion-tint-inset: min(4px, var(--et-accordion-padding-block));
+
     display: block;
+    padding-block: var(--_et-accordion-tint-inset);
   }
 
   .et-accordion-trigger {
@@ -73,7 +75,8 @@
     align-items: center;
     gap: var(--et-accordion-gap);
     inline-size: 100%;
-    padding: var(--et-accordion-padding-block) var(--et-accordion-padding-inline);
+    padding: calc(var(--et-accordion-padding-block) - var(--_et-accordion-tint-inset))
+      var(--et-accordion-padding-inline);
     border: 0;
     border-radius: var(--et-accordion-radius);
     background: transparent;
@@ -82,7 +85,6 @@
     font-weight: 500;
     text-align: start;
     cursor: pointer;
-    transition: background-color var(--et-accordion-color-duration) ease;
 
     @media (hover: hover) {
       &:hover {
@@ -122,7 +124,6 @@
       flex: none;
       color: var(--_et-accordion-secondary-color);
       font-weight: 400;
-      transition: color var(--et-accordion-color-duration) ease;
     }
 
     .et-accordion-chevron {
@@ -131,9 +132,6 @@
       block-size: var(--et-accordion-chevron-size);
       color: var(--_et-accordion-secondary-color);
       rotate: 180deg;
-      transition:
-        rotate var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
-        color var(--et-accordion-color-duration) ease;
     }
 
     &[aria-expanded='true'] .et-accordion-chevron {
@@ -145,16 +143,45 @@
     display: grid;
     grid-template-rows: 0fr;
     visibility: hidden;
-    transition:
-      grid-template-rows var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
-      visibility 0s linear var(--et-accordion-duration);
 
     &:where([data-open]) {
       grid-template-rows: 1fr;
       visibility: visible;
-      transition:
-        grid-template-rows var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
-        visibility 0s linear 0s;
+    }
+  }
+
+  .et-accordion:where([data-can-animate]) {
+    transition: border-color var(--et-accordion-color-duration) ease;
+
+    > .et-accordion-heading > .et-accordion-trigger {
+      transition: background-color var(--et-accordion-color-duration) ease;
+
+      .et-accordion-hint,
+      .et-accordion-chevron {
+        transition: color var(--et-accordion-color-duration) ease;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .et-accordion:where([data-can-animate]) {
+      > .et-accordion-panel {
+        transition:
+          grid-template-rows var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
+          visibility 0s linear var(--et-accordion-duration);
+
+        &:where([data-open]) {
+          transition:
+            grid-template-rows var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
+            visibility 0s linear 0s;
+        }
+      }
+
+      > .et-accordion-heading > .et-accordion-trigger > .et-accordion-chevron {
+        transition:
+          rotate var(--et-accordion-duration) cubic-bezier(0.25, 0, 0.1, 1),
+          color var(--et-accordion-color-duration) ease;
+      }
     }
   }
 
@@ -171,15 +198,4 @@
     padding-block-end: var(--et-accordion-padding-block);
     padding-inline: var(--et-accordion-padding-inline);
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    .et-accordion-panel,
-    .et-accordion-panel:where([data-open]) {
-      transition: none;
-    }
-
-    .et-accordion-trigger .et-accordion-chevron {
-      transition: color var(--et-accordion-color-duration) ease;
-    }
-  }
 }

package/src/lib/carousel/carousel-transition-styles.component.css

@@ -9,7 +9,7 @@
   @property --et-carousel-wipe-shift {
     syntax: '<length>';
     inherits: true;
-    initial-value: 125px;
+    initial-value: 0px;
   }
 
   @property --et-carousel-wipe-dim {

package/src/lib/carousel/carousel.component.css

@@ -37,11 +37,27 @@
     gap: var(--et-carousel-gap);
   }
 
+  /* `overflow-x: auto` forces a clip on the cross axis too; without the bleed it sits on the slide's own
+     border, which fractional device pixel ratios then eat. */
   .et-carousel-track {
+    --_et-carousel-track-bleed: 4px;
+
     display: block;
+    margin-block: calc(var(--_et-carousel-track-bleed) * -1);
 
     & .et-scrollable-container {
       gap: var(--et-carousel-slide-gap);
+      padding-block: var(--_et-carousel-track-bleed);
+    }
+
+    &:where([direction='vertical']) {
+      margin-block: 0;
+      margin-inline: calc(var(--_et-carousel-track-bleed) * -1);
+
+      & .et-scrollable-container {
+        padding-block: 0;
+        padding-inline: var(--_et-carousel-track-bleed);
+      }
     }
   }
 

package/src/lib/command-palette/command-palette-item.component.css

@@ -37,6 +37,10 @@
     padding-inline: var(--et-command-palette-item-padding-inline);
     border-radius: var(--et-command-palette-item-border-radius);
     cursor: pointer;
+    transition:
+      background 120ms ease,
+      color 120ms ease,
+      opacity 120ms ease;
 
     /* Marks the row the arrow keys reached. Not `:hover`: the pointer and the keyboard drive one
        highlight, and the component decides which row that is. */

package/src/lib/command-palette/command-palette.component.css

@@ -33,6 +33,7 @@
     --_et-command-palette-color: var(--et-surface-color-solid, rgb(244 244 245));
     --_et-command-palette-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
     --_et-command-palette-border: var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    position: relative;
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     max-block-size: var(--et-command-palette-max-height);
@@ -67,12 +68,32 @@
     }
   }
 
+  .et-command-palette-list-wrapper {
+    position: relative;
+    display: grid;
+    min-block-size: 0;
+  }
+
   .et-command-palette-list {
+    min-block-size: 0;
     overflow-y: auto;
     overscroll-behavior: contain;
     padding: var(--et-command-palette-padding);
   }
 
+  .et-command-palette-list-content {
+    position: relative;
+  }
+
+  /* Outweighs the overlay's own `.et-overlay > :not(…):not(…)` scroll rule on its content root. */
+  .et-overlay.et-command-palette-panel > .et-command-palette.et-command-palette--resizing {
+    overflow: clip;
+
+    .et-command-palette-list {
+      overflow: clip;
+    }
+  }
+
   .et-command-palette-group-label {
     margin: 0;
     padding-block: 8px 4px;
@@ -84,12 +105,39 @@
   }
 
   .et-command-palette-empty {
+    align-self: start;
     margin: 0;
     padding-block: 24px;
     color: var(--_et-command-palette-muted-color);
     text-align: center;
   }
 
+  .et-command-palette-swap--enter {
+    animation: et-command-palette-fade-in 150ms ease-out;
+  }
+
+  /* Out of flow in the same grid area, so the outgoing content never adds to the height that animates. */
+  .et-command-palette-swap--leave {
+    position: absolute;
+    grid-row: 2;
+    grid-column: 1;
+    inset: 0;
+    pointer-events: none;
+    animation: et-command-palette-fade-out 100ms ease-out forwards;
+  }
+
+  @keyframes et-command-palette-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-command-palette-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
   /* Held near the top of the viewport rather than centered: the list grows downwards as the reader
      types, and a centered panel would shift the row under the pointer on every keystroke. */
   .et-overlay.et-command-palette-panel {

package/src/lib/divider/divider.component.css

@@ -20,15 +20,19 @@
   .et-divider {
     display: block;
     flex: none;
-    background: var(--et-divider-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
-    block-size: var(--et-divider-thickness);
+    block-size: 0;
+    border-block-start: var(--et-divider-thickness) solid
+      var(--et-divider-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
     margin-block: var(--et-divider-spacing);
     margin-inline: var(--et-divider-inset);
 
     &:where([data-orientation='vertical']) {
       align-self: stretch;
       block-size: auto;
-      inline-size: var(--et-divider-thickness);
+      inline-size: 0;
+      border-block-start: 0;
+      border-inline-start: var(--et-divider-thickness) solid
+        var(--et-divider-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
       margin-block: var(--et-divider-inset);
       margin-inline: var(--et-divider-spacing);
     }

package/src/lib/forms/cascader/cascader-panel.component.css

@@ -21,9 +21,6 @@
   }
 
   .et-overlay--cascader {
-    --et-floating-panel-enter-duration: 140ms;
-    --et-floating-panel-leave-duration: 100ms;
-    --et-floating-panel-distance: 0.3rem;
   }
 
   .et-cascader-panel {
@@ -35,7 +32,8 @@
       var(--et-cascader-panel-max-block-size),
       var(--et-overlay-max-height, 100vh)
     );
-    border-radius: 10px;
+    --_et-cascader-row-radius: max(2px, var(--_et-overlay-surface-radius, 10px) - 6px);
+    border-radius: var(--_et-overlay-surface-radius, 10px);
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     background: var(--et-surface-background-solid, rgb(32 32 32));
     color: var(--et-surface-color-solid, rgb(244 244 245));
@@ -126,7 +124,7 @@
         block-size: 36px;
         box-sizing: border-box;
         padding-inline: 10px;
-        border-radius: 6px;
+        border-radius: var(--_et-cascader-row-radius);
         border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
         background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 6%, transparent);
         color: inherit;
@@ -212,7 +210,7 @@
       min-block-size: var(--et-cascader-node-height);
       padding-inline: 10px;
       border: none;
-      border-radius: 6px;
+      border-radius: var(--_et-cascader-row-radius);
       background: transparent;
       font: inherit;
       text-align: start;

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

@@ -44,7 +44,7 @@
     max-inline-size: calc(100vw - 24px);
     overflow: hidden;
     padding: 12px;
-    border-radius: 10px;
+    border-radius: var(--_et-overlay-surface-radius, 10px);
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     background: var(--et-surface-background-solid, rgb(32 32 32));
     color: var(--et-surface-color-solid, rgb(244 244 245));

package/src/lib/forms/date-time/date-picker-panel.component.css

@@ -6,49 +6,11 @@
     }
 
     &.et-animation-enter-active {
-      transition:
-        transform 140ms ease,
-        opacity 140ms ease;
+      transition: opacity 140ms ease;
     }
 
     &.et-animation-leave-active {
-      transition:
-        transform 100ms ease,
-        opacity 100ms ease;
-    }
-  }
-
-  .et-overlay--date-picker[data-overlay-placement^='top'] {
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) translateY(0.3rem) !important;
-    }
-  }
-
-  .et-overlay--date-picker[data-overlay-placement^='bottom'] {
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
-        translateY(-0.3rem) !important;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .et-overlay.et-with-default-animation.et-overlay--date-picker {
-      &.et-animation-enter-active {
-        transition: opacity 140ms ease;
-      }
-
-      &.et-animation-leave-active {
-        transition: opacity 100ms ease;
-      }
-    }
-
-    .et-overlay--date-picker[data-overlay-placement] {
-      &.et-animation-enter-from,
-      &.et-animation-leave-to {
-        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) !important;
-      }
+      transition: opacity 100ms ease;
     }
   }
 
@@ -58,7 +20,7 @@
     max-inline-size: calc(100vw - 24px);
     overflow: hidden;
     padding: 12px;
-    border-radius: 10px;
+    border-radius: var(--_et-overlay-surface-radius, 10px);
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     background: var(--et-surface-background-solid, rgb(32 32 32));
     color: var(--et-surface-color-solid, rgb(244 244 245));

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

@@ -1,16 +1,48 @@
 @layer components {
   .et-input-clear {
+    --_et-input-clear-target: 24px;
+    --_et-input-clear-gap: var(--et-form-field-control-affix-gap, 8px);
+
+    position: relative;
+    z-index: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
     border: none;
+    outline: none;
     background: transparent;
     color: var(--et-surface-color-muted-solid, currentColor);
     padding: 0;
     margin: 0;
     cursor: pointer;
     appearance: none;
+    touch-action: manipulation;
+    transition: color 150ms ease;
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      inset: -4px;
+      border-radius: 50%;
+      background: transparent;
+      transition: background-color 150ms ease;
+      pointer-events: none;
+    }
+
+    /* Ends halfway into the gap, so a neighbouring picker trigger's own hit area keeps the other half. */
+    &::after {
+      content: '';
+      position: absolute;
+      inset-block: calc((var(--_et-input-clear-target) - 100%) / -2);
+      inset-inline-end: calc(var(--_et-input-clear-gap) / -2);
+      inset-inline-start: calc(100% + var(--_et-input-clear-gap) / 2 - var(--_et-input-clear-target));
+    }
+
+    @media (pointer: coarse) {
+      --_et-input-clear-target: 44px;
+    }
 
     .et-icon {
       inline-size: var(--et-form-field-affix-icon-size, 16px);
@@ -20,9 +52,22 @@
     @media (hover: hover) {
       &:hover {
         color: var(--et-surface-color-solid, currentColor);
+
+        &::before {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 20%, transparent);
+        }
       }
     }
 
+    &:active::before {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 28%, transparent);
+    }
+
+    &:focus-visible::before {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 1px;
+    }
+
     &.et-input-clear--enter {
       animation: et-input-clear-in 150ms ease;
     }
@@ -100,6 +145,10 @@
         color: var(--et-surface-color-muted-solid, currentColor);
       }
     }
+
+    &::before {
+      background: transparent;
+    }
   }
 
   @keyframes et-input-clear-in {

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

@@ -5,6 +5,21 @@
     .et-form-field-busy-spinner {
       flex: none;
       color: var(--et-surface-color-muted-solid, currentColor);
+
+      &.et-form-field-busy-spinner--enter {
+        animation: et-form-field-busy-spinner-in 120ms ease;
+      }
+
+      &.et-form-field-busy-spinner--leave {
+        animation: et-form-field-busy-spinner-out 120ms ease forwards;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &.et-form-field-busy-spinner--enter,
+        &.et-form-field-busy-spinner--leave {
+          animation: none;
+        }
+      }
     }
 
     /* The overlap amount lives on the frame, not on the suffix that consumes it: a focused text
@@ -63,4 +78,16 @@
       margin-inline-start: calc(-1 * (var(--_et-form-field-suffix-fade) + var(--_et-form-field-suffix-overlap)));
     }
   }
+
+  @keyframes et-form-field-busy-spinner-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-form-field-busy-spinner-out {
+    to {
+      opacity: 0;
+    }
+  }
 }

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

@@ -9,6 +9,7 @@
       --et-form-field-control-font-size: 12px;
       --et-form-field-control-min-height: 32px;
       --et-form-field-label-font-size: 12px;
+      --_et-form-field-float-inside-label-inset: 1px;
     }
 
     /* `data-size` is a host binding, so a field the router just created paints one frame without it.
@@ -110,20 +111,16 @@
 
       &[data-label-mode='floating-inside'],
       &[data-label-mode='floating-outside'] {
-        :is(.et-input-native, .et-number-input-native, .et-textarea-native)::placeholder {
+        .et-form-field-control-slot :is(input, textarea)::placeholder,
+        :is(.et-select-value, .et-cascader-value)[data-placeholder] {
           transition: color 150ms ease;
         }
 
-        .et-select-value[data-placeholder] {
-          transition: color 150ms ease;
-        }
-
-        &:not([data-label-floated]) :is(.et-input-native, .et-number-input-native, .et-textarea-native)::placeholder {
-          color: transparent;
-        }
-
-        &:not([data-label-floated]) .et-select-value[data-placeholder] {
-          color: transparent;
+        &:not([data-label-floated]) {
+          .et-form-field-control-slot :is(input, textarea)::placeholder,
+          :is(.et-select-value, .et-cascader-value)[data-placeholder] {
+            color: transparent;
+          }
         }
       }
 
@@ -171,7 +168,7 @@
         }
 
         &[data-label-floated] .et-form-field-label-area--floating {
-          inset-block-start: 4px;
+          inset-block-start: var(--_et-form-field-float-inside-label-inset, 4px);
           transform: scale(var(--_et-form-field-floating-label-scale));
         }
 

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

@@ -147,6 +147,10 @@
       color: inherit;
     }
 
+    .et-rte-token-popup-body-wrapper {
+      position: relative;
+    }
+
     .et-rte-token-popup-body {
       max-block-size: var(--_et-rte-popup-max-block-size);
       padding: 6px;

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

@@ -13,9 +13,10 @@
     }
 
     /* separate groups with a hairline above all but the first *visible* one — search
-       filtering hides groups via [data-hidden], and a hidden group must neither draw a
-       divider nor count as the preceding sibling (hence ~ instead of +) */
-    &:where(:not([data-hidden])) ~ &:where(:not([data-hidden])) .et-select-option-group-label {
+       filtering hides groups via [data-hidden], and a hidden group must not count as the
+       preceding sibling (hence ~ instead of +). A hidden group itself still matches, so the
+       fade-out copy of its label keeps the divider. */
+    &:where(:not([data-hidden])) ~ & .et-select-option-group-label {
       margin-block-start: 4px;
       padding-block-start: 8px;
       border-block-start: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));

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

@@ -95,6 +95,7 @@
          through the pane's positioning phase (`visibility: hidden`) and paint the check
          before the panel itself becomes visible */
       opacity: 0;
+      transition: opacity 120ms ease;
 
       .et-icon {
         inline-size: 100%;
@@ -106,6 +107,10 @@
       opacity: 1;
     }
 
+    :where(.et-animation-leave-from, .et-animation-leave-active) & .et-select-option-check {
+      transition-delay: 100ms;
+    }
+
     .et-select-option-label {
       flex: 1;
       overflow: hidden;

package/src/lib/forms/select/select-panel.component.css

@@ -12,9 +12,10 @@
   }
 
   .et-overlay--select {
-    --et-floating-panel-enter-duration: 140ms;
-    --et-floating-panel-leave-duration: 100ms;
-    --et-floating-panel-distance: 0.3rem;
+  }
+
+  .et-overlay--select.et-floating-panel[data-overlay-placement].et-animation-leave-to {
+    transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) !important;
   }
 
   .et-select-panel {
@@ -38,6 +39,10 @@
     /* re-published as an inheriting alias: the registered token is `inherits: false`, so the
        scroller below could not read a value a consumer sets on the panel element */
     --_et-select-panel-padding: var(--et-select-panel-padding);
+    --et-select-option-border-radius: max(
+      2px,
+      var(--_et-overlay-surface-radius, 10px) - var(--_et-select-panel-padding)
+    );
 
     .et-select-panel-scroller {
       box-sizing: border-box;
@@ -46,10 +51,13 @@
       padding: var(--_et-select-panel-padding);
     }
 
-    &.et-select-panel--resizing .et-select-panel-scroller {
+    /* A moving option's transform counts as scrollable overflow and would flash a scrollbar. Clip the
+       scroller, never the body: the body already has its final height and would cut off the moving options. */
+    &.et-select-panel--resizing .et-select-panel-scroller,
+    .et-select-panel-scroller:has(> .et-select-panel-body--moving) {
       overflow: clip;
     }
-    border-radius: 10px;
+    border-radius: var(--_et-overlay-surface-radius, 10px);
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     background: var(--et-surface-background-solid, rgb(32 32 32));
     color: var(--et-surface-color-solid, rgb(244 244 245));
@@ -89,7 +97,7 @@
       block-size: 36px;
       box-sizing: border-box;
       padding-inline: 10px;
-      border-radius: 6px;
+      border-radius: var(--et-select-option-border-radius);
       border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
       background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 6%, transparent);
       color: inherit;