@seed-design/css 2.5.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/all.css +747 -96
  2. package/all.layered.css +747 -96
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +15 -0
  6. package/base.layered.css +15 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/breakpoints/index.mjs +5 -0
  10. package/package.json +6 -1
  11. package/recipes/accordion.css +1 -1
  12. package/recipes/accordion.layered.css +1 -1
  13. package/recipes/action-button.css +3 -13
  14. package/recipes/action-button.layered.css +4 -17
  15. package/recipes/attachment-input-item.css +15 -3
  16. package/recipes/attachment-input-item.layered.css +24 -8
  17. package/recipes/attachment-input-trigger.css +6 -1
  18. package/recipes/attachment-input-trigger.layered.css +10 -3
  19. package/recipes/bottom-sheet.css +7 -0
  20. package/recipes/bottom-sheet.layered.css +11 -2
  21. package/recipes/callout.css +43 -4
  22. package/recipes/callout.layered.css +57 -6
  23. package/recipes/checkmark.css +6 -1
  24. package/recipes/checkmark.layered.css +10 -3
  25. package/recipes/chip-tabs.css +6 -1
  26. package/recipes/chip-tabs.layered.css +10 -3
  27. package/recipes/chip.css +6 -3
  28. package/recipes/chip.layered.css +10 -5
  29. package/recipes/content-dialog.css +4 -1
  30. package/recipes/content-dialog.layered.css +5 -1
  31. package/recipes/contextual-floating-button.css +6 -1
  32. package/recipes/contextual-floating-button.layered.css +8 -1
  33. package/recipes/date-picker.css +49 -4
  34. package/recipes/date-picker.layered.css +53 -5
  35. package/recipes/floating-action-button.css +6 -1
  36. package/recipes/floating-action-button.layered.css +8 -1
  37. package/recipes/help-bubble.css +8 -2
  38. package/recipes/help-bubble.layered.css +12 -4
  39. package/recipes/image-frame-reaction-button.css +6 -0
  40. package/recipes/image-frame-reaction-button.layered.css +8 -0
  41. package/recipes/input-button.css +6 -1
  42. package/recipes/input-button.layered.css +10 -3
  43. package/recipes/list-item.css +6 -0
  44. package/recipes/list-item.layered.css +6 -0
  45. package/recipes/menu-sheet.css +7 -1
  46. package/recipes/menu-sheet.layered.css +9 -1
  47. package/recipes/menu.css +1 -1
  48. package/recipes/menu.layered.css +1 -1
  49. package/recipes/page-banner.css +58 -4
  50. package/recipes/page-banner.layered.css +79 -8
  51. package/recipes/pagination-button.css +68 -0
  52. package/recipes/pagination-button.d.ts +19 -0
  53. package/recipes/pagination-button.layered.css +80 -0
  54. package/recipes/pagination-button.layered.mjs +22 -0
  55. package/recipes/pagination-button.mjs +22 -0
  56. package/recipes/pagination-page-item.css +99 -0
  57. package/recipes/pagination-page-item.d.ts +19 -0
  58. package/recipes/pagination-page-item.layered.css +118 -0
  59. package/recipes/pagination-page-item.layered.mjs +22 -0
  60. package/recipes/pagination-page-item.mjs +22 -0
  61. package/recipes/pull-to-refresh.css +1 -1
  62. package/recipes/pull-to-refresh.layered.css +1 -1
  63. package/recipes/quantity-picker.css +8 -2
  64. package/recipes/quantity-picker.layered.css +10 -2
  65. package/recipes/radiomark.css +6 -1
  66. package/recipes/radiomark.layered.css +10 -3
  67. package/recipes/reaction-button.css +4 -1
  68. package/recipes/reaction-button.layered.css +5 -1
  69. package/recipes/select-box.css +3 -3
  70. package/recipes/select-box.layered.css +3 -3
  71. package/recipes/select.css +1 -1
  72. package/recipes/select.layered.css +1 -1
  73. package/recipes/side-panel.css +6 -1
  74. package/recipes/side-panel.layered.css +12 -5
  75. package/recipes/snackbar.css +7 -1
  76. package/recipes/snackbar.layered.css +9 -1
  77. package/recipes/switchmark.css +4 -1
  78. package/recipes/switchmark.layered.css +5 -1
  79. package/recipes/tabs.css +4 -1
  80. package/recipes/tabs.layered.css +5 -1
  81. package/recipes/toggle-button.css +4 -1
  82. package/recipes/toggle-button.layered.css +5 -1
  83. package/recipes/wheel-picker-public.css +121 -0
  84. package/recipes/wheel-picker-public.d.ts +24 -0
  85. package/recipes/wheel-picker-public.layered.css +140 -0
  86. package/recipes/wheel-picker-public.layered.mjs +63 -0
  87. package/recipes/wheel-picker-public.mjs +63 -0
  88. package/recipes/wheel-picker.css +1 -1
  89. package/recipes/wheel-picker.layered.css +1 -1
  90. package/scale-feedback/index.d.ts +3 -0
  91. package/scale-feedback/index.mjs +33 -0
  92. package/vars/color/stroke.d.ts +3 -3
  93. package/vars/component/accordion-item.d.ts +1 -1
  94. package/vars/component/accordion-item.mjs +1 -1
  95. package/vars/component/action-button.d.ts +1 -23
  96. package/vars/component/action-button.mjs +1 -23
  97. package/vars/component/bottom-sheet.d.ts +1 -1
  98. package/vars/component/bottom-sheet.mjs +1 -1
  99. package/vars/component/callout-close-button.d.ts +81 -0
  100. package/vars/component/callout-close-button.mjs +63 -0
  101. package/vars/component/callout.d.ts +1 -2
  102. package/vars/component/callout.mjs +1 -2
  103. package/vars/component/checkbox.d.ts +3 -0
  104. package/vars/component/help-bubble.d.ts +4 -1
  105. package/vars/component/help-bubble.mjs +3 -1
  106. package/vars/component/index.d.ts +6 -1
  107. package/vars/component/index.mjs +6 -1
  108. package/vars/component/list-item.d.ts +2 -6
  109. package/vars/component/list-item.mjs +2 -5
  110. package/vars/component/page-banner-close-button.d.ts +133 -0
  111. package/vars/component/page-banner-close-button.mjs +99 -0
  112. package/vars/component/page-banner.d.ts +0 -1
  113. package/vars/component/page-banner.mjs +0 -1
  114. package/vars/component/pagination-button.d.ts +33 -0
  115. package/vars/component/pagination-button.mjs +33 -0
  116. package/vars/component/pagination-page-item.d.ts +54 -0
  117. package/vars/component/pagination-page-item.mjs +54 -0
  118. package/vars/component/radio.d.ts +3 -0
  119. package/vars/component/select-box.d.ts +2 -2
  120. package/vars/component/select-box.mjs +2 -2
  121. package/vars/component/snackbar.d.ts +1 -1
  122. package/vars/component/snackbar.mjs +1 -1
  123. package/vars/component/switch.d.ts +3 -0
  124. package/vars/component/switchmark.d.ts +2 -0
  125. package/vars/component/wheel-picker.d.ts +72 -0
  126. package/vars/component/wheel-picker.mjs +72 -0
package/all.css CHANGED
@@ -23,6 +23,8 @@
23
23
  --seed-font-size-limit-max: 1.5;
24
24
  --seed-line-height-limit-min: .8;
25
25
  --seed-line-height-limit-max: 1.5;
26
+ --seed-feedback-scale: 1;
27
+ --seed-feedback-scale-transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
26
28
  }
27
29
 
28
30
  [data-seed-platform="ios"] {
@@ -380,6 +382,19 @@
380
382
  display: block;
381
383
  }
