@seed-design/css 2.5.0 → 2.6.0

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 (124) hide show
  1. package/all.css +700 -89
  2. package/all.layered.css +700 -89
  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/floating-action-button.css +6 -1
  34. package/recipes/floating-action-button.layered.css +8 -1
  35. package/recipes/help-bubble.css +8 -2
  36. package/recipes/help-bubble.layered.css +12 -4
  37. package/recipes/image-frame-reaction-button.css +6 -0
  38. package/recipes/image-frame-reaction-button.layered.css +8 -0
  39. package/recipes/input-button.css +6 -1
  40. package/recipes/input-button.layered.css +10 -3
  41. package/recipes/list-item.css +6 -0
  42. package/recipes/list-item.layered.css +6 -0
  43. package/recipes/menu-sheet.css +7 -1
  44. package/recipes/menu-sheet.layered.css +9 -1
  45. package/recipes/menu.css +1 -1
  46. package/recipes/menu.layered.css +1 -1
  47. package/recipes/page-banner.css +58 -4
  48. package/recipes/page-banner.layered.css +79 -8
  49. package/recipes/pagination-button.css +68 -0
  50. package/recipes/pagination-button.d.ts +19 -0
  51. package/recipes/pagination-button.layered.css +80 -0
  52. package/recipes/pagination-button.layered.mjs +22 -0
  53. package/recipes/pagination-button.mjs +22 -0
  54. package/recipes/pagination-page-item.css +99 -0
  55. package/recipes/pagination-page-item.d.ts +19 -0
  56. package/recipes/pagination-page-item.layered.css +118 -0
  57. package/recipes/pagination-page-item.layered.mjs +22 -0
  58. package/recipes/pagination-page-item.mjs +22 -0
  59. package/recipes/pull-to-refresh.css +1 -1
  60. package/recipes/pull-to-refresh.layered.css +1 -1
  61. package/recipes/quantity-picker.css +8 -2
  62. package/recipes/quantity-picker.layered.css +10 -2
  63. package/recipes/radiomark.css +6 -1
  64. package/recipes/radiomark.layered.css +10 -3
  65. package/recipes/reaction-button.css +4 -1
  66. package/recipes/reaction-button.layered.css +5 -1
  67. package/recipes/select-box.css +3 -3
  68. package/recipes/select-box.layered.css +3 -3
  69. package/recipes/select.css +1 -1
  70. package/recipes/select.layered.css +1 -1
  71. package/recipes/side-panel.css +6 -1
  72. package/recipes/side-panel.layered.css +12 -5
  73. package/recipes/snackbar.css +7 -1
  74. package/recipes/snackbar.layered.css +9 -1
  75. package/recipes/switchmark.css +4 -1
  76. package/recipes/switchmark.layered.css +5 -1
  77. package/recipes/tabs.css +4 -1
  78. package/recipes/tabs.layered.css +5 -1
  79. package/recipes/toggle-button.css +4 -1
  80. package/recipes/toggle-button.layered.css +5 -1
  81. package/recipes/wheel-picker-public.css +121 -0
  82. package/recipes/wheel-picker-public.d.ts +24 -0
  83. package/recipes/wheel-picker-public.layered.css +140 -0
  84. package/recipes/wheel-picker-public.layered.mjs +63 -0
  85. package/recipes/wheel-picker-public.mjs +63 -0
  86. package/recipes/wheel-picker.css +1 -1
  87. package/recipes/wheel-picker.layered.css +1 -1
  88. package/scale-feedback/index.d.ts +3 -0
  89. package/scale-feedback/index.mjs +33 -0
  90. package/vars/color/stroke.d.ts +3 -3
  91. package/vars/component/accordion-item.d.ts +1 -1
  92. package/vars/component/accordion-item.mjs +1 -1
  93. package/vars/component/action-button.d.ts +1 -23
  94. package/vars/component/action-button.mjs +1 -23
  95. package/vars/component/bottom-sheet.d.ts +1 -1
  96. package/vars/component/bottom-sheet.mjs +1 -1
  97. package/vars/component/callout-close-button.d.ts +81 -0
  98. package/vars/component/callout-close-button.mjs +63 -0
  99. package/vars/component/callout.d.ts +1 -2
  100. package/vars/component/callout.mjs +1 -2
  101. package/vars/component/checkbox.d.ts +3 -0
  102. package/vars/component/help-bubble.d.ts +4 -1
  103. package/vars/component/help-bubble.mjs +3 -1
  104. package/vars/component/index.d.ts +6 -1
  105. package/vars/component/index.mjs +6 -1
  106. package/vars/component/list-item.d.ts +2 -6
  107. package/vars/component/list-item.mjs +2 -5
  108. package/vars/component/page-banner-close-button.d.ts +133 -0
  109. package/vars/component/page-banner-close-button.mjs +99 -0
  110. package/vars/component/page-banner.d.ts +0 -1
  111. package/vars/component/page-banner.mjs +0 -1
  112. package/vars/component/pagination-button.d.ts +33 -0
  113. package/vars/component/pagination-button.mjs +33 -0
  114. package/vars/component/pagination-page-item.d.ts +54 -0
  115. package/vars/component/pagination-page-item.mjs +54 -0
  116. package/vars/component/radio.d.ts +3 -0
  117. package/vars/component/select-box.d.ts +2 -2
  118. package/vars/component/select-box.mjs +2 -2
  119. package/vars/component/snackbar.d.ts +1 -1
  120. package/vars/component/snackbar.mjs +1 -1
  121. package/vars/component/switch.d.ts +3 -0
  122. package/vars/component/switchmark.d.ts +2 -0
  123. package/vars/component/wheel-picker.d.ts +72 -0
  124. 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 {
@@ -5594,11 +5686,12 @@
5594
5686
  align-items: center;
5595
5687
  gap: var(--seed-dimension-x2_5);
5596
5688
  border-radius: var(--seed-radius-r3);
5689
+ height: 80px;
5690
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5597
5691
  --remove-button-mask-size: var(--seed-dimension-x6);
5598
5692
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5599
5693
  outline: var(--seed-dimension-x0_5) solid transparent;
5600
5694
  outline-offset: var(--seed-dimension-x0_5);
5601
- height: 80px;
5602
5695
  display: flex;
5603
5696
  position: relative;
5604
5697
  }
