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

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

@@ -0,0 +1,63 @@
+@layer components {
+  .et-overlay-origin-clone {
+    position: fixed;
+    margin: 0;
+    z-index: 999999;
+    pointer-events: none;
+    transform-origin: center center;
+
+    &.et-animation-enter-from {
+      transform: translate(var(--enter-from-translate-x, 0), var(--enter-from-translate-y, 0))
+        scale(var(--enter-from-scale-x, 1), var(--enter-from-scale-y, 1));
+      opacity: 1;
+    }
+
+    &.et-animation-enter-active {
+      transition:
+        transform 400ms var(--ease-out-5),
+        opacity 100ms linear;
+
+      @supports (transition-timing-function: linear(0, 1)) {
+        transition:
+          transform 400ms var(--ease-spring-1),
+          opacity 100ms linear;
+      }
+    }
+
+    &.et-animation-enter-to,
+    &.et-animation-enter-done {
+      transform: translate(var(--enter-to-translate-x, 0), var(--enter-to-translate-y, 0))
+        scale(var(--enter-to-scale-x, 1), var(--enter-to-scale-y, 1));
+      opacity: 0;
+    }
+
+    &.et-animation-leave-from {
+      transform: translate(var(--leave-from-translate-x, 0), var(--leave-from-translate-y, 0))
+        scale(var(--leave-from-scale-x, 1), var(--leave-from-scale-y, 1));
+      opacity: 0;
+    }
+
+    &.et-animation-leave-active {
+      transition:
+        transform 300ms var(--ease-in-out-5),
+        opacity 125ms 175ms linear;
+    }
+
+    &.et-animation-leave-to,
+    &.et-animation-leave-done {
+      transform: translate(var(--leave-to-translate-x, 0), var(--leave-to-translate-y, 0))
+        scale(var(--leave-to-scale-x, 1), var(--leave-to-scale-y, 1));
+      opacity: 1;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &.et-animation-enter-active {
+        transition: opacity 100ms linear;
+      }
+
+      &.et-animation-leave-active {
+        transition: opacity 125ms 175ms linear;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+@layer components {
+  .et-overlay {
+    --_et-overlay-drag-handle-inline-size: 32px;
+    --_et-overlay-drag-handle-block-size: 4px;
+    --_et-overlay-drag-handle-block-margin: 22px;
+    --_et-overlay-drag-handle-color: var(--et-surface-border-solid, #565656);
+    --_et-overlay-drag-handle-radius: 5px;
+  }
+
+  .et-overlay.et-with-default-animation {
+    /* Color of the overshoot filler painted past a sheet's docked edge (see the per-direction
+     box-shadows below). Sourced from the surface token — which the container always forces onto
+     the host by elevation — because most sheet content (e.g. a date picker) paints its background
+     on a nested element, leaving the host itself transparent, so `inherit` would paint nothing.
+     Falls back to transparent (no filler) for overlays opened without surface themes. */
+    --_et-overlay-overshoot-fill: var(--et-surface-background-solid, transparent);
+
+    &.et-overlay--bottom-sheet {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translateY(100%) !important;
+      }
+
+      &.et-animation-enter-active {
+        transition: transform 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition: transform 300ms var(--ease-spring-1);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition: transform 150ms var(--ease-in-5);
+      }
+
+      /* Hide the spring overshoot: the sheet momentarily springs past its docked edge, which
+       would reveal the page behind it. A solid, zero-blur offset box-shadow paints a 50px block
+       just past that edge in the surface color, filling the gap. A shadow (not a pseudo-element)
+       is used deliberately: sheets keep `overflow: hidden` to clip their rounded corners, and an
+       element's own box-shadow is not clipped by its own overflow — a child/`::after` would be. */
+      box-shadow: 0 50px 0 0 var(--_et-overlay-overshoot-fill);
+    }
+
+    &.et-overlay--top-sheet {
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translateY(-100%) !important;
+      }
+
+      &.et-animation-enter-active {
+        transition: transform 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition: transform 300ms var(--ease-spring-1);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition: transform 150ms var(--ease-in-5);
+      }
+
+      box-shadow: 0 -50px 0 0 var(--_et-overlay-overshoot-fill);
+    }
+
+    /* Side sheets dock to a *logical* inline edge (the position strategy uses `start`/`end`), but
+     `translateX` and the overshoot shadow are physical — so the slide axis is driven by a sign that
+     flips with the writing direction. `-1` slides toward the physical left, `1` toward the right.
+     This has to agree with the drag-to-dismiss gesture, which resolves its logical direction the
+     same way (see `resolvePhysicalDirection` in `overlay-drag-to-dismiss.ts`). */
+    &.et-overlay--left-sheet {
+      --_et-overlay-sheet-slide-sign: -1;
+
+      &:dir(rtl) {
+        --_et-overlay-sheet-slide-sign: 1;
+      }
+
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translateX(calc(100% * var(--_et-overlay-sheet-slide-sign))) !important;
+      }
+
+      &.et-animation-enter-active {
+        transition: transform 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition: transform 300ms var(--ease-spring-1);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition: transform 150ms var(--ease-in-5);
+      }
+
+      box-shadow: calc(50px * var(--_et-overlay-sheet-slide-sign)) 0 0 0 var(--_et-overlay-overshoot-fill);
+    }
+
+    &.et-overlay--right-sheet {
+      --_et-overlay-sheet-slide-sign: 1;
+
+      &:dir(rtl) {
+        --_et-overlay-sheet-slide-sign: -1;
+      }
+
+      &.et-animation-enter-from,
+      &.et-animation-leave-to {
+        transform: translateX(calc(100% * var(--_et-overlay-sheet-slide-sign))) !important;
+      }
+
+      &.et-animation-enter-active {
+        transition: transform 300ms var(--ease-out-5);
+
+        @supports (transition-timing-function: linear(0, 1)) {
+          transition: transform 300ms var(--ease-spring-1);
+        }
+      }
+
+      &.et-animation-leave-active {
+        transition: transform 150ms var(--ease-in-5);
+      }
+
+      box-shadow: calc(50px * var(--_et-overlay-sheet-slide-sign)) 0 0 0 var(--_et-overlay-overshoot-fill);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-overlay.et-with-default-animation {
+      &.et-overlay--bottom-sheet,
+      &.et-overlay--top-sheet,
+      &.et-overlay--left-sheet,
+      &.et-overlay--right-sheet {
+        &.et-animation-enter-active,
+        &.et-animation-leave-active {
+          transition-duration: 0ms;
+        }
+
+        &.et-animation-enter-from,
+        &.et-animation-leave-to {
+          transform: none !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+@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

@@ -0,0 +1,192 @@
+@layer components {
+  @property --et-pagination-item-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-pagination-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-pagination-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  :where(.et-pagination-host) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--et-pagination-gap);
+  }
+
+  /* The fit measures the host. Sized to its trimmed content, a flex item would never see room return. */
+  :where(.et-pagination-host[data-fit-width]) {
+    flex-grow: 1;
+  }
+
+  /* Touch gets the comfortable 44px target. `:where()` holds this at zero specificity so the `sm` and
+     compact rules below - which floor the size on purpose - still win over it. */
+  @media (pointer: coarse) {
+    :where(.et-pagination-host) {
+      --et-pagination-item-size: 44px;
+    }
+
+    /* Without this stacking context the hit areas below (z-index -1) would drop under the host's
+       own box and catch nothing; inside it they sit under every visible item, so they never take a
+       tap from a neighbour. */
+    .et-pagination-host {
+      isolation: isolate;
+    }
+
+    .et-pagination-host .et-pagination-button::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      translate: -50% -50%;
+    }
+  }
+
+  .et-pagination-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--et-pagination-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-pagination-item {
+    display: flex;
+  }
+
+  /* Square, compact cells. Scoped through the host so these beat the button's own
+     `.et-button:where([data-size='sm'])` size rule (two classes vs one) — setting
+     `--et-button-padding` from a single-class selector loses to it, which is what used to leave the
+     chevrons 40×34 instead of square. */
+  .et-pagination-host .et-pagination-button {
+    --et-button-padding: 0;
+    --et-button-border-radius: var(--et-pagination-radius);
+
+    /* Page numbers grow past the square only when the digits demand it (100+). */
+    padding-inline: 4px;
+    min-inline-size: var(--et-pagination-item-size);
+    min-block-size: var(--et-pagination-item-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Icon-only controls (first/previous/next/last) hold an exact square: there is no text to grow them,
+     so a fixed inline size keeps every chevron cell identical to the item size. */
+  .et-pagination-host .et-pagination-button--control {
+    padding-inline: 0;
+    inline-size: var(--et-pagination-item-size);
+  }
+
+  .et-pagination-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--et-pagination-item-size);
+    block-size: var(--et-pagination-item-size);
+    color: var(--et-surface-color-muted-solid, CanvasText);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .et-pagination-range {
+    margin: 0;
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+    color: var(--et-surface-color-muted-solid, CanvasText);
+  }
+
+  /* Both readouts stack their live text over an invisible copy of the widest string they can ever show
+     (see `widestRangeStatus`), in a single grid cell — so the cell is sized by the wider of the two and
+     the readout's box stays put as the page changes, instead of nudging whatever sits beside it. */
+  .et-pagination-range,
+  .et-pagination-status {
+    display: inline-grid;
+    grid-template-columns: auto;
+    justify-items: center;
+  }
+
+  .et-pagination-readout-sizer,
+  .et-pagination-readout-text {
+    grid-area: 1 / 1;
+    white-space: nowrap;
+  }
+
+  .et-pagination-readout-sizer {
+    visibility: hidden;
+  }
+
+  .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;
+  }
+
+  /* Compact density: smaller cells with tighter padding, so the paginator sits closer to table-row
+     height. Deliberately below the comfortable touch size — opt in only where space is tight. */
+  .et-pagination-host:where([data-size='sm']) {
+    --et-pagination-item-size: 28px;
+    --et-pagination-gap: 4px;
+  }
+
+  /* Only the block padding and text size change — inline padding and the square geometry stay with the
+     base rule above, so `sm` cells are smaller squares rather than a different shape. */
+  .et-pagination-host:where([data-size='sm']) .et-pagination-button {
+    --et-button-padding: 2px 0;
+
+    font-size: 13px;
+  }
+
+  /* Compact pager: when the paginator's own width can't hold a comfortable numbered window, it renders
+     just previous/next around a "page X of Y" readout (see `compact` in the component). Driven by the
+     measured container width — not a viewport media query — so it collapses per instance, wherever it
+     sits. The remaining controls grow into roomy touch targets since there are only two of them. */
+  .et-pagination-host:where([data-compact]) {
+    /* Modest chevrons that sit level with a small page-size select — floored so touch stays usable
+       without the bulky whitespace of a full 44px target. */
+    --et-pagination-item-size: 34px;
+    --et-pagination-gap: 2px;
+  }
+
+  .et-pagination-status {
+    align-items: center;
+    min-block-size: var(--et-pagination-item-size);
+    padding-inline: 6px;
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    color: var(--et-surface-color-muted-solid, CanvasText);
+  }
+}

package/src/lib/picture/picture.component.css

@@ -0,0 +1,66 @@
+@layer components {
+  .et-picture {
+    display: block;
+
+    .et-picture-figure {
+      /* A <figure> carries a UA margin, which is never what a layout component wants. */
+      margin: 0;
+      display: block;
+    }
+
+    .et-picture-picture {
+      display: block;
+      /* The containing block for the placeholder / error slots. */
+      position: relative;
+    }
+
+    .et-picture-img {
+      display: block;
+      max-inline-size: 100%;
+      /* Given `width`/`height` for CLS, the intrinsic ratio has to be kept once CSS resizes the box. */
+      block-size: auto;
+    }
+
+    &:where([data-aspect-ratio]) {
+      .et-picture-picture {
+        aspect-ratio: var(--_et-picture-aspect-ratio);
+      }
+
+      .et-picture-img {
+        inline-size: 100%;
+      }
+    }
+
+    .et-picture-slot {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      /* Nothing is painted here by the component — the slot's content brings its own look. */
+      overflow: hidden;
+    }
+
+    /* With `fit`, the host is the box: every wrapper stretches to it so the img has something definite to fit
+       into, and the img fills it instead of sizing itself. */
+    &:where([data-fit]) {
+      .et-picture-figure,
+      .et-picture-picture {
+        inline-size: 100%;
+        block-size: 100%;
+      }
+
+      .et-picture-img {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: var(--_et-picture-fit);
+      }
+    }
+
+    /* A broken image still occupies its box behind the error slot, showing the UA's broken icon through it.
+       Only hidden when there is a slot to replace it: without one, the browser's own broken-image rendering
+       (which shows the alt text) is more useful than an empty box. */
+    &:where([data-state='error']):has(.et-picture-slot) .et-picture-img {
+      visibility: hidden;
+    }
+  }
+}