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

package/src/lib/tabs/nav-tabs/nav-tab-link-styles.component.css

@@ -0,0 +1,33 @@
+@layer components {
+  @property --et-nav-tab-link-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-nav-tab-link-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-nav-tab-link {
+    --et-nav-tab-link-padding-inline: var(--et-tab-padding-inline);
+    --et-nav-tab-link-padding-block: var(--et-tab-padding-block);
+
+    gap: 8px;
+    padding-inline: var(--et-nav-tab-link-padding-inline);
+    padding-block: var(--et-nav-tab-link-padding-block);
+    text-decoration: none;
+    font-size: var(--et-nav-tabs-font-size, inherit);
+
+    .et-nav-tab-link__content {
+      display: inline-flex;
+      gap: inherit;
+    }
+  }
+
+  [data-orientation='vertical'][data-fit='fill'] .et-nav-tab-link {
+    justify-content: start;
+  }
+}

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

@@ -0,0 +1,173 @@
+@layer components {
+  @property --et-tab-bar-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-tab-bar-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  .et-tab-group__trigger,
+  .et-nav-tab-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--et-surface-interaction-solid, inherit);
+    cursor: pointer;
+    position: relative;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+    transition:
+      color 150ms ease,
+      background 150ms ease;
+    outline: none;
+    border-radius: 0.5rem;
+  }
+
+  .et-tab-group__trigger .et-tab-group__trigger-content,
+  .et-nav-tab-link .et-nav-tab-link__content {
+    align-items: center;
+    border-radius: 0.5rem;
+    padding: 4px 8px;
+    margin: -4px -8px;
+  }
+
+  .et-tab-group__trigger .et-tab-group__trigger-icon,
+  .et-nav-tab-link [etIcon] {
+    width: 1.2em;
+    height: 1.2em;
+  }
+
+  [data-variant='primary'] .et-tab-group__trigger .et-tab-group__trigger-content,
+  [data-variant='primary'] .et-nav-tab-link {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .et-tab-group__header::after,
+  .et-nav-tabs__container::after {
+    content: '';
+    position: absolute;
+    background: var(--et-surface-border-solid, currentColor);
+    opacity: var(--et-tab-baseline-opacity);
+    pointer-events: none;
+  }
+
+  [data-divider='false'] .et-tab-group__header::after,
+  [data-divider='false'] .et-nav-tabs__container::after {
+    display: none;
+  }
+
+  [data-orientation='horizontal'] .et-tab-group__header::after,
+  [data-orientation='horizontal'] .et-nav-tabs__container::after {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--et-tab-bar-underline-size);
+    border-radius: var(--et-tab-bar-underline-radius);
+  }
+
+  [data-orientation='vertical'] .et-tab-group__header::after,
+  [data-orientation='vertical'] .et-nav-tabs__container::after {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--et-tab-bar-underline-size);
+    border-radius: var(--et-tab-bar-underline-radius);
+  }
+
+  .et-tab-bar-underline {
+    position: absolute;
+    z-index: 1;
+    background: var(--et-theme-color-ink-solid, currentColor);
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .et-tab-bar-underline--active {
+    opacity: 1;
+  }
+
+  .et-tab-group__trigger .et-tab-bar-underline,
+  .et-nav-tab-link .et-tab-bar-underline {
+    border-radius: var(--et-tab-bar-underline-radius);
+  }
+
+  [data-orientation='horizontal'] .et-tab-group__trigger .et-tab-bar-underline,
+  [data-orientation='horizontal'] .et-nav-tab-link .et-tab-bar-underline {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--et-tab-bar-underline-size);
+    transform-origin: left;
+  }
+
+  [data-variant='primary'][data-orientation='horizontal'] .et-tab-group__trigger .et-tab-bar-underline,
+  [data-variant='primary'][data-orientation='horizontal'] .et-nav-tab-link .et-tab-bar-underline {
+    left: 25%;
+    right: 25%;
+    height: var(--et-tab-bar-underline-size);
+    border-radius: var(--et-tab-bar-underline-size) var(--et-tab-bar-underline-size) 0 0;
+  }
+
+  [data-orientation='vertical'] .et-tab-group__trigger .et-tab-bar-underline,
+  [data-orientation='vertical'] .et-nav-tab-link .et-tab-bar-underline {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--et-tab-bar-underline-size);
+    transform-origin: top;
+  }
+
+  [data-variant='primary'][data-orientation='vertical'] .et-tab-group__trigger .et-tab-bar-underline,
+  [data-variant='primary'][data-orientation='vertical'] .et-nav-tab-link .et-tab-bar-underline {
+    top: 25%;
+    bottom: 25%;
+    width: var(--et-tab-bar-underline-size);
+    border-radius: 0 var(--et-tab-bar-underline-size) var(--et-tab-bar-underline-size) 0;
+  }
+
+  @media (hover: hover) {
+    .et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):hover,
+    .et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):hover {
+      background: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.08);
+    }
+  }
+
+  .et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):focus-visible,
+  .et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):focus-visible {
+    background: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.12);
+  }
+
+  .et-tab-group__trigger.et-tab-group__trigger--active:not(.et-tab-bar-trigger--just-activated):active,
+  .et-nav-tab-link.et-nav-tab-link--active:not(.et-tab-bar-trigger--just-activated):active {
+    background: rgb(var(--et-theme-color-primary-rgb, 0 0 0) / 0.16);
+  }
+
+  .et-tab-group__trigger.et-tab-group__trigger--active,
+  .et-nav-tab-link.et-nav-tab-link--active {
+    color: var(--et-surface-color-solid, inherit);
+  }
+
+  .et-tab-group__trigger.et-tab-bar-trigger--no-initial-transition,
+  .et-nav-tab-link.et-tab-bar-trigger--no-initial-transition {
+    transition: none;
+  }
+
+  .et-tab-group__trigger:disabled,
+  .et-nav-tab-link.et-nav-tab-link--disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  .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-offset: 2px;
+  }
+}

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

