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

package/generators/generators.json

@@ -1,6 +1,7 @@
 {
   "generators": {
     "component": {
+      "scaffold": true,
       "factory": "./component/generator",
       "schema": "./component/schema.json",
       "description": "Scaffold a component domain following the three-tier architecture (folder layout, headless + default split, styles, spec, stories, docs page, barrel wiring)"
@@ -101,6 +102,7 @@
       "description": "Remove the spinner determinate and progress bar indeterminate inputs in templates"
     },
     "icons": {
+      "scaffold": true,
       "factory": "./icons/generator",
       "schema": "./icons/schema.json",
       "description": "Generate etIcon IconDefinitions and typed names from an installed SVG icon source (auto-detects Font Awesome)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethlete/components",
-  "version": "1.0.0-next.78",
+  "version": "1.0.0-next.80",
   "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-properties-styles.component.css

@@ -75,7 +75,7 @@
     --et-theme-color-primary-opacity: 0;
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled], [aria-disabled='true']):hover {
         --et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta);
       }
     }
@@ -84,7 +84,7 @@
       --et-theme-color-primary-opacity: var(--et-button-variant-opacity-focus-delta);
     }
 
-    &:active {
+    &:not([disabled], [aria-disabled='true']):active {
       --et-theme-color-primary-opacity: var(--et-button-variant-opacity-active-delta);
     }
   }
@@ -93,7 +93,7 @@
     --et-theme-color-primary-opacity: 0.16;
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled], [aria-disabled='true']):hover {
         --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-hover-delta));
       }
     }
@@ -102,7 +102,7 @@
       --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-focus-delta));
     }
 
-    &:active {
+    &:not([disabled], [aria-disabled='true']):active {
       --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-active-delta));
     }
   }
@@ -112,7 +112,7 @@
     --et-theme-color-primary-opacity: 0.16;
 
     @media (hover: hover) {
-      &:hover {
+      &:not([disabled], [aria-disabled='true']):hover {
         --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-hover-delta));
       }
     }
@@ -121,7 +121,7 @@
       --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-focus-delta));
     }
 
-    &:active {
+    &:not([disabled], [aria-disabled='true']):active {
       --et-theme-color-primary-opacity: calc(0.16 + var(--et-button-variant-opacity-active-delta));
     }
   }

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

@@ -103,7 +103,7 @@
       --_et-button-border-color: var(--et-theme-color-ink-solid);
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled], [aria-disabled='true']):hover {
           --et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta);
         }
       }
@@ -112,7 +112,7 @@
         --et-theme-color-primary-opacity: var(--et-button-variant-opacity-focus-delta);
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         --et-theme-color-primary-opacity: var(--et-button-variant-opacity-active-delta);
       }
 
@@ -135,6 +135,25 @@
       --_et-button-border-color: transparent;
     }
 
+    &:where([data-variant='filled']) {
+      @media (hover: hover) {
+        &:not([disabled], [aria-disabled='true']):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)))
+          );
+        }
+      }
+
+      &:not([disabled], [aria-disabled='true']):active {
+        --_et-button-background: color-mix(
+          in srgb,
+          var(--et-theme-color-primary-solid) 96%,
+          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));
@@ -142,7 +161,7 @@
       --_et-button-border-color: transparent;
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled], [aria-disabled='true']):hover {
           --et-theme-color-primary-opacity: 1;
         }
       }
@@ -151,7 +170,7 @@
         --et-theme-color-primary-opacity: 1;
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         --et-theme-color-primary-opacity: 1;
       }
     }
@@ -182,6 +201,10 @@
       transition: opacity 120ms ease;
     }
 
