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

package/src/lib/button/icon-button.component.css

@@ -0,0 +1,143 @@
+@layer components {
+  @property --et-icon-button-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 39px;
+  }
+
+  @property --et-icon-button-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 20px;
+  }
+
+  .et-icon-button {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: var(--et-icon-button-size);
+    height: var(--et-icon-button-size);
+    background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+    color: var(--et-theme-color-ink-solid);
+    border: none;
+    border-radius: var(--et-icon-button-border-radius, 9999px);
+    padding: 0;
+    font-size: var(--et-button-font-size);
+    cursor: var(--et-button-cursor);
+    appearance: none;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+    flex-shrink: 0;
+
+    &[data-can-animate] {
+      transition:
+        background 120ms ease,
+        color 120ms ease,
+        box-shadow 120ms ease,
+        outline-color 120ms ease,
+        opacity 120ms ease;
+    }
+
+    &:where([data-size='xs']) {
+      --et-icon-button-size: 2.4rem;
+      --et-icon-button-icon-size: 1.4rem;
+    }
+
+    &:where([data-size='sm']) {
+      --et-icon-button-size: 3.1rem;
+      --et-icon-button-icon-size: 1.8rem;
+    }
+
+    &:where([data-size='md']) {
+      --et-icon-button-size: 3.9rem;
+      --et-icon-button-icon-size: 2rem;
+    }
+
+    &:where([data-size='lg']) {
+      --et-icon-button-size: 4.6rem;
+      --et-icon-button-icon-size: 2.4rem;
+    }
+
+    &:where([data-size='xl']) {
+      --et-icon-button-size: 5.7rem;
+      --et-icon-button-icon-size: 2.8rem;
+    }
+
+    &:where([disabled]),
+    &:where([aria-disabled='true']) {
+      opacity: var(--et-button-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &:where([data-variant='filled']) {
+      --et-theme-color-primary-opacity: 1;
+      color: var(--et-theme-color-on-primary);
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta));
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-focus-delta));
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-active-delta));
+      }
+    }
+
+    &:where([data-variant='outline']) {
+      border: var(--et-button-border-width, 0.1rem) solid var(--et-theme-color-ink-solid);
+    }
+
+    &[data-pressed='true']:where([data-pressed-variant='filled']) {
+      --et-theme-color-primary-opacity: 1;
+      color: var(--et-theme-color-on-primary);
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta));
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-focus-delta));
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-active-delta));
+      }
+    }
+
+    .et-icon-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      transition: opacity 120ms ease;
+
+      .et-icon {
+        width: var(--et-icon-button-icon-size);
+        height: var(--et-icon-button-icon-size);
+      }
+    }
+
+    &[data-loading='true'] {
+      .et-icon-button-icon {
+        opacity: 0;
+      }
+
+      .et-button-loader {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/lib/button/split-button.component.css

@@ -0,0 +1,77 @@
+@layer components {
+  @property --et-split-button-divider-color {
+    syntax: '*';
+    inherits: true;
+  }
+
+  .et-split-button {
+    display: inline-flex;
+    align-items: stretch;
+
+    .et-split-button-action,
+    .et-split-button-trigger {
+      position: relative;
+
+      &:focus-visible {
+        z-index: 1;
+      }
+
+      @media (hover: hover) {
+        &:hover {
+          z-index: 1;
+        }
+      }
+    }
+
+    .et-split-button-action {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    .et-split-button-trigger {
+      /* icon buttons carry a fixed per-size height that would beat the group's
+       align-items: stretch — let the action segment dictate the height instead */
+      height: auto;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--et-button-border-radius);
+      border-end-end-radius: var(--et-button-border-radius);
+
+      /* icon buttons are fully round and don't carry the per-size radius scale —
+       mirror the surface button's values so both segments share the outer radius */
+      &:where([data-size='xs']) {
+        --et-button-border-radius: 0.3rem;
+      }
+
+      &:where([data-size='sm']),
+      &:where([data-size='md']) {
+        --et-button-border-radius: 0.4rem;
+      }
+
+      &:where([data-size='lg']) {
+        --et-button-border-radius: 0.6rem;
+      }
+
+      &:where([data-size='xl']) {
+        --et-button-border-radius: 0.8rem;
+      }
+    }
+
+    /* filled/tonal/transparent: the trigger's inline-start border doubles as the divider */
+    .et-split-button-trigger:not([data-variant='outline']) {
+      border-inline-start: var(--et-button-border-width, 0.1rem) solid
+        var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent));
+    }
+
+    /* outline: both segments bring their own border — overlap them so the shared edge stays single-width */
+    .et-split-button-trigger:where([data-variant='outline']) {
+      margin-inline-start: calc(var(--et-button-border-width, 0.1rem) * -1);
+    }
+
+    /* the surface button keeps filled fully opaque while disabled — mirror that for icon-button
+     triggers so a disabled filled split button doesn't fade only on one side */
+    .et-icon-button.et-split-button-trigger:where([data-variant='filled']):where([disabled], [aria-disabled='true']) {
+      opacity: 1;
+    }
+  }
+}

