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

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

@@ -33,6 +33,10 @@
         cursor: default;
       }
 
+      &:has(input[etselectsearch]:not(:read-only)) {
+        cursor: text;
+      }
+
       .et-select-trigger-content {
         display: flex;
         flex-wrap: wrap;
@@ -57,7 +61,8 @@
 
       input[etselectsearch] {
         flex: 1 1 60px;
-        min-inline-size: 60px;
+        min-inline-size: min(100%, max(60px, var(--_et-select-search-placeholder-width, 0px)));
+        max-inline-size: 100%;
         border: none;
         outline: none;
         background: transparent;
@@ -65,21 +70,21 @@
         color: inherit;
         padding: 0;
         caret-color: var(--et-theme-color-primary-solid, currentColor);
-        cursor: text;
+        cursor: inherit;
 
         &::placeholder {
           color: var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 46%, transparent));
         }
 
-        /* Before the disabled rule: a disabled input is :read-only too, and there
-           not-allowed must win. */
         &:read-only {
-          cursor: default;
           caret-color: transparent;
         }
+      }
 
-        &:disabled {
-          cursor: not-allowed;
+      @supports (field-sizing: content) {
+        .et-select-trigger-content:not(.et-select-trigger-content--stacked) > input[etselectsearch] {
+          flex: 1 0 auto;
+          field-sizing: content;
         }
       }
 
@@ -152,29 +157,91 @@
     }
 
     .et-select-trigger-busy--enter {
-      animation: et-select-busy-in 120ms ease;
+      animation: et-select-fade-in 120ms ease;
+    }
+
+    .et-select-trigger-busy--leave {
+      animation: et-select-fade-out 120ms ease forwards;
+    }
+
+    .et-select-chip--enter {
+      animation: et-select-fade-in 150ms ease-out;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .et-select-trigger-busy--enter {
+      .et-select-trigger-busy--enter,
+      .et-select-trigger-busy--leave,
+      .et-select-chip--enter {
         animation: none;
       }
     }
   }
 
+  et-form-field
+    .et-form-field-control-frame:has(> .et-form-field-suffix > :is(.et-input-clear, .et-form-field-busy-spinner)):has(
+      et-select .et-select-chips
+    ) {
+    .et-form-field-control-slot {
+      mask-image: none;
+    }
+
+    .et-select-trigger-content {
+      padding-inline-end: var(--_et-form-field-suffix-overlap);
+    }
+  }
+
+  /* The search input always ends the last chip row and stretches to its end, so the clear button sits
+     over the input there instead of padding the content - a pad would rewrap the chips on focus. */
+  et-form-field
+    .et-form-field-control-frame:has(> .et-form-field-suffix > .et-input-clear):not(
+      :has(> .et-form-field-suffix > .et-form-field-busy-spinner)
+    ):has(et-select .et-select-chips + input[etselectsearch]) {
+    > .et-form-field-suffix > .et-input-clear {
+      align-self: end;
+      margin-block-end: calc((1lh - var(--et-form-field-affix-icon-size)) / 2);
+    }
+
+    .et-select-trigger-content {
+      padding-inline-end: 0;
+
+      > input[etselectsearch] {
+        padding-inline-end: 0;
+        mask-image: linear-gradient(
+          var(--_et-form-field-suffix-mask-direction),
+          black calc(100% - var(--_et-form-field-suffix-overlap) - 4px),
+          transparent calc(100% - var(--_et-form-field-suffix-cover))
+        );
+
+        &:not(:placeholder-shown) {
+          padding-inline-end: var(--_et-form-field-suffix-overlap);
+        }
+      }
+    }
+  }
+
   .et-form-field-control-frame:has(et-select) {
     cursor: pointer;
   }
 
+  .et-form-field-control-frame:has(et-select input[etselectsearch]:not(:read-only)) {
+    cursor: text;
+  }
+
   /* outside the `et-select` block on purpose: the chevron renders in the form field's suffix slot,
      which is not a descendant of the host. */
   .et-select-arrow .et-icon {
     rotate: 180deg;
   }
 
-  @keyframes et-select-busy-in {
+  @keyframes et-select-fade-in {
     from {
       opacity: 0;
     }
   }
+
+  @keyframes et-select-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
 }

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