@@ -5636,6 +5729,7 @@
5636
5729
  }
5637
5730
 
5638
5731
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5732
+ scale: var(--seed-feedback-scale);
5639
5733
  --remove-button-mask-size: 0px;
5640
5734
  --remove-button-mask-offset: 0px;
5641
5735
  }
@@ -5730,9 +5824,6 @@
5730
5824
  font: inherit;
5731
5825
  cursor: pointer;
5732
5826
  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
5827
  background: none;
5737
5828
  border: none;
5738
5829
  flex-direction: column;
@@ -5742,6 +5833,16 @@
5742
5833
  display: flex;
5743
5834
  }
5744
5835
 
5836
+ .seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5837
+ scale: var(--seed-feedback-scale);
5838
+ }
5839
+
5840
+ .seed-attachment-input-item__actionButton {
5841
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5842
+ outline: var(--seed-dimension-x0_5) solid transparent;
5843
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5844
+ }
5845
+
5745
5846
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5746
5847
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5747
5848
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5763,9 +5864,6 @@
5763
5864
  background-color: var(--seed-color-bg-layer-default);
5764
5865
  border-radius: var(--seed-radius-full);
5765
5866
  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
5867
  border: none;
5770
5868
  justify-content: center;
5771
5869
  align-items: center;
@@ -5774,6 +5872,16 @@
5774
5872
  position: absolute;
5775
5873
  }
5776
5874
 
5875
+ .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5876
+ scale: var(--seed-feedback-scale);
5877
+ }
5878
+
5879
+ .seed-attachment-input-item__removeButton {
5880
+ 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);
5881
+ outline: var(--seed-dimension-x0_5) solid transparent;
5882
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5883
+ }
5884
+
5777
5885
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
5778
5886
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5779
5887
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5838,7 +5946,7 @@
5838
5946
 
5839
5947
  .seed-attachment-input-item__root--type_image {
5840
5948
  width: 80px;
5841
- transition: opacity .2s;
5949
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5842
5950
  }
5843
5951
 
5844
5952
  .seed-attachment-input-item__root--type_image:before {
@@ -5896,9 +6004,6 @@
5896
6004
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
5897
6005
  cursor: pointer;
5898
6006
  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
6007
  background-color: #0000;
5903
6008
  border: none;
5904
6009
  flex-direction: column;
@@ -5907,6 +6012,16 @@
5907
6012
  display: flex;
5908
6013
  }
5909
6014
 
6015
+ .seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6016
+ scale: var(--seed-feedback-scale);
6017
+ }
6018
+
6019
+ .seed-attachment-input-trigger__root {
6020
+ 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);
6021
+ outline: var(--seed-dimension-x0_5) solid transparent;
6022
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6023
+ }
6024
+
5910
6025
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
5911
6026
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5912
6027
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6003,11 +6118,18 @@
6003
6118
  font-size: var(--seed-font-size-t5);
6004
6119
  line-height: var(--seed-line-height-t5);
6005
6120
  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
6121
  position: relative;
6008
6122
  overflow: hidden;
6009
6123
  }
6010
6124
 
6125
+ .seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6126
+ scale: var(--seed-feedback-scale);
6127
+ }
6128
+
6129
+ .seed-floating-action-button__root {
6130
+ 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);
6131
+ }
6132
+
6011
6133
  @media (hover: hover) and (pointer: fine) {
6012
6134
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6013
6135
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6127,11 +6249,12 @@
6127
6249
  }
6128
6250
 
