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

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

@@ -0,0 +1,179 @@
+@layer components {
+  /* Registered so keyframes interpolate it; inherits so slide content can read it. */
+  @property --et-carousel-slide-progress {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --et-carousel-wipe-shift {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 125px;
+  }
+
+  @property --et-carousel-wipe-dim {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
+  @property --et-carousel-wipe-dim-color {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: #000;
+  }
+
+  /* Each effect exists twice: composited keyframes on the scroll-driven view timeline, and a `calc()` fallback
+     over the inherited progress property for the JS driver (no scroll timeline, e.g. Firefox). Animating the
+     inherited property restyles each slide's subtree every frame, so the composited path must not read it. */
+
+  @keyframes et-carousel-slide-progress {
+    from {
+      --et-carousel-slide-progress: -1;
+    }
+
+    to {
+      --et-carousel-slide-progress: 1;
+    }
+  }
+
+  /* `dim` — the slides either side of the current one recede, so the carousel reads as a focused row rather
+     than a strip that happens to scroll. The endpoints are the `calc()` rules' values at progress ±1
+     (`1 - 0.65` and `1 - 0.08`) and the midpoint is centred, so the two drivers are the same effect. */
+  @keyframes et-carousel-dim {
+    from,
+    to {
+      opacity: 0.35;
+      scale: 0.92;
+    }
+
+    50% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes et-carousel-wipe-content {
+    from {
+      translate: calc((var(--et-carousel-wipe-shift) - 50cqw - 50%));
+    }
+
+    to {
+      translate: calc(50cqw + 50% - var(--et-carousel-wipe-shift));
+    }
+  }
+
+  /* A veil's opacity instead of `filter: brightness()`, which repaints the whole slide every frame. */
+  @keyframes et-carousel-wipe-veil {
+    from,
+    to {
+      opacity: calc(1 - var(--et-carousel-wipe-dim));
+    }
+
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* ─── What `wipe` needs whichever driver is running ───────────────────────────────────────────────────
+
+     Ahead of the drivers on purpose: everything here is `:where()`-flattened, so the two blocks below can only
+     override the veil's resting `opacity` by coming after it.
+
+     Gated on one slide per view, because that is the only layout the effect means anything in: with the
+     content pinned to the track, a slide whose box is only partly on screen at rest would have its content
+     sitting outside that box and would show as blank. A peeking layout wants `dim`. */
+  :where([data-transition-driver='scroll-timeline'], [data-transition-driver='js']):where([data-transition='wipe'])
+    :where([item-size='full']) {
+    /* `50cqw` in the content's displacement is half of *this*. */
+    container-type: inline-size;
+
+    & .et-carousel-item {
+      position: relative;
+      overflow: clip;
+      contain: paint;
+    }
+
+    & .et-carousel-item::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--et-carousel-wipe-dim-color);
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  /* ─── Driver 1 of 2: scroll-driven, composited ────────────────────────────────────────────────────────
+
+     No JavaScript at all. Each slide names a view progress timeline, and the effects animate along it — so
+     they follow a finger through a drag rather than stepping when some "active" flag flips. `cover 0%` is the
+     moment the slide's leading edge reaches the far side of the scrollport and `cover 100%` the moment its
+     trailing edge leaves the near side, which puts the midpoint exactly at centred.
+
+     The timeline is *named* rather than each element using its own `view()` because `wipe` animates two
+     descendants of the slide, and one of them is the element being translated — its own view timeline would
+     then depend on the transform the timeline is driving.
+
+     `etCarousel` has already feature-detected this and only asks for the driver where it exists; the
+     `@supports` is here so that forcing `transitionDriver="scroll-timeline"` on a browser without it degrades
+     to a plain scroll rather than running the keyframes on the document timeline and flashing every slide
+     once. */
+  @supports (animation-timeline: view(inline)) {
+    :where([data-transition-driver='scroll-timeline']) {
+      & .et-carousel-item {
+        view-timeline-name: --et-carousel-slide;
+        view-timeline-axis: inline;
+      }
+
+      & .et-carousel-item,
+      & .et-carousel-item::after,
+      & .et-carousel-slide-content {
+        animation-timeline: --et-carousel-slide;
+        animation-range: cover 0% cover 100%;
+        animation-timing-function: linear;
+        animation-fill-mode: both;
+      }
+
+      &:where([data-transition='custom']) .et-carousel-item {
+        animation-name: et-carousel-slide-progress;
+      }
+
+      &:where([data-transition='dim']) .et-carousel-item {
+        animation-name: et-carousel-dim;
+      }
+
+      &:where([data-transition='wipe']) :where([item-size='full']) {
+        & .et-carousel-item::after {
+          animation-name: et-carousel-wipe-veil;
+        }
+
+        & .et-carousel-slide-content {
+          animation-name: et-carousel-wipe-content;
+        }
+      }
+    }
+  }
+
+  :where([data-transition-driver='js']) {
+    & .et-carousel-item {
+      --_et-carousel-slide-distance: abs(var(--et-carousel-slide-progress));
+    }
+
+    &:where([data-transition='dim']) .et-carousel-item {
+      opacity: calc(1 - 0.65 * var(--_et-carousel-slide-distance));
+      scale: calc(1 - 0.08 * var(--_et-carousel-slide-distance));
+    }
+
+    &:where([data-transition='wipe']) :where([item-size='full']) {
+      & .et-carousel-item::after {
+        opacity: calc((1 - var(--et-carousel-wipe-dim)) * var(--_et-carousel-slide-distance));
+      }
+
+      & .et-carousel-slide-content {
+        translate: calc(var(--et-carousel-slide-progress) * (50cqw + 50% - var(--et-carousel-wipe-shift)));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,142 @@
+@layer components {
+  @property --et-carousel-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-carousel-dot-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  /* The dot's tap target, kept at a comfortable size while the dot itself stays small. */
+  @property --et-carousel-dot-target-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  /* How far the track's edges fade out where slides are cut off by them. Set it to `0px` for a hard cut. */
+  @property --et-carousel-edge-fade {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  .et-carousel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-carousel-gap);
+  }
+
+  .et-carousel-track {
+    display: block;
+  }
+
+  .et-carousel:where([data-slide-align='center']) .et-carousel-track:not([item-size='full']) {
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      black var(--et-carousel-edge-fade),
+      black calc(100% - var(--et-carousel-edge-fade)),
+      transparent 100%
+    );
+
+    &:where([direction='vertical']) {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent 0,
+        black var(--et-carousel-edge-fade),
+        black calc(100% - var(--et-carousel-edge-fade)),
+        transparent 100%
+      );
+    }
+  }
+
+  .et-carousel-slide-content {
+    display: block;
+    block-size: 100%;
+  }
+
+  .et-carousel-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+  }
+
+  .et-carousel-control {
+    &:where([aria-disabled='true']) {
+      opacity: 0.4;
+      cursor: default;
+    }
+  }
+
+  .et-carousel-control-icon {
+    inline-size: 14px;
+    block-size: 14px;
+
+    &:where(.et-carousel-control-icon--previous) {
+      rotate: -90deg;
+    }
+
+    &:where(.et-carousel-control-icon--next) {
+      rotate: 90deg;
+    }
+  }
+
+  .et-carousel-dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .et-carousel-dot {
+    display: grid;
+    place-items: center;
+    inline-size: var(--et-carousel-dot-target-size);
+    block-size: var(--et-carousel-dot-target-size);
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    &::before {
+      content: '';
+      inline-size: var(--et-carousel-dot-size);
+      block-size: var(--et-carousel-dot-size);
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 35%, transparent);
+    }
+
+    &:hover::before {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 55%, transparent);
+    }
+
+    &:where([data-active])::before {
+      background: var(--et-theme-color-primary-solid, currentColor);
+    }
+
+    /* Spelled out because the plain `:hover` above outranks a `:where()`-flattened selector, so without this
+       the accent dot went grey under the pointer — the one dot that must never look unselected. */
+    &:where([data-active]):hover::before {
+      background: var(--et-theme-color-primary-solid, currentColor);
+    }
+  }
+
+  .et-carousel:where(.et-carousel--can-animate) {
+    & .et-carousel-dot::before {
+      transition:
+        background-color 160ms var(--ease-3, ease-out),
+        scale 220ms var(--ease-3, ease-out);
+    }
+
+    & .et-carousel-dot {
+      transition: outline-color 160ms var(--ease-3, ease-out);
+    }
+  }
+}

package/src/lib/chart/bar-chart.component.css

@@ -0,0 +1,176 @@
+@layer components {
+  @property --et-bar-chart-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-bar-chart-axis-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-bar-chart-enter-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 400ms;
+  }
+
+  .et-bar-chart {
+    display: block;
+    position: relative;
+    font-size: var(--et-bar-chart-font-size);
+    line-height: 1.4;
+    color: var(--et-surface-color-muted-solid, currentColor);
+
+    .et-bar-chart-legend {
+      margin-block-end: calc(var(--et-bar-chart-axis-gap) * 1.5);
+    }
+
+    :where([etBarChartTitle]) {
+      margin-block: 0 calc(var(--et-bar-chart-axis-gap) * 1.5);
+      font-size: 1.25em;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--et-surface-color-solid, currentColor);
+    }
+
+    :where([etBarChartNote]) {
+      margin-block: calc(var(--et-bar-chart-axis-gap) * 1.5) 0;
+    }
+  }
+
+  .et-bar-chart-figure {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas:
+      'value-axis plot'
+      '. category-axis';
+    column-gap: var(--et-bar-chart-axis-gap);
+    row-gap: var(--et-bar-chart-axis-gap);
+    padding-block-start: 0.7em;
+
+    .et-bar-chart-value-axis {
+      grid-area: value-axis;
+    }
+
+    .et-bar-chart-category-axis {
+      grid-area: category-axis;
+    }
+
+    .et-bar-chart-plot {
+      grid-area: plot;
+      min-inline-size: 0;
+
+      .et-bar-chart-svg {
+        display: block;
+        overflow: visible;
+      }
+    }
+
+    .et-bar-chart-empty {
+      grid-area: plot;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: var(--et-bar-chart-axis-gap);
+      text-align: center;
+    }
+
+    &:where([data-orientation='horizontal']) {
+      grid-template-columns: fit-content(40%) minmax(0, 1fr);
+      grid-template-areas:
+        'category-axis plot'
+        '. value-axis';
+      padding-block-start: 0;
+      padding-inline-end: 1.5em;
+    }
+  }
+
+  .et-bar-chart-bar {
+    --_et-bar-chart-color: color-mix(
+      in oklab,
+      var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+      var(--et-surface-background-solid, transparent)
+    );
+    --_et-bar-chart-column-tint: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 6%, transparent);
+    --_et-bar-chart-mark-tint: color-mix(
+      in srgb,
+      var(--_et-bar-chart-color) 85%,
+      var(--et-surface-background-solid, transparent)
+    );
+
+    outline: none;
+
+    .et-bar-chart-bar-target {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 2px;
+    }
+
+    .et-bar-chart-bar-anchor {
+      fill: none;
+      pointer-events: none;
+    }
+
+    .et-bar-chart-bar-mark {
+      fill: var(--_et-bar-chart-color);
+      transform-box: view-box;
+      transform-origin: 0 var(--_et-bar-chart-baseline);
+      animation: et-bar-chart-bar-enter var(--et-bar-chart-enter-duration) cubic-bezier(0.2, 0, 0, 1) backwards;
+    }
+
+    &:focus-visible {
+      .et-bar-chart-bar-target {
+        fill: var(--_et-bar-chart-column-tint);
+      }
+
+      .et-bar-chart-bar-mark {
+        fill: var(--_et-bar-chart-mark-tint);
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        .et-bar-chart-bar-target {
+          fill: var(--_et-bar-chart-column-tint);
+        }
+
+        .et-bar-chart-bar-mark {
+          fill: var(--_et-bar-chart-mark-tint);
+        }
+      }
+    }
+
+    &:focus-visible .et-bar-chart-bar-target {
+      stroke: var(--_et-bar-chart-color);
+    }
+  }
+
+  .et-bar-chart-figure:where([data-orientation='horizontal']) .et-bar-chart-bar-mark {
+    transform-origin: var(--_et-bar-chart-baseline) 0;
+    animation-name: et-bar-chart-bar-enter-horizontal;
+  }
+
+  @keyframes et-bar-chart-bar-enter {
+    from {
+      transform: scaleY(0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-bar-chart-bar-enter-horizontal {
+    from {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-bar-chart-bar .et-bar-chart-bar-mark {
+      animation: none;
+    }
+  }
+}

package/src/lib/chart/chart-axis.component.css

@@ -0,0 +1,40 @@
+@layer components {
+  .et-chart-axis {
+    display: grid;
+    min-inline-size: 0;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    .et-chart-axis-label {
+      grid-area: 1 / 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &:where([data-orientation='horizontal']) {
+      justify-items: start;
+
+      .et-chart-axis-label {
+        translate: calc(var(--_et-chart-axis-position) - 50%) 0;
+      }
+
+      .et-chart-axis-label:where([data-extent]) {
+        box-sizing: border-box;
+        inline-size: var(--_et-chart-axis-extent);
+        padding-inline: 2px;
+        text-align: center;
+        translate: calc(var(--_et-chart-axis-position) - var(--_et-chart-axis-extent) / 2) 0;
+      }
+    }
+
+    &:where([data-orientation='vertical']) {
+      justify-items: end;
+      align-items: start;
+
+      .et-chart-axis-label {
+        max-inline-size: 100%;
+        translate: 0 calc(var(--_et-chart-axis-position) - 50%);
+      }
+    }
+  }
+}

package/src/lib/chart/chart-grid.component.css

@@ -0,0 +1,6 @@
+@layer components {
+  .et-chart-grid-line {
+    stroke: var(--et-surface-border-solid, rgb(127 127 127 / 0.25));
+    stroke-width: 1px;
+  }
+}

package/src/lib/chart/chart-legend.component.css

@@ -0,0 +1,46 @@
+@layer components {
+  .et-chart-legend {
+    display: block;
+
+    .et-chart-legend-list {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 16px;
+      row-gap: 4px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .et-chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      min-inline-size: 0;
+    }
+
+    .et-chart-legend-swatch {
+      flex: none;
+      inline-size: 10px;
+      block-size: 10px;
+      border-radius: 2px;
+      background: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+    }
+
+    .et-chart-legend-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:where([data-mark='line']) .et-chart-legend-swatch {
+      inline-size: 12px;
+      block-size: 2px;
+      border-radius: 1px;
+    }
+  }
+}

package/src/lib/chart/chart-tooltip.component.css

@@ -0,0 +1,34 @@
+@layer components {
+  .et-chart-tooltip {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+
+    .et-chart-tooltip-key {
+      flex: none;
+      align-self: center;
+      inline-size: 12px;
+      block-size: 2px;
+      border-radius: 1px;
+      background: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+    }
+
+    .et-chart-tooltip-value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .et-chart-tooltip-series,
+    .et-chart-tooltip-label {
+      opacity: 0.75;
+    }
+
+    .et-chart-tooltip-series + .et-chart-tooltip-label::before {
+      content: '·' / '';
+      margin-inline-end: 6px;
+    }
+  }
+}

package/src/lib/chart/line-chart-tooltip.component.css

@@ -0,0 +1,51 @@
+@layer components {
+  .et-line-chart-tooltip {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .et-line-chart-tooltip-label {
+      opacity: 0.75;
+    }
+
+    .et-line-chart-tooltip-list {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      column-gap: 6px;
+      row-gap: 2px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .et-line-chart-tooltip-row {
+      display: grid;
+      grid-column: 1 / -1;
+      grid-template-columns: subgrid;
+      align-items: baseline;
+    }
+
+    .et-line-chart-tooltip-key {
+      grid-column: 1;
+      align-self: center;
+      inline-size: 12px;
+      block-size: 2px;
+      border-radius: 1px;
+      background: color-mix(
+        in oklab,
+        var(--et-theme-color-primary-solid, currentColor) var(--_et-chart-accent-mix, 100%),
+        var(--et-surface-background-solid, transparent)
+      );
+    }
+
+    .et-line-chart-tooltip-series {
+      grid-column: 2;
+    }
+
+    .et-line-chart-tooltip-value {
+      grid-column: 3;
+      font-variant-numeric: tabular-nums;
+      text-align: end;
+    }
+  }
+}