@seed-design/css 2.8.3 → 3.0.0

package/recipes/side-panel.css

@@ -168,31 +168,10 @@
     --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
     --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
     --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
-    --seed-box-height-base: auto;
-    --seed-box-height-sm: var(--seed-box-height-base, initial);
-    --seed-box-height-md: var(--seed-box-height-sm, initial);
-    --seed-box-height-lg: var(--seed-box-height-md, initial);
-    --seed-box-height-xl: var(--seed-box-height-lg, initial);
-    --seed-box-height: var(--seed-box-height-base, initial);
-    --seed-box-min-height-base: auto;
-    --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
-    --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
-    --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
-    --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
-    --seed-box-min-height: var(--seed-box-min-height-base, initial);
-    --seed-box-max-height-base: none;
-    --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
-    --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
-    --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
-    --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
-    --seed-box-max-height: var(--seed-box-max-height-base, initial);
     --seed-box-justify-content: initial;
     --seed-box-align-items: initial;
     padding-inline: var(--seed-box-padding-x);
     padding-bottom: var(--seed-dimension-x12);
-    height: var(--seed-box-height);
-    min-height: var(--seed-box-min-height);
-    max-height: var(--seed-box-max-height);
     justify-content: var(--seed-box-justify-content);
     align-items: var(--seed-box-align-items);
     transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
@@ -271,9 +250,6 @@
     }
     .seed-side-panel__body {
         --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
-        --seed-box-height: var(--seed-box-height-sm, initial);
-        --seed-box-min-height: var(--seed-box-min-height-sm, initial);
-        --seed-box-max-height: var(--seed-box-max-height-sm, initial);
     }
 }
 @media (min-width: 768px) {
@@ -283,9 +259,6 @@
     }
     .seed-side-panel__body {
         --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
-        --seed-box-height: var(--seed-box-height-md, initial);
-        --seed-box-min-height: var(--seed-box-min-height-md, initial);
-        --seed-box-max-height: var(--seed-box-max-height-md, initial);
     }
 }
 @media (min-width: 1280px) {
@@ -295,9 +268,6 @@
     }
     .seed-side-panel__body {
         --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
-        --seed-box-height: var(--seed-box-height-lg, initial);
-        --seed-box-min-height: var(--seed-box-min-height-lg, initial);
-        --seed-box-max-height: var(--seed-box-max-height-lg, initial);
     }
 }
 @media (min-width: 1440px) {
@@ -307,8 +277,5 @@
     }
     .seed-side-panel__body {
         --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
-        --seed-box-height: var(--seed-box-height-xl, initial);
-        --seed-box-min-height: var(--seed-box-min-height-xl, initial);
-        --seed-box-max-height: var(--seed-box-max-height-xl, initial);
     }
 }

package/recipes/side-panel.layered.css

@@ -185,31 +185,10 @@
     --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
     --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
     --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
-    --seed-box-height-base: auto;
-    --seed-box-height-sm: var(--seed-box-height-base, initial);
-    --seed-box-height-md: var(--seed-box-height-sm, initial);
-    --seed-box-height-lg: var(--seed-box-height-md, initial);
-    --seed-box-height-xl: var(--seed-box-height-lg, initial);
-    --seed-box-height: var(--seed-box-height-base, initial);
-    --seed-box-min-height-base: auto;
-    --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
-    --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
-    --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
-    --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
-    --seed-box-min-height: var(--seed-box-min-height-base, initial);
-    --seed-box-max-height-base: none;
-    --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
-    --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
-    --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
-    --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
-    --seed-box-max-height: var(--seed-box-max-height-base, initial);
     --seed-box-justify-content: initial;
     --seed-box-align-items: initial;
     padding-inline: var(--seed-box-padding-x);
     padding-bottom: var(--seed-dimension-x12);
-    height: var(--seed-box-height);
-    min-height: var(--seed-box-min-height);
-    max-height: var(--seed-box-max-height);
     justify-content: var(--seed-box-justify-content);
     align-items: var(--seed-box-align-items);
     transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