6129
6251
  .seed-help-bubble__content {
6252
+ box-sizing: border-box;
6130
6253
  background: var(--seed-color-bg-neutral-inverted);
6131
6254
  padding-inline: var(--seed-dimension-x3);
6132
6255
  padding-block: var(--seed-dimension-x2_5);
6133
6256
  border-radius: var(--seed-radius-r3);
6134
- --seed-box-max-width-base: none;
6257
+ --seed-box-max-width-base: 280px;
6135
6258
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6136
6259
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6137
6260
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6218,9 +6341,6 @@
6218
6341
  --seed-icon-size: var(--seed-dimension-x3_5);
6219
6342
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6220
6343
  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
6344
  background: none;
6225
6345
  border: none;
6226
6346
  justify-content: center;
@@ -6228,6 +6348,16 @@
6228
6348
  display: flex;
6229
6349
  }
6230
6350
 
6351
+ .seed-help-bubble__closeButton:is(:active, [data-active]) {
6352
+ scale: var(--seed-feedback-scale);
6353
+ }
6354
+
6355
+ .seed-help-bubble__closeButton {
6356
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6357
+ outline: var(--seed-dimension-x0_5) solid transparent;
6358
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6359
+ }
6360
+
6231
6361
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6232
6362
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6233
6363
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6334,6 +6464,14 @@
6334
6464
  position: relative;
6335
6465
  }
6336
6466
 
6467
+ .seed-image-frame-reaction-button__root:is(:active, [data-active]) {
6468
+ scale: var(--seed-feedback-scale);
6469
+ }
6470
+
6471
+ .seed-image-frame-reaction-button__root {
6472
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6473
+ }
6474
+
6337
6475
  .seed-image-frame-reaction-button__root:before {
6338
6476
  content: "";
6339
6477
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6680,14 +6818,21 @@
6680
6818
  .seed-input-button__clearButton {
6681
6819
  cursor: pointer;
6682
6820
  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
6821
  background-color: #0000;
6687
6822
  border: none;
6688
6823
  padding: 0;
6689
6824
  }
6690
6825
 
6826
+ .seed-input-button__clearButton:is(:active, [data-active]) {
6827
+ scale: var(--seed-feedback-scale);
6828
+ }
6829
+
6830
+ .seed-input-button__clearButton {
6831
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6832
+ outline: var(--seed-dimension-x0_5) solid transparent;
6833
+ outline-offset: var(--seed-dimension-x0_5);
6834
+ }
6835
+
6691
6836
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6692
6837
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6693
6838
  outline-offset: var(--seed-dimension-x0_5);
@@ -6989,6 +7134,9 @@
6989
7134
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
6990
7135
  padding-right: var(--seed-box-padding-right);
6991
7136
  --seed-focus-ring: none;
7137
+ --seed-checkmark-feedback-scale: 1;
7138
+ --seed-radiomark-feedback-scale: 1;
7139
+ --seed-switchmark-feedback-scale: 1;
6992
7140
  --seed-icon-size: 22px;
6993
7141
  --seed-icon-color: var(--seed-color-fg-neutral);
6994
7142
  flex-shrink: 0;
@@ -7012,6 +7160,9 @@
7012
7160
  align-items: center;
7013
7161
  gap: var(--seed-box-gap);
7014
7162
  --seed-focus-ring: none;
7163
+ --seed-checkmark-feedback-scale: 1;
7164
+ --seed-radiomark-feedback-scale: 1;
7165
+ --seed-switchmark-feedback-scale: 1;
7015
7166
  font-size: var(--seed-font-size-t5);
7016
7167
  line-height: var(--seed-line-height-t5);
7017
7168
  font-weight: var(--seed-font-weight-regular);
@@ -7337,7 +7488,7 @@
7337
7488
  }
7338
7489
 
7339
7490
  .seed-menu__scrollArea {
7340
- max-height: min(480px, var(--seed-menu-available-height, 480px));
7491
+ max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
7341
7492
  box-sizing: border-box;
7342
7493
  padding-block: var(--seed-dimension-x2);
7343
7494
  gap: var(--seed-dimension-x2);
@@ -7628,6 +7779,7 @@
7628
7779
  word-break: break-all;
7629
7780
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7630
7781
  background: var(--seed-color-bg-layer-floating);
7782
+ max-width: 480px;
7631
7783
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7632
7784
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7633
7785
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7718,13 +7870,20 @@
7718
7870
  font-size: var(--seed-font-size-t5);
7719
7871
  line-height: var(--seed-line-height-t5);
7720
7872
  font-weight: var(--seed-font-weight-medium);
7721
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7722
7873
  border: none;
7723
7874
  justify-content: center;
7724
7875
  align-items: center;
7725
7876
  display: flex;
7726
7877
  }
7727
7878
 
7879
+ .seed-menu-sheet__closeButton:is(:active, [data-active]) {
7880
+ scale: var(--seed-feedback-scale);
7881
+ }
7882
+
7883
+ .seed-menu-sheet__closeButton {
7884
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7885
+ }
7886
+
7728
7887
  @media (hover: hover) and (pointer: fine) {
7729
7888
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7730
7889
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8028,15 +8187,22 @@
8028
8187
  line-height: var(--seed-line-height-t3);
8029
8188
  font-weight: var(--seed-font-weight-bold);
8030
8189
  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
8190
  background-color: #0000;
8035
8191
  border: none;
8036
8192
  align-items: center;
8037
8193
  display: flex;
8038
8194
  }