382
384
 
385
+ .seed-scale-feedback {
386
+ --seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
387
+ --seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
388
+ --seed-feedback-scale: var(--seed-dynamic-scale, 1);
389
+ scale: 1;
390
+ }
391
+
392
+ @media (prefers-reduced-motion: reduce) {
393
+ .seed-scale-feedback {
394
+ --seed-feedback-scale: 1;
395
+ }
396
+ }
397
+
383
398
  :root, [data-seed-color-mode="system"] {
384
399
  --lightningcss-light: initial;
385
400
  --lightningcss-dark: ;
@@ -1108,7 +1123,7 @@
1108
1123
  }
1109
1124
 
1110
1125
  .seed-accordion__item--variant_separated {
1111
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
1126
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
1112
1127
  border-radius: var(--seed-radius-r3);
1113
1128
  overflow: hidden;
1114
1129
  }
@@ -1328,9 +1343,12 @@
1328
1343
  cursor: not-allowed;
1329
1344
  }
1330
1345
 
1346
+ .seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1347
+ scale: var(--seed-feedback-scale);
1348
+ }
1349
+
1331
1350
  .seed-action-button {
1332
1351
  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);
1333
- scale: 1;
1334
1352
  }
1335
1353
 
1336
1354
  .seed-action-button--variant_brandSolid {
@@ -1598,10 +1616,6 @@
1598
1616
  --seed-icon-size: var(--seed-dimension-x3_5);
1599
1617
  }
1600
1618
 
1601
- .seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1602
- scale: var(--seed-scale-s95);
1603
- }
1604
-
1605
1619
  .seed-action-button--size_small {
1606
1620
  height: var(--seed-dimension-x9);
1607
1621
  border-radius: var(--seed-radius-r2);
@@ -1612,10 +1626,6 @@
1612
1626
  --seed-icon-size: var(--seed-dimension-x4);
1613
1627
  }
1614
1628
 
1615
- .seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1616
- scale: var(--seed-scale-s97);
1617
- }
1618
-
1619
1629
  .seed-action-button--size_medium {
1620
1630
  height: var(--seed-dimension-x10);
1621
1631
  border-radius: var(--seed-radius-r2);
@@ -1626,10 +1636,6 @@
1626
1636
  --seed-icon-size: 18px;
1627
1637
  }
1628
1638
 
1629
- .seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1630
- scale: var(--seed-scale-s97);
1631
- }
1632
-
1633
1639
  .seed-action-button--size_large {
1634
1640
  height: var(--seed-dimension-x13);
1635
1641
  border-radius: var(--seed-radius-r3);
@@ -1640,10 +1646,6 @@
1640
1646
  --seed-icon-size: 22px;
1641
1647
  }
1642
1648
 
1643
- .seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1644
- scale: var(--seed-scale-s98);
1645
- }
1646
-
1647
1649
  .seed-action-button--size_xsmall-layout_withText {
1648
1650
  gap: var(--seed-dimension-x1);
1649
1651
  --seed-box-padding-left: var(--seed-dimension-x3_5);
@@ -2856,6 +2858,7 @@
2856
2858
  background: var(--seed-color-bg-layer-floating);
2857
2859
  border-top-left-radius: var(--seed-radius-r6);
2858
2860
  border-top-right-radius: var(--seed-radius-r6);
2861
+ max-width: 480px;
2859
2862
  padding-bottom: var(--seed-safe-area-bottom);
2860
2863
  touch-action: none;
2861
2864
  will-change: transform;
@@ -2966,8 +2969,6 @@
2966
2969
  border-radius: var(--seed-radius-full);
2967
2970
  background: var(--seed-color-bg-neutral-weak);
2968
2971
  cursor: pointer;
2969
- --seed-icon-size: 14px;
2970
- --seed-icon-color: var(--seed-color-fg-neutral);
2971
2972
  border: none;
2972
2973
  justify-content: center;
2973
2974
  align-items: center;
@@ -2977,6 +2978,16 @@
2977
2978
  position: absolute;
2978
2979
  }
2979
2980
 
2981
+ .seed-bottom-sheet__closeButton:is(:active, [data-active]) {
2982
+ scale: var(--seed-feedback-scale);
2983
+ }
2984
+
2985
+ .seed-bottom-sheet__closeButton {
2986
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
2987
+ --seed-icon-size: 14px;
2988
+ --seed-icon-color: var(--seed-color-fg-neutral);
2989
+ }
2990
+
2980
2991
  .seed-bottom-sheet__closeButton:after {
2981
2992
  content: "";
2982
2993
  border-radius: var(--seed-radius-r1);
@@ -3126,7 +3137,14 @@
3126
3137
 
3127
3138
  .seed-callout__root:is(button, a) {
3128
3139
  cursor: pointer;
3129
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3140
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3141
+ }
3142
+
3143
+ .seed-callout__root:is(button, a):is(:active, [data-active]) {
3144
+ scale: var(--seed-feedback-scale);
3145
+ }
3146
+
3147
+ .seed-callout__root:is(button, a) {
3130
3148
  outline: var(--seed-dimension-x0_5) solid transparent;
3131
3149
  outline-offset: var(--seed-dimension-x0_5);
3132
3150
  }
@@ -3187,15 +3205,13 @@
3187
3205
  }
3188
3206
 
3189
3207
  .seed-callout__closeButton {
3208
+ background-color: var(--seed-color-bg-transparent);
3190
3209
  cursor: pointer;
3191
3210
  width: var(--seed-dimension-x10);
3192
3211
  height: var(--seed-dimension-x10);
3193
3212
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3194
- border-radius: var(--seed-radius-r2_5);
3195
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3196
- outline: var(--seed-dimension-x0_5) solid transparent;
3197
- outline-offset: var(--seed-dimension-x0_5);
3198
- background-color: #0000;
3213
+ border-radius: var(--seed-radius-r2);
3214
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
3199
3215
  border: none;
3200
3216
  flex-grow: 0;
3201
3217
  flex-shrink: 0;
@@ -3205,11 +3221,33 @@
3205
3221
  display: flex;
3206
3222
  }
3207
3223
 
3224
+ .seed-callout__closeButton:is(:active, [data-active]) {
3225
+ scale: var(--seed-feedback-scale);
3226
+ }
3227
+
3228
+ .seed-callout__closeButton {
3229
+ 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);
3230
+ outline: var(--seed-dimension-x0_5) solid transparent;
3231
+ outline-offset: var(--seed-dimension-x0_5);
3232
+ }
3233
+
3208
3234
  .seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
3209
3235
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3210
3236
  outline-offset: var(--seed-dimension-x0_5);
3211
3237
  }
3212
3238
 
3239
+ @media (hover: hover) and (pointer: fine) {
3240
+ .seed-callout__closeButton:is(:hover, [data-hover]) {
3241
+ background-color: var(--seed-color-bg-transparent-pressed);
3242
+ }
3243
+ }
3244
+
3245
+ @media not all and (hover: hover) and (pointer: fine) {
3246
+ .seed-callout__closeButton:is(:active, [data-active]) {
3247
+ background-color: var(--seed-color-bg-transparent-pressed);
3248
+ }
3249
+ }
3250
+
3213
3251
  .seed-callout__root--tone_neutral {
3214
3252
  background-color: var(--seed-color-bg-neutral-weak);
3215
3253
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -3232,6 +3270,10 @@
3232
3270
  color: var(--seed-color-fg-neutral);
3233
3271
  }
3234
3272
 