@@ -136,6 +136,7 @@
   .et-progress-bar__bar-inner {
     display: inline-block;
     position: absolute;
+    inset-inline-start: 0;
     width: 100%;
     animation: none;
     border-top-style: solid;

package/src/lib/menu/menu-search-styles.component.css

@@ -20,6 +20,21 @@
       inset-inline-end: 10px;
       translate: 0 -50%;
       color: var(--_et-menu-muted-color);
+
+      &.et-menu-search-spinner--enter {
+        animation: et-menu-search-spinner-in 120ms ease;
+      }
+
+      &.et-menu-search-spinner--leave {
+        animation: et-menu-search-spinner-out 120ms ease forwards;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &.et-menu-search-spinner--enter,
+        &.et-menu-search-spinner--leave {
+          animation: none;
+        }
+      }
     }
 
     .et-menu-search-error {
@@ -53,4 +68,16 @@
       }
     }
   }
+
+  @keyframes et-menu-search-spinner-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-menu-search-spinner-out {
+    to {
+      opacity: 0;
+    }
+  }
 }

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

@@ -247,8 +247,10 @@
 
       /* the roving focus is applied programmatically on mouse-open too, so :focus-visible (instead
        of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
-       interaction; a trigger whose submenu is open stays highlighted the whole time */
+       interaction; a trigger whose submenu is open stays highlighted the whole time, and an item
+       activated from the keyboard keeps its highlight while the menu fades out */
       &[data-active]:where(:focus-visible),
+      &[data-highlight-held],
       &[data-menu-open] {
         background: var(--_et-menu-item-active-background);
       }
@@ -287,10 +289,4 @@
       }
     }
   }
-
-  .et-overlay--menu {
-    --et-floating-panel-enter-duration: 140ms;
-    --et-floating-panel-leave-duration: 100ms;
-    --et-floating-panel-distance: 0.3rem;
-  }
 }

package/src/lib/notification/notification.component.css

@@ -223,6 +223,10 @@
     line-height: var(--et-notification-message-line-height);
   }
 
+  .et-notification-custom-content {
+    margin-top: var(--et-notification-gap);
+  }
+
   .et-notification-progress-bar {
     margin-top: 0.8rem;
     color: var(--et-theme-color-primary-solid, currentColor);

package/src/lib/overlay/floating-panel-styles.component.css

@@ -6,66 +6,11 @@
     }
 
     &.et-animation-enter-active {
-      transition:
-        transform var(--et-floating-panel-enter-duration, 200ms) ease,
-        opacity var(--et-floating-panel-enter-duration, 200ms) ease;
+      transition: opacity 140ms ease;
     }
 
     &.et-animation-leave-active {
-      transition:
-        transform var(--et-floating-panel-leave-duration, 140ms) ease,
-        opacity var(--et-floating-panel-leave-duration, 140ms) ease;
-    }
-  }
-
-  .et-floating-panel[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(var(--et-floating-panel-distance, 0.4rem)) !important;
-    }
-  }
-
-  .et-floating-panel[data-overlay-placement^='right'] {
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
-        translateX(calc(var(--et-floating-panel-distance, 0.4rem) * -1)) !important;
-    }
-  }
-
-  .et-floating-panel[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(calc(var(--et-floating-panel-distance, 0.4rem) * -1)) !important;
-    }
-  }
-
-  .et-floating-panel[data-overlay-placement^='left'] {
-    &.et-animation-enter-from,
-    &.et-animation-leave-to {
-      transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0)
-        translateX(var(--et-floating-panel-distance, 0.4rem)) !important;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .et-overlay.et-with-default-animation.et-floating-panel {
-      &.et-animation-enter-active {
-        transition: opacity var(--et-floating-panel-enter-duration, 200ms) ease;
-      }
-
-      &.et-animation-leave-active {
-        transition: opacity var(--et-floating-panel-leave-duration, 140ms) ease;
-      }
-    }
-
-    .et-floating-panel[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;
     }
   }
 }

package/src/lib/overlay/floating-tip-styles.component.css

@@ -8,9 +8,6 @@
 
   .et-overlay--tooltip,
   .et-overlay--toggletip {
-    --et-floating-panel-enter-duration: 200ms;
-    --et-floating-panel-leave-duration: 140ms;
-    --et-floating-panel-distance: 0.45rem;
   }
 
   .et-tooltip,

