@greese/ui 1.0.0 → 1.2.0

package/dist/greese.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;
   }
@@ -3304,8 +3334,8 @@
     );
   }
   .greese-Button--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-Button--size-sm {
@@ -3545,6 +3575,7 @@
     gap: var(--greese-space-2);
     align-items: center;
     inline-size: 100%;
+    min-inline-size: 0;
     min-block-size: var(--greese-input-height);
     padding-inline: var(--greese-input-padding);
     cursor: text;
@@ -3577,9 +3608,17 @@
     inline-size: 1.25em;
     block-size: 1.25em;
   }
+  .greese-Input.greese-Input--measured {
+    inline-size: fit-content;
+    flex: none;
+  }
+  .greese-Input.greese-Input--measured .greese-Input-control {
+    flex: none;
+    inline-size: calc(var(--greese-input-size) * 1ch);
+  }
   .greese-Input--size-xs {
-    --greese-input-height: 1rem;
-    --greese-input-padding: var(--greese-space-1);
+    --greese-input-height: 1.5rem;
+    --greese-input-padding: var(--greese-space-2);
     font-size: var(--greese-type-p3-font-size);
   }
   @media (pointer: coarse) {
@@ -3689,7 +3728,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) {
@@ -3771,6 +3810,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;
@@ -3798,8 +3838,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) {
@@ -3886,19 +3926,60 @@
     cursor: not-allowed;
     opacity: 0.55;
   }
+  .greese-Checkbox--size-xs,
+  .greese-Radio--size-xs,
+  .greese-Switch--size-xs,
+  .greese-ChoiceGroup--size-xs {
+    --greese-choice-font: var(--greese-type-p3-font-size);
+    --greese-choice-gap: var(--greese-space-2);
+    --greese-choice-box: calc(1.5rem * 0.45);
+  }
+  .greese-Checkbox--size-sm,
+  .greese-Radio--size-sm,
+  .greese-Switch--size-sm,
+  .greese-ChoiceGroup--size-sm {
+    --greese-choice-font: var(--greese-type-p3-font-size);
+    --greese-choice-gap: var(--greese-space-3);
+    --greese-choice-box: calc(2rem * 0.45);
+  }
+  .greese-Checkbox--size-md,
+  .greese-Radio--size-md,
+  .greese-Switch--size-md,
+  .greese-ChoiceGroup--size-md {
+    --greese-choice-font: var(--greese-type-p2-font-size);
+    --greese-choice-gap: var(--greese-space-3);
+    --greese-choice-box: calc(2.5rem * 0.45);
+  }
+  .greese-Checkbox--size-lg,
+  .greese-Radio--size-lg,
+  .greese-Switch--size-lg,
+  .greese-ChoiceGroup--size-lg {
+    --greese-choice-font: var(--greese-type-p2-font-size);
+    --greese-choice-gap: var(--greese-space-4);
+    --greese-choice-box: calc(3rem * 0.45);
+  }
+  .greese-Checkbox--size-xl,
+  .greese-Radio--size-xl,
+  .greese-Switch--size-xl,
+  .greese-ChoiceGroup--size-xl {
+    --greese-choice-font: var(--greese-type-p1-font-size);
+    --greese-choice-gap: var(--greese-space-4);
+    --greese-choice-box: calc(4rem * 0.45);
+  }
   .greese-Checkbox-text {
     display: flex;
     flex-direction: column;
     gap: var(--greese-space-1);
   }
   .greese-Checkbox-label {
+    font-size: var(--greese-choice-font, inherit);
     cursor: pointer;
   }
   [data-disabled] > .greese-Checkbox-text > .greese-Checkbox-label {
     cursor: not-allowed;
   }
   .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);
   }
   .greese-Checkbox-box {
@@ -3923,8 +4004,8 @@
   }
   .greese-Checkbox-input {
     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);
@@ -3987,8 +4068,8 @@
   }
   .greese-Radio-input {
     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);
