@ethlete/components 1.0.0-next.68 → 1.0.0-next.70

package/src/lib/overlay/overlay-main-styles.component.css

@@ -0,0 +1,105 @@
+@layer components {
+  .et-overlay-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    overflow: auto;
+
+    &:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer) {
+      grid-template-rows: auto minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
+    }
+
+    &:has(.et-overlay-header):has(.et-overlay-body) {
+      grid-template-rows: auto minmax(var(--et-overlay-body-min-block-size), 1fr);
+    }
+
+    &:has(.et-overlay-body):has(.et-overlay-footer) {
+      grid-template-rows: minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
+    }
+
+    &:not(:has(.et-overlay-footer)) {
+      grid-template-rows: minmax(var(--et-overlay-body-min-block-size), 1fr) auto;
+    }
+  }
+
+  .et-overlay-body {
+    display: grid;
+    overflow: auto;
+
+    /* Scrolling to either end stays in the overlay: without this, the leftover momentum scrolls the
+     page behind the backdrop, and on a sheet it competes with the drag-to-dismiss gesture. */
+    overscroll-behavior: contain;
+    padding-inline: var(--et-overlay-padding-inline);
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-rows: minmax(0, 1fr);
+
+    &.et-overlay-body--enable-divider-animations {
+      transition: border-color 300ms var(--ease-1);
+    }
+
+    &.et-overlay-body--render-dividers {
+      .et-overlay-main:has(.et-overlay-header) & {
+        border-block-start: 1px solid var(--et-overlay-body-divider-color);
+      }
+
+      .et-overlay-main:has(.et-overlay-footer) & {
+        border-block-end: 1px solid var(--et-overlay-body-divider-color);
+      }
+
+      &.et-overlay-body--dynamic-dividers {
+        border-color: var(--et-overlay-body-divider-color);
+
+        &.et-scrollable-body--is-at-start {
+          border-block-start-color: transparent;
+        }
+
+        &.et-scrollable-body--is-at-end {
+          border-block-end-color: transparent;
+        }
+      }
+    }
+
+    .et-overlay-body-container {
+      position: relative;
+      min-block-size: min-content;
+
+      /* The body's block padding lives on this container, not on the scroll container itself. The body
+       lays the container out in a `minmax(0, 1fr)` row, so content taller than the overlay overflows
+       that row — and a scroll container's own padding-block-end does not extend the scrollable area
+       past an overflowing item, it just gets painted underneath it. Consumers setting
+       `--et-overlay-body-padding-block` would see the padding in devtools while scrolling still ended
+       flush on the last child, clipping its border and focus ring. The container's padding is part of
+       the box the scrollable overflow is measured from, so the space is really reachable. */
+      padding-block: var(--et-overlay-body-padding-block);
+
+      .et-overlay-body-start-element,
+      .et-overlay-body-end-element {
+        position: absolute;
+        block-size: 1px;
+        pointer-events: none;
+      }
+
+      .et-overlay-body-start-element {
+        inset-inline: 1px;
+        inset-block-start: 1px;
+      }
+
+      .et-overlay-body-end-element {
+        inset-inline: 1px;
+        inset-block-end: 1px;
+      }
+    }
+  }
+
+  .et-overlay-header {
+    padding-block-start: var(--et-overlay-padding-block);
+    padding-inline: var(--et-overlay-padding-inline);
+    padding-block-end: var(--et-overlay-header-padding-block-end);
+  }
+
+  .et-overlay-footer {
+    padding-block-end: var(--et-overlay-padding-block);
+    padding-inline: var(--et-overlay-padding-inline);
+    padding-block-start: var(--et-overlay-footer-padding-block-start);
+  }
+}

package/src/lib/overlay/overlay-template-host.component.css

@@ -0,0 +1,7 @@
+@layer components {
+  .et-overlay-template-host {
+    display: block;
+    max-width: min(var(--et-overlay-max-width, 100vw), 100%);
+    max-height: var(--et-overlay-max-height, 100vh);
+  }
+}

package/src/lib/overlay/routing/overlay-route-header-template-outlet.component.css

