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

package/src/lib/scrollable/headless/scrollable-masks.component.css

@@ -0,0 +1,112 @@
+@layer components {
+  .et-scrollable-masks {
+    grid-row: 1 / 1;
+    grid-column: 1 / 1;
+    pointer-events: none;
+
+    .et-scrollable-mask {
+      position: absolute;
+      opacity: 0;
+    }
+  }
+
+  .et-scrollable {
+    &[direction='horizontal'],
+    &:not([direction]) {
+      & .et-scrollable-mask {
+        inline-size: var(--mask-size);
+        block-size: 100%;
+      }
+
+      & .et-scrollable-mask--start {
+        inset-block-start: 0;
+        inset-inline: 0 0;
+        background: linear-gradient(to right, var(--_mask-color) 0, transparent 100%);
+      }
+
+      & .et-scrollable-mask--end {
+        inset-block-start: 0;
+        inset-inline: calc(100% - var(--mask-size)) 100%;
+        background: linear-gradient(to left, var(--_mask-color) 0, transparent 100%);
+      }
+    }
+
+    &[direction='vertical'] {
+      & .et-scrollable-mask {
+        block-size: var(--mask-size);
+        inline-size: 100%;
+      }
+
+      & .et-scrollable-mask--start {
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        background: linear-gradient(to bottom, var(--_mask-color) 0, transparent 100%);
+      }
+
+      & .et-scrollable-mask--end {
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        background: linear-gradient(to top, var(--_mask-color) 0, transparent 100%);
+      }
+    }
+
+    &.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-start) {
+      & .et-scrollable-masks .et-scrollable-mask--start {
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
+    &.et-scrollable--can-scroll.et-scrollable--has-partial-items:not(.et-scrollable--is-at-end) {
+      & .et-scrollable-masks .et-scrollable-mask--end {
+        opacity: 1;
+        transform: translate(0);
+      }
+    }
+
+    &.et-scrollable--can-animate.et-scrollable--can-scroll {
+      & .et-scrollable-mask {
+        transition: opacity 300ms var(--ease-5);
+      }
+    }
+
+    &[mask-variant='border'] {
+      & .et-scrollable-mask {
+        background: none;
+      }
+
+      &[direction='horizontal'],
+      &:not([direction]) {
+        & .et-scrollable-mask {
+          inline-size: 0;
+          block-size: 100%;
+          border-inline-start: 1px solid var(--et-surface-border-solid, #404040);
+        }
+
+        & .et-scrollable-mask--start {
+          inset-inline: 0;
+        }
+
+        & .et-scrollable-mask--end {
+          inset-inline: auto 0;
+        }
+      }
+
+      &[direction='vertical'] {
+        & .et-scrollable-mask {
+          block-size: 0;
+          inline-size: 100%;
+          border-block-start: 1px solid var(--et-surface-border-solid, #404040);
+        }
+
+        & .et-scrollable-mask--start {
+          inset-block-start: 0;
+        }
+
+        & .et-scrollable-mask--end {
+          inset-block: auto 0;
+        }
+      }
+    }
+  }
+}

package/src/lib/scrollable/headless/scrollable-navigation.component.css

@@ -0,0 +1,94 @@
+@layer components {
+  .et-scrollable-navigation {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .et-scrollable-navigation-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    padding: 0;
+    inline-size: 20px;
+    block-size: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    background-color: transparent;
+
+    &.et-scrollable-navigation-item--active::after {
+      background-color: var(--et-theme-color-primary, #c6c6c6);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      inline-size: 50%;
+      block-size: 50%;
+      border-radius: 50%;
+      background-color: var(--et-surface-interaction-solid, #4b4b4b);
+      opacity: 0.3;
+      transform: scale(0);
+    }
+
+    &[active-offset='0']::after {
+      opacity: 1;
+      transform: scale(1);
+    }
+    &[active-offset='1']::after {
+      opacity: 0.6;
+      transform: scale(0.75);
+    }
+    &[active-offset='2']::after {
+      opacity: 0.45;
+      transform: scale(0.6);
+    }
+    &[active-offset='3']::after {
+      opacity: 0.35;
+      transform: scale(0.5);
+    }
+    &[active-offset='4']::after {
+      opacity: 0.3;
+      transform: scale(0.4);
+    }
+  }
+
+  .et-scrollable-progress-bar {
+    overflow: hidden;
+    max-inline-size: 100px;
+    display: flex;
+    align-items: center;
+
+    .et-scrollable-dots-container {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .et-scrollable {
+    &[direction='vertical'] {
+      & .et-scrollable-progress-bar {
+        flex-direction: column;
+        max-block-size: 100px;
+      }
+
+      & .et-scrollable-dots-container {
+        flex-direction: column;
+      }
+    }
+
+    &.et-scrollable--can-animate {
+      & .et-scrollable-dots-container {
+        transition: transform 0.3s var(--ease-5);
+      }
+
+      & .et-scrollable-navigation-item::after {
+        transition:
+          background-color 200ms linear,
+          opacity 200ms linear,
+          transform 200ms linear;
+      }
+    }
+  }
+}

package/src/lib/scrollable/scrollable.component.css

@@ -0,0 +1,192 @@
+@layer components {
+  :where(.et-scrollable) {
+    --mask-size: 25px;
+    --_mask-color: var(--et-surface-background-solid, #121212);
+    --darken-non-intersecting-items-amount: 0.75;
+    --_auto-size: min-content;
+
+    display: block;
+    position: relative;
+  }
+
+  .et-scrollable {
+    & .et-scrollable-wrapper {
+      display: grid;
+      position: relative;
+      block-size: 100%;
+      inline-size: 100%;
+    }
+
+    &[item-size='same'] {
+      --_auto-size: 1fr;
+    }
+
+    &[item-size='half'] {
+      --_auto-size: calc((100% - var(--item-gap)) / 2);
+    }
+
+    &[item-size='third'] {
+      --_auto-size: calc((100% - (var(--item-gap) * 2)) / 3);
+    }
+
+    &[item-size='quarter'] {
+      --_auto-size: calc((100% - (var(--item-gap) * 3)) / 4);
+    }
+
+    &[item-size='full'] {
+      --_auto-size: 100%;
+    }
+
+    &[render-scrollbars='false'],
+    &:not([render-scrollbars]) {
+      & .et-scrollable-container {
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+
+    &:where([snap]) {
+      --_et-scrollable-snap-strictness: mandatory;
+      --_et-scrollable-snap-align: start;
+      --_et-scrollable-snap-margin: var(--_et-scrollable-scroll-margin, 0px);
+
+      &:where([snap-origin='auto']) {
+        --_et-scrollable-snap-strictness: proximity;
+      }
+
+      &:where([snap-origin='center']) {
+        --_et-scrollable-snap-align: center;
+        --_et-scrollable-snap-margin: 0px;
+      }
+
+      &:where([snap-origin='end']) {
+        --_et-scrollable-snap-align: end;
+      }
+
+      & .et-scrollable-container > *:not([etScrollableIgnoreChild]) {
+        scroll-snap-align: var(--_et-scrollable-snap-align);
+        scroll-margin-inline: var(--_et-scrollable-snap-margin);
+        scroll-margin-block: var(--_et-scrollable-snap-margin);
+      }
+    }
+
+    &[direction='horizontal'],
+    &:not([direction]) {
+      & .et-scrollable-container {
+        grid-auto-flow: column;
+        grid-auto-columns: var(--_auto-size);
+        overflow-x: auto;
+        overflow-y: hidden;
+
+        /* Containment is scoped to the axis this rail actually scrolls. `overflow-y: hidden` still makes
+         the container a scroll container on the block axis, so a wheel or a flick latches onto it there
+         even though the user cannot move it — containing that axis too would swallow the gesture instead
+         of letting the page take it. */
+        overscroll-behavior-x: contain;
+
+        & > :nth-child(2) {
+          grid-column: 1 / 1;
+          grid-row: 1 / 1;
+        }
+
+        & > :nth-last-child(2) {
+          grid-column: var(--item-count) / var(--item-count);
+          grid-row: 1 / 1;
+        }
+      }
+
+      &:where([snap]:not([snap-suspended])) .et-scrollable-container {
+        scroll-snap-type: x var(--_et-scrollable-snap-strictness);
+      }
+
+      & .et-scroll-observer-first-element,
+      & .et-scroll-observer-last-element {
+        block-size: 100%;
+        inline-size: 1px;
+      }
+
+      & .et-scroll-observer-first-element {
+        margin-inline-start: 3px;
+        grid-column: 1 / 1;
+        grid-row: 1 / 1;
+      }
+
+      & .et-scroll-observer-last-element {
+        margin-inline-end: 3px;
+        grid-column: var(--item-count) / var(--item-count);
+        grid-row: 1 / 1;
+        justify-self: end;
+      }
+    }
+
+    &[direction='vertical'] {
+      & .et-scrollable-container {
+        grid-auto-flow: row;
+        grid-auto-rows: var(--_auto-size);
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+
+        & > :nth-child(2) {
+          grid-row: 1 / 1;
+          grid-column: 1 / 1;
+        }
+
+        & > :nth-last-child(2) {
+          grid-row: var(--item-count) / var(--item-count);
+          grid-column: 1 / 1;
+        }
+      }
+
+      &:where([snap]:not([snap-suspended])) .et-scrollable-container {
+        scroll-snap-type: y var(--_et-scrollable-snap-strictness);
+      }
+
+      & .et-scroll-observer-first-element,
+      & .et-scroll-observer-last-element {
+        inline-size: 100%;
+        block-size: 1px;
+      }
+
+      & .et-scroll-observer-first-element {
+        margin-block-start: 3px;
+        grid-row: 1 / 1;
+        grid-column: 1 / 1;
+      }
+
+      & .et-scroll-observer-last-element {
+        margin-block-end: 3px;
+        grid-row: var(--item-count) / var(--item-count);
+        grid-column: 1 / 1;
+        align-self: end;
+      }
+    }
+
+    & .et-scrollable-container {
+      display: grid;
+      position: relative;
+      grid-row: 1 / 1;
+      grid-column: 1 / 1;
+    }
+
+    & .et-scroll-observer-first-element,
+    & .et-scroll-observer-last-element {
+      pointer-events: none;
+    }
+
+    &.et-scrollable--can-animate.et-scrollable--darken-non-intersecting-items {
+      & .et-scrollable-item {
+        transition: opacity 300ms var(--ease-5);
+      }
+    }
+
+    &.et-scrollable--darken-non-intersecting-items {
+      & .et-scrollable-item--not-intersecting {
+        opacity: var(--darken-non-intersecting-items-amount);
+      }
+    }
+  }
+}

package/src/lib/scrollbar/scrollbar.component.css

@@ -0,0 +1,110 @@
+@layer components {
+  @property --et-scrollbar-thickness {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-scrollbar-thumb-thickness {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-scrollbar-thumb-radius {
+    syntax: '<length-percentage>';
+    inherits: true;
+    initial-value: 999px;
+  }
+
+  @property --et-scrollbar-fade-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  /* Set by `ScrollbarDirective` on the container it mirrors. */
+  .et-scrollbar-host {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .et-scrollbar {
+    position: absolute;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity var(--et-scrollbar-fade-duration) ease;
+    pointer-events: none;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+
+    /* The thumb offset is a distance from the start edge, which is the right edge in a right-to-left
+       container. Mirroring the target's direction here is what maps it back to a physical side, and
+       it has to be read off the target: the scrollbar can sit outside the subtree that sets it. */
+    &:where([data-direction='rtl']) {
+      direction: rtl;
+    }
+
+    &:where([data-orientation='vertical']) {
+      inset-block: 0;
+      inset-inline-end: 0;
+      inline-size: var(--et-scrollbar-thickness);
+    }
+
+    &:where([data-orientation='horizontal']) {
+      inset-inline: 0;
+      inset-block-end: 0;
+      block-size: var(--et-scrollbar-thickness);
+    }
+
+    &:where(.et-scrollbar--visible) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    & .et-scrollbar-thumb {
+      position: absolute;
+      transition: background-color var(--et-scrollbar-fade-duration) ease;
+      border-radius: var(--et-scrollbar-thumb-radius);
+      background-color: var(
+        --et-scrollbar-thumb-color,
+        color-mix(in srgb, var(--et-surface-interaction-solid, gray) 35%, transparent)
+      );
+    }
+
+    &:where([data-orientation='vertical']) .et-scrollbar-thumb {
+      inset-block-start: var(--_et-scrollbar-thumb-offset, 0px);
+      inset-inline: 0;
+      block-size: var(--_et-scrollbar-thumb-size, 0px);
+      inline-size: var(--et-scrollbar-thumb-thickness);
+      margin-inline: auto;
+    }
+
+    &:where([data-orientation='horizontal']) .et-scrollbar-thumb {
+      inset-block: 0;
+      inset-inline-start: var(--_et-scrollbar-thumb-offset, 0px);
+      block-size: var(--et-scrollbar-thumb-thickness);
+      inline-size: var(--_et-scrollbar-thumb-size, 0px);
+      margin-block: auto;
+    }
+
+    & .et-scrollbar-thumb:hover,
+    &.et-scrollbar--dragging .et-scrollbar-thumb {
+      background-color: var(
+        --et-scrollbar-thumb-active-color,
+        color-mix(in srgb, var(--et-surface-interaction-solid, gray) 60%, transparent)
+      );
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-scrollbar,
+    .et-scrollbar .et-scrollbar-thumb {
+      transition: none;
+    }
+  }
+}

package/src/lib/skeleton/skeleton.component.css

@@ -0,0 +1,108 @@
+@layer components {
+  /* `syntax: '*'` with no initial-value, so the fallback at each use site resolves `1em` against the
+     element's own font. A registered `<length>` cannot carry a relative initial-value - the whole
+     @property rule is dropped - which left this token unregistered and every unsized bone at
+     `block-size: auto`. */
+  @property --et-skeleton-size {
+    syntax: '*';
+    inherits: true;
+  }
+
+  @property --et-skeleton-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-skeleton-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-skeleton-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 1400ms;
+  }
+
+  .et-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-skeleton-gap);
+    /* The pointer says "not yet" too, which is cheaper than disabling everything inside. */
+    cursor: progress;
+  }
+
+  /* The bone. A neutral tint mixed over whatever surface it sits on — never a hardcoded grey, so it
+     reads correctly on every registered surface and elevation. */
+  .et-skeleton-item {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--et-skeleton-size, 1em);
+    border-radius: var(--et-skeleton-radius);
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 12%, transparent);
+  }
+
+  /* `text` is a line of text's height rather than a fixed px, so a bar sits in running copy without
+     changing the layout around it. */
+  /* A text bone stands in for words, so it flows with them: inline-block on the text baseline rather
+     than a block that pushes the sentence apart. Inside a flex parent (an `et-skeleton-text` line, a
+     table cell) it is blockified anyway, so this costs those cases nothing. */
+  .et-skeleton-item:where([data-shape='text']) {
+    display: inline-block;
+    vertical-align: middle;
+    block-size: 0.85em;
+    /* Fill the line box the replaced text would occupy, so a row of them keeps its rhythm. */
+    margin-block: calc((1.4em - 0.85em) / 2);
+  }
+
+  .et-skeleton-item:where([data-shape='circle']) {
+    inline-size: var(--et-skeleton-size, 1em);
+    block-size: var(--et-skeleton-size, 1em);
+    flex: none;
+    border-radius: 50%;
+  }
+
+  .et-skeleton-item:where([data-shape='rect']) {
+    border-radius: var(--et-skeleton-radius);
+  }
+
+  .et-skeleton-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-skeleton-gap);
+    inline-size: 100%;
+  }
+
+  /* The shimmer: a highlight sweeping across the bone. Only inside an animated container, so a single
+     item can't animate on its own by accident, and only where motion is welcome — under reduced
+     motion the sweep is omitted rather than paused, leaving a static placeholder. */
+  @media (prefers-reduced-motion: no-preference) {
+    .et-skeleton--animated .et-skeleton-item::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: 0;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent),
+        transparent
+      );
+      animation: et-skeleton-sweep var(--et-skeleton-duration) ease-in-out infinite;
+    }
+  }
+
+  @keyframes et-skeleton-sweep {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(100%);
+    }
+  }
+}