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

package/src/lib/bracket/bracket-default-round-header.component.css

@@ -0,0 +1,36 @@
+@layer components {
+  .et-bracket-default-round-header-host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    padding-inline: 8px;
+    text-align: center;
+  }
+
+  .et-bracket-default-round-header-name {
+    max-inline-size: 100%;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--et-surface-color-solid, currentColor);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-bracket-default-round-header-group,
+  .et-bracket-default-round-header-count {
+    max-inline-size: 100%;
+    overflow: hidden;
+    font-size: 11px;
+    line-height: 1.3;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/src/lib/bracket/bracket-participants.component.css

@@ -0,0 +1,13 @@
+@layer components {
+  @property --et-bracket-participants-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 8px;
+  }
+
+  .et-bracket-participants {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--et-bracket-participants-gap);
+  }
+}

package/src/lib/bracket/bracket-pick-card.component.css

@@ -0,0 +1,232 @@
+@layer components {
+  .et-bracket-pick-card {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .et-bracket-pick-card-box {
+    display: grid;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: hidden;
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    border-radius: var(--et-bracket-pick-card-border-radius, 10px);
+    background: var(--et-surface-background-solid, #fff);
+    color: var(--et-surface-color-solid, #111);
+  }
+
+  .et-bracket-pick-card-sides {
+    display: grid;
+    grid-auto-rows: 1fr;
+    min-block-size: 0;
+  }
+
+  .et-bracket-pick-card-side {
+    position: relative;
+    display: flex;
+    min-inline-size: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--et-bracket-pick-card-gap, 8px);
+    box-sizing: border-box;
+    border: 0;
+    border-block-end: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    padding: var(--et-bracket-pick-card-padding, 8px 10px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    transition: background-color 120ms ease;
+
+    /* Always drawn, so the bar can fade rather than appear. Inset from both block edges, so it never
+       reaches the box's rounded corner - a bar that did would be cut across the diagonal by the
+       `overflow: hidden` clip. */
+    &::before {
+      content: '';
+      position: absolute;
+      inset-block: 25%;
+      inset-inline-start: 0;
+      inline-size: 3px;
+      border-radius: 999px;
+      background: var(--et-theme-color-primary-solid, #555);
+      opacity: 0;
+      transition:
+        opacity 120ms ease,
+        background-color 120ms ease;
+    }
+
+    &:where(button) {
+      cursor: pointer;
+    }
+
+    &:where(button):hover {
+      background: color-mix(in srgb, var(--et-surface-interaction-solid, #777) 12%, transparent);
+    }
+
+    &:where(button)[aria-pressed='true']:hover {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, #555) 20%, transparent);
+    }
+
+    &:where([aria-pressed='true'], [data-selected]) {
+      background: color-mix(in srgb, var(--et-theme-color-primary-solid, #555) 12%, transparent);
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &:where([data-side-state='predicted']) {
+      color: var(--et-theme-color-ink-solid, currentColor);
+    }
+
+    &:where([data-dimmed]) {
+      opacity: 0.55;
+    }
+  }
+
+  /* The box clips with `overflow: hidden`, so the ring's default 3px outward offset would be cut away
+     on every edge that is also a card edge - a focused first row kept only the line it shares with
+     the row below. Inside the row, and rounded to match the clip at the two outer corners. */
+  .et-bracket-pick-card-side {
+    --_et-focus-ring-offset: -2px;
+  }
+
+  .et-bracket-pick-card-side:first-child {
+    border-start-start-radius: calc(var(--et-bracket-pick-card-border-radius, 10px) - 1px);
+    border-start-end-radius: calc(var(--et-bracket-pick-card-border-radius, 10px) - 1px);
+  }
+
+  .et-bracket-pick-card-side:last-child {
+    border-block-end: 0;
+    border-end-start-radius: calc(var(--et-bracket-pick-card-border-radius, 10px) - 1px);
+    border-end-end-radius: calc(var(--et-bracket-pick-card-border-radius, 10px) - 1px);
+  }
+
+  .et-bracket-pick-card-side > et-match-participant {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  /* `et-match-participant` sets its own colour rather than inheriting one, so the state's colour has
+     to be applied to it directly - on the side alone it would never reach the name. */
+  .et-bracket-pick-card-side:where([data-side-state='predicted']) > et-match-participant {
+    color: var(--et-theme-color-ink-solid, currentColor);
+  }
+
+  .et-bracket-pick-card-empty {
+    color: var(--et-surface-color-muted-solid, #666);
+    font-size: var(--et-bracket-pick-card-slot-font-size, 13px);
+  }
+
+  .et-bracket-pick-card-empty {
+    min-inline-size: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-bracket-pick-card-mark {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--et-bracket-pick-card-mark-size, 14px);
+    block-size: var(--et-bracket-pick-card-mark-size, 14px);
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.2));
+    border-radius: 50%;
+    transition: border-color 120ms ease;
+    animation: et-bracket-pick-card-mark-in 120ms ease;
+
+    &::after {
+      content: '';
+      inline-size: 50%;
+      block-size: 50%;
+      border-radius: 50%;
+      background: var(--et-surface-interaction-solid, #777);
+      opacity: 0;
+      transition: opacity 120ms ease;
+    }
+  }
+
+  .et-bracket-pick-card-side:where([aria-pressed='true'], [data-selected]) .et-bracket-pick-card-mark {
+    border-color: var(--et-theme-color-primary-solid, #555);
+
+    &::after {
+      background: var(--et-theme-color-primary-solid, #555);
+      opacity: 1;
+    }
+  }
+
+  .et-bracket-pick-card:where([data-locked]) .et-bracket-pick-card-side:where([data-selected])::before {
+    background: var(--et-surface-color-muted-solid, #666);
+  }
+
+  .et-bracket-pick-card:where([data-locked])
+    .et-bracket-pick-card-side:where([data-selected])
+    .et-bracket-pick-card-mark {
+    border-color: var(--et-surface-color-muted-solid, #666);
+
+    &::after {
+      background: var(--et-surface-color-muted-solid, #666);
+    }
+  }
+
+  .et-bracket-pick-card-side[aria-pressed='false']:hover .et-bracket-pick-card-mark::after {
+    opacity: 0.45;
+  }
+
+  .et-bracket-pick-card-note-layer {
+    position: absolute;
+    display: block;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .et-bracket-pick-card-invalid-outline {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--et-theme-color-ink-solid, currentColor);
+    border-radius: var(--et-bracket-pick-card-border-radius, 10px);
+  }
+
+  .et-bracket-pick-card-note {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    display: block;
+    margin-block-start: var(--et-bracket-pick-card-note-offset, 4px);
+    overflow: hidden;
+    color: var(--et-surface-color-muted-solid, #666);
+    font-size: var(--et-bracket-pick-card-note-font-size, 10px);
+    line-height: 1.4;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-bracket-pick-card:where([data-note-tone='invalid']) .et-bracket-pick-card-note {
+    color: var(--et-theme-color-ink-solid, currentColor);
+  }
+
+  @keyframes et-bracket-pick-card-mark-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-bracket-pick-card-side,
+    .et-bracket-pick-card-side::before,
+    .et-bracket-pick-card-mark,
+    .et-bracket-pick-card-mark::after {
+      transition: none;
+    }
+
+    .et-bracket-pick-card-mark {
+      animation: none;
+    }
+  }
+}

package/src/lib/bracket/bracket-rounds-list.component.css

@@ -0,0 +1,75 @@
+@layer components {
+  @property --et-bracket-rounds-list-section-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  @property --et-bracket-rounds-list-round-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-bracket-rounds-list-match-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  .et-bracket-rounds-list-host {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-bracket-rounds-list-section-gap);
+  }
+
+  .et-bracket-rounds-list-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-bracket-rounds-list-round-gap);
+  }
+
+  .et-bracket-rounds-list-section-name {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .et-bracket-rounds-list-block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-bracket-rounds-list-match-gap);
+  }
+
+  /*
+   * The round header components are written for a fixed-height cell in the grid (`block-size: 100%`,
+   * centered text) — in a list they head a column of matches, so the box is content-sized and the text
+   * runs from the start edge.
+   */
+  .et-bracket-rounds-list-round-header {
+    .et-bracket-default-round-header-host {
+      align-items: start;
+      block-size: auto;
+      padding-inline: 0;
+      text-align: start;
+    }
+  }
+
+  .et-bracket-rounds-list-matches {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-bracket-rounds-list-match-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-bracket-rounds-list-match {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}

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

@@ -0,0 +1,55 @@
+@layer components {
+  .et-bracket-skeleton-host {
+    display: block;
+  }
+
+  .et-bracket-skeleton-match {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .et-bracket-skeleton-side {
+    flex: 1;
+    --et-skeleton-radius: 6px;
+  }
+
+  .et-bracket-skeleton-final-match {
+    align-items: center;
+    padding: 10px;
+  }
+
+  .et-bracket-skeleton-final-match .et-bracket-skeleton-final-title {
+    flex: none;
+    inline-size: 40%;
+  }
+
+  .et-bracket-skeleton-continue {
+    display: flex;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .et-bracket-skeleton-continue .et-bracket-skeleton-continue-bone {
+    flex: 1;
+    block-size: 100%;
+    --et-skeleton-radius: 6px;
+  }
+
+  .et-bracket-skeleton-round-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .et-bracket-skeleton-round-header .et-bracket-skeleton-round-title {
+    inline-size: 50%;
+  }
+}

package/src/lib/bracket/bracket.component.css

@@ -0,0 +1,102 @@
+@layer components {
+  .et-bracket {
+    position: relative;
+    transition: transform var(--et-bracket-move-duration, 0.2s) ease;
+  }
+
+  .et-bracket-round {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    transition: transform var(--et-bracket-move-duration, 0.2s) ease;
+  }
+
+  .et-bracket-element {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    transition:
+      transform var(--et-bracket-move-duration, 0.2s) ease,
+      opacity 0.2s;
+  }
+
+  /* Only the centered case has a rule: a header that fills its column - the shipped one does - is
+     centered already, so `start` has to leave it exactly as it was. */
+  .et-bracket-element--header:where([data-align='center']) {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .et-bracket-svg {
+    inline-size: 100%;
+    block-size: 100%;
+    position: absolute;
+
+    /*
+     * Connector lines default to the ambient surface's border color; consumers override with
+     * the public --et-bracket-line-color token. Not declared via @property because an
+     * @property initial-value cannot contain a var() (see the theming skill).
+     */
+    path {
+      color: var(--et-bracket-line-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
+      transition:
+        d var(--et-bracket-move-duration, 0.2s) ease,
+        opacity 0.2s;
+    }
+
+    /* The swiss group border color lives in BracketSwissStylesComponent, mounted by swissBracketLayout() —
+       a bracket that never draws groups never injects it. */
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-bracket,
+    .et-bracket-round,
+    .et-bracket-element,
+    .et-bracket-svg path {
+      transition: none;
+    }
+  }
+
+  .et-bracket-host--journey-hover {
+    path,
+    .et-bracket-element--match {
+      opacity: 0.5;
+    }
+
+    .et-bracket-journey-active {
+      opacity: 1 !important;
+    }
+
+    /* Where the run ended. The cell stays lit — it is part of the journey — but the row that lost is
+       struck through and faded, so a path that stops mid-bracket reads as an exit rather than as
+       missing data. Only ever one row of the two: the attribute is matched per participant. */
+    .et-bracket-journey-eliminated {
+      opacity: 0.55;
+      text-decoration: line-through;
+      text-decoration-thickness: 1px;
+    }
+
+    .et-bracket-journey-endpoint {
+      outline: 1px dashed var(--et-bracket-line-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
+      outline-offset: 2px;
+      border-radius: var(--et-match-card-border-radius, 10px);
+    }
+  }
+
+  /* Pinned. A hover is a glance and fades as the pointer moves on, so half opacity is enough of a
+     distinction; a pin persists and is usually the answer to "where did they get to", which is worth
+     pushing the rest of the bracket further back for. */
+  .et-bracket-host--journey-focused {
+    path,
+    .et-bracket-element--match {
+      opacity: 0.25;
+    }
+  }
+}

package/src/lib/bracket/layouts/swiss/bracket-swiss-styles.component.css

@@ -0,0 +1,10 @@
+@layer components {
+  .et-bracket-svg {
+    .et-bracket-swiss-group-border {
+      color: var(
+        --et-bracket-swiss-group-border-color,
+        var(--et-bracket-line-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)))
+      );
+    }
+  }
+}

package/src/lib/breadcrumb/breadcrumb-overflow.component.css

@@ -0,0 +1,38 @@
+@layer components {
+  .et-breadcrumb-overflow {
+    display: contents;
+  }
+
+  .et-breadcrumb-overflow-trigger {
+    --et-icon-button-border-radius: var(--et-breadcrumb-radius);
+
+    margin-inline: -4px;
+  }
+
+  .et-breadcrumb-overflow-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: -4px -8px;
+    padding: 0;
+    list-style: none;
+
+    .et-breadcrumb-item {
+      display: block;
+      padding: 4px 8px;
+      color: var(--et-surface-color-solid, CanvasText);
+      transition:
+        background 120ms ease,
+        color 120ms ease;
+
+      &:where(a, button):hover {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
+        text-decoration-color: transparent;
+      }
+
+      &:where(a, button):active {
+        background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent);
+      }
+    }
+  }
+}

package/src/lib/breadcrumb/breadcrumb.component.css

@@ -0,0 +1,120 @@
+@layer components {
+  @property --et-breadcrumb-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-breadcrumb-separator-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-breadcrumb-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-breadcrumb-loading-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 72px;
+  }
+
+  .et-breadcrumb {
+    display: block;
+    /* The clip that makes overflow measurable — `scroll.width > client.width` is the directive's
+       "doesn't fit" signal. Never `auto`: a scrollbar would defeat the collapsing it drives. */
+    overflow: hidden;
+    color: var(--et-surface-color-muted-solid, GrayText);
+  }
+
+  .et-breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: var(--et-breadcrumb-gap);
+    /* Natural width, so flex can't squeeze the crumbs into ellipsised stubs instead of overflowing. */
+    inline-size: max-content;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .et-breadcrumb-slot {
+    display: flex;
+    align-items: center;
+    gap: var(--et-breadcrumb-gap);
+    flex: none;
+    white-space: nowrap;
+  }
+
+  /* Hidden but still laid out: the directive measures the host's `clientWidth` and ignores a zero, so
+     `display: none` here would stop the measurement that clears this state. */
+  .et-breadcrumb:where([data-measuring]) {
+    visibility: hidden;
+  }
+
+  /* The list may drop its natural width here: the directive stops measuring while collapsed, so this
+     can't feed back into the collapse decision. */
+  .et-breadcrumb:where([data-collapsed]) {
+    .et-breadcrumb-list {
+      inline-size: auto;
+    }
+
+    .et-breadcrumb-slot:last-child {
+      flex: 0 1 auto;
+      min-inline-size: 0;
+
+      .et-breadcrumb-item {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .et-breadcrumb-item {
+    color: inherit;
+    border-radius: var(--et-breadcrumb-radius);
+    text-decoration: underline transparent;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    transition:
+      color 120ms ease,
+      text-decoration-color 120ms ease;
+
+    &:where(a, button):hover {
+      color: var(--et-surface-color-solid, CanvasText);
+      text-decoration-color: currentColor;
+    }
+
+    &:where(a, button):focus-visible {
+      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline-offset: 2px;
+    }
+
+    &:where([aria-current='page']) {
+      color: var(--et-surface-color-solid, CanvasText);
+      font-weight: 500;
+    }
+  }
+
+  .et-breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    color: var(--et-surface-color-subtle-solid, GrayText);
+  }
+
+  .et-breadcrumb-chevron {
+    rotate: 90deg;
+    inline-size: var(--et-breadcrumb-separator-size);
+    block-size: var(--et-breadcrumb-separator-size);
+  }
+
+  .et-breadcrumb-loading {
+    inline-size: var(--et-breadcrumb-loading-width);
+  }
+}