@@ -4019,8 +4100,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) {
@@ -4062,8 +4143,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);
@@ -4072,16 +4153,61 @@
     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;
   }
 }
 /* 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;
@@ -4095,11 +4221,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;
   }
@@ -4155,6 +4276,26 @@
 /* stylelint-disable selector-no-vendor-prefix */
 /* stylelint-disable color-no-hex, function-disallowed-list */
 @layer greese.components {
+  .greese-ColorPicker--size-xs {
+    --greese-colorpicker-font: var(--greese-type-p3-font-size);
+    --greese-colorpicker-padding: var(--greese-space-2);
+  }
+  .greese-ColorPicker--size-sm {
+    --greese-colorpicker-font: var(--greese-type-p3-font-size);
+    --greese-colorpicker-padding: var(--greese-space-3);
+  }
+  .greese-ColorPicker--size-md {
+    --greese-colorpicker-font: var(--greese-type-p2-font-size);
+    --greese-colorpicker-padding: var(--greese-space-3);
+  }
+  .greese-ColorPicker--size-lg {
+    --greese-colorpicker-font: var(--greese-type-p2-font-size);
+    --greese-colorpicker-padding: var(--greese-space-4);
+  }
+  .greese-ColorPicker--size-xl {
+    --greese-colorpicker-font: var(--greese-type-p1-font-size);
+    --greese-colorpicker-padding: var(--greese-space-4);
+  }
   .greese-ColorPicker {
     --greese-colorpicker-thumb: 1.125rem;
     box-sizing: border-box;
@@ -4306,8 +4447,72 @@
   .greese-ColorPicker-hue {
     direction: ltr;
   }
+  .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);
+  }
+  .greese-ColorPicker-channels {
+    display: flex;
+    flex: 1 0 100%;
+    gap: var(--greese-space-2);
+    min-inline-size: 0;
+  }
+  .greese-ColorPicker-channel {
+    flex: 1;
+    min-inline-size: 0;
+    padding-inline: var(--greese-space-1);
+  }
+  .greese-ColorPicker-channel .greese-Input-control {
+    font-family: var(--greese-font-mono);
+    text-align: end;
+    appearance: textfield;
+  }
+  .greese-ColorPicker-channel .greese-Input-control::-webkit-outer-spin-button, .greese-ColorPicker-channel .greese-Input-control::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+  .greese-ColorPicker-channel .greese-Input-adornment {
     font-family: var(--greese-font-mono);
+    color: var(--greese-color-fg-muted);
+  }
+  .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) {
+    .greese-ColorPicker-tool {
+      inline-size: 2.25rem;
+      block-size: 2.25rem;
+    }
+  }
+  .greese-ColorPicker-tool:hover:not(:disabled) {
+    color: var(--greese-color-fg);
+    background: var(--greese-color-track);
+  }
+  .greese-ColorPicker-tool:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-ColorPicker-tool:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
   }
   .greese-ColorPicker-swatches {
     display: flex;
@@ -4410,46 +4615,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 {
@@ -5161,6 +5366,7 @@
     transition: none;
   }
   .greese-Collapsible-content {
+    display: flow-root;
     padding-block-end: var(--greese-space-4);
     color: var(--greese-color-fg-muted);
   }
@@ -5473,9 +5679,9 @@
     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;
@@ -5489,6 +5695,36 @@
   .greese-Chip:has(.greese-Chip-remove) {
     padding-inline-end: var(--greese-space-1);
   }
+  .greese-Chip--size-xs {
+    --greese-chip-height: 1.25rem;
+    --greese-chip-padding: var(--greese-space-1);
+    --greese-chip-font: var(--greese-type-caption-font-size);
+    --greese-chip-remove: 1rem;
+  }
+  .greese-Chip--size-sm {
+    --greese-chip-height: 1.625rem;
+    --greese-chip-padding: var(--greese-space-2);
+    --greese-chip-font: var(--greese-type-caption-font-size);
+    --greese-chip-remove: 1.25rem;
+  }
+  .greese-Chip--size-md {
+    --greese-chip-height: 2rem;
+    --greese-chip-padding: var(--greese-space-3);
+    --greese-chip-font: var(--greese-type-p3-font-size);
+    --greese-chip-remove: 1.5rem;
+  }
+  .greese-Chip--size-lg {
+    --greese-chip-height: 2.5rem;
+    --greese-chip-padding: var(--greese-space-4);
+    --greese-chip-font: var(--greese-type-p2-font-size);
+    --greese-chip-remove: 1.75rem;
+  }
+  .greese-Chip--size-xl {
+    --greese-chip-height: 3rem;
+    --greese-chip-padding: var(--greese-space-5);
+    --greese-chip-font: var(--greese-type-p1-font-size);
+    --greese-chip-remove: 2rem;
+  }
   .greese-Chip--neutral {
     --greese-chip-tone: var(--greese-color-fg);
     --greese-chip-tone-on: var(--greese-color-canvas);
@@ -5570,19 +5806,19 @@
   }
   .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;
+    inline-size: var(--greese-chip-remove);
+    block-size: var(--greese-chip-remove);
     color: var(--greese-color-fg-muted);
     border-radius: var(--greese-corner-round);
   }
   .greese-Chip-remove > svg {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
+    inline-size: 0.6em;
+    block-size: 0.6em;
   }
   @media (hover: hover) {
     .greese-Chip-remove:hover {
@@ -5872,7 +6108,7 @@
     inline-size: min(var(--greese-dialog-width, 32rem), 100vw - 2 * var(--greese-space-4));
     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);
   }
@@ -5914,7 +6150,7 @@
     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;
   }
