@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.layered.css CHANGED
@@ -24,6 +24,8 @@
24
24
  --seed-font-size-limit-max: 1.5;
25
25
  --seed-line-height-limit-min: .8;
26
26
  --seed-line-height-limit-max: 1.5;
27
+ --seed-feedback-scale: 1;
28
+ --seed-feedback-scale-transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
27
29
  }
28
30
 
29
31
  [data-seed-platform="ios"] {
@@ -381,6 +383,19 @@
381
383
  display: block;
382
384
  }
383
385
 
386
+ .seed-scale-feedback {
387
+ --seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
388
+ --seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
389
+ --seed-feedback-scale: var(--seed-dynamic-scale, 1);
390
+ scale: 1;
391
+ }
392
+
393
+ @media (prefers-reduced-motion: reduce) {
394
+ .seed-scale-feedback {
395
+ --seed-feedback-scale: 1;
396
+ }
397
+ }
398
+
384
399
  :root, [data-seed-color-mode="system"] {
385
400
  --lightningcss-light: initial;
386
401
  --lightningcss-dark: ;
@@ -1357,7 +1372,7 @@
1357
1372
  }
1358
1373
 
1359
1374
  .seed-accordion__item--variant_separated {
1360
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
1375
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
1361
1376
  border-radius: var(--seed-radius-r3);
1362
1377
  overflow: hidden;
1363
1378
  }
@@ -1577,9 +1592,12 @@
1577
1592
  cursor: not-allowed;
1578
1593
  }
1579
1594
 
1595
+ .seed-action-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1596
+ scale: var(--seed-feedback-scale);
1597
+ }
1598
+
1580
1599
  .seed-action-button {
1581
1600
  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);
1582
- scale: 1;
1583
1601
  }
1584
1602
 
1585
1603
  .seed-action-button--variant_brandSolid {
@@ -1847,10 +1865,6 @@
1847
1865
  --seed-icon-size: var(--seed-dimension-x3_5);
1848
1866
  }
1849
1867
 
1850
- .seed-action-button--size_xsmall:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1851
- scale: var(--seed-scale-s95);
1852
- }
1853
-
1854
1868
  .seed-action-button--size_small {
1855
1869
  height: var(--seed-dimension-x9);
1856
1870
  border-radius: var(--seed-radius-r2);
@@ -1861,10 +1875,6 @@
1861
1875
  --seed-icon-size: var(--seed-dimension-x4);
1862
1876
  }
1863
1877
 
1864
- .seed-action-button--size_small:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1865
- scale: var(--seed-scale-s97);
1866
- }
1867
-
1868
1878
  .seed-action-button--size_medium {
1869
1879
  height: var(--seed-dimension-x10);
1870
1880
  border-radius: var(--seed-radius-r2);
@@ -1875,10 +1885,6 @@
1875
1885
  --seed-icon-size: 18px;
1876
1886
  }
1877
1887
 
1878
- .seed-action-button--size_medium:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1879
- scale: var(--seed-scale-s97);
1880
- }
1881
-
1882
1888
  .seed-action-button--size_large {
1883
1889
  height: var(--seed-dimension-x13);
1884
1890
  border-radius: var(--seed-radius-r3);
@@ -1889,10 +1895,6 @@
1889
1895
  --seed-icon-size: 22px;
1890
1896
  }
1891
1897
 
1892
- .seed-action-button--size_large:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1893
- scale: var(--seed-scale-s98);
1894
- }
1895
-
1896
1898
  .seed-action-button--size_xsmall-layout_withText {
1897
1899
  gap: var(--seed-dimension-x1);
1898
1900
  --seed-box-padding-left: var(--seed-dimension-x3_5);
@@ -3105,6 +3107,7 @@
3105
3107
  background: var(--seed-color-bg-layer-floating);
3106
3108
  border-top-left-radius: var(--seed-radius-r6);
3107
3109
  border-top-right-radius: var(--seed-radius-r6);
3110
+ max-width: 480px;
3108
3111
  padding-bottom: var(--seed-safe-area-bottom);
3109
3112
  touch-action: none;
3110
3113
  will-change: transform;
@@ -3215,8 +3218,6 @@
3215
3218
  border-radius: var(--seed-radius-full);
3216
3219
  background: var(--seed-color-bg-neutral-weak);
3217
3220
  cursor: pointer;
3218
- --seed-icon-size: 14px;
3219
- --seed-icon-color: var(--seed-color-fg-neutral);
3220
3221
  border: none;
3221
3222
  justify-content: center;
3222
3223
  align-items: center;
@@ -3226,6 +3227,16 @@
3226
3227
  position: absolute;
3227
3228
  }
3228
3229
 
3230
+ .seed-bottom-sheet__closeButton:is(:active, [data-active]) {
3231
+ scale: var(--seed-feedback-scale);
3232
+ }
3233
+
3234
+ .seed-bottom-sheet__closeButton {
3235
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
3236
+ --seed-icon-size: 14px;
3237
+ --seed-icon-color: var(--seed-color-fg-neutral);
3238
+ }
3239
+
3229
3240
  .seed-bottom-sheet__closeButton:after {
3230
3241
  content: "";
3231
3242
  border-radius: var(--seed-radius-r1);
@@ -3375,7 +3386,14 @@
3375
3386
 
3376
3387
  .seed-callout__root:is(button, a) {
3377
3388
  cursor: pointer;
3378
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3389
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3390
+ }
3391
+
3392
+ .seed-callout__root:is(button, a):is(:active, [data-active]) {
3393
+ scale: var(--seed-feedback-scale);
3394
+ }
3395
+
3396
+ .seed-callout__root:is(button, a) {
3379
3397
  outline: var(--seed-dimension-x0_5) solid transparent;
3380
3398
  outline-offset: var(--seed-dimension-x0_5);
3381
3399
  }
@@ -3436,15 +3454,13 @@
3436
3454
  }
3437
3455
 
3438
3456
  .seed-callout__closeButton {
3457
+ background-color: var(--seed-color-bg-transparent);
3439
3458
  cursor: pointer;
3440
3459
  width: var(--seed-dimension-x10);
3441
3460
  height: var(--seed-dimension-x10);
3442
3461
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3443
- border-radius: var(--seed-radius-r2_5);
3444
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3445
- outline: var(--seed-dimension-x0_5) solid transparent;
3446
- outline-offset: var(--seed-dimension-x0_5);
3447
- background-color: #0000;
3462
+ border-radius: var(--seed-radius-r2);
3463
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
3448
3464
  border: none;
3449
3465
  flex-grow: 0;
3450
3466
  flex-shrink: 0;
@@ -3454,11 +3470,33 @@
3454
3470
  display: flex;
3455
3471
  }