3273
+ .seed-callout__closeButton--tone_neutral {
3274
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3275
+ }
3276
+
3235
3277
  .seed-callout__root--tone_informative {
3236
3278
  background-color: var(--seed-color-bg-informative-weak);
3237
3279
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -3254,6 +3296,10 @@
3254
3296
  color: var(--seed-color-fg-informative-contrast);
3255
3297
  }
3256
3298
 
3299
+ .seed-callout__closeButton--tone_informative {
3300
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
3301
+ }
3302
+
3257
3303
  .seed-callout__root--tone_positive {
3258
3304
  background-color: var(--seed-color-bg-positive-weak);
3259
3305
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -3276,6 +3322,10 @@
3276
3322
  color: var(--seed-color-fg-positive-contrast);
3277
3323
  }
3278
3324
 
3325
+ .seed-callout__closeButton--tone_positive {
3326
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3327
+ }
3328
+
3279
3329
  .seed-callout__root--tone_warning {
3280
3330
  background-color: var(--seed-color-bg-warning-weak);
3281
3331
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -3298,6 +3348,10 @@
3298
3348
  color: var(--seed-color-fg-warning-contrast);
3299
3349
  }
3300
3350
 
3351
+ .seed-callout__closeButton--tone_warning {
3352
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3353
+ }
3354
+
3301
3355
  .seed-callout__root--tone_critical {
3302
3356
  background-color: var(--seed-color-bg-critical-weak);
3303
3357
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -3320,6 +3374,10 @@
3320
3374
  color: var(--seed-color-fg-critical-contrast);
3321
3375
  }
3322
3376
 
3377
+ .seed-callout__closeButton--tone_critical {
3378
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3379
+ }
3380
+
3323
3381
  .seed-callout__root--tone_magic {
3324
3382
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
3325
3383
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -3342,6 +3400,10 @@
3342
3400
  color: var(--seed-color-fg-neutral);
3343
3401
  }
3344
3402
 
3403
+ .seed-callout__closeButton--tone_magic {
3404
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3405
+ }
3406
+
3345
3407
  .seed-checkbox__root {
3346
3408
  vertical-align: top;
3347
3409
  isolation: isolate;
@@ -3404,13 +3466,20 @@
3404
3466
  .seed-checkmark__root {
3405
3467
  box-sizing: border-box;
3406
3468
  margin-top: var(--checkmark-margin-top, 0);
3407
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3408
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
3409
- outline-offset: var(--seed-dimension-x0_5);
3410
3469
  flex: none;
3411
3470
  position: relative;
3412
3471
  }
3413
3472
 
3473
+ .seed-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3474
+ scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
3475
+ }
3476
+
3477
+ .seed-checkmark__root {
3478
+ 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);
3479
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
3480
+ outline-offset: var(--seed-dimension-x0_5);
3481
+ }
3482
+
3414
3483
  .seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
3415
3484
  outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
3416
3485
  outline-offset: var(--seed-dimension-x0_5);
@@ -3596,21 +3665,26 @@
3596
3665
  -webkit-font-smoothing: antialiased;
3597
3666
  -moz-osx-font-smoothing: grayscale;
3598
3667
  border-radius: var(--seed-radius-full);
3599
- transition-duration: var(--seed-duration-color-transition);
3600
- transition-timing-function: var(--seed-timing-function-easing);
3601
- outline: var(--seed-dimension-x0_5) solid transparent;
3602
- outline-offset: var(--seed-dimension-x0_5);
3603
3668
  border: none;
3604
3669
  flex-shrink: 0;
3605
3670
  justify-content: center;
3606
3671
  align-items: center;
3607
3672
  font-family: inherit;
3608
3673
  line-height: 1;
3609
- transition-property: background-color, color, border-color, box-shadow, outline-color;
3610
3674
  display: inline-flex;
3611
3675
  position: relative;
3612
3676
  }
3613
3677
 
3678
+ .seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3679
+ scale: var(--seed-feedback-scale);
3680
+ }
3681
+
3682
+ .seed-chip__root {
3683
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-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-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
3684
+ outline: var(--seed-dimension-x0_5) solid transparent;
3685
+ outline-offset: var(--seed-dimension-x0_5);
3686
+ }
3687
+
3614
3688
  .seed-chip__root:is(:focus-visible, [data-focus-visible]) {
3615
3689
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3616
3690
  outline-offset: var(--seed-dimension-x0_5);
@@ -3918,9 +3992,6 @@
3918
3992
  border-radius: var(--seed-radius-full);
3919
3993
  font-family: inherit;
3920
3994
  font-weight: var(--seed-font-weight-medium);
3921
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3922
- outline: var(--seed-dimension-x0_5) solid transparent;
3923
- outline-offset: var(--seed-dimension-x0_5);
3924
3995
  border: none;
3925
3996
  flex-shrink: 0;
3926
3997
  justify-content: center;
@@ -3928,6 +3999,16 @@
3928
3999
  display: flex;
3929
4000
  }
3930
4001
 
4002
+ .seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4003
+ scale: var(--seed-feedback-scale);
4004
+ }
4005
+
4006
+ .seed-chip-tabs__trigger {
4007
+ 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);
4008
+ outline: var(--seed-dimension-x0_5) solid transparent;
4009
+ outline-offset: var(--seed-dimension-x0_5);
4010
+ }
4011
+
3931
4012
  .seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
3932
4013
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3933
4014
  outline-offset: var(--seed-dimension-x0_5);
@@ -4264,7 +4345,7 @@
4264
4345
  background: var(--seed-color-bg-transparent);
4265
4346
  border-radius: var(--seed-radius-r3);
4266
4347
  cursor: pointer;
4267
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4348
+ 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);
4268
4349
  --seed-icon-size: 22px;
4269
4350
  --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4270
4351
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -4283,6 +4364,10 @@
4283
4364
  outline-offset: var(--seed-dimension-x0_5);
4284
4365
  }
4285
4366
 
4367
+ .seed-content-dialog__closeButton:is(:active, [data-active]) {
4368
+ scale: var(--seed-feedback-scale);
4369
+ }
4370
+
4286
4371
  @media (hover: hover) and (pointer: fine) {
4287
4372
  .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
4288
4373
  background: var(--seed-color-bg-transparent-pressed);
@@ -4375,7 +4460,14 @@
4375
4460
  --seed-icon-size: 22px;
4376
4461
  --size: 16px;
4377
4462
  --thickness: 2px;
4378
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4463
+ }
4464
+
4465
+ .seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4466
+ scale: var(--seed-feedback-scale);
4467
+ }
4468
+
4469
+ .seed-contextual-floating-button {
4470
+ 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);
4379
4471
  }
4380
4472
 
4381
4473
  .seed-contextual-floating-button--variant_solid {
@@ -4556,8 +4648,29 @@
4556
4648
 
4557
4649
  .seed-date-picker__root {
4558
4650
  box-sizing: border-box;
4651
+ --seed-box-height-base: auto;
4652
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
4653
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
4654
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
4655
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
4656
+ --seed-box-height: var(--seed-box-height-base, initial);
4657
+ --seed-box-min-height-base: auto;
4658
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
4659
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
4660
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
4661
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
4662
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
4663
+ --seed-box-max-height-base: none;
4664
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
4665
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
4666
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
4667
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
4668
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
4559
4669
  width: 100%;
4560
4670
  min-width: 0;
4671
+ height: var(--seed-box-height);
4672
+ min-height: var(--seed-box-min-height);
4673
+ max-height: var(--seed-box-max-height);
4561
4674
  color: var(--seed-color-fg-neutral-muted);
4562
4675
  background-color: var(--seed-color-bg-layer-floating);
4563
4676
  position: relative;
@@ -5004,11 +5117,6 @@
5004
5117
  grid-template-columns: repeat(2, minmax(0, 1fr));
5005
5118
  }
5006
5119
 
5007
- .seed-date-picker__root--visibleRange_continuous {
5008
- height: 100%;
5009
- min-height: 0;
5010
- }
5011
-
5012
5120
  .seed-date-picker__weekdayRow--visibleRange_continuous {
5013
5121
  position: sticky;
5014
5122
  top: 0;
@@ -5594,11 +5702,12 @@
5594
5702
  align-items: center;
5595
5703
  gap: var(--seed-dimension-x2_5);
5596
5704
  border-radius: var(--seed-radius-r3);
5705
+ height: 80px;
5706
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5597
5707
  --remove-button-mask-size: var(--seed-dimension-x6);
5598
5708
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5599
5709
  outline: var(--seed-dimension-x0_5) solid transparent;
5600
5710
  outline-offset: var(--seed-dimension-x0_5);
5601
- height: 80px;
5602
5711
  display: flex;
5603
5712
  position: relative;
5604
5713
  }
@@ -5636,6 +5745,7 @@
5636
5745
  }
