@seed-design/css 2.5.0 → 2.6.0

package/recipes/pull-to-refresh.css

@@ -1,5 +1,5 @@
 .seed-pull-to-refresh__root {
-    --ptr-size: 44px;
+    --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
     --ptr-transition-duration: var(--seed-duration-d6);
     height: 100%;
 }

package/recipes/pull-to-refresh.layered.css

@@ -1,6 +1,6 @@
 @layer seed-components {
   .seed-pull-to-refresh__root {
-    --ptr-size: 44px;
+    --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
     --ptr-transition-duration: var(--seed-duration-d6);
     height: 100%;
   }

package/recipes/quantity-picker.css

@@ -19,7 +19,7 @@
     border: none;
     padding: 0;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }
@@ -27,6 +27,9 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);
@@ -91,7 +94,7 @@
     border: none;
     padding: 0;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }
@@ -99,6 +102,9 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
         background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/quantity-picker.layered.css

@@ -16,7 +16,7 @@
     box-sizing: border-box;
     cursor: pointer;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
     border: none;
@@ -32,6 +32,10 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);
@@ -99,7 +103,7 @@
     box-sizing: border-box;
     cursor: pointer;
     background-color: var(--seed-color-bg-transparent);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
     border: none;
@@ -115,6 +119,10 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/radiomark.css

@@ -10,7 +10,12 @@
     border-color: var(--seed-color-stroke-neutral-weak);
     border-radius: var(--seed-radius-full);
     margin-top: var(--radiomark-margin-top, 0);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
+}
+.seed-radiomark__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
     outline-offset: var(--seed-dimension-x0_5);
 }

package/recipes/radiomark.layered.css

@@ -6,9 +6,6 @@
     border-color: var(--seed-color-stroke-neutral-weak);
     border-radius: var(--seed-radius-full);
     margin-top: var(--radiomark-margin-top, 0);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
-    outline-offset: var(--seed-dimension-x0_5);
     flex: none;
     justify-content: center;
     align-items: center;
@@ -16,6 +13,16 @@
     position: relative;
   }
 
+  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
+  }
+
+  .seed-radiomark__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-transparent-pressed);

package/recipes/reaction-button.css

@@ -21,8 +21,11 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     background: var(--seed-color-bg-transparent);
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);

package/recipes/reaction-button.layered.css

@@ -24,8 +24,12 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-reaction-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     background: var(--seed-color-bg-transparent);
     font-weight: var(--seed-font-weight-medium);
     color: var(--seed-color-fg-neutral);

package/recipes/select-box.css

@@ -5,7 +5,7 @@
     flex-direction: column;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     overflow: hidden;
 }
@@ -36,10 +36,10 @@
 }
 .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
 }
 .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
 }
 .seed-select-box__root {
     outline: var(--seed-dimension-x0_5) solid transparent;

package/recipes/select-box.layered.css

@@ -3,7 +3,7 @@
     cursor: pointer;
     border-radius: var(--seed-radius-r3);
     background-color: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
     transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     flex-direction: column;
     display: flex;
@@ -40,11 +40,11 @@
 
   .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
   }
 
   .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
-    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
   }
 
   .seed-select-box__root {

package/recipes/select.css

@@ -38,7 +38,7 @@
 }
 .seed-select__scrollArea {
     overflow-y: auto;
-    max-height: min(480px, var(--seed-select-available-height, 480px));
+    max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     display: flex;

package/recipes/select.layered.css

@@ -44,7 +44,7 @@
   }
 
   .seed-select__scrollArea {
-    max-height: min(480px, var(--seed-select-available-height, 480px));
+    max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     gap: var(--seed-dimension-x2);

package/recipes/side-panel.css

@@ -230,7 +230,12 @@
     padding: calc((52px - 22px) / 2);
     margin: calc((22px - 52px) / 2);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-side-panel__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-side-panel__closeButton {
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
     outline: var(--seed-dimension-x0_5) solid transparent;

package/recipes/side-panel.layered.css

@@ -249,11 +249,6 @@
     top: calc(28px + var(--seed-safe-area-top));
     border-radius: var(--seed-radius-r3);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    --seed-icon-size: 22px;
-    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     justify-content: center;
     align-items: center;
@@ -264,6 +259,18 @@
     right: 24px;
   }
 
+  .seed-side-panel__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-side-panel__closeButton {
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    --seed-icon-size: 22px;
+    --seed-icon-color: var(--seed-color-fg-neutral-subtle);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);

package/recipes/snackbar.css

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    max-width: 560px;
+    max-width: 464px;
     background: var(--seed-color-bg-neutral-inverted);
     border-radius: var(--seed-radius-r2);
     padding-inline: var(--seed-dimension-x2_5);
@@ -76,6 +76,12 @@
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-bold);
 }
+.seed-snackbar__actionButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-snackbar__actionButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+}
 .seed-snackbar__actionButton:after {
     content: '';
     position: absolute;

package/recipes/snackbar.layered.css

@@ -4,7 +4,7 @@
     background: var(--seed-color-bg-neutral-inverted);
     border-radius: var(--seed-radius-r2);
     width: 100%;
-    max-width: 560px;
+    max-width: 464px;
     padding-inline: var(--seed-dimension-x2_5);
     padding-block: var(--seed-dimension-x2_5);
     min-height: 44px;
@@ -85,6 +85,14 @@
     position: relative;
   }
 
