@greese/ui 1.0.0 → 1.2.0

package/dist/css/ScrollCarousel.css

@@ -0,0 +1,225 @@
+@import './core.css';
+@layer greese.components {
+  .greese-ScrollCarousel {
+    box-sizing: border-box;
+    position: relative;
+    display: grid;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+  .greese-ScrollCarousel-viewport {
+    --greese-scrollcarousel-per-view: 1;
+    --greese-scrollcarousel-gap: var(--greese-space-3);
+    display: flex;
+    gap: var(--greese-scrollcarousel-gap);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    border-radius: var(--greese-corner-panel);
+  }
+  .greese-ScrollCarousel-viewport::-webkit-scrollbar {
+    display: none;
+  }
+  .greese-ScrollCarousel-viewport:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-ScrollCarousel-viewport {
+      scroll-behavior: smooth;
+    }
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-viewport {
+    flex-direction: column;
+    block-size: var(--greese-scrollcarousel-size, 20rem);
+    overflow: hidden auto;
+    overscroll-behavior: auto contain;
+    scroll-snap-type: y mandatory;
+  }
+  .greese-ScrollCarouselSlide {
+    --greese-scrollcarousel-gaps: calc(
+      (var(--greese-scrollcarousel-per-view) - 1) * var(--greese-scrollcarousel-gap)
+    );
+    flex: 0 0 calc((100% - var(--greese-scrollcarousel-gaps)) / var(--greese-scrollcarousel-per-view));
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+  .greese-ScrollCarousel-control {
+    position: absolute;
+    inset-block-start: calc(50% - 1.25rem - var(--greese-scrollcarousel-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);
+  }
+  .greese-ScrollCarousel-control:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-ScrollCarousel-control::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-ScrollCarousel-control:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0;
+  }
+  .greese-ScrollCarousel-control > svg {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+  .greese-ScrollCarousel:has(.greese-ScrollCarousel-indicators) {
+    --greese-scrollcarousel-dots: calc(0.5rem + var(--greese-space-3));
+  }
+  .greese-ScrollCarousel-control--previous {
+    inset-inline-start: var(--greese-space-2);
+  }
+  .greese-ScrollCarousel-control--next {
+    inset-inline-end: var(--greese-space-2);
+  }
+  .greese-ScrollCarousel-control--next > svg {
+    scale: -1 1;
+  }
+  .greese-ScrollCarousel-control:dir(rtl) > svg {
+    scale: -1 1;
+  }
+  .greese-ScrollCarousel-control--next:dir(rtl) > svg {
+    scale: 1;
+  }
+  .greese-ScrollCarousel-indicators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    justify-content: center;
+  }
+  .greese-ScrollCarousel-indicator {
+    position: relative;
+    inline-size: 1.5rem;
+    block-size: 0.5rem;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+  .greese-ScrollCarousel-indicator:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-ScrollCarousel-indicator::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 24px);
+      block-size: max(100%, 24px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-ScrollCarousel-indicator::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);
+  }
+  .greese-ScrollCarousel-indicator[aria-current=true]::before {
+    background-color: var(--greese-color-primary);
+    clip-path: inset(0 round var(--greese-corner-pill));
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control {
+    inset-inline: 0;
+    margin-inline: auto;
+    translate: none;
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control > svg {
+    rotate: 90deg;
+    scale: 1;
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control--previous {
+    inset-block-start: var(--greese-space-2);
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control--next {
+    inset-block: auto calc(var(--greese-space-2) + var(--greese-scrollcarousel-dots, 0px));
+  }
+  .greese-ScrollCarousel--vertical > .greese-ScrollCarousel-control--next > svg {
+    rotate: -90deg;
+  }
+  .greese-ScrollCarousel--strip {
+    gap: 0;
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-viewport {
+    --greese-scrollcarousel-gap: var(--greese-space-1);
+    align-items: center;
+    scroll-snap-type: none;
+    border-radius: 0;
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-control {
+    inset-block-start: 50%;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    box-shadow: var(--greese-shadow-sm);
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-control > svg {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-control--previous {
+    inset-inline-start: 0;
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-control--next {
+    inset-inline-end: 0;
+  }
+  .greese-ScrollCarousel--strip > .greese-ScrollCarousel-viewport > .greese-ScrollCarouselSlide {
+    flex: none;
+    scroll-snap-align: none;
+  }
+  @media (hover: none) {
+    .greese-ScrollCarousel-control {
+      display: none;
+    }
+  }
+  .greese-ScrollCarousel--xs-per-view {
+    --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-xs);
+  }
+  @media (width >= 600px) {
+    .greese-ScrollCarousel--sm-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-sm);
+    }
+  }
+  @media (width >= 900px) {
+    .greese-ScrollCarousel--md-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-md);
+    }
+  }
+  @media (width >= 1200px) {
+    .greese-ScrollCarousel--lg-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-lg);
+    }
+  }
+  @media (width >= 1536px) {
+    .greese-ScrollCarousel--xl-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-xl);
+    }
+  }
+}

package/dist/css/SegmentedControl.css

@@ -24,8 +24,8 @@
     border-radius: var(--greese-corner-control);
   }
   .greese-SegmentedControl--size-xs {
-    --greese-button-height: 1rem;
-    --greese-button-padding: var(--greese-space-1);
+    --greese-button-height: 1.5rem;
+    --greese-button-padding: var(--greese-space-2);
     font-size: var(--greese-type-p3-font-size);
   }
   .greese-SegmentedControl--size-sm {

package/dist/css/Select.css

@@ -36,6 +36,7 @@
     min-inline-size: 0;
     padding-inline: var(--greese-select-padding) calc(var(--greese-select-padding) + 1.5em);
     font: inherit;
+    line-height: 1.25;
     color: inherit;
     cursor: pointer;
     background: none;
@@ -63,8 +64,8 @@
     translate: 0 -0.15em;
   }
   .greese-Select--size-xs {
-    --greese-select-height: 1rem;
-    --greese-select-padding: var(--greese-space-1);
+    --greese-select-height: 1.5rem;
+    --greese-select-padding: var(--greese-space-2);
     font-size: var(--greese-type-p3-font-size);
   }
   @media (pointer: coarse) {

package/dist/css/Slider.css

@@ -1,8 +1,53 @@
 @import './core.css';
 /* stylelint-disable selector-no-vendor-prefix */
 @layer greese.components {
+  .greese-Slider--size-xs {
+    --greese-slider-thumb: calc(1.5rem * 0.5);
+  }
+  .greese-Slider--size-sm {
+    --greese-slider-thumb: calc(2rem * 0.5);
+  }
+  .greese-Slider--size-md {
+    --greese-slider-thumb: calc(2.5rem * 0.5);
+  }
+  .greese-Slider--size-lg {
+    --greese-slider-thumb: calc(3rem * 0.5);
+  }
+  .greese-Slider--size-xl {
+    --greese-slider-thumb: calc(4rem * 0.5);
+  }
+  .greese-Slider-wrap {
+    --greese-slider-thumb: 1.25rem;
+  }
+  @media (pointer: coarse) {
+    .greese-Slider-wrap {
+      --greese-slider-thumb: 1.75rem;
+    }
+  }
+  .greese-Slider-wrap {
+    position: relative;
+    display: block;
+  }
+  .greese-Slider-thumbAnchor {
+    --greese-slider-travel: calc(100% - var(--greese-slider-thumb));
+    --greese-slider-offset: calc(
+      var(--greese-slider-travel) * var(--greese-slider-ratio, 0)
+    );
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--greese-slider-thumb) / 2 + var(--greese-slider-offset));
+    inline-size: 0;
+    block-size: var(--greese-slider-thumb);
+  }
   .greese-Slider {
     --greese-slider-thumb: 1.25rem;
+  }
+  @media (pointer: coarse) {
+    .greese-Slider {
+      --greese-slider-thumb: 1.75rem;
+    }
+  }
+  .greese-Slider {
     --greese-slider-towards: right;
     box-sizing: border-box;
     display: block;
@@ -16,11 +61,6 @@
   .greese-Slider:dir(rtl) {
     --greese-slider-towards: left;
   }
-  @media (pointer: coarse) {
-    .greese-Slider {
-      --greese-slider-thumb: 1.75rem;
-    }
-  }
   .greese-Slider:focus-visible {
     outline: none;
   }

package/dist/css/Switch.css

@@ -5,8 +5,8 @@
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    inline-size: 2.25rem;
-    block-size: 1.25rem;
+    inline-size: calc(var(--greese-choice-box, 1.125rem) * 2);
+    block-size: calc(var(--greese-choice-box, 1.125rem) * 1.111);
     margin-block: calc((1lh - 1.25rem) / 2);
   }
   @media (pointer: coarse) {
@@ -48,8 +48,8 @@
   }
   .greese-Switch-thumb {
     position: relative;
-    inline-size: 1rem;
-    block-size: 1rem;
+    inline-size: calc(var(--greese-choice-box, 1.125rem) * 0.889);
+    block-size: calc(var(--greese-choice-box, 1.125rem) * 0.889);
     margin-inline-start: 0.125rem;
     pointer-events: none;
     background-color: var(--greese-color-canvas);
@@ -58,9 +58,9 @@
     transition: translate var(--greese-duration-fast) var(--greese-easing-standard);
   }
   .greese-Switch-input:checked + .greese-Switch-thumb {
-    translate: 1rem 0;
+    translate: calc(125% - 0.25rem) 0;
   }
   .greese-Switch-input:checked + .greese-Switch-thumb:dir(rtl) {
-    translate: -1rem 0;
+    translate: calc(0.25rem - 125%) 0;
   }
 }