5637
5746
 
5638
5747
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5748
+ scale: var(--seed-feedback-scale);
5639
5749
  --remove-button-mask-size: 0px;
5640
5750
  --remove-button-mask-offset: 0px;
5641
5751
  }
@@ -5730,9 +5840,6 @@
5730
5840
  font: inherit;
5731
5841
  cursor: pointer;
5732
5842
  border-radius: inherit;
5733
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5734
- outline: var(--seed-dimension-x0_5) solid transparent;
5735
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5736
5843
  background: none;
5737
5844
  border: none;
5738
5845
  flex-direction: column;
@@ -5742,6 +5849,16 @@
5742
5849
  display: flex;
5743
5850
  }
5744
5851
 
5852
+ .seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5853
+ scale: var(--seed-feedback-scale);
5854
+ }
5855
+
5856
+ .seed-attachment-input-item__actionButton {
5857
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5858
+ outline: var(--seed-dimension-x0_5) solid transparent;
5859
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5860
+ }
5861
+
5745
5862
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5746
5863
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5747
5864
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5763,9 +5880,6 @@
5763
5880
  background-color: var(--seed-color-bg-layer-default);
5764
5881
  border-radius: var(--seed-radius-full);
5765
5882
  cursor: pointer;
5766
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5767
- outline: var(--seed-dimension-x0_5) solid transparent;
5768
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5769
5883
  border: none;
5770
5884
  justify-content: center;
5771
5885
  align-items: center;
@@ -5774,6 +5888,16 @@
5774
5888
  position: absolute;
5775
5889
  }
5776
5890
 
5891
+ .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5892
+ scale: var(--seed-feedback-scale);
5893
+ }
5894
+
5895
+ .seed-attachment-input-item__removeButton {
5896
+ transition: background-color .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5897
+ outline: var(--seed-dimension-x0_5) solid transparent;
5898
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5899
+ }
5900
+
5777
5901
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
5778
5902
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5779
5903
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5838,7 +5962,7 @@
5838
5962
 
5839
5963
  .seed-attachment-input-item__root--type_image {
5840
5964
  width: 80px;
5841
- transition: opacity .2s;
5965
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5842
5966
  }
5843
5967
 
5844
5968
  .seed-attachment-input-item__root--type_image:before {
@@ -5896,9 +6020,6 @@
5896
6020
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
5897
6021
  cursor: pointer;
5898
6022
  border-radius: var(--seed-radius-r3);
5899
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5900
- outline: var(--seed-dimension-x0_5) solid transparent;
5901
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5902
6023
  background-color: #0000;
5903
6024
  border: none;
5904
6025
  flex-direction: column;
@@ -5907,6 +6028,16 @@
5907
6028
  display: flex;
5908
6029
  }
5909
6030
 
6031
+ .seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6032
+ scale: var(--seed-feedback-scale);
6033
+ }
6034
+
6035
+ .seed-attachment-input-trigger__root {
6036
+ transition: background-color .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6037
+ outline: var(--seed-dimension-x0_5) solid transparent;
6038
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6039
+ }
6040
+
5910
6041
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
5911
6042
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5912
6043
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6003,11 +6134,18 @@
6003
6134
  font-size: var(--seed-font-size-t5);
6004
6135
  line-height: var(--seed-line-height-t5);
6005
6136
  font-weight: var(--seed-font-weight-bold);
6006
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6007
6137
  position: relative;
6008
6138
  overflow: hidden;
6009
6139
  }
6010
6140
 
6141
+ .seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6142
+ scale: var(--seed-feedback-scale);
6143
+ }
6144
+
6145
+ .seed-floating-action-button__root {
6146
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) 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);
6147
+ }
6148
+
6011
6149
  @media (hover: hover) and (pointer: fine) {
6012
6150
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6013
6151
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6127,11 +6265,12 @@
6127
6265
  }
6128
6266
 
6129
6267
  .seed-help-bubble__content {
6268
+ box-sizing: border-box;
6130
6269
  background: var(--seed-color-bg-neutral-inverted);
6131
6270
  padding-inline: var(--seed-dimension-x3);
6132
6271
  padding-block: var(--seed-dimension-x2_5);
6133
6272
  border-radius: var(--seed-radius-r3);
6134
- --seed-box-max-width-base: none;
6273
+ --seed-box-max-width-base: 280px;
6135
6274
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6136
6275
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6137
6276
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6218,9 +6357,6 @@
6218
6357
  --seed-icon-size: var(--seed-dimension-x3_5);
6219
6358
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6220
6359
  border-radius: var(--seed-radius-r3);
6221
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6222
- outline: var(--seed-dimension-x0_5) solid transparent;
6223
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6224
6360
  background: none;
6225
6361
  border: none;
6226
6362
  justify-content: center;
@@ -6228,6 +6364,16 @@
6228
6364
  display: flex;
6229
6365
  }
6230
6366
 
6367
+ .seed-help-bubble__closeButton:is(:active, [data-active]) {
6368
+ scale: var(--seed-feedback-scale);
6369
+ }
6370
+
6371
+ .seed-help-bubble__closeButton {
6372
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6373
+ outline: var(--seed-dimension-x0_5) solid transparent;
6374
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6375
+ }
6376
+
6231
6377
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6232
6378
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6233
6379
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6334,6 +6480,14 @@
6334
6480
  position: relative;
6335
6481
  }
6336
6482
 
