@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.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 {
@@ -5063,29 +5155,37 @@
5063
5155
  }
5064
5156
 
5065
5157
  @media (hover: hover) and (pointer: fine) {
5066
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5158
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
5067
5159
  background-color: var(--seed-color-bg-transparent-pressed);
5068
5160
  }
5069
5161
  }
5070
5162
 
5071
5163
  @media not all and (hover: hover) and (pointer: fine) {
5072
- .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5164
+ .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
5073
5165
  background-color: var(--seed-color-bg-transparent-pressed);
5074
5166
  }
5075
5167
  }
5076
5168
 
5077
5169
  @media (hover: hover) and (pointer: fine) {
5078
- .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 {
5170
+ .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 {
5079
5171
  background-color: var(--seed-color-bg-neutral-inverted);
5080
5172
  }
5081
5173
  }
5082
5174
 
5083
5175
  @media not all and (hover: hover) and (pointer: fine) {
5084
- .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 {
5176
+ .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 {
5085
5177
  background-color: var(--seed-color-bg-neutral-inverted);
5086
5178
  }
5087
5179
  }
5088
5180
 
5181
+ .seed-date-picker__dateButton[data-range-start-readonly]:before {
5182
+ background-color: var(--seed-color-palette-gray-600);
5183
+ }
5184
+
5185
+ .seed-date-picker__dateButton[data-range-start-readonly] {
5186
+ cursor: default;
5187
+ }
5188
+
5089
5189
  .seed-date-picker__dateButton[data-in-range] {
5090
5190
  color: var(--seed-color-fg-neutral-muted);
5091
5191
  }
@@ -5835,11 +5935,12 @@
5835
5935
  align-items: center;
5836
5936
  gap: var(--seed-dimension-x2_5);
5837
5937
  border-radius: var(--seed-radius-r3);
5938
+ height: 80px;
5939
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5838
5940
  --remove-button-mask-size: var(--seed-dimension-x6);
5839
5941
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5840
5942
  outline: var(--seed-dimension-x0_5) solid transparent;
5841
5943
  outline-offset: var(--seed-dimension-x0_5);
5842
- height: 80px;
5843
5944
  display: flex;
5844
5945
  position: relative;
5845
5946
  }
@@ -5877,6 +5978,7 @@
5877
5978
  }
5878
5979
 
5879
5980
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5981
+ scale: var(--seed-feedback-scale);
5880
5982
  --remove-button-mask-size: 0px;
5881
5983
  --remove-button-mask-offset: 0px;
5882
5984
  }
@@ -5971,9 +6073,6 @@
5971
6073
  font: inherit;
5972
6074
  cursor: pointer;
5973
6075
  border-radius: inherit;
5974
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5975
- outline: var(--seed-dimension-x0_5) solid transparent;
5976
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5977
6076
  background: none;
5978
6077
  border: none;
5979
6078
  flex-direction: column;
@@ -5983,6 +6082,16 @@
5983
6082
  display: flex;
5984
6083
  }
5985
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
+
5986
6095
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5987
6096
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5988
6097
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6004,9 +6113,6 @@
6004
6113
  background-color: var(--seed-color-bg-layer-default);
6005
6114
  border-radius: var(--seed-radius-full);
6006
6115
  cursor: pointer;
6007
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6008
- outline: var(--seed-dimension-x0_5) solid transparent;
6009
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6010
6116
  border: none;
6011
6117
  justify-content: center;
6012
6118
  align-items: center;
@@ -6015,6 +6121,16 @@
6015
6121
  position: absolute;
6016
6122
  }
6017
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
+
6018
6134
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
6019
6135
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6020
6136
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6079,7 +6195,7 @@
6079
6195
 
6080
6196
  .seed-attachment-input-item__root--type_image {
6081
6197
  width: 80px;
6082
- transition: opacity .2s;
6198
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6083
6199
  }
6084
6200
 
6085
6201
  .seed-attachment-input-item__root--type_image:before {
@@ -6137,9 +6253,6 @@
6137
6253
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
6138
6254
  cursor: pointer;
6139
6255
  border-radius: var(--seed-radius-r3);
6140
- transition: background-color .2s, outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6141
- outline: var(--seed-dimension-x0_5) solid transparent;
6142
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6143
6256
  background-color: #0000;
6144
6257
  border: none;
6145
6258
  flex-direction: column;
@@ -6148,6 +6261,16 @@
6148
6261
  display: flex;
6149
6262
  }
