@ethlete/components 1.0.0-next.78 → 1.0.0-next.80

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

@@ -267,7 +267,7 @@
     flex: none;
     inline-size: 6px;
     block-size: 6px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     border-radius: 50%;
     animation: et-match-card-live-pulse 2s ease-in-out infinite;
   }
@@ -395,9 +395,15 @@
   .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-color: light-dark(
+      var(--et-theme-color-ink-solid),
+      var(--et-theme-color-primary-solid)
+    );
     --_et-match-card-side-marker-display: block;
-    font-weight: 600;
+
+    .et-match-participant-name {
+      font-weight: 600;
+    }
   }
 
   .et-match-card-games {

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

@@ -6,11 +6,14 @@
     flex: none;
     place-items: center end;
     min-inline-size: 1ch;
-    overflow: hidden;
     font-variant-numeric: tabular-nums;
     line-height: 1.2;
   }
 
+  .et-match-score:has(.et-match-score-digit:is([data-state='in'], [data-state='out']), .et-match-score-flash) {
+    overflow: hidden;
+  }
+
   /* Both values occupy the same cell — that is what lets one leave while the other arrives. */
   .et-match-score-digit {
     grid-area: 1 / 1;

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

@@ -10,7 +10,7 @@
       flex: none;
       inline-size: var(--et-menu-item-icon-size, 16px);
       block-size: var(--et-menu-item-icon-size, 16px);
-      color: var(--et-theme-color-primary-solid, currentColor);
+      color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &.et-menu-radio-item .et-menu-item-check::before {

package/src/lib/menu/menu.component.css

@@ -245,11 +245,16 @@
         color 120ms ease,
         opacity 120ms ease;
 
+      &[data-active]:where([data-active-source='keyboard']):focus-visible {
+        outline: 2px solid var(--et-theme-color-ink-solid);
+        outline-offset: -2px;
+      }
+
       /* the roving focus is applied programmatically on mouse-open too, so :focus-visible (instead
        of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
        interaction; a trigger whose submenu is open stays highlighted the whole time, and an item
        activated from the keyboard keeps its highlight while the menu fades out */
-      &[data-active]:where(:focus-visible),
+      &[data-active]:where([data-active-source='keyboard']:focus-visible),
       &[data-highlight-held],
       &[data-menu-open] {
         background: var(--_et-menu-item-active-background);

package/src/lib/notification/notification.component.css

@@ -105,7 +105,7 @@
     min-width: var(--et-notification-min-width);
     max-width: var(--et-notification-max-width);
     border-inline-start: var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);
-    font-family: inherit;
+    font-family: var(--et-font-family, inherit);
     font-size: var(--et-notification-font-size);
     line-height: var(--et-notification-line-height);
 
@@ -205,12 +205,12 @@
 
   .et-notification-dismiss-btn {
     flex-shrink: 0;
-    opacity: 0.4;
+    opacity: 0.75;
     transition: opacity 120ms ease;
 
     @media (hover: hover) {
       &:hover {
-        opacity: 0.8;
+        opacity: 1;
       }
     }
   }

package/src/lib/overlay/overlay-container.component.css

@@ -164,4 +164,8 @@
   .et-force-invisible {
     visibility: hidden !important;
   }
+
+  .et-overlay--dialog .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/pagination/pagination.component.css

@@ -168,4 +168,8 @@
     white-space: nowrap;
     color: var(--et-surface-color-muted-solid, CanvasText);
   }
+
+  .et-pagination-host .et-pagination-button:where([aria-current='page']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/progress-steps/progress-step.component.css

@@ -47,7 +47,7 @@
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error']):not(
         :last-child
       )::after {
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: var(--et-theme-color-ink-solid);
     }
 
     .et-progress-step-marker {
@@ -83,13 +83,13 @@
     }
 
     &[data-state='current'] .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       color: var(--et-theme-color-ink-solid, currentColor);
     }
 
     &:is([data-state='complete'], [data-state='success'], [data-state='warning'], [data-state='error'])
       .et-progress-step-marker {
-      border-color: var(--et-theme-color-primary-solid, currentColor);
+      border-color: var(--et-theme-color-ink-solid);
       background: var(--et-theme-color-primary-solid, currentColor);
       color: var(--et-theme-color-on-primary-solid, white);
     }