package/src/lib/overlay/routing/overlay-router-outlet.component.css

@@ -173,6 +173,14 @@
     grid-template-rows: minmax(0, 1fr);
     block-size: 100%;
     overflow: hidden;
+
+    .et-overlay-body-container > .et-overlay-router-outlet-host > & {
+      margin-inline: calc(var(--et-overlay-padding-inline) * -1);
+
+      > .et-overlay-router-outlet-page {
+        padding-inline: var(--et-overlay-padding-inline);
+      }
+    }
   }
 
   .et-overlay-router-outlet-page {

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

@@ -7,9 +7,16 @@
     display: flex;
     flex-direction: column;
     inline-size: var(--et-overlay-sidebar-inline-size, 240px);
+    position: relative;
+    min-block-size: 0;
+    border-inline-end: 1px solid var(--et-overlay-body-divider-color);
+  }
+
+  .et-overlay-sidebar-scroller {
+    flex: 1;
+    min-block-size: 0;
     padding-block: var(--et-overlay-padding-block);
     padding-inline: var(--et-overlay-padding-inline);
-    border-inline-end: 1px solid var(--et-overlay-body-divider-color);
     overflow-y: auto;
     overscroll-behavior: contain;
   }

package/src/lib/overlay/strategies/anchored-dialog-styles.component.css

@@ -28,6 +28,33 @@
         transition:
           transform 150ms var(--ease-out-5),
           opacity 150ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          /* a response 0.22s critically damped spring, cut where the opacity reaches 0 */
+          --_et-dialog-leave-spring: linear(
+            0,
+            0.0242 5.56%,
+            0.083 11.11%,
+            0.1607 16.67%,
+            0.4178 33.33%,
+            0.4961 38.89%,
+            0.5674 44.44%,
+            0.6311 50%,
+            0.6872 55.56%,
+            0.7361 61.11%,
+            0.7783 66.67%,
+            0.8145 72.22%,
+            0.8453 77.78%,
+            0.8713 83.33%,
+            0.9117 94.44%,
+            0.9271 100%,
+            1 100%
+          );
+
+          transition:
+            transform 150ms var(--_et-dialog-leave-spring),
+            opacity 150ms linear;
+        }
       }
     }
   }

package/src/lib/overlay/strategies/dialog-styles.component.css

@@ -27,6 +27,33 @@
         transition:
           transform 150ms var(--ease-out-5),
           opacity 150ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          /* a response 0.22s critically damped spring, cut where the opacity reaches 0 */
+          --_et-dialog-leave-spring: linear(
+            0,
+            0.0242 5.56%,
+            0.083 11.11%,
+            0.1607 16.67%,
+            0.4178 33.33%,
+            0.4961 38.89%,
+            0.5674 44.44%,
+            0.6311 50%,
+            0.6872 55.56%,
+            0.7361 61.11%,
+            0.7783 66.67%,
+            0.8145 72.22%,
+            0.8453 77.78%,
+            0.8713 83.33%,
+            0.9117 94.44%,
+            0.9271 100%,
+            1 100%
+          );
+
+          transition:
+            transform 150ms var(--_et-dialog-leave-spring),
+            opacity 150ms linear;
+        }
       }
     }
   }

package/src/lib/overlay/strategies/full-screen-dialog-styles.component.css