+  .seed-snackbar__actionButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-snackbar__actionButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+  }
+
   .seed-snackbar__actionButton:after {
     content: "";
     top: 50%;

package/recipes/switchmark.css

@@ -5,7 +5,10 @@
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-palette-gray-600);
     margin: var(--switchmark-margin-top, 0) 0;
-    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
 }
 .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
     opacity: 0.38;

package/recipes/switchmark.layered.css

@@ -4,11 +4,15 @@
     border-radius: var(--seed-radius-full);
     background: var(--seed-color-palette-gray-600);
     margin: var(--switchmark-margin-top, 0) 0;
-    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     display: block;
     position: relative;
   }
 
+  .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
+  }
+
   .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
     opacity: .38;
   }

package/recipes/tabs.css

@@ -83,8 +83,11 @@
     height: 2px;
     background-color: var(--seed-color-fg-neutral);
 }
+.seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-tabs__trigger {
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }

package/recipes/tabs.layered.css

@@ -95,8 +95,12 @@
     bottom: 0;
   }
 
+  .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-tabs__trigger {
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
   }

package/recipes/toggle-button.css

@@ -24,8 +24,11 @@
 .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
     cursor: not-allowed;
 }
+.seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 .seed-toggle-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
 }
 .seed-toggle-button--variant_brandSolid {

package/recipes/toggle-button.layered.css

@@ -28,8 +28,12 @@
     cursor: not-allowed;
   }
 
+  .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   .seed-toggle-button {
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     font-weight: var(--seed-font-weight-bold);
   }
 

package/recipes/wheel-picker-public.css

@@ -0,0 +1,121 @@
+.seed-wheel-picker-public__root {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--seed-color-bg-layer-floating);
+    --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
+    --seed-wheel-picker-public-scroll-fog-size: min(calc(0.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
+}
+.seed-wheel-picker-public__scrollFog {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    overflow: hidden;
+}
+.seed-wheel-picker-public__columns {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+.seed-wheel-picker-public__column {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    width: max-content;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior-x: none;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    outline: none;
+    touch-action: pan-y;
+    cursor: grab;
+    padding-block: var(--seed-wheel-picker-public-center-offset);
+}
+.seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
+    overflow-y: hidden;
+    cursor: default;
+    --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker-public__column[data-wheel-picker-dragging] {
+    cursor: grabbing;
+    scroll-snap-type: none;
+}
+.seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
+    scroll-snap-type: none;
+}
+.seed-wheel-picker-public__column::-webkit-scrollbar {
+    display: none;
+}
+.seed-wheel-picker-public__column :is([aria-selected=true], [data-selected]) {
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    border-radius: var(--seed-radius-r2);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-wheel-picker-public__column.seed-wheel-picker-public__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected=true], [data-selected]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-wheel-picker-public__item {
+    display: flex;
+    height: var(--seed-wheel-picker-public-item-size);
+    min-height: var(--seed-wheel-picker-public-item-size);
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-wheel-picker-public-item-color);
+    scroll-snap-align: center;
+    user-select: none;
+}
+.seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
+    color: transparent;
+    background-image: linear-gradient(to bottom, var(--seed-wheel-picker-public-item-color) 0%, var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.seed-wheel-picker-public__itemLabel {
+    box-sizing: border-box;
+    display: flex;
+    flex-shrink: 0;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--seed-dimension-x4);
+    font-weight: var(--seed-font-weight-medium);
+    white-space: nowrap;
+}
+.seed-wheel-picker-public__selectionIndicator {
+    position: absolute;
+    z-index: 0;
+    inset-inline: var(--seed-dimension-x4);
+    top: 50%;
+    height: var(--seed-wheel-picker-public-item-size);
+    transform: translateY(-50%);
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+    pointer-events: none;
+}
+.seed-wheel-picker-public__root--size_small {
+    height: var(--seed-wheel-picker-public-viewport-size, 180px);
+    --seed-wheel-picker-public-item-size: 36px;
+    --seed-wheel-picker-public-scroll-fog-max-height: 108px;
+}
+.seed-wheel-picker-public__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker-public__root--size_medium {
+    height: var(--seed-wheel-picker-public-viewport-size, 220px);
+    --seed-wheel-picker-public-item-size: 44px;
+    --seed-wheel-picker-public-scroll-fog-max-height: 132px;
+}
+.seed-wheel-picker-public__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+}

package/recipes/wheel-picker-public.d.ts

@@ -0,0 +1,24 @@
+declare interface WheelPickerPublicVariant {
+  /**
+  * @default "medium"
+  */
+  size: "small" | "medium";
+}
+
+declare type WheelPickerPublicVariantMap = {
+  [key in keyof WheelPickerPublicVariant]: Array<WheelPickerPublicVariant[key]>;
+};
+
+export declare type WheelPickerPublicVariantProps = Partial<WheelPickerPublicVariant>;
+
+export declare type WheelPickerPublicSlotName = "root" | "scrollFog" | "columns" | "column" | "item" | "itemLabel" | "selectionIndicator";
+
+export declare const wheelPickerPublicVariantMap: WheelPickerPublicVariantMap;
+
+export declare const wheelPickerPublic: ((
+  props?: WheelPickerPublicVariantProps,
+) => Record<WheelPickerPublicSlotName, string>) & {
+  splitVariantProps: <T extends WheelPickerPublicVariantProps>(
+    props: T,
+  ) => [WheelPickerPublicVariantProps, Omit<T, keyof WheelPickerPublicVariantProps>];
+}