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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.78",
+  "version": "1.0.0-next.79",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

package/src/lib/accordion/accordion.component.css

@@ -101,7 +101,8 @@
     }
 
     &: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/avatar/avatar.component.css

@@ -19,6 +19,7 @@
 
   .et-avatar {
     --_et-avatar-size: 40px;
+    --_et-avatar-icon-size: 2rem;
     --et-theme-color-primary-opacity: 1;
 
     display: inline-flex;
@@ -43,21 +44,25 @@
 
     &:where([data-size='xs']) {
       --_et-avatar-size: 24px;
+      --_et-avatar-icon-size: 1.4rem;
       --et-avatar-font-size: 10px;
     }
 
     &:where([data-size='sm']) {
       --_et-avatar-size: 32px;
+      --_et-avatar-icon-size: 1.8rem;
       --et-avatar-font-size: 12px;
     }
 
     &:where([data-size='lg']) {
       --_et-avatar-size: 48px;
+      --_et-avatar-icon-size: 2.4rem;
       --et-avatar-font-size: 16px;
     }
 
     &:where([data-size='xl']) {
       --_et-avatar-size: 64px;
+      --_et-avatar-icon-size: 2.8rem;
       --et-avatar-font-size: 20px;
     }
 
@@ -66,6 +71,11 @@
     }
   }
 
+  .et-avatar .et-icon {
+    inline-size: var(--_et-avatar-icon-size);
+    block-size: var(--_et-avatar-icon-size);
+  }
+
   .et-avatar-image {
     display: block;
     inline-size: 100%;

package/src/lib/badge/badge.component.css

@@ -64,12 +64,12 @@
     &:where([data-variant='filled']) {
       --et-theme-color-primary-opacity: 1;
       --_et-badge-color: var(--et-theme-color-on-primary);
-      --_et-badge-border-color: transparent;
+      --_et-badge-border-color: var(--et-theme-color-ink-solid);
     }
 
     &:where([data-variant='tonal']) {
       --et-theme-color-primary-opacity: 0.16;
-      --_et-badge-border-color: transparent;
+      --_et-badge-border-color: var(--et-theme-color-ink-solid);
     }
 
     &:where([data-variant='outline']) {

package/src/lib/banner/banner.component.css

@@ -50,7 +50,7 @@
     /* The tint is whatever type/color resolved onto this host's color scope, so the banner reads as its
        type without a hardcoded color - including a neutral `currentColor` tint for `info` with nothing forced. */
     background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 8%, transparent);
-    border: 1px solid color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 24%, transparent);
+    border: 1px solid var(--et-theme-color-ink-solid);
 
     > .et-icon {
       flex-shrink: 0;
@@ -74,6 +74,7 @@
       font-size: var(--et-banner-heading-size);
       font-weight: var(--et-banner-heading-weight);
       color: var(--et-surface-color-solid, currentColor);
+      overflow-wrap: anywhere;
     }
 
     .et-banner-description,
@@ -81,6 +82,7 @@
       margin: 0;
       font-size: var(--et-banner-description-size);
       color: var(--et-surface-color-muted-solid, currentColor);
+      overflow-wrap: anywhere;
     }
 
     [etBannerAction] {

package/src/lib/breadcrumb/breadcrumb-outlet.component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .et-breadcrumb-outlet {
+    display: block;
+  }
+}

package/src/lib/breadcrumb/breadcrumb.component.css

@@ -28,6 +28,9 @@
     /* The clip that makes overflow measurable — `scroll.width > client.width` is the directive's
        "doesn't fit" signal. Never `auto`: a scrollbar would defeat the collapsing it drives. */
     overflow: hidden;
+    /* Room for the focus ring (the overflow trigger's 2px outline + 3px offset) inside the clip; the negative margin keeps the layout height. */
+    padding-block: 5px;
+    margin-block: -5px;
     color: var(--et-surface-color-muted-solid, GrayText);
   }
 
@@ -91,7 +94,8 @@
     }
 
     &:where(a, button):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/button/button.component.css

@@ -135,6 +135,25 @@
       --_et-button-border-color: transparent;
     }
 