8039
8195
 
8196
+ .seed-page-banner__button:is(:active, [data-active]) {
8197
+ scale: var(--seed-feedback-scale);
8198
+ }
8199
+
8200
+ .seed-page-banner__button {
8201
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8202
+ outline: var(--seed-dimension-x0_5) solid transparent;
8203
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8204
+ }
8205
+
8040
8206
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8041
8207
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8042
8208
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8048,12 +8214,10 @@
8048
8214
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8049
8215
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8050
8216
  --seed-suffix-icon-margin-left: initial;
8217
+ background-color: var(--seed-color-bg-transparent);
8051
8218
  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;
8219
+ border-radius: var(--seed-radius-r2);
8220
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8057
8221
  border: none;
8058
8222
  flex-grow: 0;
8059
8223
  flex-shrink: 0;
@@ -8064,11 +8228,33 @@
8064
8228
  display: flex;
8065
8229
  }
8066
8230
 
8231
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8232
+ scale: var(--seed-feedback-scale);
8233
+ }
8234
+
8235
+ .seed-page-banner__closeButton {
8236
+ 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);
8237
+ outline: var(--seed-dimension-x0_5) solid transparent;
8238
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8239
+ }
8240
+
8067
8241
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8068
8242
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8069
8243
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8070
8244
  }
8071
8245
 
8246
+ @media (hover: hover) and (pointer: fine) {
8247
+ .seed-page-banner__closeButton:is(:hover, [data-hover]) {
8248
+ background-color: var(--seed-color-bg-transparent-pressed);
8249
+ }
8250
+ }
8251
+
8252
+ @media not all and (hover: hover) and (pointer: fine) {
8253
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8254
+ background-color: var(--seed-color-bg-transparent-pressed);
8255
+ }
8256
+ }
8257
+
8072
8258
  .seed-page-banner__root--tone_neutral-variant_weak {
8073
8259
  background-color: var(--seed-color-bg-neutral-weak);
8074
8260
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8091,6 +8277,10 @@
8091
8277
  color: var(--seed-color-fg-neutral);
8092
8278
  }
8093
8279
 
8280
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8281
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8282
+ }
8283
+
8094
8284
  .seed-page-banner__root--tone_neutral-variant_solid {
8095
8285
  background-color: var(--seed-color-bg-neutral-inverted);
8096
8286
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -8113,6 +8303,10 @@
8113
8303
  color: var(--seed-color-fg-neutral-inverted);
8114
8304
  }
8115
8305
 
8306
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8307
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8308
+ }
8309
+
8116
8310
  .seed-page-banner__root--tone_informative-variant_weak {
8117
8311
  background-color: var(--seed-color-bg-informative-weak);
8118
8312
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8135,6 +8329,10 @@
8135
8329
  color: var(--seed-color-fg-informative-contrast);
8136
8330
  }
8137
8331
 
8332
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8333
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8334
+ }
8335
+
8138
8336
  .seed-page-banner__root--tone_informative-variant_solid {
8139
8337
  background-color: var(--seed-color-bg-informative-solid);
8140
8338
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8157,6 +8355,10 @@
8157
8355
  color: var(--seed-color-palette-static-white);
8158
8356
  }
8159
8357
 
8358
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8359
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8360
+ }
8361
+
8160
8362
  .seed-page-banner__root--tone_positive-variant_weak {
8161
8363
  background-color: var(--seed-color-bg-positive-weak);
8162
8364
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8179,6 +8381,10 @@
8179
8381
  color: var(--seed-color-fg-positive-contrast);
8180
8382
  }
8181
8383
 
8384
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8385
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8386
+ }
8387
+
8182
8388
  .seed-page-banner__root--tone_positive-variant_solid {
8183
8389
  background-color: var(--seed-color-bg-positive-solid);
8184
8390
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8201,6 +8407,10 @@
8201
8407
  color: var(--seed-color-palette-static-white);
8202
8408
  }
8203
8409
 
8410
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8411
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8412
+ }
8413
+
8204
8414
  .seed-page-banner__root--tone_warning-variant_weak {
8205
8415
  background-color: var(--seed-color-bg-warning-weak);
8206
8416
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8223,6 +8433,10 @@
8223
8433
  color: var(--seed-color-fg-warning-contrast);
8224
8434
  }
8225
8435
 
8436
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8437
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8438
+ }
8439
+
8226
8440
  .seed-page-banner__root--tone_warning-variant_solid {
8227
8441
  background-color: var(--seed-color-bg-warning-solid);
8228
8442
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8245,6 +8459,10 @@
8245
8459
  color: var(--seed-color-palette-static-black-alpha-900);
8246
8460
  }
8247
8461
 
8462
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8463
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8464
+ }
8465
+
8248
8466
  .seed-page-banner__root--tone_critical-variant_weak {
8249
8467
  background-color: var(--seed-color-bg-critical-weak);
8250
8468
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8267,6 +8485,10 @@
8267
8485
  color: var(--seed-color-fg-critical-contrast);
8268
8486
  }
