@seed-design/css 2.4.2 → 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 (128) hide show
  1. package/all.css +713 -94
  2. package/all.layered.css +713 -94
  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 +10 -4
  34. package/recipes/date-picker.layered.css +12 -4
  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/date-picker.d.ts +5 -0
  105. package/vars/component/date-picker.mjs +5 -0
  106. package/vars/component/help-bubble.d.ts +4 -1
  107. package/vars/component/help-bubble.mjs +3 -1
  108. package/vars/component/index.d.ts +6 -1
  109. package/vars/component/index.mjs +6 -1
  110. package/vars/component/list-item.d.ts +2 -6
  111. package/vars/component/list-item.mjs +2 -5
  112. package/vars/component/page-banner-close-button.d.ts +133 -0
  113. package/vars/component/page-banner-close-button.mjs +99 -0
  114. package/vars/component/page-banner.d.ts +0 -1
  115. package/vars/component/page-banner.mjs +0 -1
  116. package/vars/component/pagination-button.d.ts +33 -0
  117. package/vars/component/pagination-button.mjs +33 -0
  118. package/vars/component/pagination-page-item.d.ts +54 -0
  119. package/vars/component/pagination-page-item.mjs +54 -0
  120. package/vars/component/radio.d.ts +3 -0
  121. package/vars/component/select-box.d.ts +2 -2
  122. package/vars/component/select-box.mjs +2 -2
  123. package/vars/component/snackbar.d.ts +1 -1
  124. package/vars/component/snackbar.mjs +1 -1
  125. package/vars/component/switch.d.ts +3 -0
  126. package/vars/component/switchmark.d.ts +2 -0
  127. package/vars/component/wheel-picker.d.ts +72 -0
  128. 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 {
@@ -4814,29 +4906,37 @@
4814
4906
  }
4815
4907
 
4816
4908
  @media (hover: hover) and (pointer: fine) {
4817
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
4909
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
4818
4910
  background-color: var(--seed-color-bg-transparent-pressed);
4819
4911
  }
4820
4912
  }
4821
4913
 
4822
4914
  @media not all and (hover: hover) and (pointer: fine) {
4823
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
4915
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
4824
4916
  background-color: var(--seed-color-bg-transparent-pressed);
4825
4917
  }
4826
4918
  }
4827
4919
 
4828
4920
  @media (hover: hover) and (pointer: fine) {
4829
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
4921
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
4830
4922
  background-color: var(--seed-color-bg-neutral-inverted);
4831
4923
  }
4832
4924
  }
4833
4925
 
4834
4926
  @media not all and (hover: hover) and (pointer: fine) {
4835
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
4927
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
4836
4928
  background-color: var(--seed-color-bg-neutral-inverted);
4837
4929
  }
4838
4930
  }
4839
4931
 
4932
+ .seed-date-picker__dateButton[data-range-start-readonly]:before {
4933
+ background-color: var(--seed-color-palette-gray-600);
4934
+ }
4935
+
4936
+ .seed-date-picker__dateButton[data-range-start-readonly] {
4937
+ cursor: default;
4938
+ }
4939
+
4840
4940
  .seed-date-picker__dateButton[data-in-range] {
4841
4941
  color: var(--seed-color-fg-neutral-muted);
4842
4942
  }
@@ -5586,11 +5686,12 @@
5586
5686
  align-items: center;
5587
5687
  gap: var(--seed-dimension-x2_5);
5588
5688
  border-radius: var(--seed-radius-r3);
5689
+ height: 80px;
5690
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5589
5691
  --remove-button-mask-size: var(--seed-dimension-x6);
5590
5692
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5591
5693
  outline: var(--seed-dimension-x0_5) solid transparent;
5592
5694
  outline-offset: var(--seed-dimension-x0_5);
5593
- height: 80px;
5594
5695
  display: flex;
5595
5696
  position: relative;
5596
5697
  }
@@ -5628,6 +5729,7 @@
5628
5729
  }
5629
5730
 