package/src/lib/button/text-button.component.css

@@ -0,0 +1,140 @@
+@layer components {
+  .et-text-button {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    gap: var(--et-button-gap);
+    background: transparent;
+    color: var(--et-theme-color-ink-solid);
+    border: none;
+    padding: 0;
+    border-radius: 0.2rem;
+    font-size: var(--et-button-font-size);
+    font-weight: var(--et-button-font-weight);
+    cursor: var(--et-button-cursor);
+    text-decoration: none;
+    appearance: none;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    line-height: var(--et-button-line-height);
+    white-space: nowrap;
+
+    &[data-can-animate] {
+      transition:
+        color 120ms ease,
+        box-shadow 120ms ease,
+        outline-color 120ms ease,
+        opacity 120ms ease;
+    }
+
+    &:where([data-size='xs']) {
+      --et-button-font-size: 1.2rem;
+      --et-button-gap: 0.4rem;
+    }
+
+    &:where([data-size='sm']) {
+      --et-button-font-size: 1.4rem;
+      --et-button-gap: 0.5rem;
+    }
+
+    &:where([data-size='md']) {
+      --et-button-font-size: 1.4rem;
+      --et-button-gap: 0.6rem;
+    }
+
+    &:where([data-size='lg']) {
+      --et-button-font-size: 1.6rem;
+      --et-button-gap: 0.7rem;
+    }
+
+    &:where([data-size='xl']) {
+      --et-button-font-size: 1.8rem;
+      --et-button-gap: 0.8rem;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        .et-text-button-contents::after {
+          opacity: 0.9;
+          transform: scaleX(1);
+        }
+      }
+    }
+
+    &:focus-visible {
+      .et-text-button-contents::after {
+        opacity: 1;
+        transform: scaleX(1);
+      }
+    }
+
+    &:active {
+      .et-text-button-contents::after {
+        opacity: 1;
+        transform: scaleX(0.98);
+      }
+    }
+
+    &:where([disabled]),
+    &:where([aria-disabled='true']) {
+      opacity: var(--et-button-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .et-text-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: opacity 120ms ease;
+
+      &:empty {
+        display: none;
+      }
+
+      .et-icon {
+        width: 1em;
+        height: 1em;
+      }
+    }
+
+    .et-text-button-contents {
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+      position: relative;
+      transition: opacity 120ms ease;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset-inline: 0.04em;
+        bottom: 0.15em;
+        height: 0.08em;
+        border-radius: 999px;
+        background: currentColor;
+        opacity: 0;
+        transform: scaleX(0.6);
+        transform-origin: center;
+        transition:
+          opacity 160ms ease,
+          transform 200ms ease;
+      }
+    }
+
+    &[data-loading='true'] {
+      .et-text-button-icon,
+      .et-text-button-contents {
+        opacity: 0;
+      }
+
+      .et-button-loader {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/lib/button/window-control-button.component.css

@@ -0,0 +1,158 @@
+@layer components {
+  @property --_et-window-control-button-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 32px;
+  }
+
+  @property --_et-window-control-button-icon-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 16px;
+  }
+
+  .et-window-control-button {
+    --et-theme-color-primary-opacity: 0;
+    --_et-window-control-button-fallback-background: transparent;
+    --_et-window-control-button-fallback-color: rgba(255, 255, 255, 0.92);
+    --_et-window-control-button-border-radius: 4px;
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: var(--_et-window-control-button-size);
+    height: var(--_et-window-control-button-size);
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: var(--_et-window-control-button-border-radius);
+    background: var(--et-theme-color-primary, var(--_et-window-control-button-fallback-background));
+    color: var(--et-theme-color-ink-solid, var(--_et-window-control-button-fallback-color));
+    cursor: var(--et-button-cursor);
+    font-size: var(--_et-window-control-button-icon-size);
+    line-height: 1;
+    text-decoration: none;
+    appearance: none;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    overflow: hidden;
+
+    &[data-can-animate] {
+      transition:
+        background 120ms ease,
+        color 120ms ease,
+        box-shadow 120ms ease,
+        outline-color 120ms ease,
+        opacity 120ms ease;
+    }
+
+    &:where([data-size='sm']) {
+      --_et-window-control-button-size: 2.8rem;
+      --_et-window-control-button-icon-size: 1.4rem;
+    }
+
+    &:where([data-size='md']) {
+      --_et-window-control-button-size: 3.2rem;
+      --_et-window-control-button-icon-size: 1.6rem;
+    }
+
+    &:where([data-size='lg']) {
+      --_et-window-control-button-size: 3.6rem;
+      --_et-window-control-button-icon-size: 1.8rem;
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        --et-theme-color-primary-opacity: 0.14;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.14);
+      }
+    }
+
+    &:focus-visible {
+      --et-theme-color-primary-opacity: 0.18;
+      --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.18);
+    }
+
+    &:active {
+      --et-theme-color-primary-opacity: 0.22;
+      --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.22);
+    }
+
+    &[data-pressed='true'] {
+      --et-theme-color-primary-opacity: 0.18;
+      --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.18);
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: 0.24;
+          --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.24);
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: 0.28;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.28);
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: 0.32;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.32);
+      }
+    }
+
+    &:where([data-kind='close']):focus-visible {
+      background: var(--et-window-control-button-close-background, rgba(232, 17, 35, 0.92));
+      color: var(--et-window-control-button-close-color, #ffffff);
+    }
+
+    @media (hover: hover) {
+      &:where([data-kind='close']):hover {
+        background: var(--et-window-control-button-close-background, rgba(232, 17, 35, 0.92));
+        color: var(--et-window-control-button-close-color, #ffffff);
+      }
+    }
+
+    &:where([data-kind='close']):active {
+      background: var(--et-window-control-button-close-background-active, rgba(196, 14, 29, 0.96));
+      color: var(--et-window-control-button-close-color, #ffffff);
+    }
+
+    &:where([disabled]),
+    &:where([aria-disabled='true']) {
+      opacity: var(--et-button-opacity-disabled);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .et-window-control-button-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      transition: opacity 120ms ease;
+
+      &:empty {
+        display: none;
+      }
+
+      .et-icon {
+        width: var(--_et-window-control-button-icon-size);
+        height: var(--_et-window-control-button-icon-size);
+      }
+    }
+
+    &[data-loading='true'] {
+      .et-window-control-button-icon {
+        opacity: 0;
+      }
+
+      .et-button-loader {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/lib/calendar/calendar-coarse-grid-styles.component.css

@@ -0,0 +1,29 @@
+@layer components {
+  .et-calendar {
+    .et-calendar-coarse-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      inline-size: calc(var(--et-calendar-cell-size) * 7 + var(--_et-calendar-week-column));
+      block-size: var(--et-calendar-cell-size);
+    }
+
+    &:where([data-view='year'], [data-view='multiYear']) .et-calendar-weeks-viewport {
+      align-content: center;
+    }
+
+    .et-calendar-cell--coarse {
+      block-size: 100%;
+
+      .et-calendar-cell-content {
+        inline-size: calc(100% - 6px);
+        block-size: calc(var(--et-calendar-cell-size) - 6px);
+        padding-inline: 4px;
+        border-radius: 999px;
+      }
+
+      &::before {
+        inset-block: 3px;
+      }
+    }
+  }
+}

package/src/lib/calendar/calendar-comparison-band-styles.component.css

@@ -0,0 +1,36 @@
+@layer components {
+  .et-calendar {
+    .et-calendar-cell {
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block-end: 1px;
+        inset-inline: 0;
+        display: none;
+        block-size: 3px;
+        background: var(--et-surface-color-muted-solid);
+      }
+
+      &:where([data-comparison-band])::after {
+        display: block;
+      }
+
+      &:where([data-comparison-band='start'])::after {
+        inset-inline-start: 50%;
+        border-start-start-radius: 999px;
+        border-end-start-radius: 999px;
+      }
+
+      &:where([data-comparison-band='end'])::after {
+        inset-inline-end: 50%;
+        border-start-end-radius: 999px;
+        border-end-end-radius: 999px;
+      }
+
+      &:where([data-comparison-band='single'])::after {
+        inset-inline: 25%;
+        border-radius: 999px;
+      }
+    }
+  }
+}

package/src/lib/calendar/calendar-week-numbers-styles.component.css

@@ -0,0 +1,32 @@
+@layer components {
+  @property --et-calendar-week-number-size {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 28px;
+  }
+
+  .et-calendar {
+    &:where([data-week-numbers]) {
+      --_et-calendar-week-column: var(--et-calendar-week-number-size);
+
+      & .et-calendar-weekdays,
+      & .et-calendar-week {
+        grid-template-columns: var(--et-calendar-week-number-size) repeat(7, var(--et-calendar-cell-size));
+      }
+    }
+
+    .et-calendar-week-number {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-inline-end: 1px solid var(--et-surface-border-solid);
+      font-size: 11px;
+      font-variant-numeric: tabular-nums;
+      color: var(--et-surface-color-muted-solid);
+    }
+
+    .et-calendar-week-number-heading {
+      border-inline-end: 1px solid var(--et-surface-border-solid);
+    }
+  }
+}