8269
8487
 
8488
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8489
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8490
+ }
8491
+
8270
8492
  .seed-page-banner__root--tone_critical-variant_solid {
8271
8493
  background-color: var(--seed-color-bg-critical-solid);
8272
8494
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8289,6 +8511,10 @@
8289
8511
  color: var(--seed-color-palette-static-white);
8290
8512
  }
8291
8513
 
8514
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8515
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8516
+ }
8517
+
8292
8518
  .seed-page-banner__root--tone_magic-variant_weak {
8293
8519
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8294
8520
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8311,6 +8537,206 @@
8311
8537
  color: var(--seed-color-fg-neutral);
8312
8538
  }
8313
8539
 
8540
+ .seed-page-banner__closeButton--tone_magic-variant_weak {
8541
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8542
+ }
8543
+
8544
+ .seed-pagination-button {
8545
+ box-sizing: border-box;
8546
+ cursor: pointer;
8547
+ text-transform: none;
8548
+ white-space: nowrap;
8549
+ vertical-align: middle;
8550
+ -webkit-font-smoothing: antialiased;
8551
+ -moz-osx-font-smoothing: grayscale;
8552
+ width: var(--seed-dimension-x10);
8553
+ height: var(--seed-dimension-x10);
8554
+ border-radius: var(--seed-radius-r2);
8555
+ isolation: isolate;
8556
+ background: none;
8557
+ border: none;
8558
+ flex-shrink: 0;
8559
+ justify-content: center;
8560
+ align-items: center;
8561
+ padding: 0;
8562
+ font-family: inherit;
8563
+ text-decoration: none;
8564
+ display: inline-flex;
8565
+ position: relative;
8566
+ }
8567
+
8568
+ .seed-pagination-button:before {
8569
+ content: "";
8570
+ z-index: -1;
8571
+ border-radius: inherit;
8572
+ background-color: var(--seed-color-bg-transparent);
8573
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8574
+ position: absolute;
8575
+ inset: 0;
8576
+ }
8577
+
8578
+ .seed-pagination-button {
8579
+ --seed-icon-size: var(--seed-dimension-x4);
8580
+ --seed-icon-color: var(--seed-color-fg-neutral);
8581
+ outline: var(--seed-dimension-x0_5) solid transparent;
8582
+ outline-offset: var(--seed-dimension-x0_5);
8583
+ }
8584
+
8585
+ .seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
8586
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8587
+ outline-offset: var(--seed-dimension-x0_5);
8588
+ }
8589
+
8590
+ .seed-pagination-button {
8591
+ scale: 1;
8592
+ }
8593
+
8594
+ @media (hover: hover) and (pointer: fine) {
8595
+ .seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8596
+ background-color: var(--seed-color-bg-transparent-pressed);
8597
+ }
8598
+ }
8599
+
8600
+ @media not all and (hover: hover) and (pointer: fine) {
8601
+ .seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8602
+ background-color: var(--seed-color-bg-transparent-pressed);
8603
+ }
8604
+ }
8605
+
8606
+ .seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8607
+ scale: var(--seed-scale-s97);
8608
+ }
8609
+
8610
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
8611
+ cursor: not-allowed;
8612
+ --seed-icon-color: var(--seed-color-fg-disabled);
8613
+ }
8614
+
8615
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
8616
+ background-color: var(--seed-color-bg-transparent);
8617
+ }
8618
+
8619
+ .seed-pagination-button {
8620
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8621
+ }
8622
+
8623
+ .seed-pagination-page-item {
8624
+ box-sizing: border-box;
8625
+ cursor: pointer;
8626
+ text-transform: none;
8627
+ white-space: nowrap;
8628
+ vertical-align: middle;
8629
+ -webkit-font-smoothing: antialiased;
8630
+ -moz-osx-font-smoothing: grayscale;
8631
+ width: var(--seed-dimension-x10);
8632
+ height: var(--seed-dimension-x10);
8633
+ border-radius: var(--seed-radius-r2);
8634
+ isolation: isolate;
8635
+ color: var(--seed-color-fg-neutral);
8636
+ font-family: inherit;
8637
+ font-size: var(--seed-font-size-t4);
8638
+ line-height: var(--seed-line-height-t4);
8639
+ font-weight: var(--seed-font-weight-bold);
8640
+ background: none;
8641
+ border: none;
8642
+ flex-shrink: 0;
8643
+ justify-content: center;
8644
+ align-items: center;
8645
+ padding: 0;
8646
+ text-decoration: none;
8647
+ display: inline-flex;
8648
+ position: relative;
8649
+ }
8650
+
8651
+ .seed-pagination-page-item:before {
8652
+ content: "";
8653
+ z-index: -1;
8654
+ border-radius: inherit;
8655
+ background-color: var(--seed-color-bg-transparent);
8656
+ position: absolute;
8657
+ inset: 0;
8658
+ }
8659
+
8660
+ .seed-pagination-page-item > [data-pagination-page-item-label] {
8661
+ text-overflow: ellipsis;
8662
+ white-space: nowrap;
8663
+ min-width: 0;
8664
+ max-width: 100%;
8665
+ display: block;
8666
+ overflow: hidden;
8667
+ }
8668
+
8669
+ .seed-pagination-page-item {
8670
+ outline: var(--seed-dimension-x0_5) solid transparent;
8671
+ outline-offset: var(--seed-dimension-x0_5);
8672
+ }
8673
+
8674
+ .seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
8675
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8676
+ outline-offset: var(--seed-dimension-x0_5);
8677
+ }
8678
+
8679
+ .seed-pagination-page-item {
8680
+ scale: 1;
8681
+ }
8682
+
8683
+ @media (hover: hover) and (pointer: fine) {
8684
+ .seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8685
+ background-color: var(--seed-color-bg-transparent-pressed);
8686
+ }
8687
+ }
8688
+
8689
+ @media not all and (hover: hover) and (pointer: fine) {
8690
+ .seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8691
+ background-color: var(--seed-color-bg-transparent-pressed);
8692
+ }
8693
+ }
8694
+
8695
+ .seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8696
+ scale: var(--seed-scale-s97);
8697
+ }
8698
+
8699
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8700
+ color: var(--seed-color-fg-neutral-inverted);
8701
+ }
8702
+
8703
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8704
+ background-color: var(--seed-color-bg-neutral-inverted);
8705
+ }
8706
+
8707
+ @media (hover: hover) and (pointer: fine) {
8708
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8709
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8710
+ }
8711
+ }
8712
+
8713
+ @media not all and (hover: hover) and (pointer: fine) {
8714
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8715
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8716
+ }
8717
+ }
8718
+
8719
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8720
+ cursor: not-allowed;
8721
+ color: var(--seed-color-fg-disabled);
8722
+ }
8723
+
8724
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8725
+ background-color: var(--seed-color-bg-transparent);
8726
+ }
8727
+
8728
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8729
+ color: var(--seed-color-fg-disabled);
8730
+ }
8731
+
8732
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8733
+ background-color: var(--seed-color-bg-disabled);
8734
+ }
8735
+
8736
+ .seed-pagination-page-item {
8737
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8738
+ }
8739
+
8314
8740
  .seed-progress-circle__root {
8315
8741
  box-sizing: border-box;
8316
8742
  display: inline-flex;
@@ -8363,7 +8789,7 @@
8363
8789
  }