+    &:where([data-variant='filled']) {
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-rgb: var(
+            --et-color-primary-active,
+            var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+          );
+        }
+      }
+
+      &:active {
+        --_et-button-background: color-mix(
+          in srgb,
+          var(--et-theme-color-primary-solid) 84%,
+          var(--et-theme-color-on-primary-solid)
+        );
+      }
+    }
+
     &[data-pressed='true']:where([data-pressed-variant='filled']) {
       --et-theme-color-primary-opacity: 1;
       --_et-button-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));

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

@@ -18,7 +18,10 @@
     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));
+    background: var(
+      --_et-icon-button-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);
@@ -74,13 +77,20 @@
       pointer-events: none;
     }
 
-    &:where([data-variant='filled']) {
+    &:where([data-variant='filled']):not([data-pressed='true']),
+    &[data-pressed='true']:where([data-pressed-variant='filled']) {
       --et-theme-color-primary-opacity: 1;
+      --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
       color: var(--et-theme-color-on-primary);
+      box-shadow: var(--et-button-shadow, none);
 
       @media (hover: hover) {
         &:hover {
-          --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta));
+          --et-theme-color-primary-opacity: 1;
+          --et-theme-color-primary-rgb: var(
+            --et-color-primary-active,
+            var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+          );
         }
       }
 
@@ -89,7 +99,11 @@
       }
 
       &:active {
-        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-active-delta));
+        --_et-icon-button-background: color-mix(
+          in srgb,
+          var(--et-theme-color-primary-solid) 84%,
+          var(--et-theme-color-on-primary-solid)
+        );
       }
     }
 
@@ -98,22 +112,7 @@
     }
 
     &[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));
-      }
+      border: none;
     }
 
     .et-icon-button-icon {

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

@@ -87,7 +87,11 @@
       z-index: 1;
 
       &:where([data-variant='filled']) {
-        --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta));
+        --et-theme-color-primary-opacity: 1;
+        --et-theme-color-primary-rgb: var(
+          --et-color-primary-active,
+          var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+        );
       }
 
       &:where([data-variant='outline'], [data-variant='transparent']) {

package/src/lib/calendar/calendar.component.css

@@ -48,7 +48,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;
       }
     }
@@ -204,7 +205,10 @@
         inset-block: 4px;
         inset-inline: 0;
         display: none;
-        background: color-mix(in srgb, var(--et-theme-color-primary-solid) 12%, transparent);
+        background: light-dark(
+          color-mix(in srgb, var(--et-theme-color-primary-solid) 32%, transparent),
+          color-mix(in srgb, var(--et-theme-color-primary-solid) 12%, transparent)
+        );
       }
 
       &:where([data-band])::before {
@@ -242,7 +246,8 @@
         outline: none;
 
         .et-calendar-cell-content {
-          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;
         }
       }
@@ -255,6 +260,11 @@
         box-shadow: inset 0 0 0 1px var(--et-theme-color-ink-solid);
       }
 
+      &:where([data-selected], [data-band='start'], [data-band='end']):where(:not([data-disabled], [data-today]))
+        .et-calendar-cell-content {
+        box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+      }
+
       &:where([data-band='start'], [data-band='end']):where(:not([data-selected])) {
         color: var(--et-theme-color-on-primary);
 

package/src/lib/card/card.component.css

@@ -36,4 +36,8 @@
       box-shadow: 0 4px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.12);
     }
   }
+
+  .et-card .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/carousel/carousel-autoplay-styles.component.css

@@ -51,7 +51,7 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
       rotate: -180deg;
       /* At -180deg the flat edge lies on this half's clip edge, and at a fractional device pixel ratio the
          anti-aliasing of the two leaks a one-pixel line. The sweep keyframes show it again. */

package/src/lib/carousel/carousel.component.css

@@ -144,13 +144,13 @@
     }
 
     &:where([data-active])::before {
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     }
 
     /* Spelled out because the plain `:hover` above outranks a `:where()`-flattened selector, so without this
        the accent dot went grey under the pointer — the one dot that must never look unselected. */
     &:where([data-active]):hover::before {
-      background: var(--et-theme-color-primary-solid, currentColor);
+      background: light-dark(var(--et-theme-color-ink-solid), var(--et-theme-color-primary-solid));
     }
   }
 

package/src/lib/chart/chart-axis.component.css