6150
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
+
6151
6274
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
6152
6275
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6153
6276
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6244,11 +6367,18 @@
6244
6367
  font-size: var(--seed-font-size-t5);
6245
6368
  line-height: var(--seed-line-height-t5);
6246
6369
  font-weight: var(--seed-font-weight-bold);
6247
- 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);
6248
6370
  position: relative;
6249
6371
  overflow: hidden;
6250
6372
  }
6251
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
+
6252
6382
  @media (hover: hover) and (pointer: fine) {
6253
6383
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6254
6384
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6368,11 +6498,12 @@
6368
6498
  }
6369
6499
 
6370
6500
  .seed-help-bubble__content {
6501
+ box-sizing: border-box;
6371
6502
  background: var(--seed-color-bg-neutral-inverted);
6372
6503
  padding-inline: var(--seed-dimension-x3);
6373
6504
  padding-block: var(--seed-dimension-x2_5);
6374
6505
  border-radius: var(--seed-radius-r3);
6375
- --seed-box-max-width-base: none;
6506
+ --seed-box-max-width-base: 280px;
6376
6507
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6377
6508
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6378
6509
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6459,9 +6590,6 @@
6459
6590
  --seed-icon-size: var(--seed-dimension-x3_5);
6460
6591
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6461
6592
  border-radius: var(--seed-radius-r3);
6462
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6463
- outline: var(--seed-dimension-x0_5) solid transparent;
6464
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6465
6593
  background: none;
6466
6594
  border: none;
6467
6595
  justify-content: center;
@@ -6469,6 +6597,16 @@
6469
6597
  display: flex;
6470
6598
  }
6471
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
+
6472
6610
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6473
6611
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6474
6612
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6575,6 +6713,14 @@
6575
6713
  position: relative;
6576
6714
  }
6577
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
+
6578
6724
  .seed-image-frame-reaction-button__root:before {
6579
6725
  content: "";
6580
6726
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6921,14 +7067,21 @@
6921
7067
  .seed-input-button__clearButton {
6922
7068
  cursor: pointer;
6923
7069
  border-radius: var(--seed-radius-full);
6924
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6925
- outline: var(--seed-dimension-x0_5) solid transparent;
6926
- outline-offset: var(--seed-dimension-x0_5);
6927
7070
  background-color: #0000;
6928
7071
  border: none;
6929
7072
  padding: 0;
6930
7073
  }
6931
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
+
6932
7085
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6933
7086
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6934
7087
  outline-offset: var(--seed-dimension-x0_5);
@@ -7230,6 +7383,9 @@
7230
7383
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
7231
7384
  padding-right: var(--seed-box-padding-right);
7232
7385
  --seed-focus-ring: none;
7386
+ --seed-checkmark-feedback-scale: 1;
7387
+ --seed-radiomark-feedback-scale: 1;
7388
+ --seed-switchmark-feedback-scale: 1;
7233
7389
  --seed-icon-size: 22px;
7234
7390
  --seed-icon-color: var(--seed-color-fg-neutral);
7235
7391
  flex-shrink: 0;
@@ -7253,6 +7409,9 @@
7253
7409
  align-items: center;
7254
7410
  gap: var(--seed-box-gap);
7255
7411
  --seed-focus-ring: none;
7412
+ --seed-checkmark-feedback-scale: 1;
7413
+ --seed-radiomark-feedback-scale: 1;
7414
+ --seed-switchmark-feedback-scale: 1;
7256
7415
  font-size: var(--seed-font-size-t5);
7257
7416
  line-height: var(--seed-line-height-t5);
7258
7417
  font-weight: var(--seed-font-weight-regular);
@@ -7578,7 +7737,7 @@
7578
7737
  }
7579
7738
 
7580
7739
  .seed-menu__scrollArea {
7581
- 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)));
7582
7741
  box-sizing: border-box;
7583
7742
  padding-block: var(--seed-dimension-x2);
7584
7743
  gap: var(--seed-dimension-x2);
@@ -7869,6 +8028,7 @@
7869
8028
  word-break: break-all;
7870
8029
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7871
8030
  background: var(--seed-color-bg-layer-floating);
8031
+ max-width: 480px;
7872
8032
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7873
8033
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7874
8034
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7959,13 +8119,20 @@
7959
8119
  font-size: var(--seed-font-size-t5);
7960
8120
  line-height: var(--seed-line-height-t5);
