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

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;
   }
 

package/src/lib/table/table-select-cell.component.css

@@ -42,15 +42,25 @@
   }
 
   .et-table-row.et-table-row--selected .et-table-cell {
-    background: color-mix(in srgb, var(--_et-table-selected-accent) 12%, transparent);
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent) 32%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent) 12%, transparent)
+    );
   }
 
   .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-start,
   .et-table-row.et-table-row--selected .et-table-cell.et-table-sticky-end {
-    background: color-mix(
-      in srgb,
-      var(--_et-table-selected-accent) 12%,
-      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    background: light-dark(
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 32%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      ),
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 12%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      )
     );
   }
 
@@ -58,32 +68,52 @@
      base table paints on hover. */
   @media (hover: hover) {
     .et-table-row.et-table-row--selected:hover .et-table-cell {
-      background: color-mix(in srgb, var(--_et-table-selected-accent) 18%, transparent);
+      background: light-dark(
+        color-mix(in srgb, var(--_et-table-selected-accent) 38%, transparent),
+        color-mix(in srgb, var(--_et-table-selected-accent) 18%, transparent)
+      );
     }
 
     .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,
     .et-table-row.et-table-row--selected:hover .et-table-cell.et-table-sticky-end {
-      background: color-mix(
-        in srgb,
-        var(--_et-table-selected-accent) 18%,
-        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      background: light-dark(
+        color-mix(
+          in srgb,
+          var(--_et-table-selected-accent) 38%,
+          var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+        ),
+        color-mix(
+          in srgb,
+          var(--_et-table-selected-accent) 18%,
+          var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+        )
       );
     }
   }
 
   /* A held selected row escalates within its accent, for the same reason. */
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active .et-table-cell {
-    background: color-mix(in srgb, var(--_et-table-selected-accent) 26%, transparent);
+    background: light-dark(
+      color-mix(in srgb, var(--_et-table-selected-accent) 44%, transparent),
+      color-mix(in srgb, var(--_et-table-selected-accent) 26%, transparent)
+    );
   }
 
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
     .et-table-cell.et-table-sticky-start,
   .et-table-row.et-table-row--selected:where(.et-table-row--interactive, .et-table-row--link):active
     .et-table-cell.et-table-sticky-end {
-    background: color-mix(
-      in srgb,
-      var(--_et-table-selected-accent) 26%,
-      var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+    background: light-dark(
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 44%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      ),
+      color-mix(
+        in srgb,
+        var(--_et-table-selected-accent) 26%,
+        var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas))
+      )
     );
   }
 }

package/src/lib/table/table.component.css

@@ -548,13 +548,18 @@
      The row-link ring and the row/card box itself live in `TableRowLinkStylesComponent` and
      `TableCardRowStylesComponent`, mounted by the table when `[rowLink]` or `[appearance]="'cards'"`
      is set - a table using neither carries none of it. */
-  .et-table-header-label:focus-visible,
   .et-table-expander:focus-visible,
-  .et-table-cell:focus-visible {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+  .et-table-cell:focus-visible,
+  .et-table-header-label:focus-visible .et-table-header-label-box {
+    outline: 2px solid
+      light-dark(var(--et-theme-color-ink-solid, currentColor), var(--et-theme-color-primary-solid, currentColor));
     outline-offset: -2px;
   }
 
+  .et-table-header-label:focus-visible {
+    outline: none;
+  }
+
   .et-table-header-label {
     border-radius: 4px;
   }
@@ -646,7 +651,7 @@
     inline-size: 1.15em;
     block-size: 1.15em;
     transform: translateY(-0.045em);
-    color: var(--et-theme-color-primary-solid, currentColor);
+    color: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     /* Reversing the sort turns the arrow over in place — the element stays mounted across the flip,
        so a plain transition on `transform` is the whole animation. The glyph is drawn centred in its
        own box (see ARROW_UP_ICON), which is what keeps the ink still while it rotates. */
@@ -799,7 +804,7 @@
     inline-size: 40%;
     block-size: 100%;
     border-radius: 999px;
-    background: var(--et-theme-color-primary-solid, currentColor);
+    background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     animation: et-table-busy-sweep 1.1s ease-in-out infinite;
   }
 
@@ -826,4 +831,9 @@
       animation: none;
     }
   }
+
+  .et-table-host et-checkbox:where([aria-checked='true'], [aria-checked='mixed']) .et-checkbox-box {
+    outline: 1px solid var(--et-theme-color-ink-solid);
+    outline-offset: -1px;
+  }
 }

package/src/lib/tabs/tab-bar-styles.component.css

@@ -167,7 +167,7 @@
 
   .et-tab-group__trigger:focus-visible .et-tab-group__trigger-content,
   .et-nav-tab-link:focus-visible .et-nav-tab-link__content {
-    outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+    outline: 2px solid var(--_et-focus-ring-color);
     outline-offset: 2px;
   }
 }