@greese/ui 1.0.0 → 1.2.0

package/src/components/Carousel/Carousel.scss

@@ -1,161 +1,157 @@
 @use '../../styles/mixins';
+@use '../../styles/slides';
+
+// What a leaving slide's exit sets, and the base theme's values: a slide out
+// the way the carousel moves, no mask.
+$_exit: (
+  opacity: 1,
+  translate: calc(-100% * var(--greese-carousel-way)) 0,
+  scale: 1,
+  mask-image: none,
+  mask-repeat: no-repeat,
+  mask-position: 50% 50%,
+  mask-size: 100% 100%,
+  mask-from: 100% 100%,
+  transform: none,
+  transform-origin: 50% 50%,
+);
+
+/// A leaving slide's exit value: its own (the instance's `exit`, as an
+/// effect class on the slide), else the role's for the direction it goes.
+@function _exit($property) {
+  @return var(
+    --greese-motion-exit-#{$property},
+    var(--greese-carousel-exit-#{$property})
+  );
+}
 
 @layer greese.components {
+  // One slide at a time: the others stack under it, in the same cell, so the
+  // carousel is as tall as its tallest slide and never jumps as it moves.
   .greese-Carousel {
     @include mixins.component-root;
 
+    // 1 going forward, -1 going back; mirrored right-to-left, where forward
+    // runs leftward.
+    --greese-carousel-way: 1;
+
+    // The theme's motion roles (ADR 0025): `carousel` and `carousel-exit`,
+    // and `carousel-back` and `carousel-back-exit` going back (each falling
+    // back to its forward role). The base theme slides the way it moves.
+    --greese-carousel-enter: var(--greese-motion-carousel, greese-carousel-in);
+    --greese-carousel-duration: var(
+      --greese-motion-carousel-duration,
+      var(--greese-duration-normal)
+    );
+
+    @each $property, $base in $_exit {
+      --greese-carousel-exit-#{$property}: var(
+        --greese-motion-carousel-exit-#{$property},
+        #{$base}
+      );
+    }
+
     position: relative;
     display: grid;
     gap: var(--greese-space-3);
     min-inline-size: 0;
-  }
 
-  // Native scrolling and snapping: swipe, trackpad and keys all work.
-  .greese-Carousel-viewport {
-    --greese-carousel-per-view: 1;
-    --greese-carousel-gap: var(--greese-space-3);
-
-    display: flex;
-    gap: var(--greese-carousel-gap);
-    overflow-x: auto;
-    overscroll-behavior-x: contain;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: none;
-    border-radius: var(--greese-corner-panel);
-
-    &::-webkit-scrollbar {
-      display: none;
+    &[data-direction='back'] {
+      --greese-carousel-way: -1;
+      --greese-carousel-enter: var(
+        --greese-motion-carousel-back,
+        var(--greese-motion-carousel, greese-carousel-in)
+      );
+
+      @each $property, $base in $_exit {
+        --greese-carousel-exit-#{$property}: var(
+          --greese-motion-carousel-back-exit-#{$property},
+          var(--greese-motion-carousel-exit-#{$property}, #{$base})
+        );
+      }
     }
 
-    @include mixins.focus-ring;
+    &:dir(rtl) {
+      --greese-carousel-way: -1;
+    }
 
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
+    &[data-direction='back']:dir(rtl) {
+      --greese-carousel-way: 1;
     }
   }
 
-  // Each slide's width: the viewport shared by `per-view` slides and the gaps.
-  .greese-CarouselSlide {
-    --greese-carousel-gaps: calc(
-      (var(--greese-carousel-per-view) - 1) * var(--greese-carousel-gap)
-    );
+  .greese-Carousel-viewport {
+    // An exit set on an ancestor (a dialog's `greese` exit) is not the
+    // slides': cleared here, so they fall back to their own and the role's.
+    @each $property, $base in $_exit {
+      --greese-motion-exit-#{$property}: initial;
+    }
+
+    // The instance's entrance, set on the slide that arrives; cleared for
+    // nested carousels.
+    --greese-carousel-slide-enter: initial;
 
-    flex: 0 0 calc((100% - var(--greese-carousel-gaps)) / var(--greese-carousel-per-view));
+    display: grid;
     min-inline-size: 0;
-    scroll-snap-align: start;
-  }
+    overflow: clip;
+    border-radius: var(--greese-corner-panel);
 
-  // Previous and next sit over the viewport's edges, centred on it.
-  .greese-Carousel-control {
-    position: absolute;
-    inset-block-start: calc(50% - 1.25rem - var(--greese-carousel-dots, 0px) / 2);
-    display: inline-grid;
-    place-items: center;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
-    padding: 0;
-    color: var(--greese-color-fg);
-    cursor: pointer;
-    background-color: color-mix(
-      in oklab,
-      var(--greese-color-surface-overlay) 88%,
-      transparent
-    );
-    border: 1px solid var(--greese-color-border);
-    border-radius: var(--greese-corner-round);
-    box-shadow: var(--greese-shadow-md);
-    translate: 0 -50%;
-    transition: opacity var(--greese-duration-fast) var(--greese-easing-standard);
+    // Vertical drags still scroll the page; sideways ones are swipes.
+    touch-action: pan-y;
 
     @include mixins.focus-ring;
-    @include mixins.touch-target;
-
-    &:disabled {
-      cursor: default;
-      opacity: 0;
-    }
-
-    > svg {
-      inline-size: 1.125rem;
-      block-size: 1.125rem;
-    }
   }
 
-  .greese-Carousel:has(.greese-Carousel-indicators) {
-    --greese-carousel-dots: calc(0.5rem + var(--greese-space-3));
-  }
-
-  .greese-Carousel-control--previous {
-    inset-inline-start: var(--greese-space-2);
-  }
-
-  .greese-Carousel-control--next {
-    inset-inline-end: var(--greese-space-2);
+  .greese-CarouselSlide {
+    grid-area: 1 / 1;
+    min-inline-size: 0;
 
-    > svg {
-      scale: -1 1;
+    // A wipe, iris or pocket exit's mask: held open at the size it starts
+    // from, then sized away as the slide leaves. Without one, it's `none`.
+    mask-image: _exit(mask-image);
+    mask-repeat: _exit(mask-repeat);
+    mask-position: _exit(mask-position);
+    mask-size: _exit(mask-from);
+    transform-origin: _exit(transform-origin);
+
+    &:not([data-active]) {
+      visibility: hidden;
+      opacity: _exit(opacity);
+      translate: _exit(translate);
+      scale: _exit(scale);
+      transform: _exit(transform);
+      mask-size: _exit(mask-size);
     }
   }
 
-  // The chevron points to the inline start; mirror both in RTL.
-  .greese-Carousel-control:dir(rtl) > svg {
-    scale: -1 1;
-  }
-
-  .greese-Carousel-control--next:dir(rtl) > svg {
-    scale: 1;
-  }
-
-  // Phones swipe; the buttons come back where a pointer can hover.
-  @media (hover: none) {
-    .greese-Carousel-control {
-      display: none;
+  // Only once it has moved: the slide it opens on (a deep link's) is simply
+  // there. The arriving slide plays its entrance; the one leaving
+  // transitions to its exit, and is hidden when that ends. The arriving one
+  // has no transition, so its exit values never fight its entrance.
+  @include mixins.motion-safe {
+    .greese-Carousel[data-moved] > .greese-Carousel-viewport > .greese-CarouselSlide {
+      &[data-active] {
+        animation-name: var(--greese-carousel-slide-enter, var(--greese-carousel-enter));
+        animation-duration: var(--greese-carousel-duration);
+        animation-timing-function: var(--greese-easing-standard);
+        animation-fill-mode: backwards;
+      }
+
+      &:not([data-active]) {
+        transition-property:
+          visibility, opacity, translate, scale, transform, mask-size, mask-position;
+        transition-duration: var(--greese-carousel-duration);
+        transition-timing-function: var(--greese-easing-standard);
+      }
     }
   }
 
-  .greese-Carousel-indicators {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--greese-space-1);
-    justify-content: center;
-  }
-
-  // Each dot keeps one size; the active pill is drawn by clip-path, which
-  // never changes layout. A width change would: mid-scroll, every frame of
-  // it made WebKit re-snap the viewport and pull it back a slide.
-  .greese-Carousel-indicator {
-    position: relative;
-    inline-size: 1.5rem;
-    block-size: 0.5rem;
-    padding: 0;
-    cursor: pointer;
-    background: none;
-    border: 0;
-
-    @include mixins.focus-ring;
-    @include mixins.touch-target(24px);
-
-    &::before {
-      position: absolute;
-      inset: 0;
-      content: '';
-      background-color: var(--greese-color-border-strong);
-      border-radius: var(--greese-corner-pill);
-      clip-path: inset(0 calc(50% - 0.25rem) round var(--greese-corner-pill));
-      transition:
-        clip-path var(--greese-duration-normal) var(--greese-easing-standard),
-        background-color var(--greese-duration-normal) var(--greese-easing-standard);
-    }
+  @include slides.controls('greese-Carousel', carousel);
 
-    &[aria-current='true']::before {
-      background-color: var(--greese-color-primary);
-      clip-path: inset(0 round var(--greese-corner-pill));
+  // The base theme's entrance: in from the side the carousel moves toward.
+  @keyframes greese-carousel-in {
+    from {
+      translate: calc(100% * var(--greese-carousel-way)) 0;
     }
   }
-
-  @include mixins.responsive-prop(
-    'greese-Carousel',
-    'per-view',
-    --greese-carousel-per-view
-  );
 }

package/src/components/Checkbox/Checkbox.scss

@@ -5,8 +5,8 @@
     @include mixins.touch-target;
 
     position: relative;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--greese-choice-box, 1.125rem);
+    block-size: var(--greese-choice-box, 1.125rem);
     margin: 0;
     cursor: pointer;
     background-color: var(--greese-color-canvas);

package/src/components/Chip/Chip.scss

@@ -1,15 +1,56 @@
 @use 'sass:list';
+@use 'sass:map';
 @use '../../styles/mixins';
 @use '../../styles/tones';
 
+/// A chip's size scale.
+///
+/// Deliberately not `controls.$sizes`: a chip is a label, not something you
+/// type in, so it runs smaller than an input of the same name and needs no
+/// 44px touch floor of its own (only its toggle and remove buttons do, and
+/// `mixins.touch-target` gives them one). `md` is the size every chip was
+/// before the prop existed, so nothing moved when it arrived.
+$chip-sizes: (
+  xs: (
+    height: 1.25rem,
+    padding: var(--greese-space-1),
+    font: var(--greese-type-caption-font-size),
+    remove: 1rem,
+  ),
+  sm: (
+    height: 1.625rem,
+    padding: var(--greese-space-2),
+    font: var(--greese-type-caption-font-size),
+    remove: 1.25rem,
+  ),
+  md: (
+    height: 2rem,
+    padding: var(--greese-space-3),
+    font: var(--greese-type-p3-font-size),
+    remove: 1.5rem,
+  ),
+  lg: (
+    height: 2.5rem,
+    padding: var(--greese-space-4),
+    font: var(--greese-type-p2-font-size),
+    remove: 1.75rem,
+  ),
+  xl: (
+    height: 3rem,
+    padding: var(--greese-space-5),
+    font: var(--greese-type-p1-font-size),
+    remove: 2rem,
+  ),
+);
+
 @layer greese.components {
   .greese-Chip {
     display: inline-flex;
     gap: var(--greese-space-1);
     align-items: center;
-    min-block-size: 2rem;
-    padding-inline: var(--greese-space-3);
-    font-size: var(--greese-type-p3-font-size);
+    min-block-size: var(--greese-chip-height);
+    padding-inline: var(--greese-chip-padding);
+    font-size: var(--greese-chip-font);
     line-height: 1;
     color: var(--greese-color-fg);
     white-space: nowrap;
@@ -26,6 +67,18 @@
     }
   }
 
+  // Sizes. Each sets the three per-instance variables the block reads, so an
+  // app can override one of them on a chip (or a whole area) without picking a
+  // different size.
+  @each $size, $spec in $chip-sizes {
+    .greese-Chip--size-#{$size} {
+      --greese-chip-height: #{map.get($spec, height)};
+      --greese-chip-padding: #{map.get($spec, padding)};
+      --greese-chip-font: #{map.get($spec, font)};
+      --greese-chip-remove: #{map.get($spec, remove)};
+    }
+  }
+
   $chip-tones: (
     neutral,
     primary,
@@ -95,20 +148,22 @@
 
   .greese-Chip-toggle {
     align-self: stretch;
-    padding-inline: var(--greese-space-3);
+    padding-inline: var(--greese-chip-padding);
     border-radius: var(--greese-corner-pill);
   }
 
   .greese-Chip-remove {
     justify-content: center;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+
+    // Scales with the chip, or it overflows a small one.
+    inline-size: var(--greese-chip-remove);
+    block-size: var(--greese-chip-remove);
     color: var(--greese-color-fg-muted);
     border-radius: var(--greese-corner-round);
 
     > svg {
-      inline-size: 0.875rem;
-      block-size: 0.875rem;
+      inline-size: 0.6em;
+      block-size: 0.6em;
     }
 
     @include mixins.hover {

package/src/components/ChoiceGroup/ChoiceGroup.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../styles/controls';
 @use '../../styles/mixins';
 
 @layer greese.components {
@@ -38,6 +40,21 @@
     }
   }
 
+  // The size a Checkbox, Radio or Switch was given reaches its text through
+  // these variables: one scale for the three, so a column of mixed controls
+  // lines up. `controls.$sizes` is the same scale Input, Select and Button
+  // use.
+  @each $size, $spec in controls.$sizes {
+    .greese-Checkbox--size-#{$size},
+    .greese-Radio--size-#{$size},
+    .greese-Switch--size-#{$size},
+    .greese-ChoiceGroup--size-#{$size} {
+      --greese-choice-font: #{map.get($spec, font)};
+      --greese-choice-gap: #{map.get($spec, padding)};
+      --greese-choice-box: calc(#{map.get($spec, height)} * 0.45);
+    }
+  }
+
   .greese-Checkbox-text {
     display: flex;
     flex-direction: column;
@@ -45,6 +62,7 @@
   }
 
   .greese-Checkbox-label {
+    font-size: var(--greese-choice-font, inherit);
     cursor: pointer;
 
     [data-disabled] > .greese-Checkbox-text > & {
@@ -53,7 +71,7 @@
   }
 
   .greese-Checkbox-description {
-    font-size: var(--greese-type-p3-font-size);
+    font-size: var(--greese-choice-description-font, var(--greese-type-p3-font-size));
     color: var(--greese-color-fg-muted);
   }
 

package/src/components/Collapsible/Collapsible.scss

@@ -123,6 +123,9 @@
   }
 
   .greese-Collapsible-content {
+    // Holds its children's margins: one that escaped would count while the
+    // height animates and drop out at the end, a jump the size of the margin.
+    display: flow-root;
     padding-block-end: var(--greese-space-4);
     color: var(--greese-color-fg-muted);
 

package/src/components/ColorPicker/ColorPicker.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '../../styles/controls';
 @use '../../styles/mixins';
 
 /* stylelint-disable selector-no-vendor-prefix */
@@ -21,7 +23,15 @@ $checker: repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0 / 0.75rem 0.
     var(--greese-shadow-sm);
 }
 
+// The picker's own number and text fields take the size the picker was given.
 @layer greese.components {
+  @each $size, $spec in controls.$sizes {
+    .greese-ColorPicker--size-#{$size} {
+      --greese-colorpicker-font: #{map.get($spec, font)};
+      --greese-colorpicker-padding: #{map.get($spec, padding)};
+    }
+  }
+
   .greese-ColorPicker {
     --greese-colorpicker-thumb: 1.125rem;
 
@@ -189,10 +199,95 @@ $checker: repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0 / 0.75rem 0.
     direction: ltr;
   }
 
+  // The hex field and any numeric channel sets, wrapping onto new lines in a
+  // narrow picker rather than squeezing the fields.
+  .greese-ColorPicker-fields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+
   .greese-ColorPicker-hex {
+    flex: 1 1 7rem;
+    min-inline-size: 0;
     font-family: var(--greese-font-mono);
   }
 
+  // A channel set takes a row of its own: sharing one with the hex field left
+  // three numbers about 3rem each, and a blue of 246 did not fit.
+  .greese-ColorPicker-channels {
+    display: flex;
+    flex: 1 0 100%;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+  }
+
+  // Input's own root; its `<input>` is the `-control` part inside.
+  .greese-ColorPicker-channel {
+    flex: 1;
+    min-inline-size: 0;
+    padding-inline: var(--greese-space-1);
+
+    .greese-Input-control {
+      font-family: var(--greese-font-mono);
+      text-align: end;
+
+      // Three numbers side by side have no room for a spinner, and the area
+      // and hue slider are how a value gets nudged.
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        margin: 0;
+        appearance: none;
+      }
+    }
+
+    .greese-Input-adornment {
+      font-family: var(--greese-font-mono);
+      color: var(--greese-color-fg-muted);
+    }
+  }
+
+  // The picker's own small buttons: the eyedropper, and saving or clearing a
+  // swatch. Plain buttons rather than IconButton, so a picker that shows none
+  // of them doesn't carry Button's variants (see .size-limit.cjs).
+  .greese-ColorPicker-tool {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+
+    @media (pointer: coarse) {
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--greese-color-fg);
+      background: var(--greese-color-track);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--greese-color-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
   .greese-ColorPicker-swatches {
     display: flex;
     flex-wrap: wrap;

package/src/components/Combobox/Combobox.scss

@@ -8,8 +8,10 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+
+    // Never taller than the field it sits in, so an xs field stays xs.
+    inline-size: min(1.75rem, var(--greese-input-height, 1.75rem) - 2px);
+    block-size: min(1.75rem, var(--greese-input-height, 1.75rem) - 2px);
     padding: 0;
     margin-inline-end: calc(-1 * var(--greese-space-2));
     color: var(--greese-color-fg-muted);

package/src/components/Dialog/Dialog.scss

@@ -34,7 +34,7 @@ $widths: (
     );
     max-inline-size: none;
     max-block-size: calc(100dvh - 2 * var(--greese-space-4));
-    padding: var(--greese-space-5);
+    padding: var(--greese-dialog-padding, var(--greese-space-5));
     overflow: hidden;
     border-radius: var(--greese-corner-surface);
 
@@ -84,8 +84,14 @@ $widths: (
     inline-size: 100vw;
     max-block-size: 100dvh;
     block-size: 100dvh;
-    padding-block: max(var(--greese-space-5), env(safe-area-inset-top))
-      max(var(--greese-space-5), env(safe-area-inset-bottom));
+    padding-block: var(
+        --greese-dialog-padding,
+        max(var(--greese-space-5), env(safe-area-inset-top))
+      )
+      var(
+        --greese-dialog-padding,
+        max(var(--greese-space-5), env(safe-area-inset-bottom))
+      );
     border: 0;
     border-radius: 0;
   }
@@ -120,6 +126,11 @@ $widths: (
   .greese-Dialog-body {
     flex: 1 1 auto;
     min-block-size: 0;
+
+    // Room for a focus ring at its edges, which its scrolling would clip; the
+    // margin gives it back, so the content stays where it was.
+    padding: 4px;
+    margin: -4px;
     overflow: auto;
     overscroll-behavior: contain;
   }
@@ -157,8 +168,14 @@ $widths: (
   }
 
   $edge: var(--greese-corner-surface);
-  $safe-top: max(var(--greese-space-5), env(safe-area-inset-top));
-  $safe-bottom: max(var(--greese-space-5), env(safe-area-inset-bottom));
+  $safe-top: var(
+    --greese-dialog-padding,
+    max(var(--greese-space-5), env(safe-area-inset-top))
+  );
+  $safe-bottom: var(
+    --greese-dialog-padding,
+    max(var(--greese-space-5), env(safe-area-inset-bottom))
+  );
   $side-size: min(24rem, 100vw - 3rem);
   $placements: (
     end: (
@@ -187,7 +204,7 @@ $widths: (
       inline-size: 100vw,
       block-size: auto,
       max-block-size: 85dvh,
-      padding-block: var(--greese-space-5) $safe-bottom,
+      padding-block: var(--greese-dialog-padding, var(--greese-space-5)) $safe-bottom,
       radius: $edge $edge 0 0,
       from: 0 100%,
     ),
@@ -197,7 +214,7 @@ $widths: (
       inline-size: 100vw,
       block-size: auto,
       max-block-size: 85dvh,
-      padding-block: $safe-top var(--greese-space-5),
+      padding-block: $safe-top var(--greese-dialog-padding, var(--greese-space-5)),
       radius: 0 0 $edge $edge,
       from: 0 -100%,
     ),