7961
8121
  font-weight: var(--seed-font-weight-medium);
7962
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7963
8122
  border: none;
7964
8123
  justify-content: center;
7965
8124
  align-items: center;
7966
8125
  display: flex;
7967
8126
  }
7968
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
+
7969
8136
  @media (hover: hover) and (pointer: fine) {
7970
8137
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7971
8138
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8269,15 +8436,22 @@
8269
8436
  line-height: var(--seed-line-height-t3);
8270
8437
  font-weight: var(--seed-font-weight-bold);
8271
8438
  border-radius: var(--seed-radius-r1);
8272
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8273
- outline: var(--seed-dimension-x0_5) solid transparent;
8274
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8275
8439
  background-color: #0000;
8276
8440
  border: none;
8277
8441
  align-items: center;
8278
8442
  display: flex;
8279
8443
  }
8280
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
+
8281
8455
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8282
8456
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8283
8457
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8289,12 +8463,10 @@
8289
8463
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8290
8464
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8291
8465
  --seed-suffix-icon-margin-left: initial;
8466
+ background-color: var(--seed-color-bg-transparent);
8292
8467
  cursor: pointer;
8293
- border-radius: var(--seed-radius-r1);
8294
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8295
- outline: var(--seed-dimension-x0_5) solid transparent;
8296
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8297
- background-color: #0000;
8468
+ border-radius: var(--seed-radius-r2);
8469
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8298
8470
  border: none;
8299
8471
  flex-grow: 0;
8300
8472
  flex-shrink: 0;
@@ -8305,11 +8477,33 @@
8305
8477
  display: flex;
8306
8478
  }
8307
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
+
8308
8490
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8309
8491
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8310
8492
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8311
8493
  }
8312
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
+
8313
8507
  .seed-page-banner__root--tone_neutral-variant_weak {
8314
8508
  background-color: var(--seed-color-bg-neutral-weak);
8315
8509
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8332,6 +8526,10 @@
8332
8526
  color: var(--seed-color-fg-neutral);
8333
8527
  }
8334
8528
 
8529
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8530
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8531
+ }
8532
+
8335
8533
  .seed-page-banner__root--tone_neutral-variant_solid {
8336
8534
  background-color: var(--seed-color-bg-neutral-inverted);
8337
8535
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -8354,6 +8552,10 @@
8354
8552
  color: var(--seed-color-fg-neutral-inverted);
8355
8553
  }
8356
8554
 
8555
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8556
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8557
+ }
8558
+
8357
8559
  .seed-page-banner__root--tone_informative-variant_weak {
8358
8560
  background-color: var(--seed-color-bg-informative-weak);
8359
8561
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8376,6 +8578,10 @@
8376
8578
  color: var(--seed-color-fg-informative-contrast);
8377
8579
  }
8378
8580
 
8581
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8582
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8583
+ }
8584
+
8379
8585
  .seed-page-banner__root--tone_informative-variant_solid {
8380
8586
  background-color: var(--seed-color-bg-informative-solid);
8381
8587
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8398,6 +8604,10 @@
8398
8604
  color: var(--seed-color-palette-static-white);
8399
8605
  }
8400
8606
 
8607
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8608
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8609
+ }
8610
+
8401
8611
  .seed-page-banner__root--tone_positive-variant_weak {
8402
8612
  background-color: var(--seed-color-bg-positive-weak);
8403
8613
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8420,6 +8630,10 @@
8420
8630
  color: var(--seed-color-fg-positive-contrast);
8421
8631
  }
8422
8632
 
8633
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8634
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8635
+ }
8636
+
8423
8637
  .seed-page-banner__root--tone_positive-variant_solid {
8424
8638
  background-color: var(--seed-color-bg-positive-solid);
8425
8639
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8442,6 +8656,10 @@
8442
8656
  color: var(--seed-color-palette-static-white);
8443
8657
  }
8444
8658
 
8659
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8660
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8661
+ }
8662
+
8445
8663
  .seed-page-banner__root--tone_warning-variant_weak {
8446
8664
  background-color: var(--seed-color-bg-warning-weak);
8447
8665
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8464,6 +8682,10 @@
8464
8682
  color: var(--seed-color-fg-warning-contrast);
8465
8683
  }
8466
8684
 
8685
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8686
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8687
+ }
8688
+
8467
8689
  .seed-page-banner__root--tone_warning-variant_solid {
8468
8690
  background-color: var(--seed-color-bg-warning-solid);
8469
8691
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8486,7 +8708,11 @@
8486
8708
  color: var(--seed-color-palette-static-black-alpha-900);
8487
8709
  }