@@ -308,9 +287,6 @@
 
     .seed-side-panel__body {
       --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
-      --seed-box-height: var(--seed-box-height-sm, initial);
-      --seed-box-min-height: var(--seed-box-min-height-sm, initial);
-      --seed-box-max-height: var(--seed-box-max-height-sm, initial);
     }
   }
 
@@ -322,9 +298,6 @@
 
     .seed-side-panel__body {
       --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
-      --seed-box-height: var(--seed-box-height-md, initial);
-      --seed-box-min-height: var(--seed-box-min-height-md, initial);
-      --seed-box-max-height: var(--seed-box-max-height-md, initial);
     }
   }
 
@@ -336,9 +309,6 @@
 
     .seed-side-panel__body {
       --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
-      --seed-box-height: var(--seed-box-height-lg, initial);
-      --seed-box-min-height: var(--seed-box-min-height-lg, initial);
-      --seed-box-max-height: var(--seed-box-max-height-lg, initial);
     }
   }
 
@@ -350,9 +320,6 @@
 
     .seed-side-panel__body {
       --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
-      --seed-box-height: var(--seed-box-height-xl, initial);
-      --seed-box-min-height: var(--seed-box-min-height-xl, initial);
-      --seed-box-max-height: var(--seed-box-max-height-xl, initial);
     }
   }
 }

package/recipes/slider-tick.css

@@ -2,7 +2,7 @@
     position: absolute;
     top: 50%;
     height: 100%;
-    background-color: var(--seed-color-fg-neutral-inverted);
+    background-color: var(--seed-color-fg-on-neutral-solid);
     transform: translate(-50%, -50%);
 }
 .seed-slider-tick[data-dir='ltr'] {

package/recipes/slider-tick.layered.css

@@ -1,6 +1,6 @@
 @layer seed-components {
   .seed-slider-tick {
-    background-color: var(--seed-color-fg-neutral-inverted);
+    background-color: var(--seed-color-fg-on-neutral-solid);
     height: 100%;
     position: absolute;
     top: 50%;

package/recipes/slider.css

@@ -73,7 +73,7 @@
     content: "";
     position: absolute;
     inset: 0;
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     border-radius: var(--seed-radius-full);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
@@ -111,11 +111,11 @@
     box-sizing: border-box;
     transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
     will-change: left, right;
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x1);
     border-radius: var(--seed-radius-r1_5);
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
@@ -197,7 +197,7 @@
 }
 .seed-slider__valueIndicatorArrowTip {
     display: block;
-    fill: var(--seed-color-bg-neutral-inverted);
+    fill: var(--seed-color-bg-neutral-solid);
     width: var(--seed-dimension-x2);
     height: var(--seed-dimension-x1_5);
 }

package/recipes/slider.layered.css

@@ -88,7 +88,7 @@
 
   .seed-slider__thumb:after {
     content: "";
-    background-color: var(--seed-color-bg-neutral-inverted);
+    background-color: var(--seed-color-bg-neutral-solid);
     border-radius: var(--seed-radius-full);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
@@ -130,11 +130,11 @@
     box-sizing: border-box;
     transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
     will-change: left, right;
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     padding-inline: var(--seed-dimension-x2);
     padding-block: var(--seed-dimension-x1);
     border-radius: var(--seed-radius-r1_5);
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
@@ -233,7 +233,7 @@
   }
 
   .seed-slider__valueIndicatorArrowTip {
-    fill: var(--seed-color-bg-neutral-inverted);
+    fill: var(--seed-color-bg-neutral-solid);
     width: var(--seed-dimension-x2);
     height: var(--seed-dimension-x1_5);
     display: block;

package/recipes/snackbar.css

@@ -4,7 +4,7 @@
     align-items: center;
     width: 100%;
     max-width: 464px;
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     border-radius: var(--seed-radius-r2);
     padding-inline: var(--seed-dimension-x2_5);
     padding-block: var(--seed-dimension-x2_5);
@@ -46,7 +46,7 @@
 }
 .seed-snackbar__message {
     margin: 0;
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-regular);

package/recipes/snackbar.layered.css

@@ -1,7 +1,7 @@
 @layer seed-components {
   .seed-snackbar__root {
     box-sizing: border-box;
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
     border-radius: var(--seed-radius-r2);
     width: 100%;
     max-width: 464px;
@@ -51,7 +51,7 @@
   }
 
   .seed-snackbar__message {
-    color: var(--seed-color-fg-neutral-inverted);
+    color: var(--seed-color-fg-on-neutral-solid);
     font-size: var(--seed-font-size-t4);
     line-height: var(--seed-line-height-t4);
     font-weight: var(--seed-font-weight-regular);

package/recipes/switchmark.css

@@ -27,13 +27,13 @@
     transform: scale(0.8);
 }
 .seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
 }
 .seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
     background: var(--seed-color-palette-gray-600);
 }
 .seed-switchmark__thumb--tone_neutral {
-    background: var(--seed-color-fg-neutral-inverted);
+    background: var(--seed-color-fg-on-neutral-solid);
 }
 .seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
     background: var(--seed-color-palette-static-black-alpha-700);

