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

package/src/lib/calendar/calendar.component.css

@@ -0,0 +1,366 @@
+@layer components {
+  @property --et-calendar-cell-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  .et-calendar {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 4px;
+    -webkit-user-select: none;
+    user-select: none;
+
+    .et-calendar-header {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .et-calendar-header-label {
+      position: relative;
+      display: inline-flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      padding: 4px 22px;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      font: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--et-surface-color-solid);
+      cursor: pointer;
+      transition: background-color 140ms var(--ease-3, ease-out);
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+
+      @media (hover: hover) {
+        &:hover {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+        }
+      }
+
+      &:active {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid) 22%, transparent);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--et-theme-color-primary-solid);
+        outline-offset: 1px;
+      }
+    }
+
+    .et-calendar-header-label-text {
+      position: relative;
+      display: inline-grid;
+      grid-template-areas: 'label';
+      justify-items: center;
+      white-space: nowrap;
+    }
+
+    .et-calendar-header-label-value {
+      grid-area: label;
+
+      &:where([data-nav='forward']) {
+        animation: et-calendar-label-in-forward 200ms ease;
+      }
+
+      &:where([data-nav='backward']) {
+        animation: et-calendar-label-in-backward 200ms ease;
+      }
+
+      &:where([data-nav='zoomIn'], [data-nav='zoomOut']) {
+        animation: et-calendar-label-in-zoom 160ms ease;
+      }
+    }
+
+    .et-calendar-header-label-value--leave {
+      position: absolute;
+      inset-block: 0;
+      animation: et-calendar-label-out 140ms ease forwards;
+    }
+
+    .et-calendar-header-label-icon {
+      position: absolute;
+      inset-inline-end: 6px;
+      inset-block-start: 50%;
+      inline-size: 12px;
+      block-size: 12px;
+      rotate: 180deg;
+      translate: 0 -50%;
+      transition: rotate 200ms var(--ease-3, ease-out);
+      opacity: 0.7;
+    }
+
+    &:where([data-view='multiYear']) .et-calendar-header-label-icon {
+      rotate: 0deg;
+    }
+
+    .et-calendar-nav-button--previous .et-icon {
+      rotate: -90deg;
+    }
+
+    .et-calendar-nav-button--next .et-icon {
+      rotate: 90deg;
+    }
+
+    .et-calendar-grid {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .et-calendar-weeks-viewport {
+      position: relative;
+      display: grid;
+      flex: 1;
+      grid-template-areas: 'weeks';
+      align-content: start;
+      justify-items: center;
+      min-inline-size: calc(
+        (var(--et-calendar-cell-size) * 7 + var(--_et-calendar-week-column)) * var(--_et-calendar-months, 1) + 16px *
+          (var(--_et-calendar-months, 1) - 1)
+      );
+    }
+
+    .et-calendar-weeks {
+      grid-area: weeks;
+    }
+
+    --_et-calendar-week-column: 0px;
+
+    .et-calendar-weekdays,
+    .et-calendar-week {
+      display: grid;
+      grid-template-columns: repeat(7, var(--et-calendar-cell-size));
+    }
+
+    .et-calendar-months {
+      display: flex;
+      gap: 16px;
+    }
+
+    .et-calendar-month-label {
+      padding-block-end: 4px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--et-surface-color-solid);
+    }
+
+    .et-calendar-cell--empty {
+      pointer-events: none;
+    }
+
+    .et-calendar-weeks {
+      &:where([data-nav='forward']) {
+        animation: et-calendar-weeks-in-forward 200ms ease;
+      }
+
+      &:where([data-nav='backward']) {
+        animation: et-calendar-weeks-in-backward 200ms ease;
+      }
+
+      &:where([data-nav='zoomIn'], [data-nav='zoomOut']) {
+        animation: et-calendar-weeks-in-zoom 160ms ease;
+      }
+    }
+
+    .et-calendar-weeks--leave {
+      animation: et-calendar-weeks-out 140ms ease forwards;
+      pointer-events: none;
+    }
+
+    .et-calendar-weekday {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      block-size: 32px;
+      font-size: 12px;
+      color: var(--et-surface-color-muted-solid);
+    }
+
+    .et-calendar-cell {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      block-size: var(--et-calendar-cell-size);
+      padding: 0;
+      border: none;
+      background: transparent;
+      font: inherit;
+      font-size: 13px;
+      color: var(--et-surface-color-solid);
+      cursor: pointer;
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: 4px;
+        inset-inline: 0;
+        display: none;
+        background: color-mix(in srgb, var(--et-theme-color-primary-solid) 12%, transparent);
+      }
+
+      &:where([data-band])::before {
+        display: block;
+      }
+
+      &:where([data-band='start'])::before {
+        inset-inline-start: 50%;
+      }
+
+      &:where([data-band='end'])::before {
+        inset-inline-end: 50%;
+      }
+
+      .et-calendar-cell-content {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        inline-size: calc(var(--et-calendar-cell-size) - 6px);
+        block-size: calc(var(--et-calendar-cell-size) - 6px);
+        border-radius: 999px;
+        transition:
+          background-color 150ms ease,
+          color 150ms ease;
+      }
+
+      @media (hover: hover) {
+        &:where(:not([data-disabled])):hover .et-calendar-cell-content {
+          background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+        }
+      }
+
+      &:focus-visible {
+        outline: none;
+
+        .et-calendar-cell-content {
+          outline: 2px solid var(--et-theme-color-primary-solid);
+          outline-offset: 1px;
+        }
+      }
+
+      &:where([data-outside-month]) {
+        color: var(--et-surface-color-muted-solid);
+      }
+
+      &:where([data-today]) .et-calendar-cell-content {
+        box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
+      }
+
+      &:where([data-band='start'], [data-band='end']):where(:not([data-selected])) {
+        color: var(--et-theme-color-on-primary);
+
+        .et-calendar-cell-content {
+          background: var(--et-theme-color-primary-solid);
+          font-weight: 600;
+        }
+      }
+
+      @media (hover: hover) {
+        &:where([data-band='start'], [data-band='end']):where(:not([data-selected])):hover .et-calendar-cell-content {
+          background: var(--et-theme-color-primary-solid);
+        }
+      }
+
+      &:where([data-selected]) {
+        color: var(--et-theme-color-on-primary);
+
+        .et-calendar-cell-content {
+          background: var(--et-theme-color-primary-solid);
+          font-weight: 600;
+        }
+      }
+
+      @media (hover: hover) {
+        &:where([data-selected]):hover .et-calendar-cell-content {
+          background: var(--et-theme-color-primary-solid);
+        }
+      }
+
+      &:where([data-disabled]) {
+        color: var(--et-surface-color-subtle-solid);
+        cursor: default;
+
+        .et-calendar-cell-content {
+          background: transparent;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+
+  @keyframes et-calendar-weeks-in-forward {
+    from {
+      opacity: 0;
+      transform: translateX(14px);
+    }
+  }
+
+  @keyframes et-calendar-weeks-in-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-14px);
+    }
+  }
+
+  @keyframes et-calendar-weeks-in-zoom {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-calendar-weeks-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-calendar-label-in-forward {
+    from {
+      opacity: 0;
+      transform: translateX(6px);
+    }
+  }
+
+  @keyframes et-calendar-label-in-backward {
+    from {
+      opacity: 0;
+      transform: translateX(-6px);
+    }
+  }
+
+  @keyframes et-calendar-label-in-zoom {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-calendar-label-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-calendar {
+      & .et-calendar-weeks,
+      & .et-calendar-weeks--leave,
+      & .et-calendar-header-label-value,
+      & .et-calendar-header-label-value--leave {
+        animation: none;
+      }
+
+      & .et-calendar-header-label-icon {
+        transition: none;
+      }
+    }
+  }
+}