3456
3472
 
3473
+ .seed-callout__closeButton:is(:active, [data-active]) {
3474
+ scale: var(--seed-feedback-scale);
3475
+ }
3476
+
3477
+ .seed-callout__closeButton {
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-dimension-x0_5) solid transparent;
3480
+ outline-offset: var(--seed-dimension-x0_5);
3481
+ }
3482
+
3457
3483
  .seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
3458
3484
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3459
3485
  outline-offset: var(--seed-dimension-x0_5);
3460
3486
  }
3461
3487
 
3488
+ @media (hover: hover) and (pointer: fine) {
3489
+ .seed-callout__closeButton:is(:hover, [data-hover]) {
3490
+ background-color: var(--seed-color-bg-transparent-pressed);
3491
+ }
3492
+ }
3493
+
3494
+ @media not all and (hover: hover) and (pointer: fine) {
3495
+ .seed-callout__closeButton:is(:active, [data-active]) {
3496
+ background-color: var(--seed-color-bg-transparent-pressed);
3497
+ }
3498
+ }
3499
+
3462
3500
  .seed-callout__root--tone_neutral {
3463
3501
  background-color: var(--seed-color-bg-neutral-weak);
3464
3502
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -3481,6 +3519,10 @@
3481
3519
  color: var(--seed-color-fg-neutral);
3482
3520
  }
3483
3521
 
3522
+ .seed-callout__closeButton--tone_neutral {
3523
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3524
+ }
3525
+
3484
3526
  .seed-callout__root--tone_informative {
3485
3527
  background-color: var(--seed-color-bg-informative-weak);
3486
3528
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -3503,6 +3545,10 @@
3503
3545
  color: var(--seed-color-fg-informative-contrast);
3504
3546
  }
3505
3547
 
3548
+ .seed-callout__closeButton--tone_informative {
3549
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
3550
+ }
3551
+
3506
3552
  .seed-callout__root--tone_positive {
3507
3553
  background-color: var(--seed-color-bg-positive-weak);
3508
3554
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -3525,6 +3571,10 @@
3525
3571
  color: var(--seed-color-fg-positive-contrast);
3526
3572
  }
3527
3573
 
3574
+ .seed-callout__closeButton--tone_positive {
3575
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3576
+ }
3577
+
3528
3578
  .seed-callout__root--tone_warning {
3529
3579
  background-color: var(--seed-color-bg-warning-weak);
3530
3580
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -3547,6 +3597,10 @@
3547
3597
  color: var(--seed-color-fg-warning-contrast);
3548
3598
  }
3549
3599
 
3600
+ .seed-callout__closeButton--tone_warning {
3601
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3602
+ }
3603
+
3550
3604
  .seed-callout__root--tone_critical {
3551
3605
  background-color: var(--seed-color-bg-critical-weak);
3552
3606
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -3569,6 +3623,10 @@
3569
3623
  color: var(--seed-color-fg-critical-contrast);
3570
3624
  }
3571
3625
 
3626
+ .seed-callout__closeButton--tone_critical {
3627
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3628
+ }
3629
+
3572
3630
  .seed-callout__root--tone_magic {
3573
3631
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
3574
3632
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -3591,6 +3649,10 @@
3591
3649
  color: var(--seed-color-fg-neutral);
3592
3650
  }
3593
3651
 
3652
+ .seed-callout__closeButton--tone_magic {
3653
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3654
+ }
3655
+
3594
3656
  .seed-checkbox__root {
3595
3657
  vertical-align: top;
3596
3658
  isolation: isolate;
@@ -3653,13 +3715,20 @@
3653
3715
  .seed-checkmark__root {
3654
3716
  box-sizing: border-box;
3655
3717
  margin-top: var(--checkmark-margin-top, 0);
3656
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3657
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
3658
- outline-offset: var(--seed-dimension-x0_5);
3659
3718
  flex: none;
3660
3719
  position: relative;
3661
3720
  }
3662
3721
 
3722
+ .seed-checkmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3723
+ scale: var(--seed-checkmark-feedback-scale, var(--seed-feedback-scale));
3724
+ }
3725
+
3726
+ .seed-checkmark__root {
3727
+ 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);
3728
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
3729
+ outline-offset: var(--seed-dimension-x0_5);
3730
+ }
3731
+
3663
3732
  .seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
3664
3733
  outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
3665
3734
  outline-offset: var(--seed-dimension-x0_5);
@@ -3845,21 +3914,26 @@
3845
3914
  -webkit-font-smoothing: antialiased;
3846
3915
  -moz-osx-font-smoothing: grayscale;
3847
3916
  border-radius: var(--seed-radius-full);
3848
- transition-duration: var(--seed-duration-color-transition);
3849
- transition-timing-function: var(--seed-timing-function-easing);
3850
- outline: var(--seed-dimension-x0_5) solid transparent;
3851
- outline-offset: var(--seed-dimension-x0_5);
3852
3917
  border: none;
3853
3918
  flex-shrink: 0;
3854
3919
  justify-content: center;
3855
3920
  align-items: center;
3856
3921
  font-family: inherit;
3857
3922
  line-height: 1;
3858
- transition-property: background-color, color, border-color, box-shadow, outline-color;
3859
3923
  display: inline-flex;
3860
3924
  position: relative;
3861
3925
  }
3862
3926
 
3927
+ .seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3928
+ scale: var(--seed-feedback-scale);
3929
+ }
3930
+
3931
+ .seed-chip__root {
3932
+ 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);
3933
+ outline: var(--seed-dimension-x0_5) solid transparent;
3934
+ outline-offset: var(--seed-dimension-x0_5);
3935
+ }
3936
+
3863
3937
  .seed-chip__root:is(:focus-visible, [data-focus-visible]) {
3864
3938
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3865
3939
  outline-offset: var(--seed-dimension-x0_5);
@@ -4167,9 +4241,6 @@
4167
4241
  border-radius: var(--seed-radius-full);
4168
4242
  font-family: inherit;
4169
4243
  font-weight: var(--seed-font-weight-medium);
4170
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4171
- outline: var(--seed-dimension-x0_5) solid transparent;
4172
- outline-offset: var(--seed-dimension-x0_5);
4173
4244
  border: none;
4174
4245
  flex-shrink: 0;
4175
4246
  justify-content: center;
@@ -4177,6 +4248,16 @@
4177
4248
  display: flex;
4178
4249
  }