8364
8790
 
8365
8791
  .seed-pull-to-refresh__root {
8366
- --ptr-size: 44px;
8792
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8367
8793
  --ptr-transition-duration: var(--seed-duration-d6);
8368
8794
  height: 100%;
8369
8795
  }
@@ -8397,7 +8823,7 @@
8397
8823
  box-sizing: border-box;
8398
8824
  cursor: pointer;
8399
8825
  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);
8826
+ 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
8827
  outline: var(--seed-dimension-x0_5) solid transparent;
8402
8828
  outline-offset: var(--seed-dimension-x0_5);
8403
8829
  border: none;
@@ -8413,6 +8839,10 @@
8413
8839
  outline-offset: var(--seed-dimension-x0_5);
8414
8840
  }
8415
8841
 
8842
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8843
+ scale: var(--seed-feedback-scale);
8844
+ }
8845
+
8416
8846
  @media (hover: hover) and (pointer: fine) {
8417
8847
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8418
8848
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8480,7 +8910,7 @@
8480
8910
  box-sizing: border-box;
8481
8911
  cursor: pointer;
8482
8912
  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);
8913
+ 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
8914
  outline: var(--seed-dimension-x0_5) solid transparent;
8485
8915
  outline-offset: var(--seed-dimension-x0_5);
8486
8916
  border: none;
@@ -8496,6 +8926,10 @@
8496
8926
  outline-offset: var(--seed-dimension-x0_5);
8497
8927
  }
8498
8928
 
8929
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8930
+ scale: var(--seed-feedback-scale);
8931
+ }
8932
+
8499
8933
  @media (hover: hover) and (pointer: fine) {
8500
8934
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8501
8935
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8723,9 +9157,6 @@
8723
9157
  border-color: var(--seed-color-stroke-neutral-weak);
8724
9158
  border-radius: var(--seed-radius-full);
8725
9159
  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
9160
  flex: none;
8730
9161
  justify-content: center;
8731
9162
  align-items: center;
@@ -8733,6 +9164,16 @@
8733
9164
  position: relative;
8734
9165
  }
8735
9166
 
9167
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9168
+ scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
9169
+ }
9170
+
9171
+ .seed-radiomark__root {
9172
+ 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);
9173
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
9174
+ outline-offset: var(--seed-dimension-x0_5);
9175
+ }
9176
+
8736
9177
  @media (hover: hover) and (pointer: fine) {
8737
9178
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8738
9179
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8872,8 +9313,12 @@
8872
9313
  outline-offset: var(--seed-dimension-x0_5);
8873
9314
  }
8874
9315
 
