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

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

package/src/lib/tabs/tabs/tab-group.component.css

@@ -0,0 +1,111 @@
+@layer components {
+  @property --et-tab-group-gap {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-header-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+  }
+
+  @property --et-tab-group-trigger-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-tab-group-trigger-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-tab-group-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-tab-group-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  .et-tab-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--et-tab-group-gap);
+
+    --et-tab-group-trigger-padding-inline: var(--et-tab-padding-inline);
+    --et-tab-group-trigger-padding-block: var(--et-tab-padding-block);
+    --et-tab-group-underline-size: var(--et-tab-underline-size);
+    --et-tab-group-underline-radius: var(--et-tab-underline-radius);
+    --et-tab-group-font-size: var(--et-tab-font-size);
+    --et-tab-bar-underline-size: var(--et-tab-group-underline-size);
+    --et-tab-bar-underline-radius: var(--et-tab-group-underline-radius);
+
+    &[data-orientation='vertical'] {
+      flex-direction: row;
+    }
+
+    &:where([data-variant='primary'][data-size='sm']),
+    &:where([data-variant='primary'][data-size='md']) {
+      --et-tab-group-underline-size: 3px;
+    }
+
+    &:where([data-variant='primary'][data-size='lg']) {
+      --et-tab-group-underline-size: 4px;
+    }
+  }
+
+  .et-tab-group__header-shell {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header-scrollable {
+    min-inline-size: 0;
+  }
+
+  .et-tab-group__header {
+    position: relative;
+    gap: var(--et-tab-group-header-gap);
+
+    [data-orientation='vertical'] & {
+      justify-items: start;
+    }
+  }
+
+  .et-tab-group__trigger {
+    padding-inline: var(--et-tab-group-trigger-padding-inline);
+    padding-block: var(--et-tab-group-trigger-padding-block);
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: var(--et-tab-group-font-size);
+
+    .et-tab-group__trigger-content {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
+  .et-tab-group {
+    --et-tab-baseline-opacity: 1;
+  }
+
+  .et-tab-group__body {
+    display: grid;
+  }
+
+  .et-tab-group__panel {
+    grid-area: 1 / 1;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+}

package/src/lib/time-picker/time-picker.component.css

@@ -166,7 +166,8 @@
       }
 
       &:focus-visible:not([data-pointer-focused]) {
-        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/timeline/timeline-item.component.css

@@ -72,7 +72,10 @@
       block-size: var(--et-timeline-marker-size);
       border-radius: 50%;
       background: var(--et-surface-background-solid, Canvas);
-      color: var(--et-timeline-marker-color, var(--et-theme-color-primary-solid, currentColor));
+      color: var(
+        --et-timeline-marker-color,
+        light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid))
+      );
       font-size: calc(var(--et-timeline-marker-size) * 0.7);
       line-height: 1;
 
@@ -94,6 +97,7 @@
     .et-timeline-item-content {
       flex: 1;
       min-inline-size: 0;
+      overflow-wrap: anywhere;
       /* The gap lives on the content, not the item: the rail stretches over the item's full height,
          so paying for the gap inside it is what lets the line run unbroken into the next marker. */
       padding-block-end: var(--et-timeline-gap);

package/src/lib/toolbar/toolbar.component.css

@@ -37,4 +37,8 @@
       align-items: stretch;
     }
   }
+
+  .et-toolbar .et-icon-button:where([data-pressed='true']) {
+    box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+  }
 }

package/src/lib/tooltip/tooltip.component.css

@@ -61,4 +61,18 @@
   .et-tooltip__content {
     gap: 6px;
   }
+
+  .et-tooltip-panel {
+    --et-overlay-arrow-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
+
+  .et-tooltip {
+    --_et-floating-tip-border: light-dark(
+      var(--et-surface-border-solid, rgb(255 255 255 / 0.1)),
+      color-mix(in srgb, var(--et-surface-color-solid) 24%, var(--et-surface-background-solid))
+    );
+  }
 }

package/src/lib/tree/tree.component.css

@@ -134,7 +134,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline: 2px solid var(--et-theme-color-ink-solid, currentColor);
       outline-offset: -2px;
     }
 
@@ -205,7 +205,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      outline: 2px solid var(--et-theme-color-ink-solid, currentColor);
       outline-offset: -2px;
     }
   }