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

package/src/lib/kbd/kbd.component.css

@@ -0,0 +1,62 @@
+@layer components {
+  @property --et-kbd-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-kbd-key-min-inline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-kbd-key-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 5px;
+  }
+
+  @property --et-kbd-key-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-kbd-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 11px;
+  }
+
+  @property --et-kbd-font-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 500;
+  }
+
+  .et-kbd {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--et-kbd-gap);
+    vertical-align: middle;
+  }
+
+  .et-kbd-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-inline-size: var(--et-kbd-key-min-inline-size);
+    padding-inline: var(--et-kbd-key-padding-inline);
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    border-radius: var(--et-kbd-key-border-radius);
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 8%, transparent);
+    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    font: inherit;
+    font-size: var(--et-kbd-font-size);
+    font-weight: var(--et-kbd-font-weight);
+    line-height: 1.5;
+    white-space: nowrap;
+  }
+}

package/src/lib/loader/brand-loader/brand-loader.component.css

@@ -0,0 +1,130 @@
+@layer components {
+  @keyframes et-brand-loader-outline {
+    0% {
+      stroke-dashoffset: 100;
+      opacity: 0;
+    }
+
+    3% {
+      opacity: 1;
+    }
+
+    45% {
+      stroke-dashoffset: 0;
+    }
+
+    80% {
+      stroke-dashoffset: 0;
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-brand-loader-fill-sweep {
+    0%,
+    48% {
+      width: 0;
+    }
+
+    75% {
+      width: 26.4369px;
+    }
+
+    100% {
+      width: 26.4369px;
+    }
+  }
+
+  @keyframes et-brand-loader-fill-fade {
+    0%,
+    48% {
+      opacity: 0;
+    }
+
+    58% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 1;
+    }
+
+    90% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes et-brand-loader-ghost-pulse {
+    0%,
+    100% {
+      opacity: 0.12;
+    }
+
+    50% {
+      opacity: 0.2;
+    }
+  }
+
+  .et-brand-loader {
+    --_et-brand-loader-accent: var(--et-brand-loader-accent, var(--et-theme-color-primary-solid, #00ffa1));
+    --_et-brand-loader-ghost: var(
+      --et-brand-loader-ghost,
+      color-mix(in srgb, var(--_et-brand-loader-accent) 14%, currentColor)
+    );
+    --_et-brand-loader-glow: var(
+      --et-brand-loader-glow,
+      color-mix(in srgb, var(--_et-brand-loader-accent) 25%, transparent)
+    );
+    --_et-brand-loader-duration: var(--et-brand-loader-duration, 3200ms);
+    --_et-brand-loader-size: var(--et-brand-loader-size, 10rem);
+
+    display: inline-flex;
+    width: var(--_et-brand-loader-size);
+    aspect-ratio: 26.4369 / 20;
+  }
+
+  .et-brand-loader__svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .et-brand-loader__ghost {
+    fill: var(--_et-brand-loader-ghost);
+    animation: et-brand-loader-ghost-pulse var(--_et-brand-loader-duration) ease-in-out infinite;
+  }
+
+  .et-brand-loader__outline {
+    fill: none;
+    stroke: var(--_et-brand-loader-accent);
+    stroke-width: 1.4;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 100;
+    stroke-dashoffset: 100;
+    filter: drop-shadow(0 0 3px var(--_et-brand-loader-glow));
+    animation: et-brand-loader-outline var(--_et-brand-loader-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  .et-brand-loader__fill {
+    fill: var(--_et-brand-loader-accent);
+    animation: et-brand-loader-fill-fade var(--_et-brand-loader-duration) ease infinite;
+  }
+
+  .et-brand-loader__fill-clip-rect {
+    animation: et-brand-loader-fill-sweep var(--_et-brand-loader-duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
+  }
+}

package/src/lib/loader/progress-bar/progress-bar.component.css

@@ -0,0 +1,176 @@
+@layer components {
+  /* Both are read by the track and the bars, never by the host - registered as inheriting so that
+     setting them on the `et-progress-bar` element (or anywhere above it) reaches those descendants.
+     With `inherits: false` a descendant resolves the initial value no matter what the host says. */
+  @property --et-progress-bar-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-progress-bar-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 9999px;
+  }
+
+  @keyframes et-progress-bar-primary-translate {
+    0% {
+      transform: translateX(0);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
+      transform: translateX(83.67142%);
+    }
+
+    100% {
+      transform: translateX(200.611057%);
+    }
+  }
+
+  @keyframes et-progress-bar-primary-scale {
+    0% {
+      transform: scaleX(0.08);
+    }
+
+    36.65% {
+      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+      transform: scaleX(0.08);
+    }
+
+    69.15% {
+      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+      transform: scaleX(0.661479);
+    }
+
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+
+  @keyframes et-progress-bar-secondary-translate {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(37.651913%);
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(84.386165%);
+    }
+
+    100% {
+      transform: translateX(160.277782%);
+    }
+  }
+
+  @keyframes et-progress-bar-secondary-scale {
+    0% {
+      animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
+      transform: scaleX(0.08);
+    }
+
+    19.15% {
+      animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
+      transform: scaleX(0.457104);
+    }
+
+    44.15% {
+      animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
+      transform: scaleX(0.72796);
+    }
+
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+
+  .et-progress-bar {
+    --_et-progress-bar-track-color: var(
+      --et-progress-bar-track-color,
+      color-mix(in srgb, currentColor 12%, transparent)
+    );
+    --_et-progress-bar-indicator-color: var(--et-progress-bar-indicator-color, currentColor);
+    --_et-progress-bar-duration: var(--et-progress-bar-duration, 2s);
+
+    display: block;
+    width: 100%;
+  }
+
+  .et-progress-bar__track {
+    position: relative;
+    overflow-x: hidden;
+    width: 100%;
+    height: var(--et-progress-bar-height);
+    border-radius: var(--et-progress-bar-border-radius);
+    background: var(--_et-progress-bar-track-color);
+  }
+
+  .et-progress-bar__bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    width: 100%;
+    animation: none;
+    transform-origin: top left;
+    transition: transform 200ms linear;
+    height: var(--et-progress-bar-height);
+
+    .et-progress-bar--indeterminate & {
+      transition: none;
+    }
+  }
+
+  .et-progress-bar__bar-inner {
+    display: inline-block;
+    position: absolute;
+    width: 100%;
+    animation: none;
+    border-top-style: solid;
+    border-color: var(--_et-progress-bar-indicator-color);
+    border-top-width: var(--et-progress-bar-height);
+  }
+
+  .et-progress-bar__bar--primary {
+    transform: scaleX(0);
+
+    .et-progress-bar--indeterminate & {
+      left: -145.166611%;
+      animation: et-progress-bar-primary-translate var(--_et-progress-bar-duration) infinite linear;
+
+      > .et-progress-bar__bar-inner {
+        animation: et-progress-bar-primary-scale var(--_et-progress-bar-duration) infinite linear;
+      }
+    }
+  }
+
+  .et-progress-bar__bar--secondary {
+    display: none;
+
+    .et-progress-bar--indeterminate & {
+      left: -54.888891%;
+      display: block;
+      animation: et-progress-bar-secondary-translate var(--_et-progress-bar-duration) infinite linear;
+
+      > .et-progress-bar__bar-inner {
+        animation: et-progress-bar-secondary-scale var(--_et-progress-bar-duration) infinite linear;
+      }
+    }
+  }
+
+  .et-progress-bar:where(.et-progress-bar--themed) {
+    --et-progress-bar-indicator-color: var(--et-theme-color-primary-solid, currentColor);
+  }
+}

package/src/lib/loader/spinner/spinner.component.css

@@ -0,0 +1,216 @@
+@layer components {
+  @property --et-spinner-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 18px;
+  }
+
+  @property --et-spinner-stroke-width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 2.25px;
+  }
+
+  @property --et-spinner-color {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: currentColor;
+  }
+
+  @property --et-spinner-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 1333ms;
+  }
+
+  @keyframes et-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes et-spinner-layer-rotate {
+    12.5% {
+      transform: rotate(135deg);
+    }
+
+    25% {
+      transform: rotate(270deg);
+    }
+
+    37.5% {
+      transform: rotate(405deg);
+    }
+
+    50% {
+      transform: rotate(540deg);
+    }
+
+    62.5% {
+      transform: rotate(675deg);
+    }
+
+    75% {
+      transform: rotate(810deg);
+    }
+
+    87.5% {
+      transform: rotate(945deg);
+    }
+
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+
+  @keyframes et-spinner-left-spin {
+    from {
+      transform: rotate(260deg);
+    }
+
+    50% {
+      transform: rotate(130deg);
+    }
+
+    to {
+      transform: rotate(260deg);
+    }
+  }
+
+  @keyframes et-spinner-right-spin {
+    from {
+      transform: rotate(-260deg);
+    }
+
+    50% {
+      transform: rotate(-130deg);
+    }
+
+    to {
+      transform: rotate(-260deg);
+    }
+  }
+
+  .et-spinner {
+    position: relative;
+    display: inline-block;
+    width: var(--et-spinner-size);
+    height: var(--et-spinner-size);
+    color: var(--et-spinner-color);
+    direction: ltr;
+    vertical-align: middle;
+    line-height: 0;
+    overflow: hidden;
+
+    .et-spinner-track-container,
+    .et-spinner-track-graphic,
+    .et-spinner-indeterminate-container,
+    .et-spinner-layer,
+    .et-spinner-circle-graphic {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .et-spinner-track-container {
+      transform: rotate(-90deg);
+    }
+
+    .et-spinner-track-graphic,
+    .et-spinner-circle-graphic {
+      fill: none;
+    }
+
+    .et-spinner-track-circle,
+    .et-spinner-circle-graphic circle {
+      fill: none;
+      stroke: currentColor;
+    }
+
+    /* `--et-spinner-track-color` must stay unregistered: an `@property` with an `initial-value` always has a
+       value, so this `var()` fallback would never apply and `track` would paint nothing. */
+    .et-spinner-track-circle {
+      stroke: var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));
+      stroke-linecap: round;
+    }
+
+    .et-spinner-circle-graphic circle {
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .et-spinner-indeterminate-container {
+      font-size: 0;
+      letter-spacing: 0;
+      white-space: nowrap;
+      animation: et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite;
+    }
+
+    .et-spinner-layer {
+      animation: et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+
+    .et-spinner-gap-patch {
+      position: absolute;
+      top: 0;
+      left: 47.5%;
+      box-sizing: border-box;
+      width: 5%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .et-spinner-gap-patch .et-spinner-circle-graphic {
+      left: -900%;
+      width: 2000%;
+      transform: rotate(180deg);
+    }
+
+    .et-spinner-circle-clipper {
+      display: inline-flex;
+      position: relative;
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .et-spinner-circle-clipper .et-spinner-circle-graphic {
+      width: 200%;
+    }
+
+    .et-spinner-circle-right .et-spinner-circle-graphic {
+      left: -100%;
+    }
+
+    .et-spinner-circle-left .et-spinner-circle-graphic {
+      animation: et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+
+    .et-spinner-circle-right .et-spinner-circle-graphic {
+      animation: et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+    }
+
+    .et-spinner-determinate-graphic {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+      fill: none;
+    }
+
+    .et-spinner-determinate-circle {
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 200ms linear;
+    }
+  }
+
+  /* `--et-spinner-color` is declared via `@property`, whose `initial-value` cannot contain `var()`, so the theme
+     colour can only be applied by a rule - and only when `color` is set, hence the class gate. */
+  .et-spinner:where(.et-spinner--themed) {
+    --et-spinner-color: var(--et-theme-color-primary-solid, currentColor);
+  }
+}

package/src/lib/masonry/masonry-styles.component.css

@@ -0,0 +1,84 @@
+@layer components {
+  @property --et-masonry-move-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 150ms;
+  }
+
+  @property --et-masonry-move-easing {
+    syntax: '*';
+    inherits: true;
+    initial-value: ease-out;
+  }
+
+  @property --et-masonry-appear-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 200ms;
+  }
+
+  /* Set per item by MasonryItemDirective. Declared so the item has a valid `translate` before its first
+     placement — an undefined var would drop the whole declaration. */
+  @property --_et-masonry-item-inline-offset {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @property --_et-masonry-item-block-offset {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  .et-masonry {
+    display: block;
+    position: relative;
+  }
+
+  .et-masonry-item {
+    position: absolute;
+    top: 0;
+    /* The masonry sets the item's width and then checks the box it reports against it, so the two have to be
+       the same box. An item with padding or a border in an app that ships no global reset would report a
+       wider one forever. */
+    box-sizing: border-box;
+    /* Anchored at the inline start, so the offset below is measured from the correct side in both writing
+       directions. */
+    inset-inline-start: 0;
+    translate: var(--_et-masonry-item-inline-offset) var(--_et-masonry-item-block-offset);
+    /* Placed items are revealed by [data-positioned]; before that they would be a pile in the corner. */
+    opacity: 0;
+
+    /* `translate` is physical, so the inline offset has to travel the other way when the text does. */
+    &:dir(rtl) {
+      translate: calc(-1 * var(--_et-masonry-item-inline-offset)) var(--_et-masonry-item-block-offset);
+    }
+
+    &[data-positioned] {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .et-masonry-item {
+      transition: opacity var(--et-masonry-appear-duration) var(--ease-3, ease-out);
+    }
+
+    /* Items move between placements — when the columns change, when something above them resizes, when a
+       neighbour is removed. They must not animate *into* their first placement, which is what [data-can-move]
+       gates: the item sets it a frame after it is placed. */
+    .et-masonry-item[data-can-move] {
+      transition:
+        opacity var(--et-masonry-appear-duration) var(--ease-3, ease-out),
+        translate var(--et-masonry-move-duration) var(--et-masonry-move-easing);
+    }
+
+    /* While the container itself is being resized the columns change every frame, so a move transition would
+       be restarted every frame and the items would trail behind the layout. Moves snap until it stops; the
+       fade is unaffected. */
+    .et-masonry[data-resizing] .et-masonry-item[data-can-move] {
+      transition-property: opacity;
+    }
+  }
+}