@@ -28,6 +28,36 @@
           transform 300ms var(--ease-in-out-5),
           border-radius 300ms var(--ease-in-out-5),
           opacity 150ms linear 100ms;
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          /* a response 0.28s critically damped spring; the origin clone leave uses the same curve and timing */
+          --_et-full-screen-leave-spring: linear(
+            0,
+            0.0155 2.78%,
+            0.0547 5.56%,
+            0.1092 8.33%,
+            0.1726 11.11%,
+            0.3764 19.44%,
+            0.5015 25%,
+            0.5577 27.78%,
+            0.6092 30.56%,
+            0.656 33.33%,
+            0.6982 36.11%,
+            0.7361 38.89%,
+            0.7997 44.44%,
+            0.8493 50%,
+            0.8874 55.56%,
+            0.9281 63.89%,
+            0.9612 75%,
+            0.9908 100%,
+            1
+          );
+
+          transition:
+            transform 300ms var(--_et-full-screen-leave-spring),
+            border-radius 300ms var(--_et-full-screen-leave-spring),
+            opacity 150ms linear 35ms;
+        }
       }
 
       &.et-overlay--full-screen-dialog--reduced-animation {
@@ -50,6 +80,34 @@
             transform 150ms var(--ease-in-5),
             border-radius 150ms var(--ease-in-5),
             opacity 150ms var(--ease-in-5);
+
+          @supports (transition-timing-function: linear(0, 1)) {
+            /* a response 0.22s critically damped spring, cut where the opacity reaches 0 */
+            --_et-full-screen-leave-spring: linear(
+              0,
+              0.0242 5.56%,
+              0.083 11.11%,
+              0.1607 16.67%,
+              0.4178 33.33%,
+              0.4961 38.89%,
+              0.5674 44.44%,
+              0.6311 50%,
+              0.6872 55.56%,
+              0.7361 61.11%,
+              0.7783 66.67%,
+              0.8145 72.22%,
+              0.8453 77.78%,
+              0.8713 83.33%,
+              0.9117 94.44%,
+              0.9271 100%,
+              1 100%
+            );
+
+            transition:
+              transform 150ms var(--_et-full-screen-leave-spring),
+              border-radius 150ms var(--_et-full-screen-leave-spring),
+              opacity 150ms linear;
+          }
         }
       }
     }

package/src/lib/overlay/strategies/overlay-origin-clone.component.css

@@ -41,6 +41,35 @@
       transition:
         transform 300ms var(--ease-in-out-5),
         opacity 125ms 175ms linear;
+
+      @supports (transition-timing-function: linear(0, 1)) {
+        /* must match the full-screen dialog leave, which this clone tracks */
+        --_et-origin-clone-leave-spring: linear(
+          0,
+          0.0155 2.78%,
+          0.0547 5.56%,
+          0.1092 8.33%,
+          0.1726 11.11%,
+          0.3764 19.44%,
+          0.5015 25%,
+          0.5577 27.78%,
+          0.6092 30.56%,
+          0.656 33.33%,
+          0.6982 36.11%,
+          0.7361 38.89%,
+          0.7997 44.44%,
+          0.8493 50%,
+          0.8874 55.56%,
+          0.9281 63.89%,
+          0.9612 75%,
+          0.9908 100%,
+          1
+        );
+
+        transition:
+          transform 300ms var(--_et-origin-clone-leave-spring),
+          opacity 125ms 70ms linear;
+      }
     }
 
     &.et-animation-leave-to,

package/src/lib/overlay/strategies/sheet-styles.component.css

@@ -15,6 +15,14 @@
      Falls back to transparent (no filler) for overlays opened without surface themes. */
     --_et-overlay-overshoot-fill: var(--et-surface-background-solid, transparent);
 