4179
4250
 
4251
+ .seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4252
+ scale: var(--seed-feedback-scale);
4253
+ }
4254
+
4255
+ .seed-chip-tabs__trigger {
4256
+ 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);
4257
+ outline: var(--seed-dimension-x0_5) solid transparent;
4258
+ outline-offset: var(--seed-dimension-x0_5);
4259
+ }
4260
+
4180
4261
  .seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
4181
4262
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4182
4263
  outline-offset: var(--seed-dimension-x0_5);
@@ -4513,7 +4594,7 @@
4513
4594
  background: var(--seed-color-bg-transparent);
4514
4595
  border-radius: var(--seed-radius-r3);
4515
4596
  cursor: pointer;
4516
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4597
+ 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);
4517
4598
  --seed-icon-size: 22px;
4518
4599
  --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4519
4600
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -4532,6 +4613,10 @@
4532
4613
  outline-offset: var(--seed-dimension-x0_5);
4533
4614
  }
4534
4615
 
4616
+ .seed-content-dialog__closeButton:is(:active, [data-active]) {
4617
+ scale: var(--seed-feedback-scale);
4618
+ }
4619
+
4535
4620
  @media (hover: hover) and (pointer: fine) {
4536
4621
  .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
4537
4622
  background: var(--seed-color-bg-transparent-pressed);
@@ -4624,7 +4709,14 @@
4624
4709
  --seed-icon-size: 22px;
4625
4710
  --size: 16px;
4626
4711
  --thickness: 2px;
4627
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4712
+ }
4713
+
4714
+ .seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4715
+ scale: var(--seed-feedback-scale);
4716
+ }
4717
+
4718
+ .seed-contextual-floating-button {
4719
+ 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);
4628
4720
  }
4629
4721
 
4630
4722
  .seed-contextual-floating-button--variant_solid {
@@ -5843,11 +5935,12 @@
5843
5935
  align-items: center;
5844
5936
  gap: var(--seed-dimension-x2_5);
5845
5937
  border-radius: var(--seed-radius-r3);
5938
+ height: 80px;
5939
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5846
5940
  --remove-button-mask-size: var(--seed-dimension-x6);
5847
5941
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5848
5942
  outline: var(--seed-dimension-x0_5) solid transparent;
5849
5943
  outline-offset: var(--seed-dimension-x0_5);
5850
- height: 80px;
5851
5944
  display: flex;
5852
5945
  position: relative;
5853
5946
  }
@@ -5885,6 +5978,7 @@
5885
5978
  }
5886
5979
 
5887
5980
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5981
+ scale: var(--seed-feedback-scale);
5888
5982
  --remove-button-mask-size: 0px;
5889
5983
  --remove-button-mask-offset: 0px;
5890
5984
  }
@@ -5979,9 +6073,6 @@
5979
6073
  font: inherit;
5980
6074
  cursor: pointer;
5981
6075
  border-radius: inherit;
5982
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5983
- outline: var(--seed-dimension-x0_5) solid transparent;
5984
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5985
6076
  background: none;
5986
6077
  border: none;
5987
6078
  flex-direction: column;
@@ -5991,6 +6082,16 @@
5991
6082
  display: flex;
5992
6083
  }
5993
6084
 
6085
+ .seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6086
+ scale: var(--seed-feedback-scale);
6087
+ }
6088
+
6089
+ .seed-attachment-input-item__actionButton {
6090
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6091
+ outline: var(--seed-dimension-x0_5) solid transparent;
6092
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6093
+ }
6094
+
5994
6095
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5995
6096
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5996
6097
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6012,9 +6113,6 @@
6012
6113
  background-color: var(--seed-color-bg-layer-default);
6013
6114
  border-radius: var(--seed-radius-full);
6014
6115
  cursor: pointer;
6015
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6016
- outline: var(--seed-dimension-x0_5) solid transparent;
6017
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6018
6116
  border: none;
6019
6117
  justify-content: center;
6020
6118
  align-items: center;
@@ -6023,6 +6121,16 @@
6023
6121
  position: absolute;
6024
6122
  }
6025
6123
 
6124
+ .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6125
+ scale: var(--seed-feedback-scale);
6126
+ }
6127
+
6128
+ .seed-attachment-input-item__removeButton {
6129
+ 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);
6130
+ outline: var(--seed-dimension-x0_5) solid transparent;
6131
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6132
+ }
6133
+
6026
6134
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
6027
6135
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6028
6136
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6087,7 +6195,7 @@
6087
6195
 
6088
6196
  .seed-attachment-input-item__root--type_image {
6089
6197
  width: 80px;
6090
- transition: opacity .2s;
6198
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6091
6199
  }
6092
6200
 
6093
6201
  .seed-attachment-input-item__root--type_image:before {
@@ -6145,9 +6253,6 @@
6145
6253
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
6146
6254
  cursor: pointer;
6147
6255
  border-radius: var(--seed-radius-r3);
6148
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6149
- outline: var(--seed-dimension-x0_5) solid transparent;
6150
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6151
6256
  background-color: #0000;
6152
6257
  border: none;
6153
6258
  flex-direction: column;
@@ -6156,6 +6261,16 @@
6156
6261
  display: flex;
6157
6262
  }
6158
6263
 
6264
+ .seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6265
+ scale: var(--seed-feedback-scale);
6266
+ }
6267
+
6268
+ .seed-attachment-input-trigger__root {
6269
+ 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);
6270
+ outline: var(--seed-dimension-x0_5) solid transparent;
6271
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6272
+ }
6273
+
6159
6274
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
6160
6275
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6161
6276
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6252,11 +6367,18 @@
6252
6367
  font-size: var(--seed-font-size-t5);
6253
6368
  line-height: var(--seed-line-height-t5);
6254
6369
  font-weight: var(--seed-font-weight-bold);
6255
- 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);
6256
6370
  position: relative;
6257
6371
  overflow: hidden;
6258
6372
  }
6259
6373
 