6483
+ .seed-image-frame-reaction-button__root:is(:active, [data-active]) {
6484
+ scale: var(--seed-feedback-scale);
6485
+ }
6486
+
6487
+ .seed-image-frame-reaction-button__root {
6488
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6489
+ }
6490
+
6337
6491
  .seed-image-frame-reaction-button__root:before {
6338
6492
  content: "";
6339
6493
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6680,14 +6834,21 @@
6680
6834
  .seed-input-button__clearButton {
6681
6835
  cursor: pointer;
6682
6836
  border-radius: var(--seed-radius-full);
6683
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6684
- outline: var(--seed-dimension-x0_5) solid transparent;
6685
- outline-offset: var(--seed-dimension-x0_5);
6686
6837
  background-color: #0000;
6687
6838
  border: none;
6688
6839
  padding: 0;
6689
6840
  }
6690
6841
 
6842
+ .seed-input-button__clearButton:is(:active, [data-active]) {
6843
+ scale: var(--seed-feedback-scale);
6844
+ }
6845
+
6846
+ .seed-input-button__clearButton {
6847
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6848
+ outline: var(--seed-dimension-x0_5) solid transparent;
6849
+ outline-offset: var(--seed-dimension-x0_5);
6850
+ }
6851
+
6691
6852
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6692
6853
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6693
6854
  outline-offset: var(--seed-dimension-x0_5);
@@ -6989,6 +7150,9 @@
6989
7150
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
6990
7151
  padding-right: var(--seed-box-padding-right);
6991
7152
  --seed-focus-ring: none;
7153
+ --seed-checkmark-feedback-scale: 1;
7154
+ --seed-radiomark-feedback-scale: 1;
7155
+ --seed-switchmark-feedback-scale: 1;
6992
7156
  --seed-icon-size: 22px;
6993
7157
  --seed-icon-color: var(--seed-color-fg-neutral);
6994
7158
  flex-shrink: 0;
@@ -7012,6 +7176,9 @@
7012
7176
  align-items: center;
7013
7177
  gap: var(--seed-box-gap);
7014
7178
  --seed-focus-ring: none;
7179
+ --seed-checkmark-feedback-scale: 1;
7180
+ --seed-radiomark-feedback-scale: 1;
7181
+ --seed-switchmark-feedback-scale: 1;
7015
7182
  font-size: var(--seed-font-size-t5);
7016
7183
  line-height: var(--seed-line-height-t5);
7017
7184
  font-weight: var(--seed-font-weight-regular);
@@ -7337,7 +7504,7 @@
7337
7504
  }
7338
7505
 
7339
7506
  .seed-menu__scrollArea {
7340
- max-height: min(480px, var(--seed-menu-available-height, 480px));
7507
+ max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
7341
7508
  box-sizing: border-box;
7342
7509
  padding-block: var(--seed-dimension-x2);
7343
7510
  gap: var(--seed-dimension-x2);
@@ -7628,6 +7795,7 @@
7628
7795
  word-break: break-all;
7629
7796
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7630
7797
  background: var(--seed-color-bg-layer-floating);
7798
+ max-width: 480px;
7631
7799
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7632
7800
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7633
7801
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7718,13 +7886,20 @@
7718
7886
  font-size: var(--seed-font-size-t5);
7719
7887
  line-height: var(--seed-line-height-t5);
7720
7888
  font-weight: var(--seed-font-weight-medium);
7721
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7722
7889
  border: none;
7723
7890
  justify-content: center;
7724
7891
  align-items: center;
7725
7892
  display: flex;
7726
7893
  }
7727
7894
 
7895
+ .seed-menu-sheet__closeButton:is(:active, [data-active]) {
7896
+ scale: var(--seed-feedback-scale);
7897
+ }
7898
+
7899
+ .seed-menu-sheet__closeButton {
7900
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7901
+ }
7902
+
7728
7903
  @media (hover: hover) and (pointer: fine) {
7729
7904
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7730
7905
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8028,15 +8203,22 @@
8028
8203
  line-height: var(--seed-line-height-t3);
8029
8204
  font-weight: var(--seed-font-weight-bold);
8030
8205
  border-radius: var(--seed-radius-r1);
8031
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8032
- outline: var(--seed-dimension-x0_5) solid transparent;
8033
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8034
8206
  background-color: #0000;
8035
8207
  border: none;
8036
8208
  align-items: center;
8037
8209
  display: flex;
8038
8210
  }
8039
8211
 
8212
+ .seed-page-banner__button:is(:active, [data-active]) {
8213
+ scale: var(--seed-feedback-scale);
8214
+ }
8215
+
8216
+ .seed-page-banner__button {
8217
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8218
+ outline: var(--seed-dimension-x0_5) solid transparent;
8219
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8220
+ }
8221
+
8040
8222
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8041
8223
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8042
8224
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8048,12 +8230,10 @@
8048
8230
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8049
8231
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8050
8232
  --seed-suffix-icon-margin-left: initial;
8233
+ background-color: var(--seed-color-bg-transparent);
8051
8234
  cursor: pointer;
8052
- border-radius: var(--seed-radius-r1);
8053
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8054
- outline: var(--seed-dimension-x0_5) solid transparent;
8055
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8056
- background-color: #0000;
8235
+ border-radius: var(--seed-radius-r2);
8236
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8057
8237
  border: none;
8058
8238
  flex-grow: 0;
8059
8239
  flex-shrink: 0;
@@ -8064,11 +8244,33 @@
8064
8244
  display: flex;
8065
8245
  }
8066
8246
 
8247
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8248
+ scale: var(--seed-feedback-scale);
8249
+ }
8250
+
8251
+ .seed-page-banner__closeButton {
8252
+ 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);
8253
+ outline: var(--seed-dimension-x0_5) solid transparent;
8254
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8255
+ }
8256
+
8067
8257
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8068
8258
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8069
8259
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8070
8260
  }
8071
8261
 
8262
+ @media (hover: hover) and (pointer: fine) {
8263
+ .seed-page-banner__closeButton:is(:hover, [data-hover]) {
8264
+ background-color: var(--seed-color-bg-transparent-pressed);
8265
+ }
8266
+ }
8267
+
8268
+ @media not all and (hover: hover) and (pointer: fine) {
8269
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8270
+ background-color: var(--seed-color-bg-transparent-pressed);
8271
+ }
8272
+ }
8273
+
8072
8274
  .seed-page-banner__root--tone_neutral-variant_weak {
8073
8275
  background-color: var(--seed-color-bg-neutral-weak);
8074
8276
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8091,8 +8293,12 @@
8091
8293
  color: var(--seed-color-fg-neutral);
8092
8294
  }
8093
8295
 
8094
- .seed-page-banner__root--tone_neutral-variant_solid {
8095
- background-color: var(--seed-color-bg-neutral-inverted);
8296
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8297
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8298
+ }
8299
+
8300
+ .seed-page-banner__root--tone_neutral-variant_solid {
8301
+ background-color: var(--seed-color-bg-neutral-inverted);
8096
8302
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
8097
8303
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8098
8304
  }
@@ -8113,6 +8319,10 @@
8113
8319
  color: var(--seed-color-fg-neutral-inverted);
8114
8320
  }
8115
8321
 
8322
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8323
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8324
+ }
8325
+
8116
8326
  .seed-page-banner__root--tone_informative-variant_weak {
8117
8327
  background-color: var(--seed-color-bg-informative-weak);
8118
8328
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8135,6 +8345,10 @@
8135
8345
  color: var(--seed-color-fg-informative-contrast);
8136
8346
  }
8137
8347
 
8348
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8349
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8350
+ }
8351
+
8138
8352
  .seed-page-banner__root--tone_informative-variant_solid {
8139
8353
  background-color: var(--seed-color-bg-informative-solid);
8140
8354
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8157,6 +8371,10 @@
8157
8371
  color: var(--seed-color-palette-static-white);
8158
8372
  }
8159
8373
 
8374
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8375
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8376
+ }
8377
+
8160
8378
  .seed-page-banner__root--tone_positive-variant_weak {
8161
8379
  background-color: var(--seed-color-bg-positive-weak);
8162
8380
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8179,6 +8397,10 @@
8179
8397
  color: var(--seed-color-fg-positive-contrast);
8180
8398
  }
8181
8399
 
8400
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8401
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8402
+ }
8403
+
8182
8404
  .seed-page-banner__root--tone_positive-variant_solid {
8183
8405
  background-color: var(--seed-color-bg-positive-solid);
8184
8406
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8201,6 +8423,10 @@
8201
8423
  color: var(--seed-color-palette-static-white);
8202
8424
  }
8203
8425
 
8426
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8427
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8428
+ }
8429
+
8204
8430
  .seed-page-banner__root--tone_warning-variant_weak {
8205
8431
  background-color: var(--seed-color-bg-warning-weak);
8206
8432
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8223,6 +8449,10 @@
8223
8449
  color: var(--seed-color-fg-warning-contrast);
8224
8450
  }
