@greese/ui 1.1.0 → 1.2.0

package/src/styles/_layout-props.scss

@@ -0,0 +1,197 @@
+// The layout components' responsive props, defined once: Stack, Grid and
+// AutoLayout include them for the configured breakpoints, and
+// `pkg:@greese/ui/scss/breakpoints` writes them again for a set measured
+// against a container (@greese/authoring's panels). Writes no CSS until
+// included.
+@use 'sass:map';
+@use 'config';
+@use 'mixins';
+
+$_column-counts: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+
+@function _column-tokens() {
+  $map: ();
+
+  @each $n in $_column-counts {
+    $map: map.set($map, $n, repeat(#{$n}, minmax(0, 1fr)));
+  }
+
+  @return $map;
+}
+
+@function _size-tokens() {
+  $map: (
+    full: #{'1 / -1'},
+  );
+
+  @each $n in $_column-counts {
+    $map: map.set($map, $n, span #{$n} / span #{$n});
+  }
+
+  @return $map;
+}
+
+@mixin stack($set: config.$breakpoints, $container: null) {
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'direction',
+    flex-direction,
+    (
+      row: row,
+      column: column,
+      row-reverse: row-reverse,
+      column-reverse: column-reverse,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'gap',
+    gap,
+    mixins.space-tokens(),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'align',
+    align-items,
+    (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+      stretch: stretch,
+      baseline: baseline,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'justify',
+    justify-content,
+    (
+      start: flex-start,
+      center: center,
+      end: flex-end,
+      between: space-between,
+      around: space-around,
+      evenly: space-evenly,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Stack',
+    'wrap',
+    flex-wrap,
+    (
+      wrap: wrap,
+      nowrap: nowrap,
+      wrap-reverse: wrap-reverse,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+}
+
+@mixin grid($set: config.$breakpoints, $container: null) {
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'columns',
+    grid-template-columns,
+    _column-tokens(),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+
+  // After `columns`, so it wins where both apply.
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'min-child',
+    grid-template-columns,
+    $template: 'repeat(auto-fill, minmax(min(VALUE, 100%), 1fr))',
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'gap',
+    gap,
+    mixins.space-tokens(),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'align',
+    align-items,
+    (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'justify',
+    justify-items,
+    (
+      start: start,
+      center: center,
+      end: end,
+      stretch: stretch,
+    ),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-Grid',
+    'size',
+    grid-column,
+    _size-tokens(),
+    $container-scope: '.greese-Grid--queries >',
+    $breakpoint-set: $set,
+    $container: $container
+  );
+}
+
+@mixin autolayout($set: config.$breakpoints, $container: null) {
+  // `gap` sets both gaps and tells the items the column gap.
+  @include mixins.responsive-prop(
+    'greese-AutoLayout',
+    'gap',
+    (column-gap, row-gap, --greese-autolayout-column-gap),
+    mixins.space-tokens(),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+
+  // After `gap`, so it wins where both apply.
+  @include mixins.responsive-prop(
+    'greese-AutoLayout',
+    'row-gap',
+    row-gap,
+    mixins.space-tokens(),
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-AutoLayoutItem',
+    'size',
+    --greese-autolayoutitem-s,
+    $breakpoint-set: $set,
+    $container: $container
+  );
+  @include mixins.responsive-prop(
+    'greese-AutoLayoutItem',
+    'max',
+    --greese-autolayoutitem-m,
+    $breakpoint-set: $set,
+    $container: $container
+  );
+}

package/src/styles/_manifest.scss

@@ -113,7 +113,7 @@ $blocks: (
     parts: ('control', 'indicator', 'indicators', 'viewport',),
     modifiers: (),
     part-modifiers: ('control': ('next', 'previous',)),
-    variables: ('--greese-carousel-dots', '--greese-carousel-gap', '--greese-carousel-gaps', '--greese-carousel-per-view',),
+    variables: ('--greese-carousel-dots', '--greese-carousel-duration', '--greese-carousel-enter', '--greese-carousel-exit-mask-from', '--greese-carousel-exit-mask-image', '--greese-carousel-exit-mask-position', '--greese-carousel-exit-mask-repeat', '--greese-carousel-exit-mask-size', '--greese-carousel-exit-opacity', '--greese-carousel-exit-scale', '--greese-carousel-exit-transform', '--greese-carousel-exit-transform-origin', '--greese-carousel-exit-translate', '--greese-carousel-slide-enter', '--greese-carousel-way', '--greese-motion-carousel', '--greese-motion-carousel-back', '--greese-motion-carousel-back-exit-mask-from', '--greese-motion-carousel-back-exit-mask-image', '--greese-motion-carousel-back-exit-mask-position', '--greese-motion-carousel-back-exit-mask-repeat', '--greese-motion-carousel-back-exit-mask-size', '--greese-motion-carousel-back-exit-opacity', '--greese-motion-carousel-back-exit-scale', '--greese-motion-carousel-back-exit-transform', '--greese-motion-carousel-back-exit-transform-origin', '--greese-motion-carousel-back-exit-translate', '--greese-motion-carousel-duration', '--greese-motion-carousel-exit-mask-from', '--greese-motion-carousel-exit-mask-image', '--greese-motion-carousel-exit-mask-position', '--greese-motion-carousel-exit-mask-repeat', '--greese-motion-carousel-exit-mask-size', '--greese-motion-carousel-exit-opacity', '--greese-motion-carousel-exit-scale', '--greese-motion-carousel-exit-transform', '--greese-motion-carousel-exit-transform-origin', '--greese-motion-carousel-exit-translate', '--greese-motion-exit-mask-from', '--greese-motion-exit-mask-image', '--greese-motion-exit-mask-position', '--greese-motion-exit-mask-repeat', '--greese-motion-exit-mask-size', '--greese-motion-exit-opacity', '--greese-motion-exit-scale', '--greese-motion-exit-transform', '--greese-motion-exit-transform-origin', '--greese-motion-exit-translate',),
   ),
   'CarouselSlide': (
     parts: (),
@@ -135,21 +135,21 @@ $blocks: (
   ),
   'Checkbox': (
     parts: ('box', 'description', 'icon', 'input', 'label', 'text',),
-    modifiers: (),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: (),
+    variables: ('--greese-choice-box',),
   ),
   'Chip': (
     parts: ('icon', 'remove', 'toggle',),
-    modifiers: ('accent', 'info', 'negative', 'neutral', 'positive', 'primary', 'secondary', 'selected', 'tertiary', 'warning',),
+    modifiers: ('accent', 'info', 'negative', 'neutral', 'positive', 'primary', 'secondary', 'selected', 'size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs', 'tertiary', 'warning',),
     part-modifiers: (),
-    variables: ('--greese-chip-tone', '--greese-chip-tone-on',),
+    variables: ('--greese-chip-font', '--greese-chip-height', '--greese-chip-padding', '--greese-chip-remove', '--greese-chip-tone', '--greese-chip-tone-on',),
   ),
   'ChoiceGroup': (
     parts: (),
-    modifiers: (),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: (),
+    variables: ('--greese-choice-box', '--greese-choice-description-font', '--greese-choice-font', '--greese-choice-gap',),
   ),
   'Code': (
     parts: (),
@@ -164,16 +164,16 @@ $blocks: (
     variables: ('--greese-collapsible-icon-turn',),
   ),
   'ColorPicker': (
-    parts: ('alpha', 'area', 'controls', 'hex', 'hue', 'preview', 'sliders', 'swatch', 'swatches', 'thumb',),
-    modifiers: (),
+    parts: ('alpha', 'area', 'channel', 'channels', 'controls', 'fields', 'hex', 'hue', 'preview', 'sliders', 'swatch', 'swatches', 'thumb', 'tool',),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: ('--greese-colorpicker-color', '--greese-colorpicker-current', '--greese-colorpicker-hue', '--greese-colorpicker-swatch', '--greese-colorpicker-thumb', '--greese-colorpicker-track', '--greese-colorpicker-x', '--greese-colorpicker-y',),
+    variables: ('--greese-colorpicker-color', '--greese-colorpicker-current', '--greese-colorpicker-font', '--greese-colorpicker-hue', '--greese-colorpicker-padding', '--greese-colorpicker-swatch', '--greese-colorpicker-thumb', '--greese-colorpicker-track', '--greese-colorpicker-x', '--greese-colorpicker-y',),
   ),
   'Combobox': (
     parts: ('empty', 'list', 'option', 'popup', 'toggle',),
     modifiers: (),
     part-modifiers: (),
-    variables: (),
+    variables: ('--greese-input-height',),
   ),
   'Container': (
     parts: (),
@@ -181,6 +181,12 @@ $blocks: (
     part-modifiers: (),
     variables: (),
   ),
+  'ContextMenu': (
+    parts: ('point',),
+    modifiers: (),
+    part-modifiers: (),
+    variables: (),
+  ),
   'Countdown': (
     parts: ('label', 'separator', 'unit',),
     modifiers: ('clock',),
@@ -197,7 +203,7 @@ $blocks: (
     parts: ('body', 'close', 'description', 'footer', 'header', 'title',),
     modifiers: ('size-full', 'size-lg', 'size-md', 'size-sm', 'size-xl',),
     part-modifiers: (),
-    variables: ('--greese-dialog-width', '--greese-motion-backdrop', '--greese-motion-backdrop-duration', '--greese-motion-dialog', '--greese-motion-dialog-exit-mask-from', '--greese-motion-dialog-exit-mask-image', '--greese-motion-dialog-exit-mask-position', '--greese-motion-dialog-exit-mask-repeat', '--greese-motion-dialog-exit-mask-size', '--greese-motion-dialog-exit-opacity', '--greese-motion-dialog-exit-scale', '--greese-motion-dialog-exit-transform', '--greese-motion-dialog-exit-transform-origin', '--greese-motion-dialog-exit-translate', '--greese-motion-drawer', '--greese-motion-drawer-exit-mask-from', '--greese-motion-drawer-exit-mask-image', '--greese-motion-drawer-exit-mask-position', '--greese-motion-drawer-exit-mask-repeat', '--greese-motion-drawer-exit-mask-size', '--greese-motion-drawer-exit-opacity', '--greese-motion-drawer-exit-scale', '--greese-motion-drawer-exit-transform', '--greese-motion-drawer-exit-transform-origin', '--greese-motion-drawer-exit-translate', '--greese-motion-enter-ease', '--greese-motion-exit-duration', '--greese-motion-exit-ease', '--greese-motion-exit-mask-from', '--greese-motion-exit-mask-image', '--greese-motion-exit-mask-position', '--greese-motion-exit-mask-repeat', '--greese-motion-exit-mask-size', '--greese-motion-exit-opacity', '--greese-motion-exit-scale', '--greese-motion-exit-transform', '--greese-motion-exit-transform-origin', '--greese-motion-exit-translate', '--greese-motion-overlay', '--greese-motion-overlay-duration', '--greese-motion-overlay-exit-mask-from', '--greese-motion-overlay-exit-mask-image', '--greese-motion-overlay-exit-mask-position', '--greese-motion-overlay-exit-mask-repeat', '--greese-motion-overlay-exit-mask-size', '--greese-motion-overlay-exit-opacity', '--greese-motion-overlay-exit-scale', '--greese-motion-overlay-exit-transform', '--greese-motion-overlay-exit-transform-origin', '--greese-motion-overlay-exit-translate', '--greese-overlay-enter', '--greese-overlay-exit-mask-from', '--greese-overlay-exit-mask-image', '--greese-overlay-exit-mask-position', '--greese-overlay-exit-mask-repeat', '--greese-overlay-exit-mask-size', '--greese-overlay-exit-opacity', '--greese-overlay-exit-scale', '--greese-overlay-exit-transform', '--greese-overlay-exit-transform-origin', '--greese-overlay-exit-translate', '--greese-overlay-origin', '--greese-scrollbar-gap',),
+    variables: ('--greese-dialog-padding', '--greese-dialog-width', '--greese-motion-backdrop', '--greese-motion-backdrop-duration', '--greese-motion-dialog', '--greese-motion-dialog-exit-mask-from', '--greese-motion-dialog-exit-mask-image', '--greese-motion-dialog-exit-mask-position', '--greese-motion-dialog-exit-mask-repeat', '--greese-motion-dialog-exit-mask-size', '--greese-motion-dialog-exit-opacity', '--greese-motion-dialog-exit-scale', '--greese-motion-dialog-exit-transform', '--greese-motion-dialog-exit-transform-origin', '--greese-motion-dialog-exit-translate', '--greese-motion-drawer', '--greese-motion-drawer-exit-mask-from', '--greese-motion-drawer-exit-mask-image', '--greese-motion-drawer-exit-mask-position', '--greese-motion-drawer-exit-mask-repeat', '--greese-motion-drawer-exit-mask-size', '--greese-motion-drawer-exit-opacity', '--greese-motion-drawer-exit-scale', '--greese-motion-drawer-exit-transform', '--greese-motion-drawer-exit-transform-origin', '--greese-motion-drawer-exit-translate', '--greese-motion-enter-ease', '--greese-motion-exit-duration', '--greese-motion-exit-ease', '--greese-motion-exit-mask-from', '--greese-motion-exit-mask-image', '--greese-motion-exit-mask-position', '--greese-motion-exit-mask-repeat', '--greese-motion-exit-mask-size', '--greese-motion-exit-opacity', '--greese-motion-exit-scale', '--greese-motion-exit-transform', '--greese-motion-exit-transform-origin', '--greese-motion-exit-translate', '--greese-motion-overlay', '--greese-motion-overlay-duration', '--greese-motion-overlay-exit-mask-from', '--greese-motion-overlay-exit-mask-image', '--greese-motion-overlay-exit-mask-position', '--greese-motion-overlay-exit-mask-repeat', '--greese-motion-overlay-exit-mask-size', '--greese-motion-overlay-exit-opacity', '--greese-motion-overlay-exit-scale', '--greese-motion-overlay-exit-transform', '--greese-motion-overlay-exit-transform-origin', '--greese-motion-overlay-exit-translate', '--greese-overlay-enter', '--greese-overlay-exit-mask-from', '--greese-overlay-exit-mask-image', '--greese-overlay-exit-mask-position', '--greese-overlay-exit-mask-repeat', '--greese-overlay-exit-mask-size', '--greese-overlay-exit-opacity', '--greese-overlay-exit-scale', '--greese-overlay-exit-transform', '--greese-overlay-exit-transform-origin', '--greese-overlay-exit-translate', '--greese-overlay-origin', '--greese-scrollbar-gap',),
   ),
   'Diff': (
     parts: ('handle', 'item', 'range', 'tag',),
@@ -229,6 +235,12 @@ $blocks: (
     part-modifiers: (),
     variables: ('--greese-drawer-dir', '--greese-drawer-edge',),
   ),
+  'EditableField': (
+    parts: ('clear', 'control', 'dial', 'dialDot', 'knob', 'label', 'none', 'number', 'picker', 'range', 'swatch', 'textarea', 'unit', 'value',),
+    modifiers: ('checkbox', 'column', 'radio', 'row', 'segmented', 'size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs', 'switch',),
+    part-modifiers: (),
+    variables: ('--greese-editablefield-angle', '--greese-editablefield-dial', '--greese-editablefield-height', '--greese-editablefield-swatch',),
+  ),
   'Embed': (
     parts: (),
     modifiers: (),
@@ -309,9 +321,9 @@ $blocks: (
   ),
   'Input': (
     parts: ('adornment', 'control',),
-    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
+    modifiers: ('measured', 'size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: ('--greese-input-height', '--greese-input-padding',),
+    variables: ('--greese-input-height', '--greese-input-padding', '--greese-input-size',),
   ),
   'Key': (
     parts: (),
@@ -362,11 +374,17 @@ $blocks: (
     variables: ('--greese-ease-ease', '--greese-ease-ease-in', '--greese-ease-ease-in-out', '--greese-ease-ease-out', '--greese-ease-in', '--greese-ease-in-out', '--greese-ease-linear', '--greese-ease-out', '--greese-motion-content', '--greese-motion-content-duration', '--greese-motion-delay', '--greese-motion-dir', '--greese-motion-distance', '--greese-motion-duration', '--greese-motion-ease', '--greese-motion-enter-ease', '--greese-motion-exit-mask-from', '--greese-motion-exit-mask-image', '--greese-motion-exit-mask-position', '--greese-motion-exit-mask-repeat', '--greese-motion-exit-mask-size', '--greese-motion-exit-opacity', '--greese-motion-exit-scale', '--greese-motion-exit-transform', '--greese-motion-exit-transform-origin', '--greese-motion-exit-translate', '--greese-motion-index', '--greese-motion-name', '--greese-motion-offset', '--greese-motion-scope', '--greese-motion-stagger', '--greese-motion-theme', '--greese-motion-wait',),
   ),
   'NumberField': (
-    parts: ('step', 'steppers',),
-    modifiers: (),
+    parts: ('clear', 'step', 'steppers',),
+    modifiers: ('split',),
     part-modifiers: (),
     variables: (),
   ),
+  'NumberStepper': (
+    parts: (),
+    modifiers: (),
+    part-modifiers: (),
+    variables: ('--greese-numberstepper-gap',),
+  ),
   'OtpField': (
     parts: ('input', 'slot',),
     modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
@@ -405,9 +423,9 @@ $blocks: (
   ),
   'Radio': (
     parts: ('input',),
-    modifiers: (),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: (),
+    variables: ('--greese-choice-box',),
   ),
   'Rating': (
     parts: ('choice', 'choices', 'empty', 'filled', 'icon', 'input', 'items', 'stars',),
@@ -415,6 +433,18 @@ $blocks: (
     part-modifiers: (),
     variables: ('--greese-rating-fill', '--greese-rating-off', '--greese-rating-on', '--greese-rating-size',),
   ),
+  'ScrollCarousel': (
+    parts: ('control', 'indicator', 'indicators', 'viewport',),
+    modifiers: ('strip', 'vertical',),
+    part-modifiers: ('control': ('next', 'previous',)),
+    variables: ('--greese-scrollcarousel-dots', '--greese-scrollcarousel-gap', '--greese-scrollcarousel-gaps', '--greese-scrollcarousel-per-view', '--greese-scrollcarousel-size',),
+  ),
+  'ScrollCarouselSlide': (
+    parts: (),
+    modifiers: (),
+    part-modifiers: (),
+    variables: (),
+  ),
   'ScrollSpy': (
     parts: (),
     modifiers: (),
@@ -464,10 +494,10 @@ $blocks: (
     variables: ('--greese-skeleton-height', '--greese-skeleton-width',),
   ),
   'Slider': (
-    parts: (),
-    modifiers: (),
+    parts: ('thumbAnchor', 'wrap',),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: ('--greese-slider-fill', '--greese-slider-thumb', '--greese-slider-towards',),
+    variables: ('--greese-slider-fill', '--greese-slider-offset', '--greese-slider-ratio', '--greese-slider-thumb', '--greese-slider-towards', '--greese-slider-travel',),
   ),
   'Spacer': (
     parts: (),
@@ -537,9 +567,9 @@ $blocks: (
   ),
   'Switch': (
     parts: ('input', 'thumb', 'track',),
-    modifiers: (),
+    modifiers: ('size-lg', 'size-md', 'size-sm', 'size-xl', 'size-xs',),
     part-modifiers: (),
-    variables: (),
+    variables: ('--greese-choice-box',),
   ),
   'Tab': (
     parts: (),

package/src/styles/_mixins.scss

@@ -99,13 +99,21 @@ $breakpoints: config.$breakpoints;
 /// With `$container-scope`, the same rules are emitted again under
 /// `@container`, prefixed with the scope so they win inside it.
 ///
+/// With `$breakpoint-set` and `$container`, the rules are for other
+/// breakpoints, measured against the nearest container of that name instead
+/// of the viewport: a library's own keys, such as @greese/authoring's panel
+/// breakpoints (`panelmd`), whose classes `resolveResponsive()` writes once
+/// they're registered with `addContainerBreakpoints()`.
+///
 /// @param $block           component root class, without the dot: 'greese-Stack'
 /// @param $prop            prop segment in class and variable names: 'gap'
 /// @param $properties      CSS property, or list of them, to set
 /// @param $tokens          map of token key to CSS value, one class each
 /// @param $template        wraps each value: 'repeat(auto-fill, minmax(VALUE, 1fr))'
 /// @param $container-scope selector prefix whose container-query variant
-///                         applies: '.greese-Grid--container >'
+///                         applies: '.greese-Grid--queries >'
+/// @param $breakpoint-set  the breakpoints to write: the configured ones
+/// @param $container       a container name: the set's queries are its width
 ///
 /// Use it at the top level of a layer block, not nested in a selector.
 @mixin responsive-prop(
@@ -114,24 +122,54 @@ $breakpoints: config.$breakpoints;
   $properties,
   $tokens: (),
   $template: null,
-  $container-scope: null
+  $container-scope: null,
+  $breakpoint-set: $breakpoints,
+  $container: null
 ) {
-  @each $bp, $min in $breakpoints {
-    @include up($bp) {
-      @include _breakpoint-rules(
-        $block,
-        $prop,
-        $bp,
-        $properties,
-        $tokens,
-        $template,
-        null
-      );
+  @each $bp, $min in $breakpoint-set {
+    @if $container {
+      @if $min <= 0 {
+        @include _breakpoint-rules(
+          $block,
+          $prop,
+          $bp,
+          $properties,
+          $tokens,
+          $template,
+          null
+        );
+      } @else {
+        // A name the caller gives, interpolated: the pattern can't see it.
+        // stylelint-disable-next-line container-name-pattern
+        @container #{$container} (width >= #{$min}) {
+          @include _breakpoint-rules(
+            $block,
+            $prop,
+            $bp,
+            $properties,
+            $tokens,
+            $template,
+            null
+          );
+        }
+      }
+    } @else {
+      @include up($bp) {
+        @include _breakpoint-rules(
+          $block,
+          $prop,
+          $bp,
+          $properties,
+          $tokens,
+          $template,
+          null
+        );
+      }
     }
   }
 
-  @if $container-scope {
-    @each $bp, $min in $breakpoints {
+  @if $container-scope and not $container {
+    @each $bp, $min in $breakpoint-set {
       @if $min <= 0 {
         @include _breakpoint-rules(
           $block,

package/src/styles/_slides.scss

@@ -0,0 +1,112 @@
+// The previous/next buttons and the dots that ScrollCarousel and Carousel
+// share: each emits them under its own block, so either stylesheet stands
+// alone.
+@use 'mixins';
+
+/// `.<block>-control` (with `--previous` and `--next`), `.<block>-indicators`
+/// and `.<block>-indicator`. The buttons sit over the viewport's side edges,
+/// centred on it above the dots (`--greese-<var>-dots`).
+@mixin controls($block, $var) {
+  // Previous and next sit over the viewport's edges, centred on it.
+  .#{$block}-control {
+    position: absolute;
+    inset-block-start: calc(50% - 1.25rem - var(--greese-#{$var}-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);
+
+    @include mixins.focus-ring;
+    @include mixins.touch-target;
+
+    // Gone at an end: invisible, and clicks pass through to what's under it.
+    &:disabled {
+      pointer-events: none;
+      cursor: default;
+      opacity: 0;
+    }
+
+    > svg {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+  }
+
+  .#{$block}:has(.#{$block}-indicators) {
+    --greese-#{$var}-dots: calc(0.5rem + var(--greese-space-3));
+  }
+
+  .#{$block}-control--previous {
+    inset-inline-start: var(--greese-space-2);
+  }
+
+  .#{$block}-control--next {
+    inset-inline-end: var(--greese-space-2);
+
+    > svg {
+      scale: -1 1;
+    }
+  }
+
+  // The chevron points to the inline start; mirror both in RTL.
+  .#{$block}-control:dir(rtl) > svg {
+    scale: -1 1;
+  }
+
+  .#{$block}-control--next:dir(rtl) > svg {
+    scale: 1;
+  }
+
+  .#{$block}-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.
+  .#{$block}-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);
+    }
+
+    &[aria-current='true']::before {
+      background-color: var(--greese-color-primary);
+      clip-path: inset(0 round var(--greese-corner-pill));
+    }
+  }
+}