6374
+ .seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6375
+ scale: var(--seed-feedback-scale);
6376
+ }
6377
+
6378
+ .seed-floating-action-button__root {
6379
+ 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);
6380
+ }
6381
+
6260
6382
  @media (hover: hover) and (pointer: fine) {
6261
6383
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6262
6384
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6376,11 +6498,12 @@
6376
6498
  }
6377
6499
 
6378
6500
  .seed-help-bubble__content {
6501
+ box-sizing: border-box;
6379
6502
  background: var(--seed-color-bg-neutral-inverted);
6380
6503
  padding-inline: var(--seed-dimension-x3);
6381
6504
  padding-block: var(--seed-dimension-x2_5);
6382
6505
  border-radius: var(--seed-radius-r3);
6383
- --seed-box-max-width-base: none;
6506
+ --seed-box-max-width-base: 280px;
6384
6507
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6385
6508
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6386
6509
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6467,9 +6590,6 @@
6467
6590
  --seed-icon-size: var(--seed-dimension-x3_5);
6468
6591
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6469
6592
  border-radius: var(--seed-radius-r3);
6470
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6471
- outline: var(--seed-dimension-x0_5) solid transparent;
6472
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6473
6593
  background: none;
6474
6594
  border: none;
6475
6595
  justify-content: center;
@@ -6477,6 +6597,16 @@
6477
6597
  display: flex;
6478
6598
  }
6479
6599
 
6600
+ .seed-help-bubble__closeButton:is(:active, [data-active]) {
6601
+ scale: var(--seed-feedback-scale);
6602
+ }
6603
+
6604
+ .seed-help-bubble__closeButton {
6605
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6606
+ outline: var(--seed-dimension-x0_5) solid transparent;
6607
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6608
+ }
6609
+
6480
6610
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6481
6611
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6482
6612
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6583,6 +6713,14 @@
6583
6713
  position: relative;
6584
6714
  }
6585
6715
 
6716
+ .seed-image-frame-reaction-button__root:is(:active, [data-active]) {
6717
+ scale: var(--seed-feedback-scale);
6718
+ }
6719
+
6720
+ .seed-image-frame-reaction-button__root {
6721
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6722
+ }
6723
+
6586
6724
  .seed-image-frame-reaction-button__root:before {
6587
6725
  content: "";
6588
6726
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6929,14 +7067,21 @@
6929
7067
  .seed-input-button__clearButton {
6930
7068
  cursor: pointer;
6931
7069
  border-radius: var(--seed-radius-full);
6932
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6933
- outline: var(--seed-dimension-x0_5) solid transparent;
6934
- outline-offset: var(--seed-dimension-x0_5);
6935
7070
  background-color: #0000;
6936
7071
  border: none;
6937
7072
  padding: 0;
6938
7073
  }
6939
7074
 
7075
+ .seed-input-button__clearButton:is(:active, [data-active]) {
7076
+ scale: var(--seed-feedback-scale);
7077
+ }
7078
+
7079
+ .seed-input-button__clearButton {
7080
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7081
+ outline: var(--seed-dimension-x0_5) solid transparent;
7082
+ outline-offset: var(--seed-dimension-x0_5);
7083
+ }
7084
+
6940
7085
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6941
7086
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6942
7087
  outline-offset: var(--seed-dimension-x0_5);
@@ -7238,6 +7383,9 @@
7238
7383
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
7239
7384
  padding-right: var(--seed-box-padding-right);
7240
7385
  --seed-focus-ring: none;
7386
+ --seed-checkmark-feedback-scale: 1;
7387
+ --seed-radiomark-feedback-scale: 1;
7388
+ --seed-switchmark-feedback-scale: 1;
7241
7389
  --seed-icon-size: 22px;
7242
7390
  --seed-icon-color: var(--seed-color-fg-neutral);
7243
7391
  flex-shrink: 0;
@@ -7261,6 +7409,9 @@
7261
7409
  align-items: center;
7262
7410
  gap: var(--seed-box-gap);
7263
7411
  --seed-focus-ring: none;
7412
+ --seed-checkmark-feedback-scale: 1;
7413
+ --seed-radiomark-feedback-scale: 1;
7414
+ --seed-switchmark-feedback-scale: 1;
7264
7415
  font-size: var(--seed-font-size-t5);
7265
7416
  line-height: var(--seed-line-height-t5);
7266
7417
  font-weight: var(--seed-font-weight-regular);
@@ -7586,7 +7737,7 @@
7586
7737
  }
7587
7738
 
7588
7739
  .seed-menu__scrollArea {
7589
- max-height: min(480px, var(--seed-menu-available-height, 480px));
7740
+ max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
7590
7741
  box-sizing: border-box;
7591
7742
  padding-block: var(--seed-dimension-x2);
7592
7743
  gap: var(--seed-dimension-x2);
@@ -7877,6 +8028,7 @@
7877
8028
  word-break: break-all;
7878
8029
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7879
8030
  background: var(--seed-color-bg-layer-floating);
8031
+ max-width: 480px;
7880
8032
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7881
8033
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7882
8034
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7967,13 +8119,20 @@
7967
8119
  font-size: var(--seed-font-size-t5);
7968
8120
  line-height: var(--seed-line-height-t5);
7969
8121
  font-weight: var(--seed-font-weight-medium);
7970
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7971
8122
  border: none;
7972
8123
  justify-content: center;
7973
8124
  align-items: center;
7974
8125
  display: flex;
7975
8126
  }
7976
8127
 
8128
+ .seed-menu-sheet__closeButton:is(:active, [data-active]) {
8129
+ scale: var(--seed-feedback-scale);
8130
+ }
8131
+
8132
+ .seed-menu-sheet__closeButton {
8133
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8134
+ }
8135
+
7977
8136
  @media (hover: hover) and (pointer: fine) {
7978
8137
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7979
8138
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8277,15 +8436,22 @@
8277
8436
  line-height: var(--seed-line-height-t3);
8278
8437
  font-weight: var(--seed-font-weight-bold);
8279
8438
  border-radius: var(--seed-radius-r1);
8280
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8281
- outline: var(--seed-dimension-x0_5) solid transparent;
8282
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8283
8439
  background-color: #0000;
8284
8440
  border: none;
8285
8441
  align-items: center;
8286
8442
  display: flex;
8287
8443
  }
8288
8444
 