5630
5731
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5732
+ scale: var(--seed-feedback-scale);
5631
5733
  --remove-button-mask-size: 0px;
5632
5734
  --remove-button-mask-offset: 0px;
5633
5735
  }
@@ -5722,9 +5824,6 @@
5722
5824
  font: inherit;
5723
5825
  cursor: pointer;
5724
5826
  border-radius: inherit;
5725
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5726
- outline: var(--seed-dimension-x0_5) solid transparent;
5727
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5728
5827
  background: none;
5729
5828
  border: none;
5730
5829
  flex-direction: column;
@@ -5734,6 +5833,16 @@
5734
5833
  display: flex;
5735
5834
  }
5736
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
+
5737
5846
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5738
5847
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5739
5848
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5755,9 +5864,6 @@
5755
5864
  background-color: var(--seed-color-bg-layer-default);
5756
5865
  border-radius: var(--seed-radius-full);
5757
5866
  cursor: pointer;
5758
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5759
- outline: var(--seed-dimension-x0_5) solid transparent;
5760
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5761
5867
  border: none;
5762
5868
  justify-content: center;
5763
5869
  align-items: center;
@@ -5766,6 +5872,16 @@
5766
5872
  position: absolute;
5767
5873
  }
5768
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
+
5769
5885
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
5770
5886
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5771
5887
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5830,7 +5946,7 @@
5830
5946
 
5831
5947
  .seed-attachment-input-item__root--type_image {
5832
5948
  width: 80px;
5833
- transition: opacity .2s;
5949
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5834
5950
  }
5835
5951
 
5836
5952
  .seed-attachment-input-item__root--type_image:before {
@@ -5888,9 +6004,6 @@
5888
6004
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
5889
6005
  cursor: pointer;
5890
6006
  border-radius: var(--seed-radius-r3);
5891
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5892
- outline: var(--seed-dimension-x0_5) solid transparent;
5893
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5894
6007
  background-color: #0000;
5895
6008
  border: none;
5896
6009
  flex-direction: column;
@@ -5899,6 +6012,16 @@
5899
6012
  display: flex;
5900
6013
  }
5901
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
+
5902
6025
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
5903
6026
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5904
6027
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -5995,11 +6118,18 @@
5995
6118
  font-size: var(--seed-font-size-t5);
5996
6119
  line-height: var(--seed-line-height-t5);
5997
6120
  font-weight: var(--seed-font-weight-bold);
5998
- 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);
5999
6121
  position: relative;
6000
6122
  overflow: hidden;
6001
6123
  }
6002
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
+
6003
6133
  @media (hover: hover) and (pointer: fine) {
6004
6134
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6005
6135
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6119,11 +6249,12 @@
6119
6249
  }
6120
6250
 
6121
6251
  .seed-help-bubble__content {
6252
+ box-sizing: border-box;
6122
6253
  background: var(--seed-color-bg-neutral-inverted);
6123
6254
  padding-inline: var(--seed-dimension-x3);
6124
6255
  padding-block: var(--seed-dimension-x2_5);
6125
6256
  border-radius: var(--seed-radius-r3);
6126
- --seed-box-max-width-base: none;
6257
+ --seed-box-max-width-base: 280px;
6127
6258
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6128
6259
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6129
6260
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6210,9 +6341,6 @@
6210
6341
  --seed-icon-size: var(--seed-dimension-x3_5);
6211
6342
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6212
6343
  border-radius: var(--seed-radius-r3);
6213
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6214
- outline: var(--seed-dimension-x0_5) solid transparent;
6215
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6216
6344
  background: none;
6217
6345
  border: none;
6218
6346
  justify-content: center;
@@ -6220,6 +6348,16 @@
6220
6348
  display: flex;
6221
6349
  }
6222
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
+
6223
6361
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6224
6362
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6225
6363
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6326,6 +6464,14 @@
6326
6464
  position: relative;
6327
6465
  }