@@ -12,6 +12,7 @@
     }
 
     &:where([data-orientation='horizontal']) {
+      container-type: inline-size;
       justify-items: start;
 
       .et-chart-axis-label {
@@ -20,10 +21,9 @@
 
       .et-chart-axis-label:where([data-extent]) {
         box-sizing: border-box;
-        inline-size: var(--_et-chart-axis-extent);
+        max-inline-size: var(--_et-chart-axis-extent);
         padding-inline: 2px;
-        text-align: center;
-        translate: calc(var(--_et-chart-axis-position) - var(--_et-chart-axis-extent) / 2) 0;
+        translate: clamp(0px, calc(var(--_et-chart-axis-position) - 50%), calc(100cqi - 100%)) 0;
       }
     }
 

package/src/lib/chip/chip.component.css

@@ -80,7 +80,8 @@
       }
 
       &: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: 1px;
       }
 
@@ -95,6 +96,7 @@
     &:where([aria-checked='true']) {
       background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 16%, transparent);
       color: var(--et-theme-color-ink-solid, currentColor);
+      box-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
 
       @media (hover: hover) {
         &:hover:not([data-readonly]) {
@@ -131,6 +133,9 @@
       color: var(--et-surface-color-muted-solid, currentColor);
       cursor: pointer;
       appearance: none;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
 
       @media (hover: hover) {
         &:hover {
@@ -144,7 +149,8 @@
       }
 
       &: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: 1px;
       }
 

package/src/lib/description-list/description-list.component.css

@@ -37,7 +37,7 @@
 
   .et-description-list {
     display: grid;
-    grid-template-columns: minmax(var(--et-description-list-term-min-width), max-content) 1fr;
+    grid-template-columns: minmax(var(--et-description-list-term-min-width), max-content) minmax(0, 1fr);
     row-gap: var(--et-description-list-row-gap);
     column-gap: var(--et-description-list-column-gap);
     margin: 0;
@@ -55,6 +55,7 @@
     dd {
       grid-column: 2;
       margin: 0;
+      overflow-wrap: anywhere;
       font-size: var(--et-description-list-detail-font-size);
       color: var(--et-surface-color-solid, currentColor);
     }

package/src/lib/empty-state/empty-state.component.css

@@ -70,4 +70,8 @@
     font-size: var(--et-empty-state-description-font-size);
     color: var(--et-surface-color-muted-solid, currentColor);
   }
+
+  .et-empty-state .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/floating-action/floating-action-styles.component.css

@@ -46,10 +46,37 @@
          reader cannot see. */
       visibility: hidden;
     }
+
+    .et-floating-action-trigger:where(
+        [data-floating-action-state='floating'],
+        [data-floating-action-state='hidden']
+      )::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      opacity: 0;
+      box-shadow:
+        0 0.3rem 0.8rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.2),
+        0 0.1rem 0.3rem rgb(var(--et-shadow-color-rgb, 0 0 0) / 0.12);
+    }
+
+    .et-floating-action-trigger:where([data-floating-action-state='floating']) {
+      --et-button-shadow: inset 0 0 0 1px light-dark(var(--et-theme-color-ink-solid), transparent);
+    }
+
+    .et-floating-action-trigger:where([data-floating-action-state='floating'])::before {
+      opacity: 1;
+    }
   }
 
   @media (prefers-reduced-motion: no-preference) {
     .et-floating-action {
+      .et-floating-action-trigger::before {
+        transition: opacity var(--et-floating-action-duration) var(--ease-3, ease-out);
+      }
+
       /* Scaling *in* is a keyframe rather than a transition: the first time the trigger detaches there is no
          previous scale to animate from. */
       .et-floating-action-trigger:where([data-floating-action-state='floating']) {

package/src/lib/focus-ring/focus-ring-styles.component.css

@@ -2,7 +2,10 @@
   .et-focus-ring {
     --_et-focus-ring-offset: 3px;
     --_et-focus-ring-width: 2px;
-    --_et-focus-ring-color: var(--et-theme-color-primary-solid, currentColor);
+    --_et-focus-ring-color: light-dark(
+      var(--et-theme-color-ink-solid, currentColor),
+      var(--et-theme-color-primary-solid, currentColor)
+    );
     outline: var(--_et-focus-ring-width) solid transparent;
     outline-offset: var(--_et-focus-ring-offset);
   }

package/src/lib/forms/checkbox/checkbox.component.css

@@ -51,12 +51,13 @@
     }
 
     .et-checkbox-box {
+      box-sizing: border-box;
       position: relative;
       display: grid;
       place-items: center;
       width: var(--et-checkbox-size);
       height: var(--et-checkbox-size);
-      border: var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);
+      border: var(--et-checkbox-border-width) solid var(--et-surface-interaction-solid, currentColor);
       border-radius: var(--et-checkbox-border-radius);
     }
 
@@ -79,11 +80,33 @@
     }
 
     @media (hover: hover) {
-      :where(et-choice-field[data-error]) &:hover:not([aria-disabled='true']):not([data-readonly]) .et-checkbox-box,
+      :where(et-choice-field[data-error])
+        &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
+        .et-checkbox-box,
       :where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover))