8445
+ .seed-page-banner__button:is(:active, [data-active]) {
8446
+ scale: var(--seed-feedback-scale);
8447
+ }
8448
+
8449
+ .seed-page-banner__button {
8450
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8451
+ outline: var(--seed-dimension-x0_5) solid transparent;
8452
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8453
+ }
8454
+
8289
8455
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8290
8456
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8291
8457
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8297,12 +8463,10 @@
8297
8463
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8298
8464
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8299
8465
  --seed-suffix-icon-margin-left: initial;
8466
+ background-color: var(--seed-color-bg-transparent);
8300
8467
  cursor: pointer;
8301
- border-radius: var(--seed-radius-r1);
8302
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8303
- outline: var(--seed-dimension-x0_5) solid transparent;
8304
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8305
- background-color: #0000;
8468
+ border-radius: var(--seed-radius-r2);
8469
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8306
8470
  border: none;
8307
8471
  flex-grow: 0;
8308
8472
  flex-shrink: 0;
@@ -8313,11 +8477,33 @@
8313
8477
  display: flex;
8314
8478
  }
8315
8479
 
8480
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8481
+ scale: var(--seed-feedback-scale);
8482
+ }
8483
+
8484
+ .seed-page-banner__closeButton {
8485
+ 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);
8486
+ outline: var(--seed-dimension-x0_5) solid transparent;
8487
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8488
+ }
8489
+
8316
8490
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8317
8491
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8318
8492
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8319
8493
  }
8320
8494
 
8495
+ @media (hover: hover) and (pointer: fine) {
8496
+ .seed-page-banner__closeButton:is(:hover, [data-hover]) {
8497
+ background-color: var(--seed-color-bg-transparent-pressed);
8498
+ }
8499
+ }
8500
+
8501
+ @media not all and (hover: hover) and (pointer: fine) {
8502
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8503
+ background-color: var(--seed-color-bg-transparent-pressed);
8504
+ }
8505
+ }
8506
+
8321
8507
  .seed-page-banner__root--tone_neutral-variant_weak {
8322
8508
  background-color: var(--seed-color-bg-neutral-weak);
8323
8509
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8340,6 +8526,10 @@
8340
8526
  color: var(--seed-color-fg-neutral);
8341
8527
  }
8342
8528
 
8529
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8530
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8531
+ }
8532
+
8343
8533
  .seed-page-banner__root--tone_neutral-variant_solid {
8344
8534
  background-color: var(--seed-color-bg-neutral-inverted);
8345
8535
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -8362,6 +8552,10 @@
8362
8552
  color: var(--seed-color-fg-neutral-inverted);
8363
8553
  }
8364
8554
 
8555
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8556
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8557
+ }
8558
+
8365
8559
  .seed-page-banner__root--tone_informative-variant_weak {
8366
8560
  background-color: var(--seed-color-bg-informative-weak);
8367
8561
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8384,6 +8578,10 @@
8384
8578
  color: var(--seed-color-fg-informative-contrast);
8385
8579
  }
8386
8580
 
8581
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8582
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8583
+ }
8584
+
8387
8585
  .seed-page-banner__root--tone_informative-variant_solid {
8388
8586
  background-color: var(--seed-color-bg-informative-solid);
8389
8587
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8406,6 +8604,10 @@
8406
8604
  color: var(--seed-color-palette-static-white);
8407
8605
  }
8408
8606
 
8607
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8608
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8609
+ }
8610
+
8409
8611
  .seed-page-banner__root--tone_positive-variant_weak {
8410
8612
  background-color: var(--seed-color-bg-positive-weak);
8411
8613
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8428,6 +8630,10 @@
8428
8630
  color: var(--seed-color-fg-positive-contrast);
8429
8631
  }
8430
8632
 
8633
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8634
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8635
+ }
8636
+
8431
8637
  .seed-page-banner__root--tone_positive-variant_solid {
8432
8638
  background-color: var(--seed-color-bg-positive-solid);
8433
8639
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8450,6 +8656,10 @@
8450
8656
  color: var(--seed-color-palette-static-white);
8451
8657
  }
8452
8658
 
8659
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8660
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8661
+ }
8662
+
8453
8663
  .seed-page-banner__root--tone_warning-variant_weak {
8454
8664
  background-color: var(--seed-color-bg-warning-weak);
8455
8665
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8472,6 +8682,10 @@
8472
8682
  color: var(--seed-color-fg-warning-contrast);
8473
8683
  }
8474
8684
 
8685
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8686
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8687
+ }
8688
+
8475
8689
  .seed-page-banner__root--tone_warning-variant_solid {
8476
8690
  background-color: var(--seed-color-bg-warning-solid);
8477
8691
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8494,6 +8708,10 @@
8494
8708
  color: var(--seed-color-palette-static-black-alpha-900);
8495
8709
  }
8496
8710
 
8711
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8712
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8713
+ }
8714
+
8497
8715
  .seed-page-banner__root--tone_critical-variant_weak {
8498
8716
  background-color: var(--seed-color-bg-critical-weak);
8499
8717
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8516,6 +8734,10 @@
8516
8734
  color: var(--seed-color-fg-critical-contrast);
8517
8735
  }
8518
8736
 
8737
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8738
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8739
+ }
8740
+
8519
8741
  .seed-page-banner__root--tone_critical-variant_solid {
8520
8742
  background-color: var(--seed-color-bg-critical-solid);
8521
8743
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8538,6 +8760,10 @@
8538
8760
  color: var(--seed-color-palette-static-white);
8539
8761
  }
8540
8762
 
8763
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8764
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8765
+ }
8766
+
8541
8767
  .seed-page-banner__root--tone_magic-variant_weak {
8542
8768
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8543
8769
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8560,6 +8786,206 @@
8560
8786
  color: var(--seed-color-fg-neutral);
8561
8787
  }
8562
8788
 