6328
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
+
6329
6475
  .seed-image-frame-reaction-button__root:before {
6330
6476
  content: "";
6331
6477
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6672,14 +6818,21 @@
6672
6818
  .seed-input-button__clearButton {
6673
6819
  cursor: pointer;
6674
6820
  border-radius: var(--seed-radius-full);
6675
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6676
- outline: var(--seed-dimension-x0_5) solid transparent;
6677
- outline-offset: var(--seed-dimension-x0_5);
6678
6821
  background-color: #0000;
6679
6822
  border: none;
6680
6823
  padding: 0;
6681
6824
  }
6682
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
+
6683
6836
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6684
6837
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6685
6838
  outline-offset: var(--seed-dimension-x0_5);
@@ -6981,6 +7134,9 @@
6981
7134
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
6982
7135
  padding-right: var(--seed-box-padding-right);
6983
7136
  --seed-focus-ring: none;
7137
+ --seed-checkmark-feedback-scale: 1;
7138
+ --seed-radiomark-feedback-scale: 1;
7139
+ --seed-switchmark-feedback-scale: 1;
6984
7140
  --seed-icon-size: 22px;
6985
7141
  --seed-icon-color: var(--seed-color-fg-neutral);
6986
7142
  flex-shrink: 0;
@@ -7004,6 +7160,9 @@
7004
7160
  align-items: center;
7005
7161
  gap: var(--seed-box-gap);
7006
7162
  --seed-focus-ring: none;
7163
+ --seed-checkmark-feedback-scale: 1;
7164
+ --seed-radiomark-feedback-scale: 1;
7165
+ --seed-switchmark-feedback-scale: 1;
7007
7166
  font-size: var(--seed-font-size-t5);
7008
7167
  line-height: var(--seed-line-height-t5);
7009
7168
  font-weight: var(--seed-font-weight-regular);
@@ -7329,7 +7488,7 @@
7329
7488
  }
7330
7489
 
7331
7490
  .seed-menu__scrollArea {
7332
- 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)));
7333
7492
  box-sizing: border-box;
7334
7493
  padding-block: var(--seed-dimension-x2);
7335
7494
  gap: var(--seed-dimension-x2);
@@ -7620,6 +7779,7 @@
7620
7779
  word-break: break-all;
7621
7780
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7622
7781
  background: var(--seed-color-bg-layer-floating);
7782
+ max-width: 480px;
7623
7783
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7624
7784
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7625
7785
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7710,13 +7870,20 @@
7710
7870
  font-size: var(--seed-font-size-t5);
7711
7871
  line-height: var(--seed-line-height-t5);
7712
7872
  font-weight: var(--seed-font-weight-medium);
7713
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7714
7873
  border: none;
7715
7874
  justify-content: center;
7716
7875
  align-items: center;
7717
7876
  display: flex;
7718
7877
  }
7719
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
+
7720
7887
  @media (hover: hover) and (pointer: fine) {
7721
7888
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7722
7889
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8020,15 +8187,22 @@
8020
8187
  line-height: var(--seed-line-height-t3);
8021
8188
  font-weight: var(--seed-font-weight-bold);
8022
8189
  border-radius: var(--seed-radius-r1);
8023
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8024
- outline: var(--seed-dimension-x0_5) solid transparent;
8025
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8026
8190
  background-color: #0000;
8027
8191
  border: none;
8028
8192
  align-items: center;
8029
8193
  display: flex;
8030
8194
  }
8031
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
+
8032
8206
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8033
8207
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8034
8208
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8040,12 +8214,10 @@
8040
8214
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8041
8215
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8042
8216
  --seed-suffix-icon-margin-left: initial;
8217
+ background-color: var(--seed-color-bg-transparent);
8043
8218
  cursor: pointer;
8044
- border-radius: var(--seed-radius-r1);
8045
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8046
- outline: var(--seed-dimension-x0_5) solid transparent;
8047
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8048
- background-color: #0000;
8219
+ border-radius: var(--seed-radius-r2);
8220
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8049
8221
  border: none;