+    @media (pointer: coarse) {
+      &:where(.et-overlay--bottom-sheet, .et-overlay--top-sheet, .et-overlay--left-sheet, .et-overlay--right-sheet) {
+        /* Android Chrome can show an unpainted frame when the first drag transforms a large
+           scrollable sheet. Keep its compositor layer ready while it is open. */
+        will-change: transform;
+      }
+    }
+
     &.et-overlay--bottom-sheet {
       &.et-animation-enter-from,
       &.et-animation-leave-to {

package/src/lib/pagination/page-size-select.component.css

@@ -1,102 +1,6 @@
 @layer components {
-  /* Its own height token rather than the paginator's `--et-pagination-item-size`: that one is
-     `@property`-registered as inheriting with a 36px initial value, so it resolves everywhere — the
-     select would silently take 36px regardless of its own density, and would not follow a compact
-     paginator that lowered it on its own host anyway. Set this to line the two up exactly. */
-  @property --et-page-size-select-height {
-    syntax: '<length>';
-    inherits: true;
-    initial-value: 36px;
-  }
-
   :where(.et-page-size-select-host) {
     display: inline-flex;
     align-items: center;
   }
-
-  /* Follows the paginator's coarse-pointer target so the two stay level on touch. Zero specificity, so
-     the `sm` rule below still wins. */
-  @media (pointer: coarse) {
-    :where(.et-page-size-select-host) {
-      --et-page-size-select-height: 44px;
-    }
-  }
-
-  .et-page-size-select-label {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    white-space: nowrap;
-    color: var(--et-surface-color-muted-solid, CanvasText);
-  }
-
-  /* The chevron is drawn over the control's trailing edge, so the field is the positioning context. */
-  .et-page-size-select-field {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  /* The control itself reads as the paginator's own chrome — same radius, same border, same minimum
-     height — so the two sit level in a controls row without either being restyled at the call site.
-     The trailing padding leaves room for the chevron. */
-  .et-page-size-select-control {
-    appearance: none;
-    min-block-size: var(--et-page-size-select-height);
-    padding-block: 0;
-    padding-inline: 8px 26px;
-    font: inherit;
-    font-variant-numeric: tabular-nums;
-    color: var(--et-surface-color-solid, CanvasText);
-    background: transparent;
-    border: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / 0.3));
-    border-radius: var(--et-pagination-radius, 8px);
-    cursor: pointer;
-  }
-
-  .et-page-size-select-chevron {
-    position: absolute;
-    inset-inline-end: 8px;
-    /* The picker is the select's; the chevron is decoration sitting on top of it. */
-    pointer-events: none;
-    color: var(--et-surface-color-muted-solid, CanvasText);
-  }
-
-  /* The dropdown the browser draws is outside this element, so it inherits nothing from the surface
-     theme — give the options a background that at least matches the app rather than the UA default. */
-  .et-page-size-select-control option {
-    color: var(--et-surface-color-solid, CanvasText);
-    background: var(--et-surface-background-solid, Canvas);
-  }
-
-  @media (hover: hover) {
-    .et-page-size-select-control:hover {
-      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);
-    }
-  }
-
-  .et-page-size-select-control:focus-visible {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
-    outline-offset: 2px;
-  }
-
-  /* Matches the paginator's own `sm` density, so a table footer can shrink both together. */
-  .et-page-size-select-host:where([data-size='sm']) .et-page-size-select-label {
-    font-size: 13px;
-    gap: 6px;
-  }
-
-  .et-page-size-select-host:where([data-size='sm']) {
-    /* Level with the compact pager's 34px chevrons, which is what it usually sits beside. */
-    --et-page-size-select-height: 34px;
-  }
-
-  .et-page-size-select-host:where([data-size='sm']) .et-page-size-select-control {
-    padding-inline: 6px 22px;
-  }
-
-  .et-page-size-select-host:where([data-size='sm']) .et-page-size-select-chevron {
-    inset-inline-end: 6px;
-  }
 }

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

@@ -130,28 +130,7 @@
   }
 
   .et-pagination-jump {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 14px;
-    color: var(--et-surface-color-muted-solid, CanvasText);
-  }
-
-  .et-pagination-jump-input {
-    inline-size: 64px;
-    min-block-size: var(--et-pagination-item-size);
-    padding-inline: 8px;
-    font: inherit;
-    font-variant-numeric: tabular-nums;
-    color: var(--et-surface-color-solid, CanvasText);
-    background: transparent;
-    border: 1px solid var(--et-surface-border-solid, rgb(128 128 128 / 0.3));
-    border-radius: var(--et-pagination-radius);
-  }
-
-  .et-pagination-jump-input:where(:focus-visible) {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
-    outline-offset: 2px;
+    inline-size: 128px;
   }
 
   /* Compact density: smaller cells with tighter padding, so the paginator sits closer to table-row

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

@@ -39,6 +39,7 @@
       inline-size: calc(100% + var(--et-progress-steps-gap, 8px));
       block-size: 2px;
       background: var(--et-surface-border-solid, currentColor);
+      transition: background-color 200ms ease;
     }
 
     /* Every resolved state fills its connector. The color comes from the step's own forced theme, so
@@ -66,6 +67,10 @@
          centers that whole box rather than the glyph inside it - the digit then sits visibly
          above center, since a line box's extra leading isn't split evenly around the glyph. */
       line-height: 1;
+      transition:
+        border-color 200ms ease,
+        background-color 200ms ease,
+        color 200ms ease;
 
       /* The icon's own SVG is `width/height: 100%` (fills its box) with no intrinsic size of its
          own, so left unset it stretches to whatever the flex layout gives it - explicitly sizing
@@ -107,6 +112,7 @@
 
     .et-progress-step-label {
       color: var(--et-surface-color-muted-solid, currentColor);
+      transition: color 200ms ease;
     }
 
     [etProgressStepDescription] {