8225
8451
 
8452
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8453
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8454
+ }
8455
+
8226
8456
  .seed-page-banner__root--tone_warning-variant_solid {
8227
8457
  background-color: var(--seed-color-bg-warning-solid);
8228
8458
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8245,6 +8475,10 @@
8245
8475
  color: var(--seed-color-palette-static-black-alpha-900);
8246
8476
  }
8247
8477
 
8478
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8479
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8480
+ }
8481
+
8248
8482
  .seed-page-banner__root--tone_critical-variant_weak {
8249
8483
  background-color: var(--seed-color-bg-critical-weak);
8250
8484
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8267,6 +8501,10 @@
8267
8501
  color: var(--seed-color-fg-critical-contrast);
8268
8502
  }
8269
8503
 
8504
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8505
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8506
+ }
8507
+
8270
8508
  .seed-page-banner__root--tone_critical-variant_solid {
8271
8509
  background-color: var(--seed-color-bg-critical-solid);
8272
8510
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8289,6 +8527,10 @@
8289
8527
  color: var(--seed-color-palette-static-white);
8290
8528
  }
8291
8529
 
8530
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8531
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8532
+ }
8533
+
8292
8534
  .seed-page-banner__root--tone_magic-variant_weak {
8293
8535
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8294
8536
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8311,6 +8553,206 @@
8311
8553
  color: var(--seed-color-fg-neutral);
8312
8554
  }
8313
8555
 
8556
+ .seed-page-banner__closeButton--tone_magic-variant_weak {
8557
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8558
+ }
8559
+
8560
+ .seed-pagination-button {
8561
+ box-sizing: border-box;
8562
+ cursor: pointer;
8563
+ text-transform: none;
8564
+ white-space: nowrap;
8565
+ vertical-align: middle;
8566
+ -webkit-font-smoothing: antialiased;
8567
+ -moz-osx-font-smoothing: grayscale;
8568
+ width: var(--seed-dimension-x10);
8569
+ height: var(--seed-dimension-x10);
8570
+ border-radius: var(--seed-radius-r2);
8571
+ isolation: isolate;
8572
+ background: none;
8573
+ border: none;
8574
+ flex-shrink: 0;
8575
+ justify-content: center;
8576
+ align-items: center;
8577
+ padding: 0;
8578
+ font-family: inherit;
8579
+ text-decoration: none;
8580
+ display: inline-flex;
8581
+ position: relative;
8582
+ }
8583
+
8584
+ .seed-pagination-button:before {
8585
+ content: "";
8586
+ z-index: -1;
8587
+ border-radius: inherit;
8588
+ background-color: var(--seed-color-bg-transparent);
8589
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8590
+ position: absolute;
8591
+ inset: 0;
8592
+ }
8593
+
8594
+ .seed-pagination-button {
8595
+ --seed-icon-size: var(--seed-dimension-x4);
8596
+ --seed-icon-color: var(--seed-color-fg-neutral);
8597
+ outline: var(--seed-dimension-x0_5) solid transparent;
8598
+ outline-offset: var(--seed-dimension-x0_5);
8599
+ }
8600
+
8601
+ .seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
8602
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8603
+ outline-offset: var(--seed-dimension-x0_5);
8604
+ }
8605
+
8606
+ .seed-pagination-button {
8607
+ scale: 1;
8608
+ }
8609
+
8610
+ @media (hover: hover) and (pointer: fine) {
8611
+ .seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8612
+ background-color: var(--seed-color-bg-transparent-pressed);
8613
+ }
8614
+ }
8615
+
8616
+ @media not all and (hover: hover) and (pointer: fine) {
8617
+ .seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8618
+ background-color: var(--seed-color-bg-transparent-pressed);
8619
+ }
8620
+ }
8621
+
8622
+ .seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8623
+ scale: var(--seed-scale-s97);
8624
+ }
8625
+
8626
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
8627
+ cursor: not-allowed;
8628
+ --seed-icon-color: var(--seed-color-fg-disabled);
8629
+ }
8630
+
8631
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
8632
+ background-color: var(--seed-color-bg-transparent);
8633
+ }
8634
+
8635
+ .seed-pagination-button {
8636
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8637
+ }
8638
+
8639
+ .seed-pagination-page-item {
8640
+ box-sizing: border-box;
8641
+ cursor: pointer;
8642
+ text-transform: none;
8643
+ white-space: nowrap;
8644
+ vertical-align: middle;
8645
+ -webkit-font-smoothing: antialiased;
8646
+ -moz-osx-font-smoothing: grayscale;
8647
+ width: var(--seed-dimension-x10);
8648
+ height: var(--seed-dimension-x10);
8649
+ border-radius: var(--seed-radius-r2);
8650
+ isolation: isolate;
8651
+ color: var(--seed-color-fg-neutral);
8652
+ font-family: inherit;
8653
+ font-size: var(--seed-font-size-t4);
8654
+ line-height: var(--seed-line-height-t4);
8655
+ font-weight: var(--seed-font-weight-bold);
8656
+ background: none;
8657
+ border: none;
8658
+ flex-shrink: 0;
8659
+ justify-content: center;
8660
+ align-items: center;
8661
+ padding: 0;
8662
+ text-decoration: none;
8663
+ display: inline-flex;
8664
+ position: relative;
8665
+ }
8666
+
8667
+ .seed-pagination-page-item:before {
8668
+ content: "";
8669
+ z-index: -1;
8670
+ border-radius: inherit;
8671
+ background-color: var(--seed-color-bg-transparent);
8672
+ position: absolute;
8673
+ inset: 0;
8674
+ }
8675
+
8676
+ .seed-pagination-page-item > [data-pagination-page-item-label] {
8677
+ text-overflow: ellipsis;
8678
+ white-space: nowrap;
8679
+ min-width: 0;
8680
+ max-width: 100%;
8681
+ display: block;
8682
+ overflow: hidden;
8683
+ }
8684
+
8685
+ .seed-pagination-page-item {
8686
+ outline: var(--seed-dimension-x0_5) solid transparent;
8687
+ outline-offset: var(--seed-dimension-x0_5);
8688
+ }
8689
+
8690
+ .seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
8691
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8692
+ outline-offset: var(--seed-dimension-x0_5);
8693
+ }
8694
+
8695
+ .seed-pagination-page-item {
8696
+ scale: 1;
8697
+ }
8698
+
8699
+ @media (hover: hover) and (pointer: fine) {
8700
+ .seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8701
+ background-color: var(--seed-color-bg-transparent-pressed);
8702
+ }
8703
+ }
8704
+
8705
+ @media not all and (hover: hover) and (pointer: fine) {
8706
+ .seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8707
+ background-color: var(--seed-color-bg-transparent-pressed);
8708
+ }
8709
+ }
8710
+
8711
+ .seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8712
+ scale: var(--seed-scale-s97);
8713
+ }
8714
+
8715
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8716
+ color: var(--seed-color-fg-neutral-inverted);
8717
+ }
8718
+
8719
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8720
+ background-color: var(--seed-color-bg-neutral-inverted);
8721
+ }
8722
+
8723
+ @media (hover: hover) and (pointer: fine) {
8724
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8725
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8726
+ }
8727
+ }
8728
+
8729
+ @media not all and (hover: hover) and (pointer: fine) {
8730
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8731
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8732
+ }
8733
+ }
8734
+
8735
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8736
+ cursor: not-allowed;
8737
+ color: var(--seed-color-fg-disabled);
8738
+ }
8739
+
8740
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8741
+ background-color: var(--seed-color-bg-transparent);
8742
+ }
8743
+
8744
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8745
+ color: var(--seed-color-fg-disabled);
8746
+ }
8747
+
8748
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8749
+ background-color: var(--seed-color-bg-disabled);
8750
+ }
8751
+
8752
+ .seed-pagination-page-item {
8753
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8754
+ }
8755
+
8314
8756
  .seed-progress-circle__root {
8315
8757
  box-sizing: border-box;
8316
8758
  display: inline-flex;
@@ -8363,7 +8805,7 @@
8363
8805
  }