8050
8222
  flex-grow: 0;
8051
8223
  flex-shrink: 0;
@@ -8056,11 +8228,33 @@
8056
8228
  display: flex;
8057
8229
  }
8058
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
+
8059
8241
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8060
8242
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8061
8243
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8062
8244
  }
8063
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
+
8064
8258
  .seed-page-banner__root--tone_neutral-variant_weak {
8065
8259
  background-color: var(--seed-color-bg-neutral-weak);
8066
8260
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8083,6 +8277,10 @@
8083
8277
  color: var(--seed-color-fg-neutral);
8084
8278
  }
8085
8279
 
8280
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8281
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8282
+ }
8283
+
8086
8284
  .seed-page-banner__root--tone_neutral-variant_solid {
8087
8285
  background-color: var(--seed-color-bg-neutral-inverted);
8088
8286
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -8105,6 +8303,10 @@
8105
8303
  color: var(--seed-color-fg-neutral-inverted);
8106
8304
  }
8107
8305
 
8306
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8307
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8308
+ }
8309
+
8108
8310
  .seed-page-banner__root--tone_informative-variant_weak {
8109
8311
  background-color: var(--seed-color-bg-informative-weak);
8110
8312
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8127,6 +8329,10 @@
8127
8329
  color: var(--seed-color-fg-informative-contrast);
8128
8330
  }
8129
8331
 
8332
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8333
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8334
+ }
8335
+
8130
8336
  .seed-page-banner__root--tone_informative-variant_solid {
8131
8337
  background-color: var(--seed-color-bg-informative-solid);
8132
8338
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8149,6 +8355,10 @@
8149
8355
  color: var(--seed-color-palette-static-white);
8150
8356
  }
8151
8357
 
8358
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8359
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8360
+ }
8361
+
8152
8362
  .seed-page-banner__root--tone_positive-variant_weak {
8153
8363
  background-color: var(--seed-color-bg-positive-weak);
8154
8364
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8171,6 +8381,10 @@
8171
8381
  color: var(--seed-color-fg-positive-contrast);
8172
8382
  }
8173
8383
 
8384
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8385
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8386
+ }
8387
+
8174
8388
  .seed-page-banner__root--tone_positive-variant_solid {
8175
8389
  background-color: var(--seed-color-bg-positive-solid);
8176
8390
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8193,6 +8407,10 @@
8193
8407
  color: var(--seed-color-palette-static-white);
8194
8408
  }
8195
8409
 
8410
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8411
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8412
+ }
8413
+
8196
8414
  .seed-page-banner__root--tone_warning-variant_weak {
8197
8415
  background-color: var(--seed-color-bg-warning-weak);
8198
8416
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8215,6 +8433,10 @@
8215
8433
  color: var(--seed-color-fg-warning-contrast);
8216
8434
  }
8217
8435
 
8436
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8437
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8438
+ }
8439
+
8218
8440
  .seed-page-banner__root--tone_warning-variant_solid {
8219
8441
  background-color: var(--seed-color-bg-warning-solid);
8220
8442
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8237,7 +8459,11 @@
8237
8459
  color: var(--seed-color-palette-static-black-alpha-900);
8238
8460
  }
8239
8461
 
8240
- .seed-page-banner__root--tone_critical-variant_weak {
8462
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8463
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8464
+ }
8465
+
8466
+ .seed-page-banner__root--tone_critical-variant_weak {
8241
8467
  background-color: var(--seed-color-bg-critical-weak);
8242
8468
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
8243
8469
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8259,6 +8485,10 @@
8259
8485
  color: var(--seed-color-fg-critical-contrast);
8260
8486
  }
8261
8487
 
8488
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8489
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8490
+ }
8491
+
8262
8492
  .seed-page-banner__root--tone_critical-variant_solid {
8263
8493
  background-color: var(--seed-color-bg-critical-solid);
8264
8494
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8281,6 +8511,10 @@
8281
8511
  color: var(--seed-color-palette-static-white);
8282
8512
  }