8789
+ .seed-page-banner__closeButton--tone_magic-variant_weak {
8790
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8791
+ }
8792
+
8793
+ .seed-pagination-button {
8794
+ box-sizing: border-box;
8795
+ cursor: pointer;
8796
+ text-transform: none;
8797
+ white-space: nowrap;
8798
+ vertical-align: middle;
8799
+ -webkit-font-smoothing: antialiased;
8800
+ -moz-osx-font-smoothing: grayscale;
8801
+ width: var(--seed-dimension-x10);
8802
+ height: var(--seed-dimension-x10);
8803
+ border-radius: var(--seed-radius-r2);
8804
+ isolation: isolate;
8805
+ background: none;
8806
+ border: none;
8807
+ flex-shrink: 0;
8808
+ justify-content: center;
8809
+ align-items: center;
8810
+ padding: 0;
8811
+ font-family: inherit;
8812
+ text-decoration: none;
8813
+ display: inline-flex;
8814
+ position: relative;
8815
+ }
8816
+
8817
+ .seed-pagination-button:before {
8818
+ content: "";
8819
+ z-index: -1;
8820
+ border-radius: inherit;
8821
+ background-color: var(--seed-color-bg-transparent);
8822
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8823
+ position: absolute;
8824
+ inset: 0;
8825
+ }
8826
+
8827
+ .seed-pagination-button {
8828
+ --seed-icon-size: var(--seed-dimension-x4);
8829
+ --seed-icon-color: var(--seed-color-fg-neutral);
8830
+ outline: var(--seed-dimension-x0_5) solid transparent;
8831
+ outline-offset: var(--seed-dimension-x0_5);
8832
+ }
8833
+
8834
+ .seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
8835
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8836
+ outline-offset: var(--seed-dimension-x0_5);
8837
+ }
8838
+
8839
+ .seed-pagination-button {
8840
+ scale: 1;
8841
+ }
8842
+
8843
+ @media (hover: hover) and (pointer: fine) {
8844
+ .seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8845
+ background-color: var(--seed-color-bg-transparent-pressed);
8846
+ }
8847
+ }
8848
+
8849
+ @media not all and (hover: hover) and (pointer: fine) {
8850
+ .seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8851
+ background-color: var(--seed-color-bg-transparent-pressed);
8852
+ }
8853
+ }
8854
+
8855
+ .seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8856
+ scale: var(--seed-scale-s97);
8857
+ }
8858
+
8859
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
8860
+ cursor: not-allowed;
8861
+ --seed-icon-color: var(--seed-color-fg-disabled);
8862
+ }
8863
+
8864
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
8865
+ background-color: var(--seed-color-bg-transparent);
8866
+ }
8867
+
8868
+ .seed-pagination-button {
8869
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8870
+ }
8871
+
8872
+ .seed-pagination-page-item {
8873
+ box-sizing: border-box;
8874
+ cursor: pointer;
8875
+ text-transform: none;
8876
+ white-space: nowrap;
8877
+ vertical-align: middle;
8878
+ -webkit-font-smoothing: antialiased;
8879
+ -moz-osx-font-smoothing: grayscale;
8880
+ width: var(--seed-dimension-x10);
8881
+ height: var(--seed-dimension-x10);
8882
+ border-radius: var(--seed-radius-r2);
8883
+ isolation: isolate;
8884
+ color: var(--seed-color-fg-neutral);
8885
+ font-family: inherit;
8886
+ font-size: var(--seed-font-size-t4);
8887
+ line-height: var(--seed-line-height-t4);
8888
+ font-weight: var(--seed-font-weight-bold);
8889
+ background: none;
8890
+ border: none;
8891
+ flex-shrink: 0;
8892
+ justify-content: center;
8893
+ align-items: center;
8894
+ padding: 0;
8895
+ text-decoration: none;
8896
+ display: inline-flex;
8897
+ position: relative;
8898
+ }
8899
+
8900
+ .seed-pagination-page-item:before {
8901
+ content: "";
8902
+ z-index: -1;
8903
+ border-radius: inherit;
8904
+ background-color: var(--seed-color-bg-transparent);
8905
+ position: absolute;
8906
+ inset: 0;
8907
+ }
8908
+
8909
+ .seed-pagination-page-item > [data-pagination-page-item-label] {
8910
+ text-overflow: ellipsis;
8911
+ white-space: nowrap;
8912
+ min-width: 0;
8913
+ max-width: 100%;
8914
+ display: block;
8915
+ overflow: hidden;
8916
+ }
8917
+
8918
+ .seed-pagination-page-item {
8919
+ outline: var(--seed-dimension-x0_5) solid transparent;
8920
+ outline-offset: var(--seed-dimension-x0_5);
8921
+ }
8922
+
8923
+ .seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
8924
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8925
+ outline-offset: var(--seed-dimension-x0_5);
8926
+ }
8927
+
8928
+ .seed-pagination-page-item {
8929
+ scale: 1;
8930
+ }
8931
+
8932
+ @media (hover: hover) and (pointer: fine) {
8933
+ .seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8934
+ background-color: var(--seed-color-bg-transparent-pressed);
8935
+ }
8936
+ }
8937
+
8938
+ @media not all and (hover: hover) and (pointer: fine) {
8939
+ .seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8940
+ background-color: var(--seed-color-bg-transparent-pressed);
8941
+ }
8942
+ }
8943
+
8944
+ .seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8945
+ scale: var(--seed-scale-s97);
8946
+ }
8947
+
8948
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8949
+ color: var(--seed-color-fg-neutral-inverted);
8950
+ }
8951
+
8952
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8953
+ background-color: var(--seed-color-bg-neutral-inverted);
8954
+ }
8955
+
8956
+ @media (hover: hover) and (pointer: fine) {
8957
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8958
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8959
+ }
8960
+ }
8961
+
8962
+ @media not all and (hover: hover) and (pointer: fine) {
8963
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8964
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8965
+ }
8966
+ }
8967
+
8968
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8969
+ cursor: not-allowed;
8970
+ color: var(--seed-color-fg-disabled);
8971
+ }
8972
+
8973
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8974
+ background-color: var(--seed-color-bg-transparent);
8975
+ }
8976
+
8977
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8978
+ color: var(--seed-color-fg-disabled);
8979
+ }
8980
+
8981
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8982
+ background-color: var(--seed-color-bg-disabled);
8983
+ }
8984
+
8985
+ .seed-pagination-page-item {
8986
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8987
+ }
8988
+
8563
8989
  .seed-progress-circle__root {
8564
8990
  box-sizing: border-box;
8565
8991
  display: inline-flex;
@@ -8612,7 +9038,7 @@
8612
9038
  }
8613
9039
 
8614
9040
  .seed-pull-to-refresh__root {
8615
- --ptr-size: 44px;
9041
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8616
9042
  --ptr-transition-duration: var(--seed-duration-d6);
8617
9043
  height: 100%;
8618
9044
  }
@@ -8646,7 +9072,7 @@
8646
9072
  box-sizing: border-box;
8647
9073
  cursor: pointer;
8648
9074
  background-color: var(--seed-color-bg-transparent);
8649
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9075
+ 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);
8650
9076
  outline: var(--seed-dimension-x0_5) solid transparent;