9316
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9317
+ scale: var(--seed-feedback-scale);
9318
+ }
9319
+
8875
9320
  .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);
9321
+ 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
9322
  background: var(--seed-color-bg-transparent);
8878
9323
  font-weight: var(--seed-font-weight-medium);
8879
9324
  color: var(--seed-color-fg-neutral);
@@ -9144,7 +9589,7 @@
9144
9589
  }
9145
9590
 
9146
9591
  .seed-select__scrollArea {
9147
- max-height: min(480px, var(--seed-select-available-height, 480px));
9592
+ max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
9148
9593
  box-sizing: border-box;
9149
9594
  padding-block: var(--seed-dimension-x2);
9150
9595
  gap: var(--seed-dimension-x2);
@@ -9627,7 +10072,7 @@
9627
10072
  cursor: pointer;
9628
10073
  border-radius: var(--seed-radius-r3);
9629
10074
  background-color: var(--seed-color-bg-transparent);
9630
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10075
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9631
10076
  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
10077
  flex-direction: column;
9633
10078
  display: flex;
@@ -9664,11 +10109,11 @@
9664
10109
 
9665
10110
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9666
10111
  cursor: not-allowed;
9667
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10112
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9668
10113
  }
9669
10114
 
9670
10115
  .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);
10116
+ box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
9672
10117
  }
9673
10118
 
9674
10119
  .seed-select-box__root {
@@ -10362,11 +10807,6 @@
10362
10807
  top: calc(28px + var(--seed-safe-area-top));
10363
10808
  border-radius: var(--seed-radius-r3);
10364
10809
  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
10810
  border: none;
10371
10811
  justify-content: center;
10372
10812
  align-items: center;
@@ -10377,6 +10817,18 @@
10377
10817
  right: 24px;
10378
10818
  }
10379
10819
 
10820
+ .seed-side-panel__closeButton:is(:active, [data-active]) {
10821
+ scale: var(--seed-feedback-scale);
10822
+ }
10823
+
10824
+ .seed-side-panel__closeButton {
10825
+ 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);
10826
+ --seed-icon-size: 22px;
10827
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10828
+ outline: var(--seed-dimension-x0_5) solid transparent;
10829
+ outline-offset: var(--seed-dimension-x0_5);
10830
+ }
10831
+
10380
10832
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10381
10833
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10382
10834
  outline-offset: var(--seed-dimension-x0_5);
@@ -10792,7 +11244,7 @@
10792
11244
  background: var(--seed-color-bg-neutral-inverted);
10793
11245
  border-radius: var(--seed-radius-r2);
10794
11246
  width: 100%;
10795
- max-width: 560px;
11247
+ max-width: 464px;
10796
11248
  padding-inline: var(--seed-dimension-x2_5);
10797
11249
  padding-block: var(--seed-dimension-x2_5);
10798
11250
  min-height: 44px;
@@ -10873,6 +11325,14 @@
10873
11325
  position: relative;
10874
11326
  }
10875
11327
 
11328
+ .seed-snackbar__actionButton:is(:active, [data-active]) {
11329
+ scale: var(--seed-feedback-scale);
11330
+ }
11331
+
11332
+ .seed-snackbar__actionButton {
11333
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
11334
+ }
11335
+
10876
11336
  .seed-snackbar__actionButton:after {
10877
11337
  content: "";
10878
11338
  top: 50%;
@@ -10989,11 +11449,15 @@
10989
11449
  border-radius: var(--seed-radius-full);
10990
11450
  background: var(--seed-color-palette-gray-600);
10991
11451
  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);
11452
+ 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
11453
  display: block;
10994
11454
  position: relative;
10995
11455
  }
10996
11456
 
11457
+ .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11458
+ scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
11459
+ }
11460
+
10997
11461
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
10998
11462
  opacity: .38;
10999
11463
  }
@@ -11179,8 +11643,12 @@
11179
11643
  bottom: 0;
11180
11644
  }
11181
11645
 
11646
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11647
+ scale: var(--seed-feedback-scale);
11648
+ }
11649
+
11182
11650
  .seed-tabs__trigger {
11183
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11651
+ 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
11652
  outline: var(--seed-dimension-x0_5) solid transparent;
11185
11653
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11186
11654
  }
@@ -12672,8 +13140,12 @@
12672
13140
  cursor: not-allowed;
12673
13141
  }
12674
13142
 
13143
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13144
+ scale: var(--seed-feedback-scale);
13145
+ }
13146
+
12675
13147
  .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);
13148
+ 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
13149
  font-weight: var(--seed-font-weight-bold);
12678
13150
  }
12679
13151
 
@@ -12912,7 +13384,7 @@
12912
13384
 
12913
13385
  .seed-wheel-picker__selectionIndicator {
12914
13386
  z-index: 0;
12915
- inset-inline: 0;
13387
+ inset-inline: var(--seed-dimension-x4);
12916
13388
  height: var(--seed-wheel-picker-item-size);
12917
13389
  pointer-events: none;
12918
13390
  position: absolute;
@@ -12920,6 +13392,145 @@
12920
13392
  transform: translateY(-50%);
12921
13393
  }