package/recipes/switchmark.layered.css

@@ -34,7 +34,7 @@
   }
 
   .seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
-    background: var(--seed-color-bg-neutral-inverted);
+    background: var(--seed-color-bg-neutral-solid);
   }
 
   .seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
@@ -42,7 +42,7 @@
   }
 
   .seed-switchmark__thumb--tone_neutral {
-    background: var(--seed-color-fg-neutral-inverted);
+    background: var(--seed-color-fg-on-neutral-solid);
   }
 
   .seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {

package/recipes/time-picker.css

@@ -1,13 +1,11 @@
 .seed-time-picker__root {
     width: 100%;
     height: 220px;
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
     --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
     --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
 }
-.seed-time-picker__scrollFog {}
-.seed-time-picker__columns {}
-.seed-time-picker__selectionIndicator {
-    border-radius: var(--seed-radius-r2);
+.seed-time-picker__root [data-wheel-picker-indicator] {
     background-color: var(--seed-color-bg-neutral-weak);
 }
 .seed-time-picker__periodColumn {
@@ -35,7 +33,6 @@
     --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
 }
 .seed-time-picker__item {
-    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
     padding-inline: var(--seed-dimension-x4);
     font-size: var(--seed-font-size-t10-static);
     line-height: var(--seed-line-height-t10-static);

package/recipes/time-picker.d.ts

@@ -8,7 +8,7 @@ declare type TimePickerVariantMap = {
 
 export declare type TimePickerVariantProps = Partial<TimePickerVariant>;
 
-export declare type TimePickerSlotName = "root" | "scrollFog" | "columns" | "selectionIndicator" | "periodColumn" | "hourColumn" | "minuteColumn" | "item";
+export declare type TimePickerSlotName = "root" | "periodColumn" | "hourColumn" | "minuteColumn" | "item";
 
 export declare const timePickerVariantMap: TimePickerVariantMap;
 

package/recipes/time-picker.layered.css

@@ -1,13 +1,13 @@
 @layer seed-components {
   .seed-time-picker__root {
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
     --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
     --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
     width: 100%;
     height: 220px;
   }
 
-  .seed-time-picker__selectionIndicator {
-    border-radius: var(--seed-radius-r2);
+  .seed-time-picker__root [data-wheel-picker-indicator] {
     background-color: var(--seed-color-bg-neutral-weak);
   }
 
@@ -43,7 +43,6 @@
   }
 
   .seed-time-picker__item {
-    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
     padding-inline: var(--seed-dimension-x4);
     font-size: var(--seed-font-size-t10-static);
     line-height: var(--seed-line-height-t10-static);

package/recipes/time-picker.layered.mjs

@@ -6,18 +6,6 @@ const timePickerSlotNames = [
     "root",
     "seed-time-picker__root"
   ],
-  [
-    "scrollFog",
-    "seed-time-picker__scrollFog"
-  ],
-  [
-    "columns",
-    "seed-time-picker__columns"
-  ],
-  [
-    "selectionIndicator",
-    "seed-time-picker__selectionIndicator"
-  ],
   [
     "periodColumn",
     "seed-time-picker__periodColumn"

package/recipes/time-picker.mjs

@@ -6,18 +6,6 @@ const timePickerSlotNames = [
     "root",
     "seed-time-picker__root"
   ],
-  [
-    "scrollFog",
-    "seed-time-picker__scrollFog"
-  ],
-  [
-    "columns",
-    "seed-time-picker__columns"
-  ],
-  [
-    "selectionIndicator",
-    "seed-time-picker__selectionIndicator"
-  ],
   [
     "periodColumn",
     "seed-time-picker__periodColumn"

package/recipes/toggle-button.css

@@ -33,9 +33,9 @@
 }
 .seed-toggle-button--variant_brandSolid {
     background: var(--seed-color-bg-brand-solid);
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-brand-solid);
     --track-color: var(--seed-color-palette-static-white-alpha-300);
-    --range-color: var(--seed-color-palette-static-white);
+    --range-color: var(--seed-color-fg-on-brand-solid);
 }
 @media (hover: hover) and (pointer: fine) {
     .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
@@ -78,8 +78,8 @@
     background: var(--seed-color-bg-neutral-weak-pressed);
 }
 .seed-toggle-button--variant_brandSolid {
-    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
-    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+    --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
+    --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
 }
 .seed-toggle-button--variant_neutralWeak {
     background: var(--seed-color-bg-neutral-weak);

package/recipes/toggle-button.layered.css

@@ -39,9 +39,9 @@
 
   .seed-toggle-button--variant_brandSolid {
     background: var(--seed-color-bg-brand-solid);
-    color: var(--seed-color-palette-static-white);
+    color: var(--seed-color-fg-on-brand-solid);
     --track-color: var(--seed-color-palette-static-white-alpha-300);
-    --range-color: var(--seed-color-palette-static-white);
+    --range-color: var(--seed-color-fg-on-brand-solid);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -93,8 +93,8 @@
   }
 
   .seed-toggle-button--variant_brandSolid {
-    --seed-prefix-icon-color: var(--seed-color-palette-static-white);
-    --seed-suffix-icon-color: var(--seed-color-palette-static-white);
+    --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
+    --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
   }
 
   .seed-toggle-button--variant_neutralWeak {

package/recipes/wheel-picker.css

@@ -1,7 +1,11 @@
 .seed-wheel-picker__root {
     position: relative;
-    height: var(--seed-wheel-picker-viewport-size);
+    width: 100%;
     overflow: hidden;
+    background-color: var(--seed-color-bg-layer-floating);
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+    --seed-wheel-picker-scroll-fog-size: min(calc(0.4 * 100%), var(--seed-wheel-picker-scroll-fog-max-height));
 }
 .seed-wheel-picker__scrollFog {
     position: relative;
@@ -11,11 +15,13 @@
 }
 .seed-wheel-picker__columns {
     display: flex;
+    width: 100%;
     height: 100%;
     justify-content: center;
 }
 .seed-wheel-picker__column {
     box-sizing: border-box;
+    flex: 0 0 auto;
     width: max-content;
     height: 100%;
     overflow-x: hidden;
@@ -30,9 +36,11 @@
     cursor: grab;
     padding-block: var(--seed-wheel-picker-center-offset);
 }
-.seed-wheel-picker__column[data-disabled] {
+.seed-wheel-picker__column:is(:disabled, [disabled], [data-disabled]) {
     overflow-y: hidden;
     cursor: default;
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
 }
 .seed-wheel-picker__column[data-readonly] {
     cursor: default;
@@ -50,7 +58,7 @@
 .seed-wheel-picker__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-wheel-picker-selection-indicator-corner-radius, 0);
+    border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
 }
 .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected=true], [data-selected]) {
     transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
@@ -77,6 +85,17 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+.seed-wheel-picker__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__selectionIndicator {
     position: absolute;
     z-index: 0;
@@ -84,5 +103,25 @@
     top: 50%;
     height: var(--seed-wheel-picker-item-size);
     transform: translateY(-50%);
+    border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
+    background-color: var(--seed-color-bg-neutral-weak);
     pointer-events: none;
+}
+.seed-wheel-picker__root--size_small {
+    height: var(--seed-wheel-picker-viewport-size, 180px);
+    --seed-wheel-picker-item-size: 36px;
+    --seed-wheel-picker-scroll-fog-max-height: 108px;
+}
+.seed-wheel-picker__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker__root--size_medium {
+    height: var(--seed-wheel-picker-viewport-size, 220px);
+    --seed-wheel-picker-item-size: 44px;
+    --seed-wheel-picker-scroll-fog-max-height: 132px;
+}
+.seed-wheel-picker__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
 }

package/recipes/wheel-picker.d.ts

@@ -1,5 +1,8 @@
 declare interface WheelPickerVariant {
-  
+  /**
+  * @default "medium"
+  */
+  size: "small" | "medium";
 }
 
 declare type WheelPickerVariantMap = {
@@ -8,7 +11,7 @@ declare type WheelPickerVariantMap = {
 
 export declare type WheelPickerVariantProps = Partial<WheelPickerVariant>;
 
-export declare type WheelPickerSlotName = "root" | "scrollFog" | "columns" | "column" | "item" | "selectionIndicator";
+export declare type WheelPickerSlotName = "root" | "scrollFog" | "columns" | "column" | "item" | "itemLabel" | "selectionIndicator";
 
 export declare const wheelPickerVariantMap: WheelPickerVariantMap;
 

package/recipes/wheel-picker.layered.css

@@ -1,6 +1,10 @@
 @layer seed-components {
   .seed-wheel-picker__root {
-    height: var(--seed-wheel-picker-viewport-size);
+    background-color: var(--seed-color-bg-layer-floating);
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
+    --seed-wheel-picker-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-scroll-fog-max-height));
+    width: 100%;
     position: relative;
     overflow: hidden;
   }
@@ -14,6 +18,7 @@
 
   .seed-wheel-picker__columns {
     justify-content: center;
+    width: 100%;
     height: 100%;
     display: flex;
   }
@@ -31,11 +36,14 @@
     height: 100%;
     padding-block: var(--seed-wheel-picker-center-offset);
     outline: none;
+    flex: none;
     overflow: hidden auto;
   }
 
-  .seed-wheel-picker__column[data-disabled] {
+  .seed-wheel-picker__column:is(:disabled, [disabled], [data-disabled]) {
     cursor: default;
+    --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
+    --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
     overflow-y: hidden;
   }
 
@@ -59,7 +67,7 @@
   .seed-wheel-picker__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-wheel-picker-selection-indicator-corner-radius, 0);
+    border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
   }
 
   .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
@@ -92,13 +100,49 @@
     background-clip: text;
   }
 
+  .seed-wheel-picker__itemLabel {
+    box-sizing: border-box;
+    height: 100%;
+    padding-inline: var(--seed-dimension-x4);
+    font-weight: var(--seed-font-weight-medium);
+    white-space: nowrap;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
   .seed-wheel-picker__selectionIndicator {
     z-index: 0;
     inset-inline: var(--seed-dimension-x4);
     height: var(--seed-wheel-picker-item-size);
+    border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
+    background-color: var(--seed-color-bg-neutral-weak);
     pointer-events: none;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
+
+  .seed-wheel-picker__root--size_small {
+    height: var(--seed-wheel-picker-viewport-size, 180px);
+    --seed-wheel-picker-item-size: 36px;
+    --seed-wheel-picker-scroll-fog-max-height: 108px;
+  }
+
+  .seed-wheel-picker__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+  }
+
+  .seed-wheel-picker__root--size_medium {
+    height: var(--seed-wheel-picker-viewport-size, 220px);
+    --seed-wheel-picker-item-size: 44px;
+    --seed-wheel-picker-scroll-fog-max-height: 132px;
+  }
+
+  .seed-wheel-picker__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+  }
 }