8364
8806
 
8365
8807
  .seed-pull-to-refresh__root {
8366
- --ptr-size: 44px;
8808
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8367
8809
  --ptr-transition-duration: var(--seed-duration-d6);
8368
8810
  height: 100%;
8369
8811
  }
@@ -8397,7 +8839,7 @@
8397
8839
  box-sizing: border-box;
8398
8840
  cursor: pointer;
8399
8841
  background-color: var(--seed-color-bg-transparent);
8400
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8842
+ 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);
8401
8843
  outline: var(--seed-dimension-x0_5) solid transparent;
8402
8844
  outline-offset: var(--seed-dimension-x0_5);
8403
8845
  border: none;
@@ -8413,6 +8855,10 @@
8413
8855
  outline-offset: var(--seed-dimension-x0_5);
8414
8856
  }
8415
8857
 
8858
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8859
+ scale: var(--seed-feedback-scale);
8860
+ }
8861
+
8416
8862
  @media (hover: hover) and (pointer: fine) {
8417
8863
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8418
8864
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8480,7 +8926,7 @@
8480
8926
  box-sizing: border-box;
8481
8927
  cursor: pointer;
8482
8928
  background-color: var(--seed-color-bg-transparent);
8483
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8929
+ 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);
8484
8930
  outline: var(--seed-dimension-x0_5) solid transparent;
8485
8931
  outline-offset: var(--seed-dimension-x0_5);
8486
8932
  border: none;
@@ -8496,6 +8942,10 @@
8496
8942
  outline-offset: var(--seed-dimension-x0_5);
8497
8943
  }
8498
8944
 
8945
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8946
+ scale: var(--seed-feedback-scale);
8947
+ }
8948
+
8499
8949
  @media (hover: hover) and (pointer: fine) {
8500
8950
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8501
8951
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8723,9 +9173,6 @@
8723
9173
  border-color: var(--seed-color-stroke-neutral-weak);
8724
9174
  border-radius: var(--seed-radius-full);
8725
9175
  margin-top: var(--radiomark-margin-top, 0);
8726
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8727
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
8728
- outline-offset: var(--seed-dimension-x0_5);
8729
9176
  flex: none;
8730
9177
  justify-content: center;
8731
9178
  align-items: center;
@@ -8733,6 +9180,16 @@
8733
9180
  position: relative;
8734
9181
  }
8735
9182
 
9183
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9184
+ scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
9185
+ }
9186
+
9187
+ .seed-radiomark__root {
9188
+ 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);
9189
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
9190
+ outline-offset: var(--seed-dimension-x0_5);
9191
+ }
9192
+
8736
9193
  @media (hover: hover) and (pointer: fine) {
8737
9194
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8738
9195
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8872,8 +9329,12 @@
8872
9329
  outline-offset: var(--seed-dimension-x0_5);
8873
9330
  }
8874
9331
 
9332
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9333
+ scale: var(--seed-feedback-scale);
9334
+ }
9335
+
8875
9336
  .seed-reaction-button {
8876
- 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);
9337
+ 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);
8877
9338
  background: var(--seed-color-bg-transparent);
8878
9339
  font-weight: var(--seed-font-weight-medium);
8879
9340
  color: var(--seed-color-fg-neutral);
@@ -9144,7 +9605,7 @@
9144
9605
  }
9145
9606
 
9146
9607
  .seed-select__scrollArea {
9147
- max-height: min(480px, var(--seed-select-available-height, 480px));
9608
+ max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
9148
9609
  box-sizing: border-box;
9149
9610
  padding-block: var(--seed-dimension-x2);
9150
9611
  gap: var(--seed-dimension-x2);
@@ -9627,7 +10088,7 @@
9627
10088
  cursor: pointer;
9628
10089
  border-radius: var(--seed-radius-r3);
9629
10090
  background-color: var(--seed-color-bg-transparent);
9630
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10091
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9631
10092
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9632
10093
  flex-direction: column;
9633
10094
  display: flex;
@@ -9664,11 +10125,11 @@
9664
10125
 
9665
10126
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9666
10127
  cursor: not-allowed;
9667
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10128
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9668
10129
  }
9669
10130
 
9670
10131
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
9671
- box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
10132
+ box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
9672
10133
  }
9673
10134
 
9674
10135
  .seed-select-box__root {
@@ -10362,11 +10823,6 @@
10362
10823
  top: calc(28px + var(--seed-safe-area-top));
10363
10824
  border-radius: var(--seed-radius-r3);
10364
10825
  cursor: pointer;
10365
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
10366
- --seed-icon-size: 22px;
10367
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10368
- outline: var(--seed-dimension-x0_5) solid transparent;
10369
- outline-offset: var(--seed-dimension-x0_5);
10370
10826
  border: none;
10371
10827
  justify-content: center;
10372
10828
  align-items: center;
@@ -10377,6 +10833,18 @@
10377
10833
  right: 24px;
10378
10834
  }
10379
10835
 
10836
+ .seed-side-panel__closeButton:is(:active, [data-active]) {
10837
+ scale: var(--seed-feedback-scale);
10838
+ }
10839
+
10840
+ .seed-side-panel__closeButton {
10841
+ 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);
10842
+ --seed-icon-size: 22px;
10843
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10844
+ outline: var(--seed-dimension-x0_5) solid transparent;
10845
+ outline-offset: var(--seed-dimension-x0_5);
10846
+ }
10847
+
10380
10848
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10381
10849
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10382
10850
  outline-offset: var(--seed-dimension-x0_5);
@@ -10792,7 +11260,7 @@
10792
11260
  background: var(--seed-color-bg-neutral-inverted);
10793
11261
  border-radius: var(--seed-radius-r2);
10794
11262
  width: 100%;
10795
- max-width: 560px;
11263
+ max-width: 464px;
10796
11264
  padding-inline: var(--seed-dimension-x2_5);
10797
11265
  padding-block: var(--seed-dimension-x2_5);
10798
11266
  min-height: 44px;
@@ -10873,6 +11341,14 @@
10873
11341
  position: relative;
10874
11342
  }
10875
11343
 
11344
+ .seed-snackbar__actionButton:is(:active, [data-active]) {
11345
+ scale: var(--seed-feedback-scale);
11346
+ }
11347
+
11348
+ .seed-snackbar__actionButton {
11349
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
11350
+ }
11351
+
10876
11352
  .seed-snackbar__actionButton:after {
10877
11353
  content: "";
10878
11354
  top: 50%;
@@ -10989,11 +11465,15 @@
10989
11465
  border-radius: var(--seed-radius-full);
10990
11466
  background: var(--seed-color-palette-gray-600);
10991
11467
  margin: var(--switchmark-margin-top, 0) 0;
10992
- 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);
11468
+ 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);
10993
11469
  display: block;
10994
11470
  position: relative;
10995
11471
  }
10996
11472
 
11473
+ .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11474
+ scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
11475
+ }
11476
+
10997
11477
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
10998
11478
  opacity: .38;
10999
11479
  }
@@ -11179,8 +11659,12 @@
11179
11659
  bottom: 0;
11180
11660
  }
11181
11661
 