package/dist/css/Text.css

@@ -3,46 +3,46 @@
   .greese-Text {
     margin: 0;
   }
-  .greese-Text--regular {
+  .greese-Text.greese-Text--regular {
     font-weight: var(--greese-font-weight-regular);
   }
-  .greese-Text--medium {
+  .greese-Text.greese-Text--medium {
     font-weight: var(--greese-font-weight-medium);
   }
-  .greese-Text--semibold {
+  .greese-Text.greese-Text--semibold {
     font-weight: var(--greese-font-weight-semibold);
   }
-  .greese-Text--bold {
+  .greese-Text.greese-Text--bold {
     font-weight: var(--greese-font-weight-bold);
   }
-  .greese-Text--neutral {
+  .greese-Text.greese-Text--neutral {
     color: var(--greese-color-fg);
   }
-  .greese-Text--muted {
+  .greese-Text.greese-Text--muted {
     color: var(--greese-color-fg-muted);
   }
-  .greese-Text--primary {
+  .greese-Text.greese-Text--primary {
     color: var(--greese-color-primary);
   }
-  .greese-Text--secondary {
+  .greese-Text.greese-Text--secondary {
     color: var(--greese-color-secondary);
   }
-  .greese-Text--tertiary {
+  .greese-Text.greese-Text--tertiary {
     color: var(--greese-color-tertiary);
   }
-  .greese-Text--accent {
+  .greese-Text.greese-Text--accent {
     color: var(--greese-color-accent);
   }
-  .greese-Text--positive {
+  .greese-Text.greese-Text--positive {
     color: var(--greese-color-positive);
   }
-  .greese-Text--negative {
+  .greese-Text.greese-Text--negative {
     color: var(--greese-color-negative);
   }
-  .greese-Text--warning {
+  .greese-Text.greese-Text--warning {
     color: var(--greese-color-warning);
   }
-  .greese-Text--info {
+  .greese-Text.greese-Text--info {
     color: var(--greese-color-info);
   }
   .greese-Text--truncate {

package/dist/css/Textarea.css

@@ -60,7 +60,7 @@
     }
   }
   .greese-Textarea--size-xs {
-    --greese-textarea-padding: var(--greese-space-1);
+    --greese-textarea-padding: var(--greese-space-2);
     font-size: var(--greese-type-p3-font-size);
   }
   @media (pointer: coarse) {

package/dist/css/core.css

@@ -51,11 +51,6 @@
     --greese-easing-standard: cubic-bezier(0.2, 0, 0, 1);
     --greese-easing-enter: cubic-bezier(0, 0, 0, 1);
     --greese-easing-exit: cubic-bezier(0.3, 0, 1, 1);
-    --greese-breakpoint-xs: 0px;
-    --greese-breakpoint-sm: 600px;
-    --greese-breakpoint-md: 900px;
-    --greese-breakpoint-lg: 1200px;
-    --greese-breakpoint-xl: 1536px;
   }
   :root,
   [data-greese-scheme=light],
@@ -166,6 +161,41 @@
     }
   }
 }
+@layer greese.utilities {
+  [data-greese-motion=reduce],
+  [data-greese-motion=reduce] [data-greese-theme] {
+    --greese-duration-fast: 0.01ms;
+    --greese-duration-normal: 0.01ms;
+    --greese-duration-slow: 0.01ms;
+  }
+  [data-greese-motion=reduce],
+  [data-greese-motion=reduce] *,
+  [data-greese-motion=reduce] ::before,
+  [data-greese-motion=reduce] ::after {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    transition-delay: 0s;
+    scroll-behavior: auto;
+  }
+  :root[data-greese-motion=reduce]::view-transition-group(*),
+  :root[data-greese-motion=reduce]::view-transition-old(*),
+  :root[data-greese-motion=reduce]::view-transition-new(*) {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+  }
+}
+@layer greese.tokens {
+  :root {
+    --greese-breakpoint-xs: 0px;
+    --greese-breakpoint-sm: 600px;
+    --greese-breakpoint-md: 900px;
+    --greese-breakpoint-lg: 1200px;
+    --greese-breakpoint-xl: 1536px;
+    --greese-breakpoint-keys: xs sm md lg xl;
+  }
+}
 @layer greese.tokens {
   :root {
     --greese-type-p1-font-size: 1.125rem;
@@ -223,7 +253,7 @@
     --greese-type-caption-line-height: 1.4;
     --greese-type-caption-letter-spacing: 0.02em;
     --greese-type-button-font-size: 0.9375rem;
-    --greese-type-button-font-weight: 600;
+    --greese-type-button-font-weight: 700;
     --greese-type-button-line-height: 1.25;
     --greese-type-button-letter-spacing: 0;
   }

package/dist/css/resets.css

@@ -0,0 +1,162 @@
+@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
+@layer greese.overrides {
+  .greese-reset-color,
+  .greese-reset {
+    --greese-color-canvas: light-dark(#ffffff, #11171c);
+    --greese-color-surface: light-dark(#f5f7f9, #2a333c);
+    --greese-color-surface-overlay: light-dark(#ffffff, #3c4854);
+    --greese-color-fg: light-dark(#11171c, #e9edf2);
+    --greese-color-fg-muted: light-dark(#505e6d, #a3b3c4);
+    --greese-color-border: light-dark(#d7dfe7, #3c4854);
+    --greese-color-border-strong: light-dark(#a3b3c4, #505e6d);
+    --greese-color-track: light-dark(#d7dfe7, #687889);
+    --greese-color-primary: light-dark(#2771e0, #81b2ff);
+    --greese-color-primary-strong: light-dark(#1356b8, #aaccff);
+    --greese-color-primary-content: light-dark(#ffffff, #11171c);
+    --greese-color-secondary: light-dark(#7e5bd0, #b69fff);
+    --greese-color-secondary-strong: light-dark(#6443ab, #cdbfff);
+    --greese-color-secondary-content: light-dark(#ffffff, #11171c);
+    --greese-color-tertiary: light-dark(#007069, #5dcec5);
+    --greese-color-tertiary-strong: light-dark(#00544f, #94e1da);
+    --greese-color-tertiary-content: light-dark(#ffffff, #11171c);
+    --greese-color-accent: light-dark(#c13b7b, #ff81b6);
+    --greese-color-accent-strong: light-dark(#9c2661, #ffaecd);
+    --greese-color-accent-content: light-dark(#ffffff, #11171c);
+    --greese-color-focus-ring: light-dark(var(--greese-color-primary), var(--greese-color-primary-strong));
+    --greese-color-positive: light-dark(#007231, #61cf7e);
+    --greese-color-negative: light-dark(#ae0914, #ff8b7f);
+    --greese-color-negative-content: light-dark(#ffffff, #11171c);
+    --greese-color-warning: light-dark(#8a5f00, #feb93d);
+    --greese-color-info: light-dark(#00668f, #5ac0f7);
+    --greese-color-white: light-dark(#ffffff, #ffffff);
+    --greese-color-black: light-dark(#000000, #000000);
+    --greese-color-scrim: light-dark(color-mix(in srgb, var(--greese-color-black) 45%, transparent), color-mix(in srgb, var(--greese-color-black) 60%, transparent));
+  }
+  .greese-reset-shape,
+  .greese-reset {
+    --greese-radius-none: 0;
+    --greese-radius-sm: 4px;
+    --greese-radius-md: 8px;
+    --greese-radius-lg: 16px;
+    --greese-radius-xl: 24px;
+    --greese-radius-pill: 999px;
+    --greese-radius-round: 50%;
+    --greese-corner-control: var(--greese-radius-md);
+    --greese-corner-field: var(--greese-radius-md);
+    --greese-corner-surface: var(--greese-radius-lg);
+    --greese-corner-panel: var(--greese-radius-md);
+    --greese-corner-inset: var(--greese-radius-sm);
+    --greese-corner-pill: var(--greese-radius-pill);
+    --greese-corner-round: var(--greese-radius-round);
+  }
+  .greese-reset-motion,
+  .greese-reset {
+    --greese-motion-duration: initial;
+    --greese-motion-delay: initial;
+    --greese-motion-ease: initial;
+    --greese-motion-distance: initial;
+    --greese-motion-stagger: initial;
+    --greese-motion-theme: initial;
+    --greese-motion-content: initial;
+    --greese-motion-rows: initial;
+    --greese-motion-toast: initial;
+    --greese-motion-backdrop: initial;
+    --greese-motion-overlay: initial;
+    --greese-motion-dialog: initial;
+    --greese-motion-popover: initial;
+    --greese-motion-tooltip: initial;
+    --greese-motion-drawer: initial;
+    --greese-motion-carousel: initial;
+    --greese-motion-carousel-back: initial;
+    --greese-motion-overlay-exit-translate: initial;
+    --greese-motion-overlay-exit-scale: initial;
+    --greese-motion-overlay-exit-opacity: initial;
+    --greese-motion-overlay-exit-mask-image: initial;
+    --greese-motion-overlay-exit-transform: initial;
+    --greese-motion-overlay-exit-mask-size: initial;
+    --greese-motion-overlay-exit-mask-repeat: initial;
+    --greese-motion-overlay-exit-mask-position: initial;
+    --greese-motion-overlay-exit-mask-from: initial;
+    --greese-motion-overlay-exit-transform-origin: initial;
+    --greese-motion-dialog-exit-translate: initial;
+    --greese-motion-dialog-exit-scale: initial;
+    --greese-motion-dialog-exit-opacity: initial;
+    --greese-motion-dialog-exit-mask-image: initial;
+    --greese-motion-dialog-exit-transform: initial;
+    --greese-motion-dialog-exit-mask-size: initial;
+    --greese-motion-dialog-exit-mask-repeat: initial;
+    --greese-motion-dialog-exit-mask-position: initial;
+    --greese-motion-dialog-exit-mask-from: initial;
+    --greese-motion-dialog-exit-transform-origin: initial;
+    --greese-motion-popover-exit-translate: initial;
+    --greese-motion-popover-exit-scale: initial;
+    --greese-motion-popover-exit-opacity: initial;
+    --greese-motion-popover-exit-mask-image: initial;
+    --greese-motion-popover-exit-transform: initial;
+    --greese-motion-popover-exit-mask-size: initial;
+    --greese-motion-popover-exit-mask-repeat: initial;
+    --greese-motion-popover-exit-mask-position: initial;
+    --greese-motion-popover-exit-mask-from: initial;
+    --greese-motion-popover-exit-transform-origin: initial;
+    --greese-motion-tooltip-exit-translate: initial;
+    --greese-motion-tooltip-exit-scale: initial;
+    --greese-motion-tooltip-exit-opacity: initial;
+    --greese-motion-tooltip-exit-mask-image: initial;
+    --greese-motion-tooltip-exit-transform: initial;
+    --greese-motion-tooltip-exit-mask-size: initial;
+    --greese-motion-tooltip-exit-mask-repeat: initial;
+    --greese-motion-tooltip-exit-mask-position: initial;
+    --greese-motion-tooltip-exit-mask-from: initial;
+    --greese-motion-tooltip-exit-transform-origin: initial;
+    --greese-motion-drawer-exit-translate: initial;
+    --greese-motion-drawer-exit-scale: initial;
+    --greese-motion-drawer-exit-opacity: initial;
+    --greese-motion-drawer-exit-mask-image: initial;
+    --greese-motion-drawer-exit-transform: initial;
+    --greese-motion-drawer-exit-mask-size: initial;
+    --greese-motion-drawer-exit-mask-repeat: initial;
+    --greese-motion-drawer-exit-mask-position: initial;
+    --greese-motion-drawer-exit-mask-from: initial;
+    --greese-motion-drawer-exit-transform-origin: initial;
+    --greese-motion-carousel-exit-translate: initial;
+    --greese-motion-carousel-exit-scale: initial;
+    --greese-motion-carousel-exit-opacity: initial;
+    --greese-motion-carousel-exit-mask-image: initial;
+    --greese-motion-carousel-exit-transform: initial;
+    --greese-motion-carousel-exit-mask-size: initial;
+    --greese-motion-carousel-exit-mask-repeat: initial;
+    --greese-motion-carousel-exit-mask-position: initial;
+    --greese-motion-carousel-exit-mask-from: initial;
+    --greese-motion-carousel-exit-transform-origin: initial;
+    --greese-motion-carousel-back-exit-translate: initial;
+    --greese-motion-carousel-back-exit-scale: initial;
+    --greese-motion-carousel-back-exit-opacity: initial;
+    --greese-motion-carousel-back-exit-mask-image: initial;
+    --greese-motion-carousel-back-exit-transform: initial;
+    --greese-motion-carousel-back-exit-mask-size: initial;
+    --greese-motion-carousel-back-exit-mask-repeat: initial;
+    --greese-motion-carousel-back-exit-mask-position: initial;
+    --greese-motion-carousel-back-exit-mask-from: initial;
+    --greese-motion-carousel-back-exit-transform-origin: initial;
+    --greese-motion-content-duration: initial;
+    --greese-motion-rows-duration: initial;
+    --greese-motion-overlay-duration: initial;
+    --greese-motion-toast-duration: initial;
+    --greese-motion-backdrop-duration: initial;
+    --greese-motion-exit-duration: initial;
+    --greese-motion-carousel-duration: initial;
+    --greese-motion-page-duration: initial;
+    --greese-motion-share-duration: initial;
+    --greese-motion-enter-ease: initial;
+    --greese-motion-exit-ease: initial;
+    --greese-motion-page-ease: initial;
+    --greese-motion-share-ease: initial;
+    --greese-motion-page: initial;
+    --greese-motion-page-back: initial;
+    --greese-motion-page-exit: initial;
+    --greese-motion-page-back-exit: initial;
+    --greese-motion-page-stagger: initial;
+    --greese-motion-page-exit-order: initial;
+    --greese-motion-page-mode: initial;
+  }
+}

package/dist/css.d.ts

@@ -17,6 +17,8 @@ import { type ScalarGroup } from './tokens.ts';
 export declare const LAYER_ORDER = "@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;";
 export declare const SCHEME_ATTR = "data-greese-scheme";
 export declare const THEME_ATTR = "data-greese-theme";
+/** Set to `reduce` (ThemeProvider's `motion`), reduces motion in a subtree whatever the system says. */
+export declare const MOTION_ATTR = "data-greese-motion";
 import { kebab } from './kebab.ts';
 export { kebab };
 /** The custom property for a token: `cssVar('lineHeight', 'tight')` -> `--greese-line-height-tight`. */

package/dist/css.js

@@ -17,6 +17,8 @@ import { duration } from "./tokens.js";
 export const LAYER_ORDER = '@layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;';
 export const SCHEME_ATTR = 'data-greese-scheme';
 export const THEME_ATTR = 'data-greese-theme';
+/** Set to `reduce` (ThemeProvider's `motion`), reduces motion in a subtree whatever the system says. */
+export const MOTION_ATTR = 'data-greese-motion';
 import { kebab } from "./kebab.js";
 export { kebab };
 /** The custom property for a token: `cssVar('lineHeight', 'tight')` -> `--greese-line-height-tight`. */