@@ -175,7 +175,7 @@
       @media (hover: hover) {
         &:hover {
           .et-progress-step-marker {
-            border-color: var(--et-theme-color-primary-solid, currentColor);
+            border-color: var(--et-theme-color-ink-solid);
           }
 
           .et-progress-step-label {

package/src/lib/query-error/query-error.component.css

@@ -20,4 +20,8 @@
       gap: 8px;
     }
   }
+
+  .et-query-error-host .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/scheduler/scheduler-appointment-styles.component.css

@@ -1,4 +1,12 @@
 @layer components {
+  et-scheduler-badge-color-dot,
+  et-scheduler-badge-title,
+  et-scheduler-badge-time-range,
+  et-scheduler-badge-location,
+  et-scheduler-badge-chain-count {
+    display: contents;
+  }
+
   .et-scheduler-appointment {
     display: flex;
     align-items: center;
@@ -22,7 +30,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
 
@@ -50,7 +59,7 @@
     overflow: hidden;
     font-weight: 600;
     min-inline-size: 0;
-    flex: 1;
+    flex: 1 1 auto;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -69,14 +78,19 @@
   }
 
   .et-scheduler-appointment-time-range {
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     font-variant-numeric: tabular-nums;
+    text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .et-scheduler-appointment-location {
     display: flex;
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     align-items: center;
     gap: 3px;
     max-inline-size: 40%;
@@ -97,7 +111,9 @@
 
   .et-scheduler-appointment-chain-count {
     display: flex;
-    flex-shrink: 0;
+    overflow: hidden;
+    min-inline-size: 0;
+    flex-shrink: 100;
     align-items: center;
     gap: 2px;
     font-variant-numeric: tabular-nums;

package/src/lib/scheduler/scheduler-month-view.component.css

@@ -58,7 +58,8 @@
     user-select: none;
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
 
@@ -136,7 +137,8 @@
 
     &:focus-visible {
       border-radius: 4px;
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
   }

package/src/lib/scheduler/scheduler-time-grid-view.component.css

@@ -42,7 +42,10 @@
   }
 
   .et-scheduler-time-grid-body {
+    --_et-scheduler-time-grid-hour-label-line-height: 14px;
+
     overflow-y: auto;
+    padding-block-start: calc(var(--_et-scheduler-time-grid-hour-label-line-height) / 2);
     max-block-size: var(--et-scheduler-time-grid-body-max-height);
   }
 
@@ -129,7 +132,8 @@
   .et-scheduler-time-grid-slot,
   .et-scheduler-time-grid-all-day-cell {
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: -2px;
     }
   }
@@ -146,6 +150,7 @@
     inline-size: max-content;
     transform: translateY(-50%);
     font-size: 11px;
+    line-height: var(--_et-scheduler-time-grid-hour-label-line-height);
     font-variant-numeric: tabular-nums;
     color: var(--et-surface-color-muted-solid);
   }
@@ -253,7 +258,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid);
+      outline: 2px solid
+        light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
       outline-offset: 1px;
     }
 

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

@@ -18,7 +18,7 @@
     background-color: transparent;
 
     &.et-scrollable-navigation-item--active::after {
-      background-color: var(--et-theme-color-primary, #c6c6c6);
+      background-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary));
     }
 
     &::after {

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

@@ -156,7 +156,7 @@
   .et-standings-pick-cut-line {
     flex: 1;
     block-size: 1px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     opacity: 0.5;
   }
 

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

@@ -67,7 +67,6 @@
   }
 
   .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);
@@ -115,13 +114,14 @@
     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-zone]) .et-standings-cell:where([data-column='position']) {
+    box-shadow: inset var(--et-standings-zone-bar-width) 0 0
+      light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+
+    &:dir(rtl) {
+      box-shadow: inset calc(var(--et-standings-zone-bar-width) * -1) 0 0
+        light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    }
   }
 
   .et-standings-row:where([data-highlighted]) {
@@ -167,7 +167,7 @@
   }
 
   .et-standings-form-result:where([data-result='tie']) {
-    background: color-mix(in srgb, var(--et-surface-color-solid, gray) 45%, transparent);
+    background: color-mix(in srgb, var(--et-surface-color-solid, gray) 25%, transparent);
   }
 
   .et-standings-form-result:where([data-result='loss']) {
@@ -195,7 +195,7 @@
     flex: none;
     inline-size: 10px;
     block-size: 3px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     border-radius: 2px;
   }
 }

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

@@ -43,7 +43,7 @@
   }
 
   .et-stat-tile-sparkline-current {
-    stroke: var(--et-theme-color-primary-solid, currentColor);
+    stroke: var(--et-theme-color-ink-solid, currentColor);
     stroke-width: var(--et-stat-tile-sparkline-current-size);
   }
 }