8283
8513
 
8514
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8515
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8516
+ }
8517
+
8284
8518
  .seed-page-banner__root--tone_magic-variant_weak {
8285
8519
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8286
8520
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8303,6 +8537,206 @@
8303
8537
  color: var(--seed-color-fg-neutral);
8304
8538
  }
8305
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
+
8306
8740
  .seed-progress-circle__root {
8307
8741
  box-sizing: border-box;
8308
8742
  display: inline-flex;
@@ -8355,7 +8789,7 @@
8355
8789
  }
8356
8790
 
8357
8791
  .seed-pull-to-refresh__root {
8358
- --ptr-size: 44px;
8792
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8359
8793
  --ptr-transition-duration: var(--seed-duration-d6);
8360
8794
  height: 100%;
8361
8795
  }
@@ -8389,7 +8823,7 @@
8389
8823
  box-sizing: border-box;
8390
8824
  cursor: pointer;
8391
8825
  background-color: var(--seed-color-bg-transparent);
8392
- 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);
8393
8827
  outline: var(--seed-dimension-x0_5) solid transparent;
8394
8828
  outline-offset: var(--seed-dimension-x0_5);
8395
8829
  border: none;
@@ -8405,6 +8839,10 @@
8405
8839
  outline-offset: var(--seed-dimension-x0_5);
8406
8840
  }
8407
8841
 
8842
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8843
+ scale: var(--seed-feedback-scale);
8844
+ }
8845
+
8408
8846
  @media (hover: hover) and (pointer: fine) {
8409
8847
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8410
8848
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8472,7 +8910,7 @@
8472
8910
  box-sizing: border-box;
8473
8911
  cursor: pointer;
8474
8912
  background-color: var(--seed-color-bg-transparent);
8475
- 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);
8476
8914
  outline: var(--seed-dimension-x0_5) solid transparent;
8477
8915
  outline-offset: var(--seed-dimension-x0_5);
8478
8916
  border: none;
@@ -8488,6 +8926,10 @@
8488
8926
  outline-offset: var(--seed-dimension-x0_5);
8489
8927
  }
8490
8928
 
8929
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8930
+ scale: var(--seed-feedback-scale);
8931
+ }
8932
+
8491
8933
  @media (hover: hover) and (pointer: fine) {
8492
8934
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8493
8935
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8715,9 +9157,6 @@
8715
9157
  border-color: var(--seed-color-stroke-neutral-weak);
8716
9158
  border-radius: var(--seed-radius-full);
8717
9159
  margin-top: var(--radiomark-margin-top, 0);
8718
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8719
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
8720
- outline-offset: var(--seed-dimension-x0_5);
8721
9160
  flex: none;
8722
9161
  justify-content: center;
8723
9162
  align-items: center;
@@ -8725,6 +9164,16 @@
8725
9164
  position: relative;
8726
9165
  }
8727
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
+
8728
9177
  @media (hover: hover) and (pointer: fine) {
8729
9178
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8730
9179
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8864,8 +9313,12 @@
8864
9313
  outline-offset: var(--seed-dimension-x0_5);
8865
9314
  }
8866
9315
 
9316
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9317
+ scale: var(--seed-feedback-scale);
9318
+ }
9319
+
8867
9320
  .seed-reaction-button {
8868
- 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);
8869
9322
  background: var(--seed-color-bg-transparent);
8870
9323
  font-weight: var(--seed-font-weight-medium);
8871
9324
  color: var(--seed-color-fg-neutral);
@@ -9136,7 +9589,7 @@
9136
9589
  }
9137
9590
 
9138
9591
  .seed-select__scrollArea {
9139
- 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)));
9140
9593
  box-sizing: border-box;
9141
9594
  padding-block: var(--seed-dimension-x2);
9142
9595
  gap: var(--seed-dimension-x2);
@@ -9619,7 +10072,7 @@
9619
10072
  cursor: pointer;