@@ -5944,6 +6180,8 @@
   .greese-Dialog-body {
     flex: 1 1 auto;
     min-block-size: 0;
+    padding: 4px;
+    margin: -4px;
     overflow: auto;
     overscroll-behavior: contain;
   }
@@ -6016,7 +6254,7 @@
     inline-size: min(24rem, 100vw - 3rem);
     block-size: 100dvh;
     max-block-size: none;
-    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-start-start-radius: var(--greese-corner-surface);
     border-start-end-radius: 0;
     border-end-end-radius: 0;
@@ -6030,7 +6268,7 @@
     inline-size: min(24rem, 100vw - 3rem);
     block-size: 100dvh;
     max-block-size: none;
-    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-start-start-radius: 0;
     border-start-end-radius: var(--greese-corner-surface);
     border-end-end-radius: var(--greese-corner-surface);
@@ -6044,7 +6282,7 @@
     inline-size: 100vw;
     block-size: auto;
     max-block-size: 85dvh;
-    padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+    padding-block: var(--greese-dialog-padding, var(--greese-space-5)) var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-bottom)));
     border-start-start-radius: var(--greese-corner-surface);
     border-start-end-radius: var(--greese-corner-surface);
     border-end-end-radius: 0;
@@ -6058,7 +6296,7 @@
     inline-size: 100vw;
     block-size: auto;
     max-block-size: 85dvh;
-    padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+    padding-block: var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-top))) var(--greese-dialog-padding, var(--greese-space-5));
     border-start-start-radius: 0;
     border-start-end-radius: 0;
     border-end-end-radius: var(--greese-corner-surface);
@@ -6073,7 +6311,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: 0;
       border-end-end-radius: 0;
@@ -6087,7 +6325,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: 0;
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: var(--greese-corner-surface);
@@ -6101,7 +6339,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      padding-block: var(--greese-dialog-padding, var(--greese-space-5)) var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-bottom)));
       border-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: 0;
@@ -6115,7 +6353,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      padding-block: var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-top))) var(--greese-dialog-padding, var(--greese-space-5));
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       border-end-end-radius: var(--greese-corner-surface);
@@ -6131,7 +6369,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: 0;
       border-end-end-radius: 0;
@@ -6145,7 +6383,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: 0;
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: var(--greese-corner-surface);
@@ -6159,7 +6397,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      padding-block: var(--greese-dialog-padding, var(--greese-space-5)) var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-bottom)));
       border-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: 0;
@@ -6173,7 +6411,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      padding-block: var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-top))) var(--greese-dialog-padding, var(--greese-space-5));
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       border-end-end-radius: var(--greese-corner-surface);
@@ -6189,7 +6427,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: 0;
       border-end-end-radius: 0;
@@ -6203,7 +6441,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: 0;
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: var(--greese-corner-surface);
@@ -6217,7 +6455,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      padding-block: var(--greese-dialog-padding, var(--greese-space-5)) var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-bottom)));
       border-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: 0;
@@ -6231,7 +6469,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      padding-block: var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-top))) var(--greese-dialog-padding, var(--greese-space-5));
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       border-end-end-radius: var(--greese-corner-surface);
@@ -6247,7 +6485,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: 0;
       border-end-end-radius: 0;
@@ -6261,7 +6499,7 @@
       inline-size: min(24rem, 100vw - 3rem);
       block-size: 100dvh;
       max-block-size: none;
-      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-start-start-radius: 0;
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: var(--greese-corner-surface);
@@ -6275,7 +6513,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: var(--greese-space-5) max(var(--greese-space-5), env(safe-area-inset-bottom));
+      padding-block: var(--greese-dialog-padding, var(--greese-space-5)) var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-bottom)));
       border-start-start-radius: var(--greese-corner-surface);
       border-start-end-radius: var(--greese-corner-surface);
       border-end-end-radius: 0;
@@ -6289,7 +6527,7 @@
       inline-size: 100vw;
       block-size: auto;
       max-block-size: 85dvh;
-      padding-block: max(var(--greese-space-5), env(safe-area-inset-top)) var(--greese-space-5);
+      padding-block: var(--greese-dialog-padding, max(var(--greese-space-5), env(safe-area-inset-top))) var(--greese-dialog-padding, var(--greese-space-5));
       border-start-start-radius: 0;
       border-start-end-radius: 0;
       border-end-end-radius: var(--greese-corner-surface);
@@ -6699,6 +6937,15 @@
     display: flex;
     flex-direction: column;
   }