@@ -0,0 +1,61 @@
+@layer components {
+  /* These inherit because every read site is a descendant of the element carrying `data-size` - the
+     trigger, the label, the underline. A non-inheriting registered property resolves to its initial
+     value there, which silently kills both the scale and any consumer override set on the host. */
+  @property --et-tab-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-tab-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-tab-underline-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-tab-underline-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 1px;
+  }
+
+  @property --et-tab-baseline-opacity {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.2;
+  }
+
+  .et-tab-scale {
+    /* not registered: a registered `<length>` may not take a rem initial-value, and the label size
+       tracking the root font size is deliberate */
+    --et-tab-font-size: 1.4rem;
+
+    &:where([data-size='sm']) {
+      --et-tab-padding-inline: 12px;
+      --et-tab-padding-block: 8px;
+      --et-tab-font-size: 1.2rem;
+      --et-tab-underline-size: 2px;
+    }
+
+    &:where([data-size='md']) {
+      --et-tab-padding-inline: 16px;
+      --et-tab-padding-block: 12px;
+      --et-tab-font-size: 1.4rem;
+      --et-tab-underline-size: 2px;
+    }
+
+    &:where([data-size='lg']) {
+      --et-tab-padding-inline: 20px;
+      --et-tab-padding-block: 14px;
+      --et-tab-font-size: 1.6rem;
+      --et-tab-underline-size: 3px;
+    }
+  }
+}

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