9620
10073
  border-radius: var(--seed-radius-r3);
9621
10074
  background-color: var(--seed-color-bg-transparent);
9622
- 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);
9623
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);
9624
10077
  flex-direction: column;
9625
10078
  display: flex;
@@ -9656,11 +10109,11 @@
9656
10109
 
9657
10110
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9658
10111
  cursor: not-allowed;
9659
- 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);
9660
10113
  }
9661
10114
 
9662
10115
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
9663
- 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);
9664
10117
  }
9665
10118
 
9666
10119
  .seed-select-box__root {
@@ -10354,11 +10807,6 @@
10354
10807
  top: calc(28px + var(--seed-safe-area-top));
10355
10808
  border-radius: var(--seed-radius-r3);
10356
10809
  cursor: pointer;
10357
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
10358
- --seed-icon-size: 22px;
10359
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10360
- outline: var(--seed-dimension-x0_5) solid transparent;
10361
- outline-offset: var(--seed-dimension-x0_5);
10362
10810
  border: none;
10363
10811
  justify-content: center;
10364
10812
  align-items: center;
@@ -10369,6 +10817,18 @@
10369
10817
  right: 24px;
10370
10818
  }
10371
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
+
10372
10832
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10373
10833
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10374
10834
  outline-offset: var(--seed-dimension-x0_5);
@@ -10784,7 +11244,7 @@
10784
11244
  background: var(--seed-color-bg-neutral-inverted);
10785
11245
  border-radius: var(--seed-radius-r2);
10786
11246
  width: 100%;
10787
- max-width: 560px;
11247
+ max-width: 464px;
10788
11248
  padding-inline: var(--seed-dimension-x2_5);
10789
11249
  padding-block: var(--seed-dimension-x2_5);
10790
11250
  min-height: 44px;
@@ -10865,6 +11325,14 @@
10865
11325
  position: relative;
10866
11326
  }
10867
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
+
10868
11336
  .seed-snackbar__actionButton:after {
10869
11337
  content: "";
10870
11338
  top: 50%;
@@ -10981,11 +11449,15 @@
10981
11449
  border-radius: var(--seed-radius-full);
10982
11450
  background: var(--seed-color-palette-gray-600);
10983
11451
  margin: var(--switchmark-margin-top, 0) 0;
10984
- 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);
10985
11453
  display: block;
10986
11454
  position: relative;
10987
11455
  }
10988
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
+
10989
11461
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
10990
11462
  opacity: .38;
10991
11463
  }
@@ -11171,8 +11643,12 @@
11171
11643
  bottom: 0;
11172
11644
  }
11173
11645
 
11646
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11647
+ scale: var(--seed-feedback-scale);
11648
+ }
11649
+
11174
11650
  .seed-tabs__trigger {
11175
- 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);
11176
11652
  outline: var(--seed-dimension-x0_5) solid transparent;
11177
11653
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11178
11654
  }
@@ -12664,8 +13140,12 @@
12664
13140
  cursor: not-allowed;
12665
13141
  }
12666
13142
 
13143
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13144
+ scale: var(--seed-feedback-scale);
13145
+ }
13146
+
12667
13147
  .seed-toggle-button {
12668
- 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);
12669
13149
  font-weight: var(--seed-font-weight-bold);
12670
13150
  }
12671
13151
 
@@ -12904,7 +13384,7 @@
12904
13384
 
12905
13385
  .seed-wheel-picker__selectionIndicator {
12906
13386
  z-index: 0;
12907
- inset-inline: 0;
13387
+ inset-inline: var(--seed-dimension-x4);
12908
13388
  height: var(--seed-wheel-picker-item-size);
12909
13389
  pointer-events: none;
12910
13390
  position: absolute;
@@ -12912,6 +13392,145 @@
12912
13392
  transform: translateY(-50%);
12913
13393
  }
12914
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
+
12915
13534
  @keyframes seed-enter {
12916
13535
  from {
12917
13536
  opacity: var(--seed-enter-opacity, 1);