11662
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11663
+ scale: var(--seed-feedback-scale);
11664
+ }
11665
+
11182
11666
  .seed-tabs__trigger {
11183
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11667
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11184
11668
  outline: var(--seed-dimension-x0_5) solid transparent;
11185
11669
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11186
11670
  }
@@ -12672,8 +13156,12 @@
12672
13156
  cursor: not-allowed;
12673
13157
  }
12674
13158
 
13159
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13160
+ scale: var(--seed-feedback-scale);
13161
+ }
13162
+
12675
13163
  .seed-toggle-button {
12676
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13164
+ 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);
12677
13165
  font-weight: var(--seed-font-weight-bold);
12678
13166
  }
12679
13167
 
@@ -12912,7 +13400,7 @@
12912
13400
 
12913
13401
  .seed-wheel-picker__selectionIndicator {
12914
13402
  z-index: 0;
12915
- inset-inline: 0;
13403
+ inset-inline: var(--seed-dimension-x4);
12916
13404
  height: var(--seed-wheel-picker-item-size);
12917
13405
  pointer-events: none;
12918
13406
  position: absolute;
@@ -12920,6 +13408,145 @@
12920
13408
  transform: translateY(-50%);
12921
13409
  }
12922
13410
 
13411
+ .seed-wheel-picker-public__root {
13412
+ background-color: var(--seed-color-bg-layer-floating);
13413
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13414
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13415
+ --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13416
+ width: 100%;
13417
+ position: relative;
13418
+ overflow: hidden;
13419
+ }
13420
+
13421
+ .seed-wheel-picker-public__scrollFog {
13422
+ z-index: 1;
13423
+ height: 100%;
13424
+ position: relative;
13425
+ overflow: hidden;
13426
+ }
13427
+
13428
+ .seed-wheel-picker-public__columns {
13429
+ justify-content: center;
13430
+ width: 100%;
13431
+ height: 100%;
13432
+ display: flex;
13433
+ }
13434
+
13435
+ .seed-wheel-picker-public__column {
13436
+ box-sizing: border-box;
13437
+ overscroll-behavior-x: none;
13438
+ overscroll-behavior-y: contain;
13439
+ scroll-snap-type: y mandatory;
13440
+ scrollbar-width: none;
13441
+ -ms-overflow-style: none;
13442
+ touch-action: pan-y;
13443
+ cursor: grab;
13444
+ width: max-content;
13445
+ height: 100%;
13446
+ padding-block: var(--seed-wheel-picker-public-center-offset);
13447
+ outline: none;
13448
+ flex: none;
13449
+ overflow: hidden auto;
13450
+ }
13451
+
13452
+ .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13453
+ cursor: default;
13454
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13455
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13456
+ overflow-y: hidden;
13457
+ }
13458
+
13459
+ .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13460
+ cursor: grabbing;
13461
+ scroll-snap-type: none;
13462
+ }
13463
+
13464
+ .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13465
+ scroll-snap-type: none;
13466
+ }
13467
+
13468
+ .seed-wheel-picker-public__column::-webkit-scrollbar {
13469
+ display: none;
13470
+ }
13471
+
13472
+ .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13473
+ outline: var(--seed-dimension-x0_5) solid transparent;
13474
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13475
+ border-radius: var(--seed-radius-r2);
13476
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13477
+ }
13478
+
13479
+ .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]) {
13480
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13481
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13482
+ }
13483
+
13484
+ .seed-wheel-picker-public__item {
13485
+ height: var(--seed-wheel-picker-public-item-size);
13486
+ min-height: var(--seed-wheel-picker-public-item-size);
13487
+ color: var(--seed-wheel-picker-public-item-color);
13488
+ scroll-snap-align: center;
13489
+ -webkit-user-select: none;
13490
+ user-select: none;
13491
+ justify-content: center;
13492
+ align-items: center;
13493
+ display: flex;
13494
+ }
13495
+
13496
+ .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13497
+ color: #0000;
13498
+ 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%);
13499
+ -webkit-text-fill-color: transparent;
13500
+ -webkit-background-clip: text;
13501
+ background-clip: text;
13502
+ }
13503
+
13504
+ .seed-wheel-picker-public__itemLabel {
13505
+ box-sizing: border-box;
13506
+ height: 100%;
13507
+ padding-inline: var(--seed-dimension-x4);
13508
+ font-weight: var(--seed-font-weight-medium);
13509
+ white-space: nowrap;
13510
+ flex-shrink: 0;
13511
+ justify-content: center;
13512
+ align-items: center;
13513
+ display: flex;
13514
+ }
13515
+
13516
+ .seed-wheel-picker-public__selectionIndicator {
13517
+ z-index: 0;
13518
+ inset-inline: var(--seed-dimension-x4);
13519
+ height: var(--seed-wheel-picker-public-item-size);
13520
+ border-radius: var(--seed-radius-r2);
13521
+ background-color: var(--seed-color-bg-neutral-weak);
13522
+ pointer-events: none;
13523
+ position: absolute;
13524
+ top: 50%;
13525
+ transform: translateY(-50%);
13526
+ }
13527
+
13528
+ .seed-wheel-picker-public__root--size_small {
13529
+ height: var(--seed-wheel-picker-public-viewport-size, 180px);
13530
+ --seed-wheel-picker-public-item-size: 36px;
13531
+ --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13532
+ }
13533
+
13534
+ .seed-wheel-picker-public__itemLabel--size_small {
13535
+ font-size: var(--seed-font-size-t7-static);
13536
+ line-height: var(--seed-line-height-t7-static);
13537
+ }
13538
+
13539
+ .seed-wheel-picker-public__root--size_medium {
13540
+ height: var(--seed-wheel-picker-public-viewport-size, 220px);
13541
+ --seed-wheel-picker-public-item-size: 44px;
13542
+ --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13543
+ }
13544
+
13545
+ .seed-wheel-picker-public__itemLabel--size_medium {
13546
+ font-size: var(--seed-font-size-t10-static);
13547
+ line-height: var(--seed-line-height-t10-static);
13548
+ }
13549
+
12923
13550
  @keyframes seed-enter {
12924
13551
  from {
12925
13552
  opacity: var(--seed-enter-opacity, 1);
@@ -13079,6 +13706,12 @@
13079
13706
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13080
13707
  }
13081
13708
 
13709
+ .seed-date-picker__root {
13710
+ --seed-box-height: var(--seed-box-height-sm, initial);
13711
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13712
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13713
+ }
13714
+
13082
13715
  .seed-help-bubble__content {
13083
13716
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13084
13717
  }
@@ -13175,6 +13808,12 @@
13175
13808
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13176
13809
  }
13177
13810
 
13811
+ .seed-date-picker__root {
13812
+ --seed-box-height: var(--seed-box-height-md, initial);
13813
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
13814
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
13815
+ }
13816
+
13178
13817
  .seed-help-bubble__content {
13179
13818
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13180
13819
  }
@@ -13271,6 +13910,12 @@
13271
13910
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13272
13911
  }
13273
13912
 
13913
+ .seed-date-picker__root {
13914
+ --seed-box-height: var(--seed-box-height-lg, initial);
13915
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
13916
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13917
+ }
13918
+
13274
13919
  .seed-help-bubble__content {
13275
13920
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
13276
13921
  }
@@ -13367,6 +14012,12 @@
13367
14012
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
13368
14013
  }
13369
14014
 
14015
+ .seed-date-picker__root {
14016
+ --seed-box-height: var(--seed-box-height-xl, initial);
14017
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14018
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14019
+ }
14020
+
13370
14021
  .seed-help-bubble__content {
13371
14022
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
13372
14023
  }