8488
8710
 
8489
- .seed-page-banner__root--tone_critical-variant_weak {
8711
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8712
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8713
+ }
8714
+
8715
+ .seed-page-banner__root--tone_critical-variant_weak {
8490
8716
  background-color: var(--seed-color-bg-critical-weak);
8491
8717
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
8492
8718
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8508,6 +8734,10 @@
8508
8734
  color: var(--seed-color-fg-critical-contrast);
8509
8735
  }
8510
8736
 
8737
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8738
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8739
+ }
8740
+
8511
8741
  .seed-page-banner__root--tone_critical-variant_solid {
8512
8742
  background-color: var(--seed-color-bg-critical-solid);
8513
8743
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8530,6 +8760,10 @@
8530
8760
  color: var(--seed-color-palette-static-white);
8531
8761
  }
8532
8762
 
8763
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8764
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8765
+ }
8766
+
8533
8767
  .seed-page-banner__root--tone_magic-variant_weak {
8534
8768
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8535
8769
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8552,6 +8786,206 @@
8552
8786
  color: var(--seed-color-fg-neutral);
8553
8787
  }
8554
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
+
8555
8989
  .seed-progress-circle__root {
8556
8990
  box-sizing: border-box;
8557
8991
  display: inline-flex;
@@ -8604,7 +9038,7 @@
8604
9038
  }
8605
9039
 
8606
9040
  .seed-pull-to-refresh__root {
8607
- --ptr-size: 44px;
9041
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8608
9042
  --ptr-transition-duration: var(--seed-duration-d6);
8609
9043
  height: 100%;
8610
9044
  }
@@ -8638,7 +9072,7 @@
8638
9072
  box-sizing: border-box;
8639
9073
  cursor: pointer;
8640
9074
  background-color: var(--seed-color-bg-transparent);
8641
- 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);
8642
9076
  outline: var(--seed-dimension-x0_5) solid transparent;
8643
9077
  outline-offset: var(--seed-dimension-x0_5);
8644
9078
  border: none;
@@ -8654,6 +9088,10 @@
8654
9088
  outline-offset: var(--seed-dimension-x0_5);
8655
9089
  }
8656
9090
 
9091
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9092
+ scale: var(--seed-feedback-scale);
9093
+ }
9094
+
8657
9095
  @media (hover: hover) and (pointer: fine) {
8658
9096
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8659
9097
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8721,7 +9159,7 @@
8721
9159
  box-sizing: border-box;
8722
9160
  cursor: pointer;
8723
9161
  background-color: var(--seed-color-bg-transparent);
8724
- 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);
8725
9163
  outline: var(--seed-dimension-x0_5) solid transparent;
8726
9164
  outline-offset: var(--seed-dimension-x0_5);
8727
9165
  border: none;
@@ -8737,6 +9175,10 @@
8737
9175
  outline-offset: var(--seed-dimension-x0_5);
8738
9176
  }
8739
9177
 
9178
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9179
+ scale: var(--seed-feedback-scale);
9180
+ }
9181
+
8740
9182
  @media (hover: hover) and (pointer: fine) {
8741
9183
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8742
9184
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8964,9 +9406,6 @@
8964
9406
  border-color: var(--seed-color-stroke-neutral-weak);
8965
9407
  border-radius: var(--seed-radius-full);
8966
9408
  margin-top: var(--radiomark-margin-top, 0);
8967
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8968
- outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
8969
- outline-offset: var(--seed-dimension-x0_5);
8970
9409
  flex: none;
8971
9410
  justify-content: center;
8972
9411
  align-items: center;
@@ -8974,6 +9413,16 @@
8974
9413
  position: relative;
8975
9414
  }
8976
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
+
8977
9426
  @media (hover: hover) and (pointer: fine) {
8978
9427
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8979
9428
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -9113,8 +9562,12 @@
9113
9562
  outline-offset: var(--seed-dimension-x0_5);
9114
9563
  }
9115
9564
 
9565
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9566
+ scale: var(--seed-feedback-scale);
9567
+ }
9568
+
9116
9569
  .seed-reaction-button {
9117
- 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);
9118
9571
  background: var(--seed-color-bg-transparent);
9119
9572
  font-weight: var(--seed-font-weight-medium);
