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

package/src/lib/standings/standings-pick.component.css

@@ -0,0 +1,172 @@
+@layer components {
+  @property --et-standings-pick-row-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 40px;
+  }
+
+  @property --et-standings-pick-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-standings-pick-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-standings-pick-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-standings-pick-preview-duration {
+    syntax: '<time>';
+    inherits: true;
+    initial-value: 180ms;
+  }
+
+  .et-standings-pick {
+    display: block;
+    box-sizing: border-box;
+    font-size: var(--et-standings-pick-font-size);
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-standings-pick-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-standings-pick-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-standings-pick-row {
+    display: flex;
+    align-items: center;
+    gap: var(--et-standings-pick-gap);
+    block-size: var(--et-standings-pick-row-height);
+  }
+
+  .et-standings-pick-position {
+    flex: none;
+    inline-size: 20px;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .et-standings-pick-card {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--et-standings-pick-gap);
+    min-inline-size: 0;
+    block-size: 100%;
+    padding-inline: 8px;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);
+    border-radius: var(--et-standings-pick-radius);
+  }
+
+  /* Only while a drag runs: on release the reordered list renders with the transforms already gone, and a
+     transition would animate every card back from where the preview had it. */
+  .et-standings-pick-list:where([data-dragging]) .et-standings-pick-card {
+    transition: translate var(--et-standings-pick-preview-duration) ease;
+  }
+
+  .et-standings-pick-list:where([data-dragging]) .et-standings-pick-card:where([data-dragging]) {
+    position: relative;
+    z-index: 1;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 20%, transparent);
+    box-shadow: 0 8px 20px color-mix(in srgb, var(--et-surface-interaction-solid, black) 25%, transparent);
+    transition: none;
+  }
+
+  .et-standings-pick:where([data-locked]) .et-standings-pick-card {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 5%, transparent);
+  }
+
+  .et-standings-pick:where([data-locked]) .et-standings-pick-participant {
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-standings-pick-participant {
+    --et-match-participant-emblem-size: 22px;
+    --et-match-participant-gap: 8px;
+    --et-match-participant-font-size: var(--et-standings-pick-font-size);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .et-standings-pick-mark {
+    display: grid;
+    flex: none;
+    place-items: center;
+    min-inline-size: 28px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .et-standings-pick-handle {
+    display: grid;
+    flex: none;
+    place-items: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    cursor: grab;
+  }
+
+  .et-standings-pick-handle:hover {
+    color: var(--et-surface-color-solid, currentColor);
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 16%, transparent);
+  }
+
+  .et-standings-pick-handle:active {
+    cursor: grabbing;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 20%, transparent);
+  }
+
+  .et-standings-pick-grip {
+    inline-size: 12px;
+    block-size: 8px;
+    background: repeating-linear-gradient(to bottom, currentColor 0 1.5px, transparent 1.5px 3.5px);
+  }
+
+  .et-standings-pick-cut {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0;
+    padding-block: calc(var(--et-standings-pick-gap) + 2px);
+    padding-inline: 0;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .et-standings-pick-cut-line {
+    flex: 1;
+    block-size: 1px;
+    background: var(--et-theme-color-primary-solid, currentColor);
+    opacity: 0.5;
+  }
+
+  .et-standings-pick-cut-label {
+    flex: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-standings-pick-list:where([data-dragging]) .et-standings-pick-card {
+      transition: none;
+    }
+  }
+}

package/src/lib/standings/standings.component.css

@@ -0,0 +1,201 @@
+@layer components {
+  @property --et-standings-row-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 44px;
+  }
+
+  @property --et-standings-cell-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-standings-zone-bar-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-standings-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  .et-standings {
+    container-type: inline-size;
+    container-name: et-standings;
+    display: block;
+    box-sizing: border-box;
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-standings-content {
+    /* The detail columns are the first thing to go when the table runs out of room: a table read sideways
+       is worse than a table with fewer columns. */
+    --_et-standings-detail-display: none;
+    --_et-standings-form-display: none;
+  }
+
+  @container et-standings (min-inline-size: 560px) {
+    .et-standings-content {
+      --_et-standings-detail-display: table-cell;
+    }
+  }
+
+  @container et-standings (min-inline-size: 720px) {
+    .et-standings-content {
+      --_et-standings-form-display: table-cell;
+    }
+  }
+
+  .et-standings-table {
+    inline-size: 100%;
+    font-size: var(--et-standings-font-size);
+    border-collapse: collapse;
+    text-align: start;
+  }
+
+  .et-standings-cell {
+    padding-block: 0;
+    padding-inline: var(--et-standings-cell-padding-inline);
+    font-weight: inherit;
+    text-align: end;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  .et-standings-cell:where([data-column='position']) {
+    position: relative;
+    inline-size: 1px;
+    padding-inline-start: calc(var(--et-standings-cell-padding-inline) + var(--et-standings-zone-bar-width));
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-variant-numeric: tabular-nums;
+    text-align: start;
+  }
+
+  .et-standings-cell:where([data-column='participant']) {
+    inline-size: 100%;
+    min-inline-size: 0;
+    text-align: start;
+  }
+
+  .et-standings-cell:where([data-column='detail']) {
+    display: var(--_et-standings-detail-display);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .et-standings-cell:where([data-column='form']) {
+    display: var(--_et-standings-form-display);
+  }
+
+  .et-standings-cell:where([data-column='points']) {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .et-standings-head-row .et-standings-cell {
+    block-size: var(--et-standings-row-height);
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    border-block-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+  }
+
+  .et-standings-row .et-standings-cell {
+    block-size: var(--et-standings-row-height);
+    border-block-end: 1px solid color-mix(in srgb, var(--et-surface-border-solid, gray) 60%, transparent);
+  }
+
+  /* A band's colour comes from the theme the row is scoped to, which the consumer names — so "advancing"
+     looks like whatever their app decided, and this file names no colour at all. */
+  .et-standings-row:where([data-zone]) {
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid, transparent) 7%, transparent);
+  }
+
+  .et-standings-row:where([data-zone]) .et-standings-cell:where([data-column='position'])::before {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--et-standings-zone-bar-width);
+    background: var(--et-theme-color-primary-solid, currentColor);
+    content: '';
+  }
+
+  .et-standings-row:where([data-highlighted]) {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 12%, transparent);
+  }
+
+  .et-standings-row:where([data-highlighted]) .et-standings-cell {
+    font-weight: 600;
+  }
+
+  .et-standings-row:where([data-highlighted]) .et-standings-cell:where([data-column='position']) {
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-standings-content .et-standings-participant {
+    --et-match-participant-emblem-size: 24px;
+    --et-match-participant-gap: 8px;
+    --et-match-participant-font-size: var(--et-standings-font-size);
+    min-inline-size: 0;
+  }
+
+  .et-standings-form {
+    display: flex;
+    gap: 3px;
+  }
+
+  .et-standings-form-result {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  /* Won / drew / lost, from the surface tokens rather than a green-amber-red this file invents. The letter,
+     not the fill, is what tells them apart (WCAG 1.4.1), so it must stay legible on every fill. */
+  .et-standings-form-result:where([data-result='win']) {
+    color: var(--et-surface-background-solid, white);
+    background: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-standings-form-result:where([data-result='tie']) {
+    background: color-mix(in srgb, var(--et-surface-color-solid, gray) 45%, transparent);
+  }
+
+  .et-standings-form-result:where([data-result='loss']) {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 25%, transparent);
+  }
+
+  .et-standings-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px 16px;
+    margin: 0;
+    padding: 10px var(--et-standings-cell-padding-inline) 0;
+    font-size: 11px;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    list-style: none;
+  }
+
+  .et-standings-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .et-standings-legend-swatch {
+    flex: none;
+    inline-size: 10px;
+    block-size: 3px;
+    background: var(--et-theme-color-primary-solid, currentColor);
+    border-radius: 2px;
+  }
+}

package/src/lib/stat-tile/stat-tile-sparkline.component.css

@@ -0,0 +1,49 @@
+@layer components {
+  @property --et-stat-tile-sparkline-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  @property --et-stat-tile-sparkline-line-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-stat-tile-sparkline-current-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-stat-tile-sparkline {
+    display: block;
+    block-size: var(--et-stat-tile-sparkline-height);
+  }
+
+  .et-stat-tile-sparkline-svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+
+  .et-stat-tile-sparkline-line,
+  .et-stat-tile-sparkline-current {
+    fill: none;
+    vector-effect: non-scaling-stroke;
+    stroke-linecap: round;
+  }
+
+  .et-stat-tile-sparkline-line {
+    stroke: var(--et-surface-color-subtle-solid, currentColor);
+    stroke-width: var(--et-stat-tile-sparkline-line-width);
+    stroke-linejoin: round;
+  }
+
+  .et-stat-tile-sparkline-current {
+    stroke: var(--et-theme-color-primary-solid, currentColor);
+    stroke-width: var(--et-stat-tile-sparkline-current-size);
+  }
+}

package/src/lib/stat-tile/stat-tile.component.css

@@ -0,0 +1,111 @@
+@layer components {
+  @property --et-stat-tile-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-stat-tile-label-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-stat-tile-value-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 28px;
+  }
+
+  @property --et-stat-tile-value-font-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --et-stat-tile-footer-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-stat-tile-sparkline-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-stat-tile {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-stat-tile-gap);
+    min-inline-size: 0;
+    color: var(--et-surface-color-solid, currentColor);
+    line-height: 1.4;
+
+    > .et-stat-tile-sparkline {
+      margin-block-start: calc(var(--et-stat-tile-sparkline-gap) - var(--et-stat-tile-gap));
+    }
+
+    &:where([aria-busy='true']) > .et-stat-tile-sparkline {
+      visibility: hidden;
+    }
+  }
+
+  .et-stat-tile-label {
+    font-size: var(--et-stat-tile-label-font-size);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-stat-tile-value {
+    display: block;
+    font-size: var(--et-stat-tile-value-font-size);
+    font-weight: var(--et-stat-tile-value-font-weight);
+    line-height: 1.2;
+  }
+
+  .et-stat-tile-unit {
+    font-size: 0.6em;
+    font-weight: 500;
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-stat-tile-footer {
+    display: block;
+    font-size: var(--et-stat-tile-footer-font-size);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-stat-tile-delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    font-weight: 600;
+    white-space: nowrap;
+
+    &:where([data-sentiment='good'], [data-sentiment='bad']) {
+      color: var(--et-theme-color-ink-solid, currentColor);
+    }
+  }
+
+  .et-stat-tile-delta-icon {
+    flex: none;
+    inline-size: 0.85em;
+    block-size: 0.85em;
+    fill: currentColor;
+  }
+
+  .et-stat-tile-skeleton {
+    --et-skeleton-gap: var(--et-stat-tile-gap);
+
+    > .et-stat-tile-value-skeleton {
+      --et-skeleton-size: calc(var(--et-stat-tile-value-font-size) * 1.2);
+      inline-size: 60%;
+    }
+
+    > .et-stat-tile-delta-skeleton {
+      --et-skeleton-size: calc(var(--et-stat-tile-footer-font-size) * 1.4);
+      inline-size: 40%;
+    }
+  }
+}

package/src/lib/stream/pip/pip-chrome.component.css

@@ -0,0 +1,96 @@
+@layer components {
+  et-stream-pip-chrome:not(.et-stream-pip-chrome--grid)
+    et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid
+    et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .et-stream-pip-chrome__stage {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    clip-path: inset(0);
+  }
+
+  .et-stream-pip-chrome__cell {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform-origin: 0 0;
+    will-change: transform;
+    overflow: hidden;
+    transform: translate(
+        calc(
+          ((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) /
+            var(--et-pip-grid-cols, 1) * 100%
+        ),
+        calc(
+          (2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) /
+            (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%
+        )
+      )
+      scale(calc(1 / var(--et-pip-grid-cols, 1)), calc(1 / var(--et-pip-grid-cols, 1)));
+  }
+
+  et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured {
+    transform: none;
+  }
+
+  et-stream-pip-chrome:not(.et-stream-pip-chrome--grid)
+    .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured) {
+    transform: translate(calc(var(--et-cell-exit-h, 0) * 100%), calc(var(--et-cell-exit-v, 0) * 100%));
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell {
+    cursor: pointer;
+  }
+
+  .et-stream-pip-chrome__cell::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    box-shadow: inset 0 0 0 5px transparent;
+    transition: box-shadow 0.15s;
+    pointer-events: none;
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell::after {
+    pointer-events: auto;
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible::after {
+    box-shadow: inset 0 0 0 5px
+      color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 35%, transparent);
+  }
+
+  @media (hover: hover) {
+    et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover::after {
+      box-shadow: inset 0 0 0 5px
+        color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 35%, transparent);
+    }
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible {
+    outline: none;
+  }
+
+  et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured::after {
+    box-shadow: inset 0 0 0 5px
+      var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6));
+  }
+
+  et-pip-player iframe {
+    width: 100% !important;
+    height: 100% !important;
+    display: block;
+  }
+}

package/src/lib/stream/pip/pip-player.component.css

@@ -0,0 +1,40 @@
+@layer components {
+  et-pip-player {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    container-type: size;
+  }
+
+  et-pip-player > :not(.et-pip-player__thumb-wrapper) {
+    flex: none;
+    display: block !important;
+    width: min(100cqw, 100cqh * var(--et-pip-player-ratio, calc(16 / 9))) !important;
+    height: min(100cqh, 100cqw / var(--et-pip-player-ratio, calc(16 / 9))) !important;
+  }
+
+  .et-pip-player__thumb-wrapper {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+  }
+
+  .et-pip-player__thumb-wrapper--hidden {
+    opacity: 0;
+  }
+
+  .et-pip-player__preview-thumb {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+    display: block;
+  }
+}