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

package/src/lib/stream/pip/pip-window.component.css

@@ -0,0 +1,222 @@
+@layer components {
+  @property --et-pip-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-pip-backdrop-blur {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 4px;
+  }
+
+  @property --et-pip-title-bar-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 32px;
+  }
+
+  et-pip-window {
+    position: fixed;
+    right: var(--et-pip-window-offset-right, 24px);
+    bottom: var(--et-pip-window-offset-bottom, 24px);
+    z-index: var(--et-pip-window-z-index, 1000);
+    display: flex;
+    flex-direction: column;
+    touch-action: none;
+    color: var(--et-surface-color-solid, inherit);
+    --et-resize-handles-side-top: var(--et-pip-title-bar-h);
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      background: var(--et-pip-bg, color-mix(in srgb, var(--et-surface-background-solid, rgb(0 0 0)) 60%, transparent));
+      backdrop-filter: blur(var(--et-pip-backdrop-blur));
+      z-index: -1;
+      transform: translateY(var(--et-pip-title-bar-h));
+      transition: transform 0.2s ease;
+      pointer-events: none;
+      border-radius: var(--et-pip-border-radius);
+    }
+  }
+
+  et-pip-window.et-pip-window--dragging .et-pip-window__title-bar {
+    cursor: grabbing;
+  }
+
+  .et-pip-window__title-bar {
+    height: var(--et-pip-title-bar-height);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 6px;
+    transform: translateY(100%);
+    transition:
+      transform 0.2s ease,
+      opacity 0.2s ease;
+    pointer-events: none;
+    opacity: 0;
+    cursor: grab;
+    border-radius: var(--et-pip-border-radius) var(--et-pip-border-radius) 0 0;
+  }
+  .et-pip-window__title-bar:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px
+      color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 60%, transparent);
+  }
+
+  .et-pip-window__title-bar-spacer {
+    flex: 1;
+  }
+
+  et-pip-window:hover,
+  et-pip-window.et-pip-window--dragging,
+  et-pip-window.et-pip-window--collapsed,
+  et-pip-window.et-pip-window--title-bar-forced,
+  et-pip-window:has(.et-pip-window__title-bar :focus-visible),
+  et-pip-window:has(.et-pip-window__title-bar:focus-visible) {
+    .et-pip-window__title-bar {
+      transform: translateY(0);
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    &::after {
+      transform: translateY(0);
+    }
+  }
+
+  @media (hover: none) {
+    .et-pip-window__title-bar {
+      transform: translateY(0);
+      pointer-events: auto;
+      animation: etPipWindowTitleBarSlideIn 0.5s ease;
+      opacity: 1;
+    }
+
+    .et-pip-window__content {
+      border-radius: 0 0 var(--et-pip-border-radius) var(--et-pip-border-radius);
+    }
+  }
+
+  @keyframes etPipWindowTitleBarSlideIn {
+    from {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .et-pip-window__content {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    overflow: hidden;
+    aspect-ratio: var(--et-pip-content-ratio, calc(16 / 9));
+    border-radius: var(--et-pip-border-radius);
+    transition: border-radius 0.2s ease;
+  }
+
+  et-pip-window:hover .et-pip-window__content,
+  et-pip-window.et-pip-window--dragging .et-pip-window__content,
+  et-pip-window.et-pip-window--collapsed .et-pip-window__content,
+  et-pip-window.et-pip-window--title-bar-forced .et-pip-window__content,
+  et-pip-window:has(.et-pip-window__title-bar :focus-visible) .et-pip-window__content,
+  et-pip-window:has(.et-pip-window__title-bar:focus-visible) .et-pip-window__content {
+    border-radius: 0 0 var(--et-pip-border-radius) var(--et-pip-border-radius);
+  }
+
+  .et-pip-window__collapse-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 4;
+    cursor: grab;
+  }
+
+  .et-pip-interacting iframe,
+  .et-pip-interacting [contenteditable] {
+    pointer-events: none !important;
+    -webkit-user-select: none !important;
+    user-select: none !important;
+  }
+
+  et-pip-window.et-pip-window--positioned {
+    top: 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    bottom: auto !important;
+  }
+
+  et-pip-window.et-pip-window--mode-transitioning {
+    transition:
+      width 250ms cubic-bezier(0.4, 0, 0.2, 1),
+      height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  et-pip-window .et-resize-handle::before {
+    content: '';
+    position: absolute;
+    background: color-mix(in srgb, var(--et-surface-color-solid, rgb(255 255 255)) 65%, transparent);
+    border-radius: 3px;
+    opacity: 0;
+    transition: opacity 0.15s 0s;
+    pointer-events: none;
+  }
+
+  et-pip-window .et-resize-handle:hover::before {
+    opacity: 1;
+    transition: opacity 0.15s 0.4s;
+  }
+
+  et-pip-window .et-resize-handle--s::before {
+    height: 3px;
+    left: 10px;
+    right: 10px;
+    bottom: 1px;
+  }
+
+  et-pip-window .et-resize-handle--e::before {
+    width: 3px;
+    top: 10px;
+    bottom: 10px;
+    right: 1px;
+  }
+
+  et-pip-window .et-resize-handle--w::before {
+    width: 3px;
+    top: 10px;
+    bottom: 10px;
+    left: 1px;
+  }
+
+  et-pip-window .et-resize-handle--se::before {
+    width: 8px;
+    height: 8px;
+    bottom: 2px;
+    right: 2px;
+    border-radius: 1px 1px 3px 1px;
+  }
+
+  et-pip-window .et-resize-handle--sw::before {
+    width: 8px;
+    height: 8px;
+    bottom: 2px;
+    left: 2px;
+    border-radius: 1px 1px 1px 3px;
+  }
+
+  et-pip-window et-resize-handles[data-active-edge='s'] .et-resize-handle--s::before,
+  et-pip-window et-resize-handles[data-active-edge='e'] .et-resize-handle--e::before,
+  et-pip-window et-resize-handles[data-active-edge='w'] .et-resize-handle--w::before,
+  et-pip-window et-resize-handles[data-active-edge='se'] .et-resize-handle--se::before,
+  et-pip-window et-resize-handles[data-active-edge='sw'] .et-resize-handle--sw::before {
+    opacity: 1;
+    transition: none;
+  }
+}

package/src/lib/stream/stream-manager-styles.component.css

@@ -0,0 +1,10 @@
+@layer components {
+  .et-stream-manager {
+    position: fixed;
+    top: -9999px;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+}

package/src/lib/stream/stream-overlay-card-styles.component.css

@@ -0,0 +1,43 @@
+@layer components {
+  .et-stream-consent-card,
+  .et-stream-player-error-card,
+  .et-pip-slot-placeholder-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--et-stream-overlay-card-gap, 12px);
+    padding: var(--et-stream-overlay-card-padding, 32px);
+    border-radius: var(--et-stream-overlay-card-border-radius, 16px);
+    max-width: 36rem;
+    text-align: center;
+    background: var(--et-surface-background-solid, inherit);
+  }
+
+  .et-stream-consent-icon,
+  .et-stream-player-error-icon,
+  .et-pip-slot-placeholder-icon {
+    width: var(--et-stream-overlay-card-icon-size, 36px);
+    height: var(--et-stream-overlay-card-icon-size, 36px);
+    color: var(--et-surface-color-subtle-solid, currentColor);
+  }
+
+  .et-stream-consent-heading,
+  .et-stream-player-error-heading {
+    margin: 0;
+    font-size: var(--et-stream-overlay-card-heading-size, 16px);
+    font-weight: var(--et-stream-overlay-card-heading-weight, 600);
+    line-height: var(--et-stream-overlay-card-heading-line-height, 122%);
+    letter-spacing: var(--et-stream-overlay-card-heading-letter-spacing, 0.2px);
+    color: var(--et-surface-color-solid, currentColor);
+  }
+
+  .et-stream-consent-description,
+  .et-stream-player-error-description,
+  .et-pip-slot-placeholder-message {
+    margin: 0;
+    font-size: var(--et-stream-overlay-card-description-size, 14px);
+    font-weight: var(--et-stream-overlay-card-description-weight, 400);
+    line-height: var(--et-stream-overlay-card-description-line-height, 150%);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}

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

@@ -0,0 +1,14 @@
+@layer components {
+  @property --et-stream-player-slot-radius {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 12px;
+  }
+
+  .et-stream-player-slot {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--et-stream-player-slot-radius);
+  }
+}

package/src/lib/table/table-column-chooser.component.css

@@ -0,0 +1,17 @@
+@layer components {
+  /* The stamped host is layout-transparent so the trigger sits directly in whatever row it is dropped
+     into — a footer bar, a toolbar — rather than adding a wrapper box of its own. */
+  et-table-column-chooser {
+    display: contents;
+  }
+
+  .et-table-column-chooser {
+    display: inline-flex;
+    flex: none;
+  }
+
+  .et-table-column-chooser-icon {
+    inline-size: var(--et-menu-item-icon-size, 16px);
+    block-size: var(--et-menu-item-icon-size, 16px);
+  }
+}

package/src/lib/table/table-column-menu-trigger.component.css

@@ -0,0 +1,31 @@
+@layer components {
+  /* The stamped host is layout-transparent so the trigger is the header cell's own flex item, sitting
+     after the (growing) label at the trailing edge. */
+  et-table-column-menu-trigger {
+    display: contents;
+  }
+
+  .et-table-column-menu {
+    display: inline-flex;
+    flex: none;
+  }
+
+  /* Permanently visible, like the filter trigger: a column's actions shouldn't have to be discovered
+     by hovering, and a control that appears on hover makes the header twitch under the pointer.
+
+     Scoped through the header cell so it beats the button's own single-class `--_et-button-color`
+     rule: a transparent button paints itself in the accent ink, but in this table accent means
+     *active* (a sorted arrow, a filtered column), so a resting control has to read as header chrome. */
+  .et-table-header-cell .et-table-column-menu-trigger {
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  .et-table-column-menu-icon {
+    inline-size: var(--et-menu-item-icon-size, 16px);
+    block-size: var(--et-menu-item-icon-size, 16px);
+  }
+
+  .et-table-column-menu-icon:where(.et-table-column-menu-icon--down) {
+    transform: rotate(180deg);
+  }
+}

package/src/lib/table/table-detail-styles.component.css

@@ -0,0 +1,103 @@
+@layer components {
+  /* Detail-row chrome and its grow-open animation, mounted by etTableRowExpansion. Sizeable — the
+     keyframes alone are most of it — and useless to a table that never expands a row.
+
+     Detail rows grow open: the row is a one-track grid whose row animates between `0fr` and `1fr`, so
+     the rows below glide down with it instead of the detail appearing at full height under them.
+     Angular's `animate.enter`/`animate.leave` keep it mounted for the leave animation, then unmount it.
+
+     Known cost, accepted for the look: an `fr` track resolves against the whole grid, so every frame
+     re-resolves the table's layout. Measured on a 20-row table at 20× CPU throttle, per toggle: ~41ms
+     average frame and 5–6 long frames, against ~20ms and 3 for the compositor-only transform+opacity
+     reveal this replaced. Reach for that one instead (`opacity`/`translateY`, no track animation) if a
+     table ever needs to stay smooth under load.
+
+     Sized and pinned to the scroll viewport, not to the column tracks: the row spans every column, so on
+     a table wider than its viewport the detail content is laid out across the whole scroll extent — its
+     right-hand part sits off screen, and the panel slides sideways with the list instead of staying where
+     the reader is looking. The same shape `table.component.css` gives the empty and error cells, and
+     `--_et-table-viewport-inline-size` is the width the table measures for them.
+
+     The pin belongs on this row and not on the cell inside it: that cell clips its overflow, which makes
+     it a scroll container, and a `position: sticky` element inside one sticks to that container rather
+     than to the table's viewport. */
+  .et-table-detail-row {
+    grid-column: 1 / -1;
+    position: sticky;
+    inset-inline-start: 0;
+    inline-size: var(--_et-table-viewport-inline-size, 100%);
+    display: grid;
+    grid-template-rows: 1fr;
+    border-block-end: var(--_et-table-detail-rule);
+  }
+
+  /* The detail row of the last row ends the table, so its rule has nothing under it to close off. */
+  .et-table-row--last + .et-table-detail-row {
+    border-block-end: 0;
+  }
+
+  /* The animation must sit on the element Angular removes — this component's host, which is why it is a
+     host binding. `animate.leave` looks for a running animation on *that* element and unmounts the
+     moment it finds none, so an animation on a child is never awaited. */
+  .et-table-detail-row.et-table-detail--enter {
+    animation: et-table-detail-in 0.18s ease;
+  }
+
+  .et-table-detail-row.et-table-detail--leave {
+    animation: et-table-detail-out 0.18s ease forwards;
+  }
+
+  /* The row's track opens from nothing while the content fades in. Both `from`/`to` are single `<flex>`
+     values, which is the form `grid-template-rows` interpolates. */
+  @keyframes et-table-detail-in {
+    from {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
+
+    to {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+  }
+
+  @keyframes et-table-detail-out {
+    from {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+
+    to {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
+  }
+
+  /* The clip window, and nothing else. It is stretched to a track that is 0 tall for part of the
+     animation, so it has to be allowed to shrink past its content (`min-block-size`) and clip what
+     doesn't fit (`overflow-y`) — without either, the row would jump to full height on the first frame.
+
+     Only the block axis is clipped. The row is now as wide as the viewport, so content that needs more
+     room than that has to stay reachable; `overflow-x: auto` gives the detail its own scrollbar instead
+     of cutting it off. A nested `et-table` scrolls itself and never reaches for this one.
+
+     It must also carry no padding or border of its own: under `box-sizing: border-box` those set a floor
+     under its height, so the row would pop open to that floor before the animation started and then jump
+     the rest of the way. That is what the padding below is separated out for. */
+  .et-table-detail-cell {
+    min-block-size: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  .et-table-detail-body {
+    padding: var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-table-detail-row.et-table-detail--enter,
+    .et-table-detail-row.et-table-detail--leave {
+      animation: none;
+    }
+  }
+}

package/src/lib/table/table-drag-scroll-styles.component.css

@@ -0,0 +1,18 @@
+@layer components {
+  /* Only where the table can actually be dragged: a table whose columns fit takes no grab cursor, and a
+     touch pointer already scrolls it by dragging without any of this. */
+  @media (hover: hover) and (pointer: fine) {
+    .et-table-host--drag-scrollable {
+      cursor: grab;
+    }
+
+    /* On the host rather than only on the pointer's target: the drag runs under a pointer capture, so
+       the cursor has to hold while it travels over a cell, a link or the header. */
+    .et-table-host--dragging,
+    .et-table-host--dragging * {
+      cursor: grabbing !important;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+@layer components {
+  /* The expander column's chrome. It lives with the stamped cell component rather than in the table's
+     own sheet, so Angular injects it the first time a table actually renders an expander — a table
+     without a detail template never puts these rules in the document. */
+  .et-table-expander-cell {
+    justify-content: center;
+    padding-inline: 4px;
+  }
+
+  /* The stamped component host is layout-transparent, so the button itself is the cell's flex item
+     and picks up its `align-items: center`. As a block box the host would establish a line box and
+     the inline-flex button would sit on its text baseline — a few px above centre. */
+  et-table-expander-cell {
+    display: contents;
+  }
+
+  .et-table-expander {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* Never let the flex row shrink it out of square — a narrow `--et-table-expander-width` would
+       otherwise squeeze the button's inline size while its block size stayed at 24px. */
+    flex: none;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .et-table-expander:hover,
+  .et-table-expander:focus-visible {
+    background: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 12%, transparent);
+  }
+
+  /* The shared `et-chevron` points up, and the expander wants it pointing at what it opens: right
+     while collapsed, down once open. Rotating (rather than swapping icons) is what makes the turn
+     animatable. */
+  .et-table-expander-icon {
+    inline-size: 14px;
+    block-size: 14px;
+    transform: rotate(90deg);
+    transition: transform 0.15s ease;
+  }
+
+  .et-table-expander-icon:where([data-expanded='true']) {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-table-expander-icon {
+      transition: none;
+    }
+  }
+}

package/src/lib/table/table-filter-trigger.component.css

@@ -0,0 +1,44 @@
+@layer components {
+  /* The stamped host is layout-transparent so the trigger's own auto margin can push it against the
+     trailing edge of the header cell — as a block box the margin would resolve inside it and do nothing. */
+  et-table-filter-trigger {
+    display: contents;
+  }
+
+  /* The header label grows, so the trigger simply sits after it at the cell's trailing edge, beside
+     the column menu when that feature is on too. It is permanently visible: a filter you have to
+     discover by hovering isn't discoverable, and a control that appears on hover makes the header
+     twitch as the pointer crosses it. */
+  .et-table-filter {
+    display: inline-flex;
+    flex: none;
+  }
+
+  /* Header chrome at rest — see the same note on the column menu trigger. */
+  .et-table-header-cell .et-table-filter-trigger {
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+
+  /* An active filter reads as accented, so a filtered column is obvious at a glance. */
+  .et-table-header-cell .et-table-filter-trigger:where([data-active='true']) {
+    color: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  .et-table-filter-empty {
+    margin: 0;
+    padding: 8px 12px;
+    color: var(--et-surface-color-muted-solid, CanvasText);
+    font-size: 13px;
+  }
+
+  .et-table-filter-more {
+    inline-size: 100%;
+    padding: 8px;
+    color: var(--et-theme-color-ink-solid, currentColor);
+    font: inherit;
+    text-align: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+}

package/src/lib/table/table-group-header-row.component.css

@@ -0,0 +1,38 @@
+@layer components {
+  /* The spanning group-header row, mounted with etTableGroupHeaders. Layout-transparent like every other
+     table row, so its cells span the table's own column tracks. */
+  .et-table-group-row {
+    display: contents;
+  }
+
+  .et-table-group-cell {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    overflow: hidden;
+    padding: 6px var(--et-table-cell-padding-inline);
+    /* Pinned above the sub-header row, which offsets itself by `--_et-table-group-h`. */
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 2;
+    /* Opaque band so scrolling rows pass behind it. */
+    background: var(--_et-table-header-bg);
+    /* Full-width divider between the group tier and the column headers — on every cell (labelled or
+       not) so the line runs the whole width, in the same subtle border colour as the rest. */
+    border-block-end: 1px solid var(--_et-table-header-border);
+  }
+
+  /* Only runs with a label read as a group; ungrouped runs just extend the header band upward. */
+  .et-table-group-cell:where(.et-table-group-cell--labeled) {
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--et-surface-color-muted-solid, CanvasText);
+    /* The vertical rule the base sheet draws between header cells and body cells, extended to labelled
+       group runs. Unlabelled runs get none, so the band above an ungrouped column reads as empty rather
+       than as a one-column group. */
+    border-inline-end: var(--_et-table-cell-rule);
+  }
+}

package/src/lib/table/table-inline-edit-styles.component.css

@@ -0,0 +1,20 @@
+@layer components {
+  /* The cell in edit mode hands its box to the editor: the control draws its own frame and its own
+     padding, so keeping the cell's would inset the field inside a box the reader can already see and
+     make the row jump the moment editing starts. A thin inline gutter is left so the field's border
+     doesn't sit flush against the column divider. */
+  .et-table-cell.et-table-cell--editing {
+    padding-block: 0;
+    padding-inline: 2px;
+    /* Cells clip by default so long values can't bleed into the next column. An editor is the one thing
+       in a cell that may legitimately draw outside it — a focus ring, a select's chevron. */
+    overflow: visible;
+  }
+
+  /* Whatever the consumer put in the template fills the cell, so a form field is as wide as the column
+     rather than as wide as its own content. */
+  .et-table-cell--editing > * {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+}