12922
13394
 
13395
+ .seed-wheel-picker-public__root {
13396
+ background-color: var(--seed-color-bg-layer-floating);
13397
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13398
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13399
+ --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13400
+ width: 100%;
13401
+ position: relative;
13402
+ overflow: hidden;
13403
+ }
13404
+
13405
+ .seed-wheel-picker-public__scrollFog {
13406
+ z-index: 1;
13407
+ height: 100%;
13408
+ position: relative;
13409
+ overflow: hidden;
13410
+ }
13411
+
13412
+ .seed-wheel-picker-public__columns {
13413
+ justify-content: center;
13414
+ width: 100%;
13415
+ height: 100%;
13416
+ display: flex;
13417
+ }
13418
+
13419
+ .seed-wheel-picker-public__column {
13420
+ box-sizing: border-box;
13421
+ overscroll-behavior-x: none;
13422
+ overscroll-behavior-y: contain;
13423
+ scroll-snap-type: y mandatory;
13424
+ scrollbar-width: none;
13425
+ -ms-overflow-style: none;
13426
+ touch-action: pan-y;
13427
+ cursor: grab;
13428
+ width: max-content;
13429
+ height: 100%;
13430
+ padding-block: var(--seed-wheel-picker-public-center-offset);
13431
+ outline: none;
13432
+ flex: none;
13433
+ overflow: hidden auto;
13434
+ }
13435
+
13436
+ .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13437
+ cursor: default;
13438
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13439
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13440
+ overflow-y: hidden;
13441
+ }
13442
+
13443
+ .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13444
+ cursor: grabbing;
13445
+ scroll-snap-type: none;
13446
+ }
13447
+
13448
+ .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13449
+ scroll-snap-type: none;
13450
+ }
13451
+
13452
+ .seed-wheel-picker-public__column::-webkit-scrollbar {
13453
+ display: none;
13454
+ }
13455
+
13456
+ .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13457
+ outline: var(--seed-dimension-x0_5) solid transparent;
13458
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13459
+ border-radius: var(--seed-radius-r2);
13460
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13461
+ }
13462
+
13463
+ .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]) {
13464
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13465
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13466
+ }
13467
+
13468
+ .seed-wheel-picker-public__item {
13469
+ height: var(--seed-wheel-picker-public-item-size);
13470
+ min-height: var(--seed-wheel-picker-public-item-size);
13471
+ color: var(--seed-wheel-picker-public-item-color);
13472
+ scroll-snap-align: center;
13473
+ -webkit-user-select: none;
13474
+ user-select: none;
13475
+ justify-content: center;
13476
+ align-items: center;
13477
+ display: flex;
13478
+ }
13479
+
13480
+ .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13481
+ color: #0000;
13482
+ 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%);
13483
+ -webkit-text-fill-color: transparent;
13484
+ -webkit-background-clip: text;
13485
+ background-clip: text;
13486
+ }
13487
+
13488
+ .seed-wheel-picker-public__itemLabel {
13489
+ box-sizing: border-box;
13490
+ height: 100%;
13491
+ padding-inline: var(--seed-dimension-x4);
13492
+ font-weight: var(--seed-font-weight-medium);
13493
+ white-space: nowrap;
13494
+ flex-shrink: 0;
13495
+ justify-content: center;
13496
+ align-items: center;
13497
+ display: flex;
13498
+ }
13499
+
13500
+ .seed-wheel-picker-public__selectionIndicator {
13501
+ z-index: 0;
13502
+ inset-inline: var(--seed-dimension-x4);
13503
+ height: var(--seed-wheel-picker-public-item-size);
13504
+ border-radius: var(--seed-radius-r2);
13505
+ background-color: var(--seed-color-bg-neutral-weak);
13506
+ pointer-events: none;
13507
+ position: absolute;
13508
+ top: 50%;
13509
+ transform: translateY(-50%);
13510
+ }
13511
+
13512
+ .seed-wheel-picker-public__root--size_small {
13513
+ height: var(--seed-wheel-picker-public-viewport-size, 180px);
13514
+ --seed-wheel-picker-public-item-size: 36px;
13515
+ --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13516
+ }
13517
+
13518
+ .seed-wheel-picker-public__itemLabel--size_small {
13519
+ font-size: var(--seed-font-size-t7-static);
13520
+ line-height: var(--seed-line-height-t7-static);
13521
+ }
13522
+
13523
+ .seed-wheel-picker-public__root--size_medium {
13524
+ height: var(--seed-wheel-picker-public-viewport-size, 220px);
13525
+ --seed-wheel-picker-public-item-size: 44px;
13526
+ --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13527
+ }
13528
+
13529
+ .seed-wheel-picker-public__itemLabel--size_medium {
13530
+ font-size: var(--seed-font-size-t10-static);
13531
+ line-height: var(--seed-line-height-t10-static);
13532
+ }
13533
+
12923
13534
  @keyframes seed-enter {
12924
13535
  from {
12925
13536
  opacity: var(--seed-enter-opacity, 1);