@@ -0,0 +1,36 @@
+@layer components {
+  .et-overlay-route-header-template-outlet-host {
+    --_et-overlay-router-transition-easing: var(--ease-in-out-5);
+  }
+
+  .et-overlay-route-header-template-outlet {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    overflow-x: hidden;
+  }
+
+  .et-overlay-route-header-template-outlet-item {
+    grid-area: 1 / 1 / 2 / 2;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+
+    &.et-animation-enter-from {
+      opacity: 0;
+    }
+
+    &.et-animation-leave-to {
+      opacity: 0;
+    }
+
+    &.et-animation-enter-active,
+    &.et-animation-leave-active {
+      transition:
+        transform 300ms var(--_et-overlay-router-transition-easing),
+        opacity 300ms var(--_et-overlay-router-transition-easing);
+    }
+  }
+}

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

@@ -0,0 +1,207 @@
+@layer components {
+  .et-overlay-router-outlet-host {
+    --_et-overlay-router-transition-easing: var(--ease-in-out-4);
+
+    display: block;
+    block-size: 100%;
+
+    &.et-overlay-router-outlet-transition--none {
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from,
+        &.et-animation-leave-to {
+          opacity: 0;
+        }
+
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition: opacity 0ms linear;
+        }
+      }
+    }
+
+    &.et-overlay-router-outlet-transition--fade {
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          opacity: 0;
+        }
+
+        &.et-animation-leave-to {
+          opacity: 0;
+        }
+
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition: opacity 100ms linear;
+        }
+      }
+    }
+
+    &.et-overlay-router-outlet-transition--slide {
+      --_et-overlay-router-transform-from: translateX(100%);
+      --_et-overlay-router-transform-to: translateX(-100%);
+
+      &.et-overlay-router-outlet-nav-dir--backward {
+        --_et-overlay-router-transform-from: translateX(-100%);
+        --_et-overlay-router-transform-to: translateX(100%);
+      }
+
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          transform: var(--_et-overlay-router-transform-from);
+          opacity: 0;
+        }
+
+        &.et-animation-leave-to {
+          transform: var(--_et-overlay-router-transform-to);
+          opacity: 0;
+        }
+
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition:
+            transform 300ms var(--_et-overlay-router-transition-easing),
+            opacity 300ms var(--_et-overlay-router-transition-easing);
+        }
+      }
+    }
+
+    &.et-overlay-router-outlet-transition--overlay {
+      --_et-overlay-router-transform-from: translateX(100%);
+      --_et-overlay-router-transform-to: translateX(-20%);
+      --_et-overlay-router-out-page-brightness: 0.8;
+
+      &.et-overlay-router-outlet-nav-dir--backward {
+        --_et-overlay-router-transform-from: translateX(-20%);
+        --_et-overlay-router-transform-to: translateX(100%);
+
+        .et-overlay-router-outlet-page {
+          &.et-animation-enter-from {
+            filter: brightness(var(--_et-overlay-router-out-page-brightness));
+          }
+          &.et-animation-leave-to {
+            filter: brightness(1);
+          }
+          &.et-animation-enter-active {
+            z-index: 0;
+          }
+
+          &.et-animation-leave-active {
+            z-index: 1;
+          }
+        }
+      }
+
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          transform: var(--_et-overlay-router-transform-from);
+        }
+
+        &.et-animation-leave-to {
+          filter: brightness(var(--_et-overlay-router-out-page-brightness));
+          transform: var(--_et-overlay-router-transform-to);
+        }
+
+        &.et-animation-enter-active {
+          z-index: 1;
+        }
+
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition:
+            transform 225ms var(--_et-overlay-router-transition-easing),
+            filter 225ms var(--_et-overlay-router-transition-easing);
+        }
+      }
+    }
+
+    &.et-overlay-router-outlet-transition--vertical {
+      --_et-overlay-router-transform-from: translateY(20%);
+      --_et-overlay-router-transform-to: translateY(-20%);
+      --_et-overlay-router-out-page-brightness: 0.8;
+
+      &.et-overlay-router-outlet-nav-dir--backward {
+        --_et-overlay-router-transform-from: translateY(-20%);
+        --_et-overlay-router-transform-to: translateY(20%);
+
+        .et-overlay-router-outlet-page {
+          &.et-animation-enter-from {
+            filter: brightness(var(--_et-overlay-router-out-page-brightness));
+          }
+          &.et-animation-leave-to {
+            filter: brightness(1);
+          }
+          &.et-animation-enter-active {
+            z-index: 0;
+          }
+
+          &.et-animation-leave-active {
+            z-index: 1;
+          }
+        }
+      }
+
+      .et-overlay-router-outlet-page {
+        &.et-animation-enter-from {
+          transform: var(--_et-overlay-router-transform-from);
+          opacity: 0;
+        }
+
+        &.et-animation-leave-to {
+          filter: brightness(var(--_et-overlay-router-out-page-brightness));
+          transform: var(--_et-overlay-router-transform-to);
+          opacity: 0;
+        }
+
+        &.et-animation-enter-active {
+          z-index: 1;
+        }
+
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition:
+            transform 225ms var(--_et-overlay-router-transition-easing),
+            filter 225ms var(--_et-overlay-router-transition-easing),
+            opacity 225ms var(--_et-overlay-router-transition-easing);
+        }
+      }
+    }
+  }
+
+  .et-overlay-router-outlet {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    block-size: 100%;
+    overflow: hidden;
+  }
+
+  .et-overlay-router-outlet-page {
+    grid-area: 1 / 1 / 2 / 2;
+    pointer-events: none;
+    overflow: hidden auto;
+    outline: none;
+
+    &:not(:empty) {
+      background-color: var(
+        --et-overlay-router-outlet-page-background,
+        var(--_et-overlay-router-outlet-page-background, transparent)
+      );
+    }
+
+    > * {
+      pointer-events: auto;
+    }
+
+    &.et-overlay-router-outlet-page--active:not(:empty) {
+      pointer-events: auto;
+    }
+
+    > .et-overlay-main {
+      block-size: 100%;
+    }
+  }
+
+  .et-overlay-router-outlet-disabled-page {
+    position: relative;
+  }
+}

