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

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

@@ -0,0 +1,441 @@
+@layer components {
+  @property --et-match-card-border-radius {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 10px;
+  }
+
+  /* An inline-size container's own width can never come from its contents, so a card in a flex row with
+     no width of its own would collapse to nothing. This is the floor that keeps it usable there — low
+     enough to stay out of the way of a narrow bracket column, which is the other way cards get sized. */
+  @property --et-match-card-min-inline-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 180px;
+  }
+
+  /* One token per density, rather than one token the density rules overwrite: the card only ever *reads*
+     these, so a value set from outside survives the mode switch instead of being clobbered by it. */
+  @property --et-match-card-compact-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-match-card-expanded-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-match-card-compact-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-match-card-expanded-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-match-card-compact-emblem-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-match-card-expanded-emblem-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-match-card-compact-name-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-match-card-expanded-name-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 15px;
+  }
+
+  @property --et-match-card-compact-score-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-match-card-expanded-score-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  /* The third density, below the dense row: a code and a number. See the minimal threshold below. */
+  @property --et-match-card-minimal-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 6px;
+  }
+
+  @property --et-match-card-minimal-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 3px;
+  }
+
+  @property --et-match-card-minimal-name-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 11px;
+  }
+
+  @property --et-match-card-minimal-score-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-match-card {
+    container-type: inline-size;
+    container-name: et-match-card;
+    display: block;
+    box-sizing: border-box;
+    min-inline-size: var(--et-match-card-min-inline-size);
+    border-radius: var(--et-match-card-border-radius);
+    /* Set rather than inherited, so a card on an `<a>` doesn't come out link-blue and underlined. */
+    color: var(--et-surface-color-solid, currentColor);
+    text-decoration: none;
+  }
+
+  /* The card's actual box. Everything density-dependent lives here because a container query can only
+     match descendants of its container, and the container is the host. */
+  .et-match-card-content {
+    --_et-match-card-padding: var(--et-match-card-compact-padding);
+    --_et-match-card-gap: var(--et-match-card-compact-gap);
+    --_et-match-card-emblem-size: var(--et-match-card-compact-emblem-size);
+    --_et-match-card-name-font-size: var(--et-match-card-compact-name-font-size);
+    --_et-match-card-score-font-size: var(--et-match-card-compact-score-font-size);
+    /* What the dense row does without: the per-game breakdown, participant subtitles, the match label,
+       the kick-off, and therefore the meta row that would carry the last two. */
+    --_et-match-card-games-display: none;
+    --_et-match-card-meta-display: none;
+    --_et-match-card-time-display: none;
+    display: grid;
+    /* Centred rather than top-packed, for the one case where the card is given more height than it needs
+       — a bracket cell, whose height is the layout engine's decision. */
+    align-content: center;
+    gap: var(--_et-match-card-gap);
+    box-sizing: border-box;
+    padding: var(--_et-match-card-padding);
+    background: var(--et-surface-background-solid, transparent);
+    border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
+    border-radius: inherit;
+  }
+
+  /* Past the first threshold the card is the featured one; past the second the two sides stop stacking
+     and face each other across the middle. The thresholds are constants, not tokens: a container query
+     condition may not contain `var()`, so there is nothing to point a custom property at. Pin the layout
+     with the `size` input instead, and tune each one through the tokens above. */
+  /* Below the dense row there is one density left: a code and a number. A bracket at `density="compact"`
+     gives a cell about 150px, and an emblem, a name and a score is one thing too many for it — so the
+     emblems go and the type shrinks, which is the difference between a six-round bracket fitting an
+     article column and not. Applies to a pinned `compact` too, since compact means "the dense row" and
+     this is that row with nothing left to remove. */
+  @container et-match-card (max-inline-size: 149px) {
+    .et-match-card:where([data-size='auto']) .et-match-card-content,
+    .et-match-card:where([data-size='compact']) .et-match-card-content {
+      --_et-match-card-padding: var(--et-match-card-minimal-padding);
+      --_et-match-card-gap: var(--et-match-card-minimal-gap);
+      --_et-match-card-name-font-size: var(--et-match-card-minimal-name-font-size);
+      --_et-match-card-score-font-size: var(--et-match-card-minimal-score-font-size);
+      --_et-match-participant-emblem-display: none;
+    }
+  }
+
+  @container et-match-card (min-inline-size: 320px) {
+    .et-match-card:where([data-size='auto']) .et-match-card-content {
+      --_et-match-card-padding: var(--et-match-card-expanded-padding);
+      --_et-match-card-gap: var(--et-match-card-expanded-gap);
+      --_et-match-card-emblem-size: var(--et-match-card-expanded-emblem-size);
+      --_et-match-card-name-font-size: var(--et-match-card-expanded-name-font-size);
+      --_et-match-card-score-font-size: var(--et-match-card-expanded-score-font-size);
+      --_et-match-card-games-display: flex;
+      --_et-match-card-subtitle-display: block;
+      --_et-match-card-label-display: block;
+      --_et-match-card-meta-display: flex;
+      --_et-match-card-time-display: block;
+    }
+  }
+
+  @container et-match-card (min-inline-size: 560px) {
+    .et-match-card:where([data-size='auto']) .et-match-card-content {
+      --_et-match-card-sides-columns: 1fr auto 1fr;
+      --_et-match-card-sides-gap: 12px;
+      --_et-match-card-away-flow: row-reverse;
+      --_et-match-card-home-participant-flow: row-reverse;
+      --_et-match-card-home-text-align: end;
+      --_et-match-card-versus-display: block;
+      --_et-match-card-side-marker-size: 0px;
+    }
+  }
+
+  /* `size="expanded"` and `size="wide"` say the same things without measuring. Mutually exclusive with
+     the rules above, since a card has exactly one `data-size`. */
+  .et-match-card:where([data-size='expanded']) .et-match-card-content,
+  .et-match-card:where([data-size='wide']) .et-match-card-content {
+    --_et-match-card-padding: var(--et-match-card-expanded-padding);
+    --_et-match-card-gap: var(--et-match-card-expanded-gap);
+    --_et-match-card-emblem-size: var(--et-match-card-expanded-emblem-size);
+    --_et-match-card-name-font-size: var(--et-match-card-expanded-name-font-size);
+    --_et-match-card-score-font-size: var(--et-match-card-expanded-score-font-size);
+    --_et-match-card-games-display: flex;
+    --_et-match-card-subtitle-display: block;
+    --_et-match-card-label-display: block;
+    --_et-match-card-meta-display: flex;
+    --_et-match-card-time-display: block;
+  }
+
+  /* The dense row is two rows and nothing else — its round is named by the column it sits in and its
+     kick-off by the list around it. The one exception is a live badge, which is the whole reason someone
+     is looking at the thing. */
+  .et-match-card:where([data-status='live']) .et-match-card-content {
+    --_et-match-card-meta-display: flex;
+  }
+
+  /* Emblems only. The names are still in the card's accessible name and in each emblem's alt text. */
+  .et-match-card:where([data-hide-names]) .et-match-participant-names {
+    display: none;
+  }
+
+  .et-match-card:where([data-size='wide']) .et-match-card-content {
+    --_et-match-card-sides-columns: 1fr auto 1fr;
+    --_et-match-card-sides-gap: 12px;
+    --_et-match-card-away-flow: row-reverse;
+    --_et-match-card-home-participant-flow: row-reverse;
+    --_et-match-card-home-text-align: end;
+    --_et-match-card-versus-display: block;
+    --_et-match-card-side-marker-size: 0px;
+  }
+
+  .et-match-card-meta {
+    display: var(--_et-match-card-meta-display, flex);
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-inline-size: 0;
+    font-size: 11px;
+    line-height: 1.4;
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-match-card-label {
+    display: var(--_et-match-card-label-display, none);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .et-match-card-time {
+    display: var(--_et-match-card-time-display, block);
+    flex: none;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Tinted with the color theme in scope, which the component points at the app's `type: 'error'` theme
+     by default — the red a live badge is expected to be, without this file naming a theme. */
+  .et-match-card-live {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 5px;
+    padding-inline: 6px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--et-theme-color-ink-solid, currentColor);
+    background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 14%, transparent);
+    border-radius: 4px;
+  }
+
+  .et-match-card-live-dot {
+    flex: none;
+    inline-size: 6px;
+    block-size: 6px;
+    background: var(--et-theme-color-primary-solid, currentColor);
+    border-radius: 50%;
+    animation: et-match-card-live-pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes et-match-card-live-pulse {
+    50% {
+      opacity: 0.35;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-match-card-live-dot {
+      animation: none;
+    }
+  }
+
+  /* One column of two rows by default; three columns in the wide arrangement, where the outer two are
+     equal `1fr` so the middle one — the result — sits dead centre no matter how long the names are. That
+     equality is the whole trick: sized to content, the two halves would differ and the middle would
+     drift. Every value reads a var with an inline fallback rather than declaring a default here, since a
+     declaration on this element would beat the one the layout rules set on the card content above it. */
+  .et-match-card-sides {
+    display: grid;
+    grid-template-columns: var(--_et-match-card-sides-columns, 1fr);
+    align-items: center;
+    gap: var(--_et-match-card-sides-gap, 4px);
+    min-inline-size: 0;
+  }
+
+  .et-match-card-side {
+    --_et-match-card-side-color: var(--et-surface-color-solid, currentColor);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+  }
+
+  /* Mirrored in the wide arrangement, and mirrored properly: the away side's row reverses so its value
+     lands next to the middle, and the home side's *participant* reverses so its emblem does too. Both
+     crests then flank the result with the names to the outside, which is the arrangement every wide
+     fixture row uses. `row-reverse` reverses the row the browser already resolved for the writing mode,
+     so RTL keeps working. */
+  .et-match-card-side:where([data-side='away']) {
+    flex-direction: var(--_et-match-card-away-flow, row);
+  }
+
+  .et-match-card-side:where([data-side='home']) {
+    text-align: var(--_et-match-card-home-text-align, start);
+  }
+
+  .et-match-card-side:where([data-side='home']) .et-match-card-participant {
+    flex-direction: var(--_et-match-card-home-participant-flow, row);
+  }
+
+  /* The winner's bar. Drawn on both sides — transparent on the loser's — because a marker that appears on
+     one row only would push that row's emblem out of line with the other's. */
+  .et-match-card-side::before {
+    display: var(--_et-match-card-side-marker-display, none);
+    flex: none;
+    align-self: stretch;
+    inline-size: var(--_et-match-card-side-marker-size, 2px);
+    background: var(--_et-match-card-side-marker-color, transparent);
+    border-radius: 1px;
+    content: '';
+  }
+
+  /* Between the two sides, and only where they are side by side with nothing else to put there. */
+  .et-match-card-versus {
+    display: var(--_et-match-card-versus-display, none);
+    flex: none;
+    padding-inline: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  /* The other form the result slot takes — never together with a score, so it can share its metrics. */
+  .et-match-card-outcome {
+    flex: none;
+    min-inline-size: 1.2em;
+    font-size: var(--_et-match-card-score-font-size);
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--_et-match-card-side-color);
+    text-align: center;
+  }
+
+  /* Two jobs, one selector: size the participant primitive for this density, and take over its color so
+     the winner emphasis below reaches the name. Both need to beat the primitive's own single-class
+     rules, which is why this is a descendant selector rather than a token on the card. */
+  .et-match-card-content .et-match-card-participant {
+    --et-match-participant-emblem-size: var(--_et-match-card-emblem-size);
+    --et-match-participant-font-size: var(--_et-match-card-name-font-size);
+    flex: 1;
+    min-inline-size: 0;
+    color: var(--_et-match-card-side-color);
+  }
+
+  /* A participant's second line is the first thing a dense row has no space for — it would make every row
+     two lines tall, which is the whole point of the dense row gone. Off by default here, back on in the
+     roomier layouts. The primitive keeps showing it when used standalone. */
+  .et-match-card-content .et-match-participant-subtitle {
+    display: var(--_et-match-card-subtitle-display, none);
+  }
+
+  .et-match-card-score {
+    flex: none;
+    font-size: var(--_et-match-card-score-font-size);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    color: var(--_et-match-card-side-color);
+  }
+
+  /* A decided match reads its result off the emphasis, which is faster than reading two numbers: the
+     winner keeps full weight and color and gets the accent bar, the other side steps back. A draw
+     emphasizes neither, and draws no bars at all. */
+  .et-match-card:where([data-winner]) .et-match-card-side {
+    --_et-match-card-side-color: var(--et-surface-color-muted-solid, currentColor);
+    --_et-match-card-side-marker-display: block;
+  }
+
+  .et-match-card:where([data-winner='home']) .et-match-card-side:where([data-side='home']),
+  .et-match-card:where([data-winner='away']) .et-match-card-side:where([data-side='away']) {
+    --_et-match-card-side-color: var(--et-surface-color-solid, currentColor);
+    --_et-match-card-side-marker-color: var(--et-theme-color-primary-solid, currentColor);
+    --_et-match-card-side-marker-display: block;
+    font-weight: 600;
+  }
+
+  .et-match-card-games {
+    display: var(--_et-match-card-games-display);
+    flex-wrap: wrap;
+    gap: 4px;
+    margin: 0;
+    padding: 0;
+    font-size: 11px;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    list-style: none;
+  }
+
+  .et-match-card-game {
+    flex: none;
+    padding-inline: 5px;
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 10%, transparent);
+    border-radius: 4px;
+  }
+
+  .et-match-card:where([data-interactive]) {
+    cursor: pointer;
+  }
+
+  /* Bare rather than `:where()`-flattened: an interaction state is meant to escalate over the config
+     modifiers above it. */
+  .et-match-card:where([data-interactive]):hover .et-match-card-content {
+    background: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, gray) 6%,
+      var(--et-surface-background-solid, transparent)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--et-surface-interaction-solid, gray) 24%,
+      var(--et-surface-border-solid, transparent)
+    );
+  }
+}

