@greese/ui 1.0.0 → 1.2.0

package/dist/css/Dialog.css

@@ -90,7 +90,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);
   }
@@ -132,7 +132,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;
   }
@@ -162,6 +162,8 @@
   .greese-Dialog-body {
     flex: 1 1 auto;
     min-block-size: 0;
+    padding: 4px;
+    margin: -4px;
     overflow: auto;
     overscroll-behavior: contain;
   }
@@ -234,7 +236,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;
@@ -248,7 +250,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);
@@ -262,7 +264,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;
@@ -276,7 +278,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);
@@ -291,7 +293,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;
@@ -305,7 +307,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);
@@ -319,7 +321,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;
@@ -333,7 +335,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);
@@ -349,7 +351,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;
@@ -363,7 +365,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);
@@ -377,7 +379,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;
@@ -391,7 +393,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);
@@ -407,7 +409,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;
@@ -421,7 +423,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);
@@ -435,7 +437,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;
@@ -449,7 +451,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);
@@ -465,7 +467,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;
@@ -479,7 +481,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);
@@ -493,7 +495,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;
@@ -507,7 +509,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);

package/dist/css/EditableField.css

@@ -0,0 +1,219 @@
+@import './core.css';
+/* 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;
+  }
+}

package/dist/css/Input.css

@@ -30,6 +30,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;
@@ -62,9 +63,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) {

package/dist/css/Menu.css

@@ -93,6 +93,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);

package/dist/css/NumberField.css

@@ -5,8 +5,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 {
@@ -23,8 +23,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;
@@ -32,10 +30,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);
@@ -46,4 +40,55 @@
     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;
+  }
 }

package/dist/css/NumberStepper.css

@@ -0,0 +1,9 @@
+@import './core.css';
+@layer greese.components {
+  .greese-NumberStepper {
+    --greese-numberstepper-gap: var(--greese-space-1);
+  }
+  .greese-NumberStepper .greese-Input-control {
+    text-align: center;
+  }
+}

package/dist/css/OtpField.css

@@ -8,7 +8,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 {

package/dist/css/PageTransition.css

@@ -333,6 +333,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)));

package/dist/css/Radio.css

@@ -13,8 +13,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);