package/src/lib/stream/consent/stream-consent.component.css

@@ -0,0 +1,99 @@
+@layer components {
+  @property --et-stream-consent-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-stream-consent-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-stream-consent-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-stream-consent-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-stream-consent-heading-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-stream-consent-heading-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --et-stream-consent-heading-line-height {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 122%;
+  }
+
+  @property --et-stream-consent-heading-letter-spacing {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0.2px;
+  }
+
+  @property --et-stream-consent-description-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-stream-consent-description-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 400;
+  }
+
+  @property --et-stream-consent-description-line-height {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 150%;
+  }
+
+  .et-stream-consent {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--et-surface-background-solid, inherit);
+    color: var(--et-surface-color-solid, inherit);
+  }
+
+  .et-stream-consent-card {
+    --et-stream-overlay-card-padding: var(--et-stream-consent-padding);
+    --et-stream-overlay-card-gap: var(--et-stream-consent-gap);
+    --et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);
+    --et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);
+    --et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);
+    --et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);
+    --et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);
+    --et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);
+    --et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);
+    --et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);
+    --et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height);
+  }
+
+  .et-stream-consent-icon {
+    margin-block-end: 0.4rem;
+  }
+
+  .et-stream-consent-description {
+    margin-block-end: 0.8rem;
+  }
+}

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

@@ -0,0 +1,100 @@
+@layer components {
+  @property --et-stream-player-error-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-stream-player-error-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-stream-player-error-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-stream-player-error-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-stream-player-error-heading-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-stream-player-error-heading-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 600;
+  }
+
+  @property --et-stream-player-error-heading-line-height {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 122%;
+  }
+
+  @property --et-stream-player-error-heading-letter-spacing {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0.2px;
+  }
+
+  @property --et-stream-player-error-description-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-stream-player-error-description-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 400;
+  }
+
+  @property --et-stream-player-error-description-line-height {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 150%;
+  }
+
+  .et-stream-player-error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--et-surface-background-solid, inherit);
+    color: var(--et-surface-color-solid, inherit);
+    z-index: 1;
+  }
+
+  .et-stream-player-error-card {
+    --et-stream-overlay-card-padding: var(--et-stream-player-error-padding);
+    --et-stream-overlay-card-gap: var(--et-stream-player-error-gap);
+    --et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);
+    --et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);
+    --et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);
+    --et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);
+    --et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);
+    --et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);
+    --et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);
+    --et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);
+    --et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height);
+  }
+
+  .et-stream-player-error-icon {
+    margin-block-end: 0.4rem;
+  }
+
+  .et-stream-player-error-description {
+    margin-block-end: 0.8rem;
+  }
+}

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

@@ -0,0 +1,16 @@
+@layer components {
+  .et-stream-player-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--et-surface-background-solid, inherit);
+    color: var(--et-surface-color-solid, inherit);
+    z-index: 1;
+
+    .et-spinner {
+      --et-spinner-color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
+    }
+  }
+}

package/src/lib/stream/pip/pip-slot-placeholder.component.css

@@ -0,0 +1,68 @@
+@layer components {
+  @property --et-pip-slot-placeholder-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-pip-slot-placeholder-padding {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-pip-slot-placeholder-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 36px;
+  }
+
+  @property --et-pip-slot-placeholder-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-pip-slot-placeholder-message-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-pip-slot-placeholder-message-weight {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 400;
+  }
+
+  @property --et-pip-slot-placeholder-message-line-height {
+    syntax: '<percentage>';
+    inherits: true;
+    initial-value: 150%;
+  }
+
+  et-pip-slot-placeholder {
+    display: contents;
+  }
+
+  .et-pip-slot-placeholder-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--et-surface-background-solid, inherit);
+    color: var(--et-surface-color-solid, inherit);
+    z-index: 20;
+  }
+
+  .et-pip-slot-placeholder-card {
+    --et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);
+    --et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);
+    --et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);
+    --et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);
+    --et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);
+    --et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);
+    --et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height);
+  }
+}

package/src/lib/stream/stream-player-slot-styles.component.css

@@ -11,4 +11,8 @@
     overflow: hidden;
     border-radius: var(--et-stream-player-slot-radius);
   }
+
+  .et-stream-player-slot .et-button:where([data-variant='filled']) {
+    --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/table/table-resize-grip.component.css

@@ -40,7 +40,8 @@
   }
 
   .et-table-resize-grip:focus-visible {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    outline: 2px solid
+      light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
     outline-offset: -2px;
   }