@@ -0,0 +1,220 @@
+@layer components {
+  @property --et-time-picker-ring-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 280px;
+  }
+
+  @property --et-time-picker-handle-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 24px;
+  }
+
+  .et-time-picker {
+    display: inline-flex;
+    vertical-align: top;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: opacity 120ms ease;
+
+    .et-time-picker-ring {
+      position: relative;
+      flex: none;
+      inline-size: var(--et-time-picker-ring-size);
+      block-size: var(--et-time-picker-ring-size);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .et-time-picker-ring-graphic {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      overflow: visible;
+      font-family: inherit;
+    }
+
+    .et-time-picker-track,
+    .et-time-picker-arc {
+      fill: none;
+      stroke-width: 28;
+      stroke-linecap: butt;
+    }
+
+    .et-time-picker-track {
+      stroke: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 14%, transparent);
+    }
+
+    .et-time-picker-arc {
+      stroke: var(--et-theme-color-primary-solid, currentColor);
+      stroke-linecap: round;
+      opacity: 0.45;
+    }
+
+    .et-time-picker-track,
+    .et-time-picker-arc {
+      cursor: pointer;
+    }
+
+    .et-time-picker-blocked {
+      fill: none;
+      stroke: var(--et-surface-color-subtle-solid, currentColor);
+      stroke-width: 1;
+      stroke-dasharray: 2 5;
+    }
+
+    .et-time-picker-ticks line {
+      stroke: var(--et-surface-color-muted-solid, currentColor);
+      stroke-width: 1;
+    }
+
+    .et-time-picker-labels text {
+      fill: var(--et-surface-color-muted-solid, currentColor);
+      font-size: 11px;
+      text-anchor: middle;
+      dominant-baseline: central;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .et-time-picker-mark {
+      fill: var(--et-surface-color-muted-solid, currentColor);
+
+      line {
+        stroke: var(--et-surface-color-muted-solid, currentColor);
+        stroke-width: 1.2;
+        stroke-linecap: round;
+      }
+    }
+
+    .et-time-picker-readout {
+      fill: var(--et-surface-color-solid, currentColor);
+      font-size: 28px;
+      font-weight: 500;
+      text-anchor: middle;
+      dominant-baseline: central;
+      font-variant-numeric: tabular-nums;
+
+      &:where([data-long]) {
+        font-size: 22px;
+      }
+
+      &:where([data-longer]) {
+        font-size: 16px;
+      }
+
+      &:where([data-kind='duration']) {
+        font-size: 20px;
+      }
+    }
+
+    .et-time-picker-note {
+      fill: var(--et-surface-color-muted-solid, currentColor);
+      font-size: 11px;
+      text-anchor: middle;
+      dominant-baseline: central;
+    }
+
+    .et-time-picker-handle {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      box-sizing: border-box;
+      inline-size: var(--et-time-picker-handle-size);
+      block-size: var(--et-time-picker-handle-size);
+      margin-block-start: calc(var(--et-time-picker-handle-size) / -2);
+      margin-inline-start: calc(var(--et-time-picker-handle-size) / -2);
+      border: 2px solid var(--et-theme-color-primary-solid, currentColor);
+      border-radius: 50%;
+      background: var(--et-surface-background-solid, Canvas);
+      transform: rotate(var(--_et-time-picker-handle-angle, 0deg))
+        translateY(calc(var(--et-time-picker-ring-size) * -0.4))
+        rotate(calc(var(--_et-time-picker-handle-angle, 0deg) * -1));
+      --_et-time-picker-halo-shadow: 0 0 0 calc(var(--et-time-picker-handle-size) * var(--_et-time-picker-halo))
+        color-mix(
+          in srgb,
+          var(--et-theme-color-primary-solid, currentColor) var(--_et-time-picker-halo-opacity, 16%),
+          transparent
+        );
+      box-shadow: var(--_et-time-picker-halo-shadow, none);
+      transition:
+        background-color 120ms ease,
+        border-color 120ms ease,
+        box-shadow 120ms ease;
+      cursor: grab;
+      outline: none;
+      touch-action: none;
+
+      &:where([data-empty]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &:where([data-dragging]) {
+        cursor: grabbing;
+      }
+
+      &:hover:not([data-disabled], [data-dragging]) {
+        --_et-time-picker-halo: 0.3;
+      }
+
+      &[data-dragging]:not([data-disabled]) {
+        --_et-time-picker-halo: 0.5;
+        --_et-time-picker-halo-opacity: 28%;
+      }
+
+      &:focus-visible:not([data-pointer-focused]) {
+        outline: 2px solid var(--et-theme-color-primary-solid, currentColor);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  .et-time-picker:where([data-mode='single']) .et-time-picker-handle,
+  .et-time-picker .et-time-picker-handle:where([data-active]) {
+    border: 3px solid var(--et-surface-background-solid, Canvas);
+    background: var(--et-theme-color-primary-solid, currentColor);
+  }
+
+  .et-time-picker:where([data-mode='single']) .et-time-picker-handle {
+    --_et-time-picker-halo: 0.35;
+    --_et-time-picker-halo-opacity: 22%;
+  }
+
+  .et-time-picker[data-mode='range'] .et-time-picker-handle:hover:not([data-disabled], [data-dragging], [data-active]) {
+    background: color-mix(
+      in srgb,
+      var(--et-theme-color-primary-solid, currentColor) 16%,
+      var(--et-surface-background-solid, Canvas)
+    );
+  }
+
+  .et-time-picker[data-mode='single'] .et-time-picker-handle:hover:not([data-disabled], [data-dragging]) {
+    --_et-time-picker-halo: 0.5;
+    --_et-time-picker-halo-opacity: 28%;
+  }
+
+  .et-time-picker[data-mode='single'] .et-time-picker-handle[data-dragging]:not([data-disabled]) {
+    --_et-time-picker-halo: 0.65;
+    --_et-time-picker-halo-opacity: 32%;
+  }
+
+  .et-time-picker:where([data-disabled]) {
+    opacity: 0.4;
+
+    .et-time-picker-track,
+    .et-time-picker-arc,
+    .et-time-picker-handle {
+      cursor: not-allowed;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .et-time-picker,
+    .et-time-picker .et-time-picker-handle {
+      transition: none;
+    }
+  }
+}

package/src/lib/timeline/timeline-item.component.css

@@ -0,0 +1,116 @@
+@layer components {
+  /* All inherited: they are documented as settable once on `et-timeline`, and only the item ever
+     reads them. Flipping any of them to `inherits: false` silently drops that override. */
+  @property --et-timeline-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  @property --et-timeline-rail-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-timeline-marker-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  @property --et-timeline-dot-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 8px;
+  }
+
+  @property --et-timeline-line-thickness {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 2px;
+  }
+
+  @property --et-timeline-time-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  .et-timeline-item {
+    display: flex;
+    gap: var(--et-timeline-rail-gap);
+
+    .et-timeline-item-rail {
+      position: relative;
+      display: flex;
+      flex: none;
+      justify-content: center;
+      inline-size: var(--et-timeline-marker-size);
+
+      /* One line per item, spanning from this marker's center to the next item's marker center -
+         the markers paint over it, which is what makes the rail read as unbroken. Ending it at the
+         next item's top instead leaves a gap above an inset default dot. Both this and the marker
+         must stay positioned, or the marker no longer wins on paint order. */
+      &::before {
+        content: '';
+        position: absolute;
+        inset-block: calc(var(--et-timeline-marker-size) / 2) calc(var(--et-timeline-marker-size) / -2);
+        inline-size: var(--et-timeline-line-thickness);
+        background: var(--et-timeline-line-color, var(--et-surface-border-solid, rgb(255 255 255 / 0.1)));
+      }
+    }
+
+    .et-timeline-item-marker {
+      position: relative;
+      display: flex;
+      flex: none;
+      align-self: start;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--et-timeline-marker-size);
+      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));
+      font-size: calc(var(--et-timeline-marker-size) * 0.7);
+      line-height: 1;
+
+      /* Nothing projected into the marker slot - the marker becomes the dot itself, inset so its
+         center still lands on `--et-timeline-marker-size / 2` where the line starts. */
+      &:empty {
+        inline-size: var(--et-timeline-dot-size);
+        block-size: var(--et-timeline-dot-size);
+        margin-block-start: calc((var(--et-timeline-marker-size) - var(--et-timeline-dot-size)) / 2);
+        background: currentColor;
+      }
+
+      .et-icon {
+        inline-size: 1em;
+        block-size: 1em;
+      }
+    }
+
+    .et-timeline-item-content {
+      flex: 1;
+      min-inline-size: 0;
+      /* 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);
+    }
+
+    [etTimelineTime] {
+      display: block;
+      font-size: var(--et-timeline-time-font-size);
+      color: var(--et-surface-color-muted-solid, currentColor);
+    }
+  }
+
+  .et-timeline-item:last-child .et-timeline-item-rail::before {
+    display: none;
+  }
+
+  .et-timeline-item:last-child .et-timeline-item-content {
+    padding-block-end: 0;
+  }
+}

package/src/lib/timeline/timeline.component.css

@@ -0,0 +1,7 @@
+@layer components {
+  .et-timeline {
+    display: flex;
+    flex-direction: column;
+    color: var(--et-surface-color-solid, currentColor);
+  }
+}

package/src/lib/toggletip/toggletip.component.css

@@ -0,0 +1,83 @@
+@layer components {
+  @property --et-toggletip-font-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 13px;
+  }
+
+  @property --et-toggletip-line-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 18px;
+  }
+
+  @property --et-toggletip-padding-inline {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  @property --et-toggletip-padding-block {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 12px;
+  }
+
+  @property --et-toggletip-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 14px;
+  }
+
+  .et-overlay.et-overlay--toggletip > :not(.et-overlay-container-drag-handle):not(.et-overlay-arrow) {
+    display: block;
+    overflow: visible;
+  }
+
+  .et-toggletip {
+    --_et-toggletip-focus-ring: var(--et-theme-color-primary-solid, rgb(59 130 246));
+
+    font-size: var(--et-toggletip-font-size);
+    font-weight: 500;
+    line-height: var(--et-toggletip-line-height);
+    letter-spacing: -0.01em;
+  }
+
+  .et-toggletip__surface {
+    min-inline-size: min(272px, calc(100vw - 24px));
+    padding: calc(var(--et-toggletip-padding-block) + 2px) calc(var(--et-toggletip-padding-inline) + 2px);
+  }
+
+  /* The comfortable minimum above is for prose — a sentence or two of explanation reads badly in a narrow
+     column. Content that is already a list of its own rows (the breadcrumb's hidden crumbs) has no such
+     problem and just looks half-empty at 272px, so it can opt out and hug its widest row. */
+  .et-toggletip__surface:has([data-toggletip-hug]) {
+    min-inline-size: 0;
+  }
+
+  .et-toggletip__content {
+    gap: var(--et-toggletip-gap);
+
+    :where([data-toggletip-body]) {
+      display: grid;
+      gap: 6px;
+    }
+
+    :where([data-toggletip-actions]) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 2px;
+      padding-top: 12px;
+      border-top: 1px solid var(--_et-floating-tip-border);
+    }
+  }
+
+  .et-overlay--toggletip:focus-visible .et-toggletip__surface,
+  .et-toggletip:focus-visible .et-toggletip__surface {
+    outline: 2px solid var(--_et-toggletip-focus-ring);
+    outline-offset: 2px;
+  }
+}