9120
9573
  color: var(--seed-color-fg-neutral);
@@ -9385,7 +9838,7 @@
9385
9838
  }
9386
9839
 
9387
9840
  .seed-select__scrollArea {
9388
- 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)));
9389
9842
  box-sizing: border-box;
9390
9843
  padding-block: var(--seed-dimension-x2);
9391
9844
  gap: var(--seed-dimension-x2);
@@ -9868,7 +10321,7 @@
9868
10321
  cursor: pointer;
9869
10322
  border-radius: var(--seed-radius-r3);
9870
10323
  background-color: var(--seed-color-bg-transparent);
9871
- 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);
9872
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);
9873
10326
  flex-direction: column;
9874
10327
  display: flex;
@@ -9905,11 +10358,11 @@
9905
10358
 
9906
10359
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9907
10360
  cursor: not-allowed;
9908
- 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);
9909
10362
  }
9910
10363
 
9911
10364
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
9912
- 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);
9913
10366
  }
9914
10367
 
9915
10368
  .seed-select-box__root {
@@ -10603,11 +11056,6 @@
10603
11056
  top: calc(28px + var(--seed-safe-area-top));
10604
11057
  border-radius: var(--seed-radius-r3);
10605
11058
  cursor: pointer;
10606
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
10607
- --seed-icon-size: 22px;
10608
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
10609
- outline: var(--seed-dimension-x0_5) solid transparent;
10610
- outline-offset: var(--seed-dimension-x0_5);
10611
11059
  border: none;
10612
11060
  justify-content: center;
10613
11061
  align-items: center;
@@ -10618,6 +11066,18 @@
10618
11066
  right: 24px;
10619
11067
  }
10620
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
+
10621
11081
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10622
11082
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10623
11083
  outline-offset: var(--seed-dimension-x0_5);
@@ -11033,7 +11493,7 @@
11033
11493
  background: var(--seed-color-bg-neutral-inverted);
11034
11494
  border-radius: var(--seed-radius-r2);
11035
11495
  width: 100%;
11036
- max-width: 560px;
11496
+ max-width: 464px;
11037
11497
  padding-inline: var(--seed-dimension-x2_5);
11038
11498
  padding-block: var(--seed-dimension-x2_5);
11039
11499
  min-height: 44px;
@@ -11114,6 +11574,14 @@
11114
11574
  position: relative;
11115
11575
  }
11116
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
+
11117
11585
  .seed-snackbar__actionButton:after {
11118
11586
  content: "";
11119
11587
  top: 50%;
@@ -11230,11 +11698,15 @@
11230
11698
  border-radius: var(--seed-radius-full);
11231
11699
  background: var(--seed-color-palette-gray-600);
11232
11700
  margin: var(--switchmark-margin-top, 0) 0;
11233
- 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);
11234
11702
  display: block;
11235
11703
  position: relative;
11236
11704
  }
11237
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
+
11238
11710
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
11239
11711
  opacity: .38;
11240
11712
  }
@@ -11420,8 +11892,12 @@
11420
11892
  bottom: 0;
11421
11893
  }
11422
11894
 
11895
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11896
+ scale: var(--seed-feedback-scale);
11897
+ }
11898
+
11423
11899
  .seed-tabs__trigger {
11424
- 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);
11425
11901
  outline: var(--seed-dimension-x0_5) solid transparent;
11426
11902
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11427
11903
  }
@@ -12913,8 +13389,12 @@
12913
13389
  cursor: not-allowed;
12914
13390
  }
12915
13391
 
13392
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13393
+ scale: var(--seed-feedback-scale);
13394
+ }
13395
+
12916
13396
  .seed-toggle-button {
12917
- 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);
12918
13398
  font-weight: var(--seed-font-weight-bold);
12919
13399
  }
12920
13400
 
@@ -13153,7 +13633,7 @@
13153
13633
 
13154
13634
  .seed-wheel-picker__selectionIndicator {
13155
13635
  z-index: 0;
13156
- inset-inline: 0;
13636
+ inset-inline: var(--seed-dimension-x4);
13157
13637
  height: var(--seed-wheel-picker-item-size);
13158
13638
  pointer-events: none;
13159
13639
  position: absolute;
@@ -13161,6 +13641,145 @@
13161
13641
  transform: translateY(-50%);
13162
13642
  }
13163
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
+
13164
13783
  @media (min-width: 480px) {
13165
13784
  .seed-action-button {
13166
13785
  --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);