-        &:not([aria-disabled='true']):not([data-readonly])
+        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([aria-checked='mixed'])
         .et-checkbox-box {
-        border-color: var(--et-theme-color-primary-solid);
+        border-color: light-dark(
+          rgb(var(--et-color-primary-hover, var(--et-color-primary))),
+          rgb(
+            var(
+              --et-color-primary-ink-active,
+              var(
+                --et-color-primary-ink-focus,
+                var(
+                  --et-color-primary-ink-hover,
+                  var(
+                    --et-color-primary-ink,
+                    var(
+                      --et-color-primary-active,
+                      var(--et-color-primary-focus, var(--et-color-primary-hover, var(--et-color-primary)))
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
       }
     }
 
@@ -100,7 +123,10 @@
     }
 
     et-choice-field[data-error] &:focus-visible:not([aria-checked='true']):not([aria-checked='mixed']) {
-      --_et-focus-ring-color: var(--et-theme-color-primary-solid);
+      --_et-focus-ring-color: light-dark(
+        var(--et-theme-color-ink-solid, currentColor),
+        var(--et-theme-color-primary-solid, currentColor)
+      );
     }
 
     et-choice-field[data-error]

package/src/lib/forms/color-input/color-input.component.css

@@ -47,6 +47,7 @@
     --_et-color-input-checker: color-mix(in srgb, currentColor 18%, transparent);
     --_et-color-input-swatch-color: transparent;
 
+    box-sizing: border-box;
     inline-size: var(--et-color-input-swatch-size);
     block-size: var(--et-color-input-swatch-size);
     border-radius: var(--et-color-input-swatch-radius);
@@ -86,7 +87,8 @@
     outline: none;
 
     .et-color-input-swatch {
-      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/forms/color-input/color-picker-panel.component.css

@@ -88,7 +88,8 @@
     cursor: crosshair;
 
     &:has(.et-color-picker-channel: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;
     }
   }
@@ -99,7 +100,8 @@
     border-radius: 999px;
 
     &:has(.et-color-picker-channel: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;
     }
   }
@@ -148,6 +150,7 @@
      choosing, so it has to stay legible over every hue a token could not anticipate */
   .et-color-picker-area-thumb,
   .et-color-picker-track-thumb {
+    box-sizing: border-box;
     position: absolute;
     inline-size: var(--et-color-picker-thumb-size);
     block-size: var(--et-color-picker-thumb-size);
@@ -227,6 +230,7 @@
     --_et-color-picker-preview-color: transparent;
 
     flex: none;
+    box-sizing: border-box;
     inline-size: 20px;
     block-size: 20px;
     border-radius: 4px;

package/src/lib/forms/date-time/date-input/date-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/date-time-input/date-time-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/duration-input/duration-input.component.css

@@ -20,7 +20,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/date-time/range-input-shell-styles.component.css

@@ -32,7 +32,7 @@
     font-variant-numeric: tabular-nums;
 
     &::placeholder {
-      color: color-mix(in srgb, currentColor 46%, transparent);
+      color: color-mix(in srgb, currentColor 60%, transparent);
     }
 
     &:disabled {

package/src/lib/forms/date-time/time-input/time-input.component.css

@@ -19,7 +19,7 @@
       font-variant-numeric: tabular-nums;
 
       &::placeholder {
-        color: color-mix(in srgb, currentColor 46%, transparent);
+        color: color-mix(in srgb, currentColor 60%, transparent);
       }
 
       &:disabled {

package/src/lib/forms/description/description.component.css

@@ -0,0 +1,7 @@
+@layer components {
+  et-description {
+    display: block;
+    font-size: var(--et-description-font-size, 12px);
+    color: var(--et-surface-color-muted-solid, currentColor);
+  }
+}