package/src/lib/card/card.component.css

@@ -0,0 +1,39 @@
+@layer components {
+  @property --et-card-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-card-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-card-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-card-gap);
+    padding: var(--et-card-padding);
+    border-radius: var(--et-card-border-radius);
+    box-sizing: border-box;
+    background: var(--et-surface-background-solid, Canvas);
+    color: var(--et-surface-color-solid, currentColor);
+    border: 1px solid transparent;
+
+    &:where([data-variant='outlined']) {
+      border-color: var(--et-surface-border-solid, currentColor);
+    }
+
+    &:where([data-variant='elevated']) {
+      box-shadow: 0 4px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.12);
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+@layer components {
+  /* The autoplay countdown ring. Deliberately smaller than the tap target and thicker than a hairline —
+     drawn at the target size it read as a stray outline rather than as a countdown. */
+  @property --et-carousel-dot-ring-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-carousel-dot-ring-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2.5px;
+  }
+
+  .et-carousel-dot-progress {
+    position: absolute;
+    inline-size: var(--et-carousel-dot-ring-size);
+    block-size: var(--et-carousel-dot-ring-size);
+    border-radius: 50%;
+    opacity: 0;
+    scale: 0.55;
+    mask: radial-gradient(
+      closest-side,
+      transparent calc(100% - var(--et-carousel-dot-ring-width)),
+      black calc(100% - var(--et-carousel-dot-ring-width))
+    );
+  }
+  /* The countdown, as two rotations rather than a growing gradient.
+
+     It was a `conic-gradient` whose angle came from an animated registered property, which reads beautifully
+     and cannot be composited: a gradient has to be re-rasterized for every value, and animating a registered
+     property recalculates the element's style every frame whether or not the value actually changed. Idle, a
+     counting-down ring cost ~1120 paints and ~510 style recalculations over nine seconds. Stepping the
+     property halved the paints and did nothing at all for the recalculations — the recalculation is the
+     animation existing, not the value moving.
+
+     So nothing here animates a custom property or a paint-only property. Each half of the circle holds a
+     half-disc pinned to the centre, rotating from `-180deg` (entirely in the other half, clipped away) to
+     `0deg` (filling this one), and its own half clips it. The first sweeps the right half over the first half
+     of the slide's duration; the second the left half over the second, via a delay. `rotate` is composited, so
+     the whole countdown runs off the main thread: ~120 paints and ~45 recalculations over the same nine
+     seconds, which is the floor — what the page costs with no ring at all. */
+  .et-carousel-dot-progress-half {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--et-theme-color-primary-solid, currentColor);
+      rotate: -180deg;
+    }
+
+    &:first-child {
+      inset-inline-start: 50%;
+
+      &::before {
+        border-radius: 0 100% 100% 0 / 0 50% 50% 0;
+        transform-origin: 0 50%;
+      }
+    }
+
+    &:last-child {
+      inset-inline-start: 0;
+
+      &::before {
+        border-radius: 100% 0 0 100% / 50% 0 0 50%;
+        transform-origin: 100% 50%;
+      }
+    }
+  }
+
+  @keyframes et-carousel-autoplay-sweep {
+    from {
+      rotate: -180deg;
+    }
+
+    to {
+      rotate: 0deg;
+    }
+  }
+
+  .et-carousel-dot {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inline-size: var(--et-carousel-dot-ring-size);
+      block-size: var(--et-carousel-dot-ring-size);
+      border: var(--et-carousel-dot-ring-width) solid
+        color-mix(in srgb, var(--et-surface-interaction-solid, gray) 30%, transparent);
+      border-radius: 50%;
+      opacity: 0;
+      scale: 0.55;
+    }
+
+    &:where([data-counting]) {
+      & .et-carousel-dot-progress {
+        opacity: 1;
+        scale: 1;
+      }
+
+      & .et-carousel-dot-progress-half::before {
+        animation: et-carousel-autoplay-sweep calc(var(--_et-carousel-autoplay-duration, 5000ms) / 2) linear forwards;
+      }
+
+      & .et-carousel-dot-progress-half:last-child::before {
+        animation-delay: calc(var(--_et-carousel-autoplay-duration, 5000ms) / 2);
+      }
+
+      &::after {
+        opacity: 1;
+        scale: 1;
+      }
+    }
+
+    &:where([data-counting])::before {
+      scale: 0.75;
+    }
+  }
+
+  /* The icon button lays its projected icons out in a flex row, which would put play and pause side by side.
+     Three classes deep because that rule is one class deep on the button and is injected at runtime, so it
+     would win at equal specificity however this file is ordered. */
+  .et-carousel .et-carousel-play-toggle .et-icon-button-icon {
+    display: grid;
+    place-items: center;
+  }
+
+  .et-carousel-play-toggle {
+    & .et-carousel-play-toggle-icon {
+      grid-area: 1 / 1;
+      opacity: 0;
+      scale: 0.55;
+      rotate: -35deg;
+    }
+
+    &:not([data-playing]) .et-icon--et-play,
+    &:where([data-playing]) .et-icon--et-pause {
+      opacity: 1;
+      scale: 1;
+      rotate: 0deg;
+    }
+  }
+
+  .et-carousel:where(.et-carousel--can-animate) {
+    & .et-carousel-dot-progress,
+    & .et-carousel-dot::after {
+      transition:
+        opacity 220ms var(--ease-3, ease-out),
+        scale 220ms var(--ease-3, ease-out);
+    }
+
+    & .et-carousel-play-toggle-icon {
+      transition:
+        opacity 180ms var(--ease-3, ease-out),
+        scale 180ms var(--ease-3, ease-out),
+        rotate 220ms var(--ease-3, ease-out);
+    }
+  }
+}