package/src/lib/overlay/routing/overlay-shared-route-template-outlet.component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .et-overlay-shared-route-template-outlet-host {
+    display: contents;
+  }
+}

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

@@ -0,0 +1,16 @@
+@layer components {
+  .et-overlay-sidebar-host {
+    display: none;
+  }
+
+  .et-overlay-sidebar-host.et-overlay-sidebar--visible {
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--et-overlay-sidebar-inline-size, 240px);
+    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

@@ -0,0 +1,51 @@
+@layer components {
+  .et-overlay.et-with-default-animation {
+    &.et-overlay--anchored-dialog {
+      /* composes the floating-ui anchor position, which the position strategy writes as custom properties */
+      &.et-animation-enter-from {
+        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) scale(0.85) !important;
+        opacity: 0;
+      }
+
+      &.et-animation-leave-to {
+        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) scale(0.7) !important;
+        opacity: 0;
+      }
+
+      &.et-animation-enter-active {
+        transition:
+          transform 300ms var(--ease-out-5),
+          opacity 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition:
+            transform 300ms var(--ease-spring-2),
+            opacity 300ms var(--ease-out-5);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition:
+          transform 150ms var(--ease-out-5),
+          opacity 150ms var(--ease-out-5);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-overlay--anchored-dialog {
+      &.et-animation-enter-active {
+        transition: opacity 300ms var(--ease-out-5);
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 150ms var(--ease-out-5);
+      }
+
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translate3d(var(--et-overlay-anchored-x, 0px), var(--et-overlay-anchored-y, 0px), 0) !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+@layer components {
+  .et-overlay.et-with-default-animation {
+    &.et-overlay--dialog {
+      &.et-animation-enter-from {
+        opacity: 0 !important;
+        transform: scale(0.85) !important;
+      }
+
+      &.et-animation-leave-to {
+        opacity: 0 !important;
+        transform: scale(0.7) !important;
+      }
+
+      &.et-animation-enter-active {
+        transition:
+          transform 300ms var(--ease-out-5),
+          opacity 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition:
+            transform 300ms var(--ease-spring-2),
+            opacity 300ms var(--ease-out-5);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition:
+          transform 150ms var(--ease-out-5),
+          opacity 150ms var(--ease-out-5);
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-overlay--dialog {
+      &.et-animation-enter-active {
+        transition: opacity 300ms var(--ease-out-5);
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 150ms var(--ease-out-5);
+      }
+
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: none !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+@layer components {
+  .et-overlay.et-with-default-animation {
+    &.et-overlay--full-screen-dialog {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translate(var(--origin-translate-x, 0), var(--origin-translate-y, 0))
+          scale(var(--origin-scale-x, 0), var(--origin-scale-y, 0)) !important;
+        border-radius: min(250px, calc(var(--origin-width, 0px) / 2), calc(var(--origin-height, 0px) / 2));
+        opacity: 0;
+      }
+
+      &.et-animation-enter-active {
+        transition:
+          transform 400ms var(--ease-out-5),
+          border-radius 400ms var(--ease-out-5),
+          opacity 150ms linear;
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition:
+            transform 400ms var(--ease-spring-1),
+            border-radius 400ms var(--ease-spring-1),
+            opacity 150ms linear;
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition:
+          transform 300ms var(--ease-in-out-5),
+          border-radius 300ms var(--ease-in-out-5),
+          opacity 150ms linear 100ms;
+      }
+
+      &.et-overlay--full-screen-dialog--reduced-animation {
+        &.et-animation-enter-active {
+          transition:
+            transform 300ms var(--ease-out-5),
+            border-radius 300ms var(--ease-out-5),
+            opacity 150ms linear;
+
+          @supports (transition-timing-function: linear(0, 1)) {
+            transition:
+              transform 300ms var(--ease-spring-2),
+              opacity 300ms var(--ease-out-5),
+              border-radius 300ms var(--ease-spring-2);
+          }
+        }
+
+        &.et-animation-leave-active {
+          transition:
+            transform 150ms var(--ease-in-5),
+            border-radius 150ms var(--ease-in-5),
+            opacity 150ms var(--ease-in-5);
+        }
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation.et-overlay--full-screen-dialog {
+      &.et-animation-enter-active {
+        transition: opacity 150ms linear;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 150ms linear 100ms;
+      }
+
+      &.et-overlay--full-screen-dialog--reduced-animation.et-animation-enter-active {
+        transition: opacity 150ms linear;
+      }
+
+      &.et-overlay--full-screen-dialog--reduced-animation.et-animation-leave-active {
+        transition: opacity 150ms var(--ease-in-5);
+      }
+
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: none !important;
+        border-radius: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+@layer components {
+  .et-overlay:has(> .et-overlay-arrow) {
+    overflow: visible;
+  }
+
+  .et-overlay-arrow {
+    /* The arrow is painted by rotating a square 45° (see `::before`), so what actually meets the pane
+     edge is that square's *diagonal* — the base of the triangle. The diagonal is the primary token
+     because it is also the size of this element's box, and floating-ui's arrow middleware measures the
+     box when it keeps `arrowPadding` clear of the pane's corners: sized to the square instead, every
+     consumer's padding would be ~3px optimistic and the base would ride into a rounded corner. The
+     square is derived from it (diagonal / √2), so the base and the arrow's height stay whole pixels. */
+    --_et-overlay-arrow-base: 20px;
+    --_et-overlay-arrow-size: calc(var(--_et-overlay-arrow-base) / 1.4142136);
+    /* Half the box hangs off the pane, so the rotated square's two widest corners land exactly on the
+     pane's edge — that is where its bordered sides have to end for the pane's own border line to carry
+     on from them. Any deeper and the sides stop short of that line, leaving an unbordered wedge at the
+     base of the arrow (which is what this used to do by adding the border width here). */
+    --_et-overlay-arrow-overlap: calc(var(--_et-overlay-arrow-base) / 2);
+    --_et-overlay-arrow-border-width: var(--_et-overlay-arrow-pane-border-width, 1px);
+    /* priority: explicit override → measured pane border → surface theme → static fallback,
+     so any anchored overlay (menu, tooltip, toggletip, or a bare arrow overlay) gets a
+     themed arrow border without repeating this per component */
+    --_et-overlay-arrow-border-color: var(
+      --et-overlay-arrow-border,
+      var(--_et-overlay-arrow-pane-border-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)))
+    );
+    /* Cut the arrow off at the *inner* edge of the pane's border: everything below the widest corners is
+     unbordered silhouette, and the only part of it worth keeping is the sliver that covers the pane's
+     border line where the arrow sits on it — without which that line draws straight through the base. */
+    --_et-overlay-arrow-clip: calc(var(--_et-overlay-arrow-base) / 2 - var(--_et-overlay-arrow-pane-border-width, 0px));
+
+    /* priority mirrors the border chain: explicit override → measured pane background →
+     surface theme → static fallback, so the arrow paints whatever the pane actually
+     renders (custom panelClass, themed pane) instead of re-deriving a possibly-divergent color */
+    --_et-overlay-arrow-fill: var(
+      --et-overlay-arrow-background,
+      var(--_et-overlay-arrow-pane-background, var(--et-surface-background-solid, rgb(32 32 32)))
+    );
+
+    position: absolute;
+    z-index: 1;
+    inline-size: var(--_et-overlay-arrow-base);
+    block-size: var(--_et-overlay-arrow-base);
+    transform: var(--et-floating-arrow-translate, translate3d(0, 0, 0));
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      /* the square that becomes the arrow, centered in the diagonal-sized box above — via auto margins
+       rather than a translate, so it stays centered in both writing directions */
+      position: absolute;
+      inset: 0;
+      margin: auto;
+      inline-size: var(--_et-overlay-arrow-size);
+      block-size: var(--_et-overlay-arrow-size);
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 0 solid var(--_et-overlay-arrow-border-color);
+      /* Never paint this box through its parent's own `background-color` plus a `visibility`
+       inversion: WebKit drops a visible `::before` whose parent is both `visibility: hidden`
+       and `clip-path`-clipped, which is every arrow here. */
+      background-color: var(--_et-overlay-arrow-fill);
+      box-shadow: var(--et-overlay-arrow-shadow, none);
+      transform: rotate(45deg);
+    }
+  }
+
+  [data-overlay-placement^='top'] > .et-overlay-arrow {
+    bottom: calc(var(--_et-overlay-arrow-overlap) * -1);
+    left: 0;
+    clip-path: inset(var(--_et-overlay-arrow-clip) -100% -100% -100%);
+
+    &::before {
+      border-right-width: var(--_et-overlay-arrow-border-width);
+      border-bottom-width: var(--_et-overlay-arrow-border-width);
+    }
+  }
+
+  [data-overlay-placement^='right'] > .et-overlay-arrow {
+    left: calc(var(--_et-overlay-arrow-overlap) * -1);
+    top: 0;
+    clip-path: inset(-100% var(--_et-overlay-arrow-clip) -100% -100%);
+
+    &::before {
+      border-bottom-width: var(--_et-overlay-arrow-border-width);
+      border-left-width: var(--_et-overlay-arrow-border-width);
+    }
+  }
+
+  [data-overlay-placement^='bottom'] > .et-overlay-arrow {
+    top: calc(var(--_et-overlay-arrow-overlap) * -1);
+    left: 0;
+    clip-path: inset(-100% -100% var(--_et-overlay-arrow-clip) -100%);
+
+    &::before {
+      border-top-width: var(--_et-overlay-arrow-border-width);
+      border-left-width: var(--_et-overlay-arrow-border-width);
+    }
+  }
+
+  [data-overlay-placement^='left'] > .et-overlay-arrow {
+    right: calc(var(--_et-overlay-arrow-overlap) * -1);
+    top: 0;
+    clip-path: inset(-100% -100% -100% var(--_et-overlay-arrow-clip));
+
+    &::before {
+      border-top-width: var(--_et-overlay-arrow-border-width);
+      border-right-width: var(--_et-overlay-arrow-border-width);
+    }
+  }
+}