8651
9077
  outline-offset: var(--seed-dimension-x0_5);
8652
9078
  border: none;
@@ -8662,6 +9088,10 @@
8662
9088
  outline-offset: var(--seed-dimension-x0_5);
8663
9089
  }
8664
9090
 
9091
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9092
+ scale: var(--seed-feedback-scale);
9093
+ }
9094
+
8665
9095
  @media (hover: hover) and (pointer: fine) {
8666
9096
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8667
9097
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8729,7 +9159,7 @@
8729
9159
  box-sizing: border-box;
8730
9160
  cursor: pointer;
8731
9161
  background-color: var(--seed-color-bg-transparent);
8732
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9162
+ 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);
8733
9163
  outline: var(--seed-dimension-x0_5) solid transparent;
8734
9164
  outline-offset: var(--seed-dimension-x0_5);
8735
9165
  border: none;
@@ -8745,6 +9175,10 @@
8745
9175
  outline-offset: var(--seed-dimension-x0_5);
8746
9176
  }
8747
9177
 
9178
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9179
+ scale: var(--seed-feedback-scale);
9180
+ }
9181
+
8748
9182
  @media (hover: hover) and (pointer: fine) {
8749
9183
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8750
9184
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8972,9 +9406,6 @@
8972
9406
  border-color: var(--seed-color-stroke-neutral-weak);
8973
9407
  border-radius: var(--seed-radius-full);
8974
9408
  margin-top: var(--radiomark-margin-top, 0);
8975
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8976
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
8977
- outline-offset: var(--seed-dimension-x0_5);
8978
9409
  flex: none;
8979
9410
  justify-content: center;
8980
9411
  align-items: center;
@@ -8982,6 +9413,16 @@
8982
9413
  position: relative;
8983
9414
  }
8984
9415
 
9416
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9417
+ scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
9418
+ }
9419
+
9420
+ .seed-radiomark__root {
9421
+ 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);
9422
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
9423
+ outline-offset: var(--seed-dimension-x0_5);
9424
+ }
9425
+
8985
9426
  @media (hover: hover) and (pointer: fine) {
8986
9427
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8987
9428
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -9121,8 +9562,12 @@
9121
9562
  outline-offset: var(--seed-dimension-x0_5);
9122
9563
  }
9123
9564
 
9565
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9566
+ scale: var(--seed-feedback-scale);
9567
+ }
9568
+
9124
9569
  .seed-reaction-button {
9125
- 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);
9570
+ 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);
9126
9571
  background: var(--seed-color-bg-transparent);
9127
9572
  font-weight: var(--seed-font-weight-medium);
9128
9573
  color: var(--seed-color-fg-neutral);
@@ -9393,7 +9838,7 @@
9393
9838
  }
9394
9839
 
9395
9840
  .seed-select__scrollArea {
9396
- max-height: min(480px, var(--seed-select-available-height, 480px));
9841
+ max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
9397
9842
  box-sizing: border-box;
9398
9843
  padding-block: var(--seed-dimension-x2);
9399
9844
  gap: var(--seed-dimension-x2);
@@ -9876,7 +10321,7 @@
9876
10321
  cursor: pointer;
9877
10322
  border-radius: var(--seed-radius-r3);
9878
10323
  background-color: var(--seed-color-bg-transparent);
9879
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10324
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9880
10325
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9881
10326
  flex-direction: column;
9882
10327
  display: flex;
@@ -9913,11 +10358,11 @@
9913
10358
 
9914
10359
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9915
10360
  cursor: not-allowed;
9916
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10361
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9917
10362
  }
9918
10363
 
9919
10364
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
9920
- box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
10365
+ box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
9921
10366
  }
9922
10367
 
9923
10368
  .seed-select-box__root {
@@ -10611,11 +11056,6 @@
10611
11056
  top: calc(28px + var(--seed-safe-area-top));
10612
11057
  border-radius: var(--seed-radius-r3);
10613
11058
  cursor: pointer;
10614
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
10615
- --seed-icon-size: 22px;
10616
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10617
- outline: var(--seed-dimension-x0_5) solid transparent;
10618
- outline-offset: var(--seed-dimension-x0_5);
10619
11059
  border: none;
10620
11060
  justify-content: center;
10621
11061
  align-items: center;
@@ -10626,6 +11066,18 @@
10626
11066
  right: 24px;
10627
11067
  }
10628
11068
 
11069
+ .seed-side-panel__closeButton:is(:active, [data-active]) {
11070
+ scale: var(--seed-feedback-scale);
11071
+ }
11072
+
11073
+ .seed-side-panel__closeButton {
11074
+ 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);
11075
+ --seed-icon-size: 22px;
11076
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
11077
+ outline: var(--seed-dimension-x0_5) solid transparent;
11078
+ outline-offset: var(--seed-dimension-x0_5);
11079
+ }
11080
+
10629
11081
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10630
11082
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10631
11083
  outline-offset: var(--seed-dimension-x0_5);
@@ -11041,7 +11493,7 @@
11041
11493
  background: var(--seed-color-bg-neutral-inverted);
11042
11494
  border-radius: var(--seed-radius-r2);
11043
11495
  width: 100%;
11044
- max-width: 560px;
11496
+ max-width: 464px;
11045
11497
  padding-inline: var(--seed-dimension-x2_5);
11046
11498
  padding-block: var(--seed-dimension-x2_5);
11047
11499
  min-height: 44px;
@@ -11122,6 +11574,14 @@
11122
11574
  position: relative;
11123
11575
  }
11124
11576
 
11577
+ .seed-snackbar__actionButton:is(:active, [data-active]) {
11578
+ scale: var(--seed-feedback-scale);
11579
+ }
11580
+
11581
+ .seed-snackbar__actionButton {
11582
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
11583
+ }
11584
+
11125
11585
  .seed-snackbar__actionButton:after {
11126
11586
  content: "";
11127
11587
  top: 50%;
@@ -11238,11 +11698,15 @@
11238
11698
  border-radius: var(--seed-radius-full);
11239
11699
  background: var(--seed-color-palette-gray-600);
11240
11700
  margin: var(--switchmark-margin-top, 0) 0;
11241
- 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);
11701
+ 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);
11242
11702
  display: block;
11243
11703
  position: relative;
11244
11704
  }
11245
11705
 