package/src/lib/match/match-participant.component.css

@@ -0,0 +1,137 @@
+@layer components {
+  @property --et-match-participant-emblem-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 28px;
+  }
+
+  @property --et-match-participant-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 10px;
+  }
+
+  @property --et-match-participant-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  .et-match-participant {
+    display: flex;
+    align-items: center;
+    gap: var(--et-match-participant-gap);
+    min-inline-size: 0;
+    /* Set rather than inherited, so this on an `<a>` doesn't come out link-blue and underlined. */
+    color: var(--et-surface-color-solid, currentColor);
+    text-decoration: none;
+  }
+
+  /* On an `<a>` or a `<button>`: the name is what the pointer is aiming at, so that is what reacts. */
+  .et-match-participant:where([data-interactive]) {
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    text-align: start;
+  }
+
+  .et-match-participant:where([data-interactive]):hover .et-match-participant-name {
+    text-decoration: underline;
+  }
+
+  /* A fixed frame whether or not there is an emblem, so a row of participants lines up and a late
+     image doesn't shove the name sideways. */
+  .et-match-participant-emblem {
+    /* A var so the densest card can drop the frame entirely — `display: none` rather than a zero size,
+       which would still hold the row's gap open. */
+    display: var(--_et-match-participant-emblem-display, grid);
+    place-items: center;
+    flex: none;
+    inline-size: var(--et-match-participant-emblem-size);
+    block-size: var(--et-match-participant-emblem-size);
+    overflow: hidden;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 10%, transparent);
+  }
+
+  .et-match-participant-picture,
+  .et-match-participant-bone {
+    inline-size: 100%;
+    block-size: 100%;
+    /* A grid item's `min-*-size: auto` is content-based, so a broken image's intrinsic box would
+       stretch the frame past the size set above and pull the fallback mark off centre. */
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  /* Stands in for an emblem that is absent or failed to load — a letter rather than an empty disc, so
+     the frame still points at somebody. Sized off the frame, so it shrinks with a compact row. */
+  .et-match-participant-emblem-mark {
+    color: var(--et-surface-color-muted-solid, currentColor);
+    font-size: calc(var(--et-match-participant-emblem-size) * 0.45);
+    font-weight: 600;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Generated content keeps the letter out of the participant's textContent. */
+  .et-match-participant-emblem-mark::before {
+    content: attr(data-mark);
+  }
+
+  /* One column for the two lines, so the emblem stays centred against both of them. */
+  .et-match-participant-names {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  .et-match-participant-name {
+    min-inline-size: 0;
+    overflow: hidden;
+    font-size: var(--et-match-participant-font-size);
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The org behind the roster, the club behind the squad. Quiet by construction — it is context for the
+     name above it, not a second name. */
+  .et-match-participant-subtitle {
+    min-inline-size: 0;
+    overflow: hidden;
+    font-size: max(10px, calc(var(--et-match-participant-font-size) - 4px));
+    line-height: 1.3;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* A slot waiting to be filled reads as secondary — it is not the name of anything yet. */
+  .et-match-participant-name--tbd {
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-match-participant-name-bone {
+    inline-size: 96px;
+  }
+
+  .et-match-participant-seed {
+    flex: none;
+    padding-inline: 5px;
+    font-size: 11px;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+    color: var(--et-surface-color-muted-solid, currentColor);
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 12%, transparent);
+    border-radius: 4px;
+  }
+
+  .et-match-participant:where([data-compact]) {
+    --et-match-participant-emblem-size: 20px;
+    --et-match-participant-gap: 8px;
+    --et-match-participant-font-size: 13px;
+  }
+}

package/src/lib/match/match-score.component.css

@@ -0,0 +1,74 @@
+@layer components {
+  /* A fixed box the two values cross inside, so a rolling score never nudges the row it sits in. */
+  .et-match-score {
+    display: grid;
+    position: relative;
+    flex: none;
+    place-items: center end;
+    min-inline-size: 1ch;
+    overflow: hidden;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+  }
+
+  /* Both values occupy the same cell — that is what lets one leave while the other arrives. */
+  .et-match-score-digit {
+    grid-area: 1 / 1;
+  }
+
+  .et-match-score-digit:where([data-state='in']) {
+    animation: et-match-score-roll-in 220ms cubic-bezier(0.2, 0, 0.2, 1);
+  }
+
+  .et-match-score-digit:where([data-state='out']) {
+    animation: et-match-score-roll-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
+  }
+
+  /* Behind the digits, in the color theme in scope: the side that just scored catches the eye without the
+     card moving or changing size. */
+  .et-match-score-flash {
+    position: absolute;
+    /* Inside the clip box rather than bleeding past it: `overflow: hidden` is what makes the digits roll,
+       and it would cut a wider glow into a rectangle anyway. */
+    inset: 0;
+    background: var(--et-theme-color-primary-solid, currentColor);
+    border-radius: 6px;
+    opacity: 0;
+    animation: et-match-score-flash 520ms ease-out;
+    pointer-events: none;
+  }
+
+  @keyframes et-match-score-roll-in {
+    from {
+      opacity: 0;
+      translate: 0 70%;
+    }
+  }
+
+  @keyframes et-match-score-roll-out {
+    to {
+      opacity: 0;
+      translate: 0 -70%;
+    }
+  }
+
+  @keyframes et-match-score-flash {
+    30% {
+      opacity: 0.22;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* Near-instant rather than `none`: the outgoing value is dropped on `animationend`, so an animation that
+     never runs is an animation that never finishes — and a value that never leaves. */
+  @media (prefers-reduced-motion: reduce) {
+    .et-match-score-digit:where([data-state='in']),
+    .et-match-score-digit:where([data-state='out']),
+    .et-match-score-flash {
+      animation-duration: 1ms;
+    }
+  }
+}

package/src/lib/menu/menu-group-label.component.css

@@ -0,0 +1,12 @@
+@layer components {
+  .et-menu-group-label {
+    display: block;
+    padding-block: 6px 4px;
+    padding-inline: var(--et-menu-item-padding-inline, 10px);
+    color: var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55)));
+    font-size: var(--et-menu-group-label-font-size, 12px);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+}

package/src/lib/menu/menu-item-shortcut.component.css

@@ -0,0 +1,10 @@
+@layer components {
+  .et-menu-item-shortcut {
+    display: inline-flex;
+    align-items: center;
+    color: var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55)));
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+  }
+}

package/src/lib/menu/menu-item-submenu-icon.component.css

@@ -0,0 +1,18 @@
+@layer components {
+  .et-menu-item-submenu-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--et-menu-item-submenu-icon-size);
+    block-size: var(--et-menu-item-submenu-icon-size);
+    color: var(--_et-menu-muted-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55)));
+    /* the registered chevron points up natively - rotate it to point into the submenu */
+    rotate: 90deg;
+
+    /* the chevron is directional, so it turns the other way when the menu reads right-to-left */
+    &:dir(rtl) {
+      rotate: -90deg;
+    }
+  }
+}