+    &:where([data-stretch-contents]) .et-button-contents {
+      flex: 1;
+    }
+
     &[data-loading='true'] {
       .et-button-icon,
       .et-button-contents {

package/src/lib/button/button.types.ts

@@ -0,0 +1,33 @@
+export const BUTTON_SIZES = {
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
+} as const;
+
+export type ButtonSize = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
+
+export const BUTTON_ICON_ALIGNMENTS = {
+  START: 'start',
+  END: 'end',
+} as const;
+
+export type ButtonIconAlignment = (typeof BUTTON_ICON_ALIGNMENTS)[keyof typeof BUTTON_ICON_ALIGNMENTS];
+
+export const BUTTON_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINE: 'outline',
+  TONAL: 'tonal',
+  TRANSPARENT: 'transparent',
+} as const;
+
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];
+
+export const BUTTON_SPINNER_CONFIG: Record<ButtonSize, { diameter: number; strokeWidth: number }> = {
+  xs: { diameter: 12, strokeWidth: 1.5 },
+  sm: { diameter: 14, strokeWidth: 1.75 },
+  md: { diameter: 16, strokeWidth: 2 },
+  lg: { diameter: 20, strokeWidth: 2.5 },
+  xl: { diameter: 24, strokeWidth: 3 },
+};

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));
+        &:not([disabled], [aria-disabled='true']):hover {
+          --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)))
+          );
         }
       }
 
@@ -88,8 +98,12 @@
         --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));
+      &:not([disabled], [aria-disabled='true']):active {
+        --_et-icon-button-background: color-mix(
+          in srgb,
+          var(--et-theme-color-primary-solid) 96%,
+          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/button/window-control-button.component.css

@@ -64,6 +64,27 @@
       --_et-window-control-button-icon-size: 1.8rem;
     }
 
+    &:where([data-shape='round']) {
+      --et-theme-color-primary-opacity: 0.1;
+      --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.1);
+      --_et-window-control-button-border-radius: 50%;
+    }
+
+    &:where([data-shape='round'][data-size='sm']) {
+      --_et-window-control-button-size: 2rem;
+      --_et-window-control-button-icon-size: 1.2rem;
+    }
+
+    &:where([data-shape='round'][data-size='md']) {
+      --_et-window-control-button-size: 2.4rem;
+      --_et-window-control-button-icon-size: 1.6rem;
+    }
+
+    &:where([data-shape='round'][data-size='lg']) {
+      --_et-window-control-button-size: 2.8rem;
+      --_et-window-control-button-icon-size: 1.8rem;
+    }
+
     @media (hover: hover) {
       &:hover {
         --et-theme-color-primary-opacity: 0.14;
@@ -103,19 +124,38 @@
       }
     }
 
-    &:where([data-kind='close']):focus-visible {
+    &:where([data-shape='round']) {
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: 0.15;
+          --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.15);
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: 0.15;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.15);
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: 0.3;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.3);
+      }
+    }
+
+    &:where([data-kind='close']:not([data-shape='round'])):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 {
+      &:where([data-kind='close']:not([data-shape='round'])):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 {
+    &:where([data-kind='close']:not([data-shape='round'])):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);
     }

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

@@ -38,17 +38,18 @@
       -webkit-tap-highlight-color: transparent;
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled], [aria-disabled='true']):hover {
           background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent);
         }
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         background: color-mix(in srgb, var(--et-surface-interaction-solid) 22%, transparent);
       }
 
       &: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

@@ -74,13 +74,14 @@
         color 120ms ease;
 
       @media (hover: hover) {
-        &:hover:not([aria-checked='true']):not([data-readonly]) {
+        &:hover:not([aria-checked='true'], [data-readonly], [data-disabled]) {
           background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 22%, transparent);
         }
       }
 
       &: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,9 +96,10 @@
     &: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]) {
+        &:hover:not([data-readonly], [data-disabled]) {
           background: color-mix(in srgb, var(--et-theme-color-primary-solid, currentColor) 24%, transparent);
         }
       }
@@ -131,20 +133,24 @@
       color: var(--et-surface-color-muted-solid, currentColor);
       cursor: pointer;
       appearance: none;
+      transition:
+        background 120ms ease,
+        color 120ms ease;
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled]):hover {
           background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 20%, transparent);
           color: var(--et-surface-color-solid, currentColor);
         }
       }
 
-      &:active {
+      &:not([disabled]):active {
         background: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 28%, transparent);
       }
 
       &: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);
+  }
 }