11706
+ .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11707
+ scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
11708
+ }
11709
+
11246
11710
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
11247
11711
  opacity: .38;
11248
11712
  }
@@ -11428,8 +11892,12 @@
11428
11892
  bottom: 0;
11429
11893
  }
11430
11894
 
11895
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11896
+ scale: var(--seed-feedback-scale);
11897
+ }
11898
+
11431
11899
  .seed-tabs__trigger {
11432
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11900
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11433
11901
  outline: var(--seed-dimension-x0_5) solid transparent;
11434
11902
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11435
11903
  }
@@ -12921,8 +13389,12 @@
12921
13389
  cursor: not-allowed;
12922
13390
  }
12923
13391
 
13392
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13393
+ scale: var(--seed-feedback-scale);
13394
+ }
13395
+
12924
13396
  .seed-toggle-button {
12925
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13397
+ 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);
12926
13398
  font-weight: var(--seed-font-weight-bold);
12927
13399
  }
12928
13400
 
@@ -13161,7 +13633,7 @@
13161
13633
 
13162
13634
  .seed-wheel-picker__selectionIndicator {
13163
13635
  z-index: 0;
13164
- inset-inline: 0;
13636
+ inset-inline: var(--seed-dimension-x4);
13165
13637
  height: var(--seed-wheel-picker-item-size);
13166
13638
  pointer-events: none;
13167
13639
  position: absolute;
@@ -13169,6 +13641,145 @@
13169
13641
  transform: translateY(-50%);
13170
13642
  }
13171
13643
 
13644
+ .seed-wheel-picker-public__root {
13645
+ background-color: var(--seed-color-bg-layer-floating);
13646
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13647
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13648
+ --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13649
+ width: 100%;
13650
+ position: relative;
13651
+ overflow: hidden;
13652
+ }
13653
+
13654
+ .seed-wheel-picker-public__scrollFog {
13655
+ z-index: 1;
13656
+ height: 100%;
13657
+ position: relative;
13658
+ overflow: hidden;
13659
+ }
13660
+
13661
+ .seed-wheel-picker-public__columns {
13662
+ justify-content: center;
13663
+ width: 100%;
13664
+ height: 100%;
13665
+ display: flex;
13666
+ }
13667
+
13668
+ .seed-wheel-picker-public__column {
13669
+ box-sizing: border-box;
13670
+ overscroll-behavior-x: none;
13671
+ overscroll-behavior-y: contain;
13672
+ scroll-snap-type: y mandatory;
13673
+ scrollbar-width: none;
13674
+ -ms-overflow-style: none;
13675
+ touch-action: pan-y;
13676
+ cursor: grab;
13677
+ width: max-content;
13678
+ height: 100%;
13679
+ padding-block: var(--seed-wheel-picker-public-center-offset);
13680
+ outline: none;
13681
+ flex: none;
13682
+ overflow: hidden auto;
13683
+ }
13684
+
13685
+ .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13686
+ cursor: default;
13687
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13688
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13689
+ overflow-y: hidden;
13690
+ }
13691
+
13692
+ .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13693
+ cursor: grabbing;
13694
+ scroll-snap-type: none;
13695
+ }
13696
+
13697
+ .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13698
+ scroll-snap-type: none;
13699
+ }
13700
+
13701
+ .seed-wheel-picker-public__column::-webkit-scrollbar {
13702
+ display: none;
13703
+ }
13704
+
13705
+ .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13706
+ outline: var(--seed-dimension-x0_5) solid transparent;
13707
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13708
+ border-radius: var(--seed-radius-r2);
13709
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13710
+ }
13711
+
13712
+ .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]) {
13713
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13714
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13715
+ }
13716
+
13717
+ .seed-wheel-picker-public__item {
13718
+ height: var(--seed-wheel-picker-public-item-size);
13719
+ min-height: var(--seed-wheel-picker-public-item-size);
13720
+ color: var(--seed-wheel-picker-public-item-color);
13721
+ scroll-snap-align: center;
13722
+ -webkit-user-select: none;
13723
+ user-select: none;
13724
+ justify-content: center;
13725
+ align-items: center;
13726
+ display: flex;
13727
+ }
13728
+
13729
+ .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13730
+ color: #0000;
13731
+ 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%);
13732
+ -webkit-text-fill-color: transparent;
13733
+ -webkit-background-clip: text;
13734
+ background-clip: text;
13735
+ }
13736
+
13737
+ .seed-wheel-picker-public__itemLabel {
13738
+ box-sizing: border-box;
13739
+ height: 100%;
13740
+ padding-inline: var(--seed-dimension-x4);
13741
+ font-weight: var(--seed-font-weight-medium);
13742
+ white-space: nowrap;
13743
+ flex-shrink: 0;
13744
+ justify-content: center;
13745
+ align-items: center;
13746
+ display: flex;
13747
+ }
13748
+
13749
+ .seed-wheel-picker-public__selectionIndicator {
13750
+ z-index: 0;
13751
+ inset-inline: var(--seed-dimension-x4);
13752
+ height: var(--seed-wheel-picker-public-item-size);
13753
+ border-radius: var(--seed-radius-r2);
13754
+ background-color: var(--seed-color-bg-neutral-weak);
13755
+ pointer-events: none;
13756
+ position: absolute;
13757
+ top: 50%;
13758
+ transform: translateY(-50%);
13759
+ }
13760
+
13761
+ .seed-wheel-picker-public__root--size_small {
13762
+ height: var(--seed-wheel-picker-public-viewport-size, 180px);
13763
+ --seed-wheel-picker-public-item-size: 36px;
13764
+ --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13765
+ }
13766
+
13767
+ .seed-wheel-picker-public__itemLabel--size_small {
13768
+ font-size: var(--seed-font-size-t7-static);
13769
+ line-height: var(--seed-line-height-t7-static);
13770
+ }
13771
+
13772
+ .seed-wheel-picker-public__root--size_medium {
13773
+ height: var(--seed-wheel-picker-public-viewport-size, 220px);
13774
+ --seed-wheel-picker-public-item-size: 44px;
13775
+ --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13776
+ }
13777
+
13778
+ .seed-wheel-picker-public__itemLabel--size_medium {
13779
+ font-size: var(--seed-font-size-t10-static);
13780
+ line-height: var(--seed-line-height-t10-static);
13781
+ }
13782
+
13172
13783
  @media (min-width: 480px) {
13173
13784
  .seed-action-button {
13174
13785
  --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);