+  .greese-ContextMenu {
+    min-inline-size: 0;
+  }
+  .greese-ContextMenu-point {
+    position: fixed;
+    inline-size: 0;
+    block-size: 0;
+    pointer-events: none;
+  }
   .greese-Menu-viewport {
     min-block-size: 0;
     padding: var(--greese-space-1);
@@ -7401,8 +7648,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 {
@@ -7496,8 +7743,8 @@
   }
   .greese-NumberField-steppers {
     display: inline-flex;
-    gap: 2px;
-    margin-inline-end: calc(-1 * var(--greese-space-2));
+    flex-direction: column;
+    margin-inline-end: calc(-1 * var(--greese-space-1));
   }
   @media (pointer: coarse) {
     .greese-NumberField-step::after {
@@ -7514,8 +7761,6 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
     padding: 0;
     color: var(--greese-color-fg-muted);
     cursor: pointer;
@@ -7523,10 +7768,6 @@
     border: 0;
     border-radius: var(--greese-corner-inset);
   }
-  .greese-NumberField-step > svg {
-    inline-size: 1rem;
-    block-size: 1rem;
-  }
   @media (hover: hover) {
     .greese-NumberField-step:hover {
       color: var(--greese-color-fg);
@@ -7537,6 +7778,65 @@
     cursor: not-allowed;
     opacity: 0.4;
   }
+  .greese-NumberField-steppers .greese-NumberField-step {
+    inline-size: 1.25rem;
+    block-size: 0.875rem;
+  }
+  .greese-NumberField-steppers .greese-NumberField-step > svg {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+  }
+  .greese-NumberField--split .greese-NumberField-step {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+  .greese-NumberField--split .greese-NumberField-step > svg {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+  @media (pointer: coarse) {
+    .greese-NumberField-clear::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-NumberField-clear {
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-round);
+  }
+  @media (hover: hover) {
+    .greese-NumberField-clear:hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+  }
+  .greese-NumberField-clear > svg {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+  }
+}
+@layer greese.components {
+  .greese-NumberStepper {
+    --greese-numberstepper-gap: var(--greese-space-1);
+  }
+  .greese-NumberStepper .greese-Input-control {
+    text-align: center;
+  }
 }
 @layer greese.components {
   .greese-Table {
@@ -7822,8 +8122,8 @@
     position: relative;
     display: inline-grid;
     place-items: center;
-    inline-size: 1.75rem;
-    block-size: 1.75rem;
+    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);
@@ -7896,47 +8196,54 @@
   }
 }
 @layer greese.components {
-  .greese-Carousel {
+  .greese-ScrollCarousel {
     box-sizing: border-box;
     position: relative;
     display: grid;
     gap: var(--greese-space-3);
     min-inline-size: 0;
   }
-  .greese-Carousel-viewport {
-    --greese-carousel-per-view: 1;
-    --greese-carousel-gap: var(--greese-space-3);
+  .greese-ScrollCarousel-viewport {
+    --greese-scrollcarousel-per-view: 1;
+    --greese-scrollcarousel-gap: var(--greese-space-3);
     display: flex;
-    gap: var(--greese-carousel-gap);
+    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-Carousel-viewport::-webkit-scrollbar {
+  .greese-ScrollCarousel-viewport::-webkit-scrollbar {
     display: none;
   }
-  .greese-Carousel-viewport:focus-visible {
+  .greese-ScrollCarousel-viewport:focus-visible {
     outline: 2px solid var(--greese-color-focus-ring);
     outline-offset: 2px;
   }
   @media (prefers-reduced-motion: no-preference) {
-    .greese-Carousel-viewport {
+    .greese-ScrollCarousel-viewport {
       scroll-behavior: smooth;
     }
   }
-  .greese-CarouselSlide {
-    --greese-carousel-gaps: calc(
-      (var(--greese-carousel-per-view) - 1) * var(--greese-carousel-gap)
+  .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-carousel-gaps)) / var(--greese-carousel-per-view));
+    flex: 0 0 calc((100% - var(--greese-scrollcarousel-gaps)) / var(--greese-scrollcarousel-per-view));
     min-inline-size: 0;
     scroll-snap-align: start;
   }
-  .greese-Carousel-control {
+  .greese-ScrollCarousel-control {
     position: absolute;
-    inset-block-start: calc(50% - 1.25rem - var(--greese-carousel-dots, 0px) / 2);
+    inset-block-start: calc(50% - 1.25rem - var(--greese-scrollcarousel-dots, 0px) / 2);
     display: inline-grid;
     place-items: center;
     inline-size: 2.5rem;
@@ -7951,12 +8258,12 @@
     translate: 0 -50%;
     transition: opacity var(--greese-duration-fast) var(--greese-easing-standard);
   }
-  .greese-Carousel-control:focus-visible {
+  .greese-ScrollCarousel-control:focus-visible {
     outline: 2px solid var(--greese-color-focus-ring);
     outline-offset: 2px;
   }
   @media (pointer: coarse) {
-    .greese-Carousel-control::after {
+    .greese-ScrollCarousel-control::after {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -7966,44 +8273,40 @@
       translate: -50% -50%;
     }
   }
-  .greese-Carousel-control:disabled {
+  .greese-ScrollCarousel-control:disabled {
+    pointer-events: none;
     cursor: default;
     opacity: 0;
   }
-  .greese-Carousel-control > svg {
+  .greese-ScrollCarousel-control > 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-ScrollCarousel:has(.greese-ScrollCarousel-indicators) {
+    --greese-scrollcarousel-dots: calc(0.5rem + var(--greese-space-3));
   }
-  .greese-Carousel-control--previous {
+  .greese-ScrollCarousel-control--previous {
     inset-inline-start: var(--greese-space-2);
   }
-  .greese-Carousel-control--next {
+  .greese-ScrollCarousel-control--next {
     inset-inline-end: var(--greese-space-2);
   }
-  .greese-Carousel-control--next > svg {
+  .greese-ScrollCarousel-control--next > svg {
     scale: -1 1;
   }
-  .greese-Carousel-control:dir(rtl) > svg {
+  .greese-ScrollCarousel-control:dir(rtl) > svg {
     scale: -1 1;
   }
-  .greese-Carousel-control--next:dir(rtl) > svg {
+  .greese-ScrollCarousel-control--next:dir(rtl) > svg {
     scale: 1;
   }
-  @media (hover: none) {
-    .greese-Carousel-control {
-      display: none;
-    }
-  }
-  .greese-Carousel-indicators {
+  .greese-ScrollCarousel-indicators {
     display: flex;
     flex-wrap: wrap;
     gap: var(--greese-space-1);
     justify-content: center;
   }
-  .greese-Carousel-indicator {
+  .greese-ScrollCarousel-indicator {
     position: relative;
     inline-size: 1.5rem;
     block-size: 0.5rem;
@@ -8012,12 +8315,12 @@
     background: none;
     border: 0;
   }
-  .greese-Carousel-indicator:focus-visible {
+  .greese-ScrollCarousel-indicator:focus-visible {
     outline: 2px solid var(--greese-color-focus-ring);
     outline-offset: 2px;
   }
   @media (pointer: coarse) {
-    .greese-Carousel-indicator::after {
+    .greese-ScrollCarousel-indicator::after {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -8027,7 +8330,7 @@
       translate: -50% -50%;
     }
   }
-  .greese-Carousel-indicator::before {
+  .greese-ScrollCarousel-indicator::before {
     position: absolute;
     inset: 0;
     content: "";
@@ -8036,41 +8339,360 @@
     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-Carousel-indicator[aria-current=true]::before {
+  .greese-ScrollCarousel-indicator[aria-current=true]::before {
     background-color: var(--greese-color-primary);
     clip-path: inset(0 round var(--greese-corner-pill));
   }
-  .greese-Carousel--xs-per-view {
-    --greese-carousel-per-view: var(--greese-carousel-per-view-xs);
+  .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-Carousel--sm-per-view {
-      --greese-carousel-per-view: var(--greese-carousel-per-view-sm);
+    .greese-ScrollCarousel--sm-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-sm);
     }
   }
   @media (width >= 900px) {
-    .greese-Carousel--md-per-view {
-      --greese-carousel-per-view: var(--greese-carousel-per-view-md);
+    .greese-ScrollCarousel--md-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-md);
     }
   }
   @media (width >= 1200px) {
-    .greese-Carousel--lg-per-view {
-      --greese-carousel-per-view: var(--greese-carousel-per-view-lg);
+    .greese-ScrollCarousel--lg-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-lg);
     }
   }
   @media (width >= 1536px) {
-    .greese-Carousel--xl-per-view {
-      --greese-carousel-per-view: var(--greese-carousel-per-view-xl);
+    .greese-ScrollCarousel--xl-per-view {
+      --greese-scrollcarousel-per-view: var(--greese-scrollcarousel-per-view-xl);
     }
   }
 }
 @layer greese.components {
-  .greese-ChatBubble--neutral {
-    --greese-chat-tone: var(--greese-color-fg);
-    --greese-chat-tone-on: var(--greese-color-canvas);
-  }
-  .greese-ChatBubble--muted {
-    --greese-chat-tone: var(--greese-color-fg-muted);
+  .greese-Carousel {
+    box-sizing: border-box;
+    --greese-carousel-way: 1;
+    --greese-carousel-enter: var(--greese-motion-carousel, greese-carousel-in);
+    --greese-carousel-duration: var(
+      --greese-motion-carousel-duration,
+      var(--greese-duration-normal)
+    );
+    --greese-carousel-exit-opacity: var(
+      --greese-motion-carousel-exit-opacity,
+      1
+    );
+    --greese-carousel-exit-translate: var(
+      --greese-motion-carousel-exit-translate,
+      calc(-100% * var(--greese-carousel-way)) 0
+    );
+    --greese-carousel-exit-scale: var(
+      --greese-motion-carousel-exit-scale,
+      1
+    );
+    --greese-carousel-exit-mask-image: var(
+      --greese-motion-carousel-exit-mask-image,
+      none
+    );
+    --greese-carousel-exit-mask-repeat: var(
+      --greese-motion-carousel-exit-mask-repeat,
+      no-repeat
+    );
+    --greese-carousel-exit-mask-position: var(
+      --greese-motion-carousel-exit-mask-position,
+      50% 50%
+    );
+    --greese-carousel-exit-mask-size: var(
+      --greese-motion-carousel-exit-mask-size,
+      100% 100%
+    );
+    --greese-carousel-exit-mask-from: var(
+      --greese-motion-carousel-exit-mask-from,
+      100% 100%
+    );
+    --greese-carousel-exit-transform: var(
+      --greese-motion-carousel-exit-transform,
+      none
+    );
+    --greese-carousel-exit-transform-origin: var(
+      --greese-motion-carousel-exit-transform-origin,
+      50% 50%
+    );
+    position: relative;
+    display: grid;
+    gap: var(--greese-space-3);
+    min-inline-size: 0;
+  }
+  .greese-Carousel[data-direction=back] {
+    --greese-carousel-way: -1;
+    --greese-carousel-enter: var(
+      --greese-motion-carousel-back,
+      var(--greese-motion-carousel, greese-carousel-in)
+    );
+    --greese-carousel-exit-opacity: var(
+      --greese-motion-carousel-back-exit-opacity,
+      var(--greese-motion-carousel-exit-opacity, 1)
+    );
+    --greese-carousel-exit-translate: var(
+      --greese-motion-carousel-back-exit-translate,
+      var(--greese-motion-carousel-exit-translate, calc(-100% * var(--greese-carousel-way)) 0)
+    );
+    --greese-carousel-exit-scale: var(
+      --greese-motion-carousel-back-exit-scale,
+      var(--greese-motion-carousel-exit-scale, 1)
+    );
+    --greese-carousel-exit-mask-image: var(
+      --greese-motion-carousel-back-exit-mask-image,
+      var(--greese-motion-carousel-exit-mask-image, none)
+    );
+    --greese-carousel-exit-mask-repeat: var(
+      --greese-motion-carousel-back-exit-mask-repeat,
+      var(--greese-motion-carousel-exit-mask-repeat, no-repeat)
+    );
+    --greese-carousel-exit-mask-position: var(
+      --greese-motion-carousel-back-exit-mask-position,
+      var(--greese-motion-carousel-exit-mask-position, 50% 50%)
+    );
+    --greese-carousel-exit-mask-size: var(
+      --greese-motion-carousel-back-exit-mask-size,
+      var(--greese-motion-carousel-exit-mask-size, 100% 100%)
+    );
+    --greese-carousel-exit-mask-from: var(
+      --greese-motion-carousel-back-exit-mask-from,
+      var(--greese-motion-carousel-exit-mask-from, 100% 100%)
+    );
+    --greese-carousel-exit-transform: var(
+      --greese-motion-carousel-back-exit-transform,
+      var(--greese-motion-carousel-exit-transform, none)
+    );
+    --greese-carousel-exit-transform-origin: var(
+      --greese-motion-carousel-back-exit-transform-origin,
+      var(--greese-motion-carousel-exit-transform-origin, 50% 50%)
+    );
+  }
+  .greese-Carousel:dir(rtl) {
+    --greese-carousel-way: -1;
+  }
+  .greese-Carousel[data-direction=back]:dir(rtl) {
+    --greese-carousel-way: 1;
+  }
+  .greese-Carousel-viewport {
+    --greese-motion-exit-opacity: initial;
+    --greese-motion-exit-translate: initial;
+    --greese-motion-exit-scale: initial;
+    --greese-motion-exit-mask-image: initial;
+    --greese-motion-exit-mask-repeat: initial;
+    --greese-motion-exit-mask-position: initial;
+    --greese-motion-exit-mask-size: initial;
+    --greese-motion-exit-mask-from: initial;
+    --greese-motion-exit-transform: initial;
+    --greese-motion-exit-transform-origin: initial;
+    --greese-carousel-slide-enter: initial;
+    display: grid;
+    min-inline-size: 0;
+    overflow: clip;
+    border-radius: var(--greese-corner-panel);
+    touch-action: pan-y;
+  }
+  .greese-Carousel-viewport:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-CarouselSlide {
+    grid-area: 1/1;
+    min-inline-size: 0;
+    mask-image: var(--greese-motion-exit-mask-image, var(--greese-carousel-exit-mask-image));
+    mask-repeat: var(--greese-motion-exit-mask-repeat, var(--greese-carousel-exit-mask-repeat));
+    mask-position: var(--greese-motion-exit-mask-position, var(--greese-carousel-exit-mask-position));
+    mask-size: var(--greese-motion-exit-mask-from, var(--greese-carousel-exit-mask-from));
+    transform-origin: var(--greese-motion-exit-transform-origin, var(--greese-carousel-exit-transform-origin));
+  }
+  .greese-CarouselSlide:not([data-active]) {
+    visibility: hidden;
+    opacity: var(--greese-motion-exit-opacity, var(--greese-carousel-exit-opacity));
+    translate: var(--greese-motion-exit-translate, var(--greese-carousel-exit-translate));
+    scale: var(--greese-motion-exit-scale, var(--greese-carousel-exit-scale));
+    transform: var(--greese-motion-exit-transform, var(--greese-carousel-exit-transform));
+    mask-size: var(--greese-motion-exit-mask-size, var(--greese-carousel-exit-mask-size));
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .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;
+    }
+    .greese-Carousel[data-moved] > .greese-Carousel-viewport > .greese-CarouselSlide: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-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);
+  }
+  .greese-Carousel-control:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Carousel-control::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Carousel-control:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0;
+  }
+  .greese-Carousel-control > 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-Carousel-control--next > svg {
+    scale: -1 1;
+  }
+  .greese-Carousel-control:dir(rtl) > svg {
+    scale: -1 1;
+  }
+  .greese-Carousel-control--next:dir(rtl) > svg {
+    scale: 1;
+  }
+  .greese-Carousel-indicators {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--greese-space-1);
+    justify-content: center;
+  }
+  .greese-Carousel-indicator {
+    position: relative;
+    inline-size: 1.5rem;
+    block-size: 0.5rem;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+    border: 0;
+  }
+  .greese-Carousel-indicator:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  @media (pointer: coarse) {
+    .greese-Carousel-indicator::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 24px);
+      block-size: max(100%, 24px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-Carousel-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-Carousel-indicator[aria-current=true]::before {
+    background-color: var(--greese-color-primary);
+    clip-path: inset(0 round var(--greese-corner-pill));
+  }
+  @keyframes greese-carousel-in {
+    from {
+      translate: calc(100% * var(--greese-carousel-way)) 0;
+    }
+  }
+}
+@layer greese.components {
+  .greese-ChatBubble--neutral {
+    --greese-chat-tone: var(--greese-color-fg);
+    --greese-chat-tone-on: var(--greese-color-canvas);
+  }
+  .greese-ChatBubble--muted {
+    --greese-chat-tone: var(--greese-color-fg-muted);
     --greese-chat-tone-on: var(--greese-color-canvas);
   }
   .greese-ChatBubble--primary {
@@ -8407,6 +9029,224 @@
     white-space: nowrap;
   }
 }
+/* stylelint-disable color-no-hex */
+@layer greese.components {
+  .greese-EditableField {
+    --greese-editablefield-dial: 2.25rem;
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+    min-inline-size: 0;
+  }
+  .greese-EditableField[data-disabled] {
+    opacity: 0.55;
+  }
+  .greese-EditableField--row {
+    justify-content: space-between;
+  }
+  .greese-EditableField--column {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .greese-EditableField-label {
+    flex: none;
+    color: var(--greese-color-fg-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .greese-EditableField--column > .greese-EditableField-label {
+    align-self: start;
+  }
+  .greese-EditableField-control {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .greese-EditableField--checkbox > .greese-EditableField-control,
+  .greese-EditableField--switch > .greese-EditableField-control,
+  .greese-EditableField--radio > .greese-EditableField-control,
+  .greese-EditableField--segmented > .greese-EditableField-control {
+    flex: 0 0 auto;
+  }
+  .greese-EditableField-number,
+  .greese-EditableField-range,
+  .greese-EditableField-knob {
+    display: flex;
+    gap: var(--greese-space-2);
+    align-items: center;
+  }
+  .greese-EditableField-number > .greese-NumberField,
+  .greese-EditableField-range > .greese-Slider,
+  .greese-EditableField-knob > .greese-NumberField {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  @media (pointer: coarse) {
+    .greese-EditableField-clear::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-EditableField-clear {
+    position: relative;
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    color: var(--greese-color-fg-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--greese-corner-round);
+  }
+  @media (hover: hover) {
+    .greese-EditableField-clear:hover {
+      color: var(--greese-color-fg);
+      background-color: color-mix(in oklab, var(--greese-color-fg) 8%, transparent);
+    }
+  }
+  .greese-EditableField-clear > svg {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+  }
+  .greese-EditableField-textarea {
+    position: relative;
+  }
+  .greese-EditableField-textarea > .greese-EditableField-clear {
+    position: absolute;
+    inset-block-start: var(--greese-space-1);
+    inset-inline-end: var(--greese-space-1);
+  }
+  .greese-EditableField-textarea:has(> .greese-EditableField-clear) .greese-Textarea-control {
+    padding-inline-end: 1.75rem;
+  }
+  .greese-EditableField-unit,
+  .greese-EditableField-value {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    color: var(--greese-color-fg-muted);
+  }
+  .greese-EditableField-value {
+    min-inline-size: 3ch;
+    text-align: end;
+  }
+  .greese-EditableField-swatch {
+    inline-size: 100%;
+    padding: 0;
+    cursor: pointer;
+    background: linear-gradient(var(--greese-editablefield-swatch), var(--greese-editablefield-swatch)), repeating-conic-gradient(#c8ccd2 0% 25%, #fff 0% 50%) 0 0/0.5rem 0.5rem;
+    border: 0;
+    border-radius: var(--greese-corner-inset);
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+    position: relative;
+    min-inline-size: var(--greese-editablefield-height, 1.75rem);
+    block-size: var(--greese-editablefield-height, 1.75rem);
+  }
+  @media (pointer: coarse) {
+    .greese-EditableField-swatch::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      inline-size: max(100%, 44px);
+      block-size: max(100%, 44px);
+      content: "";
+      translate: -50% -50%;
+    }
+  }
+  .greese-EditableField-swatch:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-EditableField-swatch:disabled {
+    cursor: not-allowed;
+  }
+  .greese-EditableField-swatch[data-none] {
+    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--greese-color-negative) calc(50% - 1px), var(--greese-color-negative) calc(50% + 1px), transparent calc(50% + 1px)), var(--greese-color-surface);
+  }
+  .greese-EditableField-swatch[data-mixed] {
+    background: var(--greese-color-track);
+    box-shadow: inset 0 0 0 1px var(--greese-color-border-strong);
+    opacity: 0.7;
+  }
+  .greese-EditableField-picker:popover-open {
+    display: grid;
+    gap: var(--greese-space-3);
+  }
+  .greese-EditableField-none {
+    padding: var(--greese-space-2);
+    font: inherit;
+    color: var(--greese-color-fg);
+    cursor: pointer;
+    background: var(--greese-color-surface);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-inset);
+  }
+  .greese-EditableField-none:hover {
+    background: var(--greese-color-track);
+  }
+  .greese-EditableField-none:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-EditableField-dial {
+    position: relative;
+    flex: none;
+    inline-size: var(--greese-editablefield-dial);
+    block-size: var(--greese-editablefield-dial);
+    cursor: grab;
+    background: var(--greese-color-track);
+    border: 1px solid var(--greese-color-border);
+    border-radius: var(--greese-corner-round);
+    touch-action: none;
+  }
+  .greese-EditableField-dial:focus-visible {
+    outline: 2px solid var(--greese-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .greese-EditableField-dial[aria-disabled=true] {
+    cursor: not-allowed;
+  }
+  .greese-EditableField-dialDot {
+    position: absolute;
+    inset: 0;
+    display: block;
+    rotate: var(--greese-editablefield-angle, 0deg);
+  }
+  .greese-EditableField-dialDot::after {
+    position: absolute;
+    inset-block-start: 0.125rem;
+    inset-inline-start: 50%;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    content: "";
+    background: var(--greese-color-primary);
+    border-radius: var(--greese-corner-round);
+    translate: -50% 0;
+  }
+  .greese-EditableField--size-xs {
+    --greese-editablefield-height: 1.5rem;
+  }
+  .greese-EditableField--size-sm {
+    --greese-editablefield-height: 2rem;
+  }
+  .greese-EditableField--size-md {
+    --greese-editablefield-height: 2.5rem;
+  }
+  .greese-EditableField--size-lg {
+    --greese-editablefield-height: 3rem;
+  }
+  .greese-EditableField--size-xl {
+    --greese-editablefield-height: 4rem;
+  }
+}
 @layer greese.components {
   .greese-Fieldset {
     box-sizing: border-box;
@@ -8601,7 +9441,7 @@
     max-inline-size: 100%;
   }
   .greese-OtpField--size-xs {
-    --greese-otp-size: 1rem;
+    --greese-otp-size: 1.5rem;
     font-size: max(16px, var(--greese-type-p3-font-size));
   }
   .greese-OtpField--size-sm {
@@ -11261,6 +12101,18 @@
     html::view-transition-old(*.greese-PageTransition--exit-none) {
       animation-name: none;
     }
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(--greese-page-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
+      animation-timing-function: var(--greese-page-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));
+    }
     html::view-transition-group(*.greese-PageTransition--share) {
       animation-duration: var(--greese-motion-share-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
       animation-timing-function: var(--greese-motion-share-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));