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

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.79",
+  "version": "1.0.0-next.81",
   "repository": {
     "type": "git",
     "url": "https://github.com/ethlete-io/ethdk",

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);
       }
 
@@ -137,7 +137,7 @@
 
     &:where([data-variant='filled']) {
       @media (hover: 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)))
@@ -145,10 +145,10 @@
         }
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         --_et-button-background: color-mix(
           in srgb,
-          var(--et-theme-color-primary-solid) 84%,
+          var(--et-theme-color-primary-solid) 96%,
           var(--et-theme-color-on-primary-solid)
         );
       }
@@ -161,7 +161,7 @@
       --_et-button-border-color: transparent;
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled], [aria-disabled='true']):hover {
           --et-theme-color-primary-opacity: 1;
         }
       }
@@ -170,7 +170,7 @@
         --et-theme-color-primary-opacity: 1;
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         --et-theme-color-primary-opacity: 1;
       }
     }
@@ -201,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

@@ -85,7 +85,7 @@
       box-shadow: var(--et-button-shadow, none);
 
       @media (hover: hover) {
-        &:hover {
+        &:not([disabled], [aria-disabled='true']):hover {
           --et-theme-color-primary-opacity: 1;
           --et-theme-color-primary-rgb: var(
             --et-color-primary-active,
@@ -98,10 +98,10 @@
         --et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-focus-delta));
       }
 
-      &:active {
+      &:not([disabled], [aria-disabled='true']):active {
         --_et-icon-button-background: color-mix(
           in srgb,
-          var(--et-theme-color-primary-solid) 84%,
+          var(--et-theme-color-primary-solid) 96%,
           var(--et-theme-color-on-primary-solid)
         );
       }

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,65 @@
       }
     }
 
-    &: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-shape='caption']) {
+      --_et-window-control-button-border-radius: 0;
+      --_et-window-control-button-icon-size: 10px;
+
+      width: 46px;
+      height: 100%;
+
+      @media (hover: hover) {
+        &:hover {
+          --et-theme-color-primary-opacity: 0.06;
+          --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.06);
+        }
+      }
+
+      &:focus-visible {
+        --et-theme-color-primary-opacity: 0.06;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.06);
+
+        outline-offset: -2px;
+      }
+
+      &:active {
+        --et-theme-color-primary-opacity: 0.04;
+        --_et-window-control-button-fallback-background: rgba(255, 255, 255, 0.04);
+      }
+    }
+
+    &: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,12 +38,12 @@
       -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);
       }
 

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

@@ -74,7 +74,7 @@
         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);
         }
       }
@@ -99,7 +99,7 @@
       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);
         }
       }
@@ -138,13 +138,13 @@
         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);
       }
 

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

@@ -1,10 +1,25 @@
 @layer components {
+  @property --et-focus-ring-offset {
+    syntax: '*';
+    inherits: false;
+  }
+
+  @property --et-focus-ring-width {
+    syntax: '*';
+    inherits: false;
+  }
+
+  @property --et-focus-ring-color {
+    syntax: '*';
+    inherits: false;
+  }
+
   .et-focus-ring {
-    --_et-focus-ring-offset: 3px;
-    --_et-focus-ring-width: 2px;
-    --_et-focus-ring-color: light-dark(
-      var(--et-theme-color-ink-solid, currentColor),
-      var(--et-theme-color-primary-solid, currentColor)
+    --_et-focus-ring-offset: var(--et-focus-ring-offset, 3px);
+    --_et-focus-ring-width: var(--et-focus-ring-width, 2px);
+    --_et-focus-ring-color: var(
+      --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/switch/switch.component.css

@@ -58,20 +58,7 @@
       width: var(--et-switch-track-width);
       height: var(--et-switch-track-height);
       border-radius: calc(var(--et-switch-track-height) / 2);
-      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 22%, transparent);
-      box-shadow: inset 0 0 0 1px var(--et-surface-interaction-solid);
-    }
-
-    /* hover-capable pointers only — on touch, :hover sticks after a tap */
-    @media (hover: hover) {
-      &:hover:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
-        .et-switch-track,
-      :where(et-choice-field:has(.et-choice-field-label-area:hover))
-        &:not([aria-disabled='true']):not([data-readonly]):not([aria-checked='true']):not([data-indeterminate])
-        .et-switch-track {
-        background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 30%, transparent);
-        box-shadow: inset 0 0 0 1px var(--et-surface-interaction-hover-solid);
-      }
+      background-color: color-mix(in srgb, var(--et-surface-interaction-solid, currentColor) 38%, transparent);
     }
 
     :where(et-choice-field[data-error])

package/src/lib/kbd/kbd.component.css

@@ -52,7 +52,7 @@
     border: 1px solid var(--et-surface-border-solid, rgb(255 255 255 / 0.1));
     border-radius: var(--et-kbd-key-border-radius);
     background: color-mix(in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 8%, transparent);
-    color: var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55));
+    color: var(--et-kbd-color, var(--et-surface-color-muted-solid, rgb(255 255 255 / 0.55)));
     font: inherit;
     font-size: var(--et-kbd-font-size);
     font-weight: var(--et-kbd-font-weight);

package/src/lib/menu/menu.component.css

@@ -245,7 +245,7 @@
         color 120ms ease,
         opacity 120ms ease;
 
-      &[data-active]:focus-visible {
+      &[data-active]:where([data-active-source='keyboard']):focus-visible {
         outline: 2px solid var(--et-theme-color-ink-solid);
         outline-offset: -2px;
       }
@@ -254,7 +254,7 @@
        of [data-active] alone) keeps the highlight from appearing without a hover or keyboard
        interaction; a trigger whose submenu is open stays highlighted the whole time, and an item
        activated from the keyboard keeps its highlight while the menu fades out */
-      &[data-active]:where(:focus-visible),
+      &[data-active]:where([data-active-source='keyboard']:focus-visible),
       &[data-highlight-held],
       &[data-menu-open] {
         background: var(--_et-menu-item-active-background);

package/src/lib/notification/notification.component.css

@@ -105,7 +105,7 @@
     min-width: var(--et-notification-min-width);
     max-width: var(--et-notification-max-width);
     border-inline-start: var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);
-    font-family: inherit;
+    font-family: var(--et-font-family, inherit);
     font-size: var(--et-notification-font-size);
     line-height: var(--et-notification-line-height);
 
@@ -205,12 +205,12 @@
 
   .et-notification-dismiss-btn {
     flex-shrink: 0;
-    opacity: 0.4;
+    opacity: 0.75;
     transition: opacity 120ms ease;
 
     @media (hover: hover) {
       &:hover {
-        opacity: 0.8;
+        opacity: 1;
       }
     }
   }