@seed-design/css 2.5.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/all.css +747 -96
  2. package/all.layered.css +747 -96
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +15 -0
  6. package/base.layered.css +15 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/breakpoints/index.mjs +5 -0
  10. package/package.json +6 -1
  11. package/recipes/accordion.css +1 -1
  12. package/recipes/accordion.layered.css +1 -1
  13. package/recipes/action-button.css +3 -13
  14. package/recipes/action-button.layered.css +4 -17
  15. package/recipes/attachment-input-item.css +15 -3
  16. package/recipes/attachment-input-item.layered.css +24 -8
  17. package/recipes/attachment-input-trigger.css +6 -1
  18. package/recipes/attachment-input-trigger.layered.css +10 -3
  19. package/recipes/bottom-sheet.css +7 -0
  20. package/recipes/bottom-sheet.layered.css +11 -2
  21. package/recipes/callout.css +43 -4
  22. package/recipes/callout.layered.css +57 -6
  23. package/recipes/checkmark.css +6 -1
  24. package/recipes/checkmark.layered.css +10 -3
  25. package/recipes/chip-tabs.css +6 -1
  26. package/recipes/chip-tabs.layered.css +10 -3
  27. package/recipes/chip.css +6 -3
  28. package/recipes/chip.layered.css +10 -5
  29. package/recipes/content-dialog.css +4 -1
  30. package/recipes/content-dialog.layered.css +5 -1
  31. package/recipes/contextual-floating-button.css +6 -1
  32. package/recipes/contextual-floating-button.layered.css +8 -1
  33. package/recipes/date-picker.css +49 -4
  34. package/recipes/date-picker.layered.css +53 -5
  35. package/recipes/floating-action-button.css +6 -1
  36. package/recipes/floating-action-button.layered.css +8 -1
  37. package/recipes/help-bubble.css +8 -2
  38. package/recipes/help-bubble.layered.css +12 -4
  39. package/recipes/image-frame-reaction-button.css +6 -0
  40. package/recipes/image-frame-reaction-button.layered.css +8 -0
  41. package/recipes/input-button.css +6 -1
  42. package/recipes/input-button.layered.css +10 -3
  43. package/recipes/list-item.css +6 -0
  44. package/recipes/list-item.layered.css +6 -0
  45. package/recipes/menu-sheet.css +7 -1
  46. package/recipes/menu-sheet.layered.css +9 -1
  47. package/recipes/menu.css +1 -1
  48. package/recipes/menu.layered.css +1 -1
  49. package/recipes/page-banner.css +58 -4
  50. package/recipes/page-banner.layered.css +79 -8
  51. package/recipes/pagination-button.css +68 -0
  52. package/recipes/pagination-button.d.ts +19 -0
  53. package/recipes/pagination-button.layered.css +80 -0
  54. package/recipes/pagination-button.layered.mjs +22 -0
  55. package/recipes/pagination-button.mjs +22 -0
  56. package/recipes/pagination-page-item.css +99 -0
  57. package/recipes/pagination-page-item.d.ts +19 -0
  58. package/recipes/pagination-page-item.layered.css +118 -0
  59. package/recipes/pagination-page-item.layered.mjs +22 -0
  60. package/recipes/pagination-page-item.mjs +22 -0
  61. package/recipes/pull-to-refresh.css +1 -1
  62. package/recipes/pull-to-refresh.layered.css +1 -1
  63. package/recipes/quantity-picker.css +8 -2
  64. package/recipes/quantity-picker.layered.css +10 -2
  65. package/recipes/radiomark.css +6 -1
  66. package/recipes/radiomark.layered.css +10 -3
  67. package/recipes/reaction-button.css +4 -1
  68. package/recipes/reaction-button.layered.css +5 -1
  69. package/recipes/select-box.css +3 -3
  70. package/recipes/select-box.layered.css +3 -3
  71. package/recipes/select.css +1 -1
  72. package/recipes/select.layered.css +1 -1
  73. package/recipes/side-panel.css +6 -1
  74. package/recipes/side-panel.layered.css +12 -5
  75. package/recipes/snackbar.css +7 -1
  76. package/recipes/snackbar.layered.css +9 -1
  77. package/recipes/switchmark.css +4 -1
  78. package/recipes/switchmark.layered.css +5 -1
  79. package/recipes/tabs.css +4 -1
  80. package/recipes/tabs.layered.css +5 -1
  81. package/recipes/toggle-button.css +4 -1
  82. package/recipes/toggle-button.layered.css +5 -1
  83. package/recipes/wheel-picker-public.css +121 -0
  84. package/recipes/wheel-picker-public.d.ts +24 -0
  85. package/recipes/wheel-picker-public.layered.css +140 -0
  86. package/recipes/wheel-picker-public.layered.mjs +63 -0
  87. package/recipes/wheel-picker-public.mjs +63 -0
  88. package/recipes/wheel-picker.css +1 -1
  89. package/recipes/wheel-picker.layered.css +1 -1
  90. package/scale-feedback/index.d.ts +3 -0
  91. package/scale-feedback/index.mjs +33 -0
  92. package/vars/color/stroke.d.ts +3 -3
  93. package/vars/component/accordion-item.d.ts +1 -1
  94. package/vars/component/accordion-item.mjs +1 -1
  95. package/vars/component/action-button.d.ts +1 -23
  96. package/vars/component/action-button.mjs +1 -23
  97. package/vars/component/bottom-sheet.d.ts +1 -1
  98. package/vars/component/bottom-sheet.mjs +1 -1
  99. package/vars/component/callout-close-button.d.ts +81 -0
  100. package/vars/component/callout-close-button.mjs +63 -0
  101. package/vars/component/callout.d.ts +1 -2
  102. package/vars/component/callout.mjs +1 -2
  103. package/vars/component/checkbox.d.ts +3 -0
  104. package/vars/component/help-bubble.d.ts +4 -1
  105. package/vars/component/help-bubble.mjs +3 -1
  106. package/vars/component/index.d.ts +6 -1
  107. package/vars/component/index.mjs +6 -1
  108. package/vars/component/list-item.d.ts +2 -6
  109. package/vars/component/list-item.mjs +2 -5
  110. package/vars/component/page-banner-close-button.d.ts +133 -0
  111. package/vars/component/page-banner-close-button.mjs +99 -0
  112. package/vars/component/page-banner.d.ts +0 -1
  113. package/vars/component/page-banner.mjs +0 -1
  114. package/vars/component/pagination-button.d.ts +33 -0
  115. package/vars/component/pagination-button.mjs +33 -0
  116. package/vars/component/pagination-page-item.d.ts +54 -0
  117. package/vars/component/pagination-page-item.mjs +54 -0
  118. package/vars/component/radio.d.ts +3 -0
  119. package/vars/component/select-box.d.ts +2 -2
  120. package/vars/component/select-box.mjs +2 -2
  121. package/vars/component/snackbar.d.ts +1 -1
  122. package/vars/component/snackbar.mjs +1 -1
  123. package/vars/component/switch.d.ts +3 -0
  124. package/vars/component/switchmark.d.ts +2 -0
  125. package/vars/component/wheel-picker.d.ts +72 -0
  126. package/vars/component/wheel-picker.mjs +72 -0
package/all.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 {
@@ -4805,8 +4897,29 @@
4805
4897
 
4806
4898
  .seed-date-picker__root {
4807
4899
  box-sizing: border-box;
4900
+ --seed-box-height-base: auto;
4901
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
4902
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
4903
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
4904
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
4905
+ --seed-box-height: var(--seed-box-height-base, initial);
4906
+ --seed-box-min-height-base: auto;
4907
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
4908
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
4909
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
4910
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
4911
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
4912
+ --seed-box-max-height-base: none;
4913
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
4914
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
4915
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
4916
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
4917
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
4808
4918
  width: 100%;
4809
4919
  min-width: 0;
4920
+ height: var(--seed-box-height);
4921
+ min-height: var(--seed-box-min-height);
4922
+ max-height: var(--seed-box-max-height);
4810
4923
  color: var(--seed-color-fg-neutral-muted);
4811
4924
  background-color: var(--seed-color-bg-layer-floating);
4812
4925
  position: relative;
@@ -5253,11 +5366,6 @@
5253
5366
  grid-template-columns: repeat(2, minmax(0, 1fr));
5254
5367
  }
5255
5368
 
5256
- .seed-date-picker__root--visibleRange_continuous {
5257
- height: 100%;
5258
- min-height: 0;
5259
- }
5260
-
5261
5369
  .seed-date-picker__weekdayRow--visibleRange_continuous {
5262
5370
  position: sticky;
5263
5371
  top: 0;
@@ -5843,11 +5951,12 @@
5843
5951
  align-items: center;
5844
5952
  gap: var(--seed-dimension-x2_5);
5845
5953
  border-radius: var(--seed-radius-r3);
5954
+ height: 80px;
5955
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
5846
5956
  --remove-button-mask-size: var(--seed-dimension-x6);
5847
5957
  --remove-button-mask-offset: var(--seed-dimension-x1_5);
5848
5958
  outline: var(--seed-dimension-x0_5) solid transparent;
5849
5959
  outline-offset: var(--seed-dimension-x0_5);
5850
- height: 80px;
5851
5960
  display: flex;
5852
5961
  position: relative;
5853
5962
  }
@@ -5885,6 +5994,7 @@
5885
5994
  }
5886
5995
 
5887
5996
  .seed-attachment-input-item__root[aria-grabbed="true"] {
5997
+ scale: var(--seed-feedback-scale);
5888
5998
  --remove-button-mask-size: 0px;
5889
5999
  --remove-button-mask-offset: 0px;
5890
6000
  }
@@ -5979,9 +6089,6 @@
5979
6089
  font: inherit;
5980
6090
  cursor: pointer;
5981
6091
  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
6092
  background: none;
5986
6093
  border: none;
5987
6094
  flex-direction: column;
@@ -5991,6 +6098,16 @@
5991
6098
  display: flex;
5992
6099
  }
5993
6100
 
6101
+ .seed-attachment-input-item__actionButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6102
+ scale: var(--seed-feedback-scale);
6103
+ }
6104
+
6105
+ .seed-attachment-input-item__actionButton {
6106
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6107
+ outline: var(--seed-dimension-x0_5) solid transparent;
6108
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6109
+ }
6110
+
5994
6111
  .seed-attachment-input-item__actionButton:is(:focus-visible, [data-focus-visible]) {
5995
6112
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5996
6113
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6012,9 +6129,6 @@
6012
6129
  background-color: var(--seed-color-bg-layer-default);
6013
6130
  border-radius: var(--seed-radius-full);
6014
6131
  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
6132
  border: none;
6019
6133
  justify-content: center;
6020
6134
  align-items: center;
@@ -6023,6 +6137,16 @@
6023
6137
  position: absolute;
6024
6138
  }
6025
6139
 
6140
+ .seed-attachment-input-item__removeButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6141
+ scale: var(--seed-feedback-scale);
6142
+ }
6143
+
6144
+ .seed-attachment-input-item__removeButton {
6145
+ 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);
6146
+ outline: var(--seed-dimension-x0_5) solid transparent;
6147
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6148
+ }
6149
+
6026
6150
  .seed-attachment-input-item__removeButton:is(:focus-visible, [data-focus-visible]) {
6027
6151
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6028
6152
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6087,7 +6211,7 @@
6087
6211
 
6088
6212
  .seed-attachment-input-item__root--type_image {
6089
6213
  width: 80px;
6090
- transition: opacity .2s;
6214
+ transition: opacity .2s, scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6091
6215
  }
6092
6216
 
6093
6217
  .seed-attachment-input-item__root--type_image:before {
@@ -6145,9 +6269,6 @@
6145
6269
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
6146
6270
  cursor: pointer;
6147
6271
  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
6272
  background-color: #0000;
6152
6273
  border: none;
6153
6274
  flex-direction: column;
@@ -6156,6 +6277,16 @@
6156
6277
  display: flex;
6157
6278
  }
6158
6279
 
6280
+ .seed-attachment-input-trigger__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6281
+ scale: var(--seed-feedback-scale);
6282
+ }
6283
+
6284
+ .seed-attachment-input-trigger__root {
6285
+ 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);
6286
+ outline: var(--seed-dimension-x0_5) solid transparent;
6287
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6288
+ }
6289
+
6159
6290
  .seed-attachment-input-trigger__root:is(:focus-visible, [data-focus-visible]) {
6160
6291
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6161
6292
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6252,11 +6383,18 @@
6252
6383
  font-size: var(--seed-font-size-t5);
6253
6384
  line-height: var(--seed-line-height-t5);
6254
6385
  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
6386
  position: relative;
6257
6387
  overflow: hidden;
6258
6388
  }
6259
6389
 
6390
+ .seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6391
+ scale: var(--seed-feedback-scale);
6392
+ }
6393
+
6394
+ .seed-floating-action-button__root {
6395
+ 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);
6396
+ }
6397
+
6260
6398
  @media (hover: hover) and (pointer: fine) {
6261
6399
  .seed-floating-action-button__root:is(:hover, [data-hover]) {
6262
6400
  background: var(--seed-color-bg-brand-solid-pressed);
@@ -6376,11 +6514,12 @@
6376
6514
  }
6377
6515
 
6378
6516
  .seed-help-bubble__content {
6517
+ box-sizing: border-box;
6379
6518
  background: var(--seed-color-bg-neutral-inverted);
6380
6519
  padding-inline: var(--seed-dimension-x3);
6381
6520
  padding-block: var(--seed-dimension-x2_5);
6382
6521
  border-radius: var(--seed-radius-r3);
6383
- --seed-box-max-width-base: none;
6522
+ --seed-box-max-width-base: 280px;
6384
6523
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
6385
6524
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
6386
6525
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -6467,9 +6606,6 @@
6467
6606
  --seed-icon-size: var(--seed-dimension-x3_5);
6468
6607
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6469
6608
  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
6609
  background: none;
6474
6610
  border: none;
6475
6611
  justify-content: center;
@@ -6477,6 +6613,16 @@
6477
6613
  display: flex;
6478
6614
  }
6479
6615
 
6616
+ .seed-help-bubble__closeButton:is(:active, [data-active]) {
6617
+ scale: var(--seed-feedback-scale);
6618
+ }
6619
+
6620
+ .seed-help-bubble__closeButton {
6621
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6622
+ outline: var(--seed-dimension-x0_5) solid transparent;
6623
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6624
+ }
6625
+
6480
6626
  .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
6481
6627
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6482
6628
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -6583,6 +6729,14 @@
6583
6729
  position: relative;
6584
6730
  }
6585
6731
 
6732
+ .seed-image-frame-reaction-button__root:is(:active, [data-active]) {
6733
+ scale: var(--seed-feedback-scale);
6734
+ }
6735
+
6736
+ .seed-image-frame-reaction-button__root {
6737
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
6738
+ }
6739
+
6586
6740
  .seed-image-frame-reaction-button__root:before {
6587
6741
  content: "";
6588
6742
  inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
@@ -6929,14 +7083,21 @@
6929
7083
  .seed-input-button__clearButton {
6930
7084
  cursor: pointer;
6931
7085
  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
7086
  background-color: #0000;
6936
7087
  border: none;
6937
7088
  padding: 0;
6938
7089
  }
6939
7090
 
7091
+ .seed-input-button__clearButton:is(:active, [data-active]) {
7092
+ scale: var(--seed-feedback-scale);
7093
+ }
7094
+
7095
+ .seed-input-button__clearButton {
7096
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7097
+ outline: var(--seed-dimension-x0_5) solid transparent;
7098
+ outline-offset: var(--seed-dimension-x0_5);
7099
+ }
7100
+
6940
7101
  .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
6941
7102
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6942
7103
  outline-offset: var(--seed-dimension-x0_5);
@@ -7238,6 +7399,9 @@
7238
7399
  --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
7239
7400
  padding-right: var(--seed-box-padding-right);
7240
7401
  --seed-focus-ring: none;
7402
+ --seed-checkmark-feedback-scale: 1;
7403
+ --seed-radiomark-feedback-scale: 1;
7404
+ --seed-switchmark-feedback-scale: 1;
7241
7405
  --seed-icon-size: 22px;
7242
7406
  --seed-icon-color: var(--seed-color-fg-neutral);
7243
7407
  flex-shrink: 0;
@@ -7261,6 +7425,9 @@
7261
7425
  align-items: center;
7262
7426
  gap: var(--seed-box-gap);
7263
7427
  --seed-focus-ring: none;
7428
+ --seed-checkmark-feedback-scale: 1;
7429
+ --seed-radiomark-feedback-scale: 1;
7430
+ --seed-switchmark-feedback-scale: 1;
7264
7431
  font-size: var(--seed-font-size-t5);
7265
7432
  line-height: var(--seed-line-height-t5);
7266
7433
  font-weight: var(--seed-font-weight-regular);
@@ -7586,7 +7753,7 @@
7586
7753
  }
7587
7754
 
7588
7755
  .seed-menu__scrollArea {
7589
- max-height: min(480px, var(--seed-menu-available-height, 480px));
7756
+ max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
7590
7757
  box-sizing: border-box;
7591
7758
  padding-block: var(--seed-dimension-x2);
7592
7759
  gap: var(--seed-dimension-x2);
@@ -7877,6 +8044,7 @@
7877
8044
  word-break: break-all;
7878
8045
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
7879
8046
  background: var(--seed-color-bg-layer-floating);
8047
+ max-width: 480px;
7880
8048
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
7881
8049
  padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
7882
8050
  padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -7967,13 +8135,20 @@
7967
8135
  font-size: var(--seed-font-size-t5);
7968
8136
  line-height: var(--seed-line-height-t5);
7969
8137
  font-weight: var(--seed-font-weight-medium);
7970
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7971
8138
  border: none;
7972
8139
  justify-content: center;
7973
8140
  align-items: center;
7974
8141
  display: flex;
7975
8142
  }
7976
8143
 
8144
+ .seed-menu-sheet__closeButton:is(:active, [data-active]) {
8145
+ scale: var(--seed-feedback-scale);
8146
+ }
8147
+
8148
+ .seed-menu-sheet__closeButton {
8149
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8150
+ }
8151
+
7977
8152
  @media (hover: hover) and (pointer: fine) {
7978
8153
  .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
7979
8154
  background-color: var(--seed-color-bg-neutral-weak-pressed);
@@ -8277,15 +8452,22 @@
8277
8452
  line-height: var(--seed-line-height-t3);
8278
8453
  font-weight: var(--seed-font-weight-bold);
8279
8454
  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
8455
  background-color: #0000;
8284
8456
  border: none;
8285
8457
  align-items: center;
8286
8458
  display: flex;
8287
8459
  }
8288
8460
 
8461
+ .seed-page-banner__button:is(:active, [data-active]) {
8462
+ scale: var(--seed-feedback-scale);
8463
+ }
8464
+
8465
+ .seed-page-banner__button {
8466
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8467
+ outline: var(--seed-dimension-x0_5) solid transparent;
8468
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8469
+ }
8470
+
8289
8471
  .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
8290
8472
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8291
8473
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8297,12 +8479,10 @@
8297
8479
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
8298
8480
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
8299
8481
  --seed-suffix-icon-margin-left: initial;
8482
+ background-color: var(--seed-color-bg-transparent);
8300
8483
  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;
8484
+ border-radius: var(--seed-radius-r2);
8485
+ --seed-suffix-icon-size: var(--seed-dimension-x4);
8306
8486
  border: none;
8307
8487
  flex-grow: 0;
8308
8488
  flex-shrink: 0;
@@ -8313,11 +8493,33 @@
8313
8493
  display: flex;
8314
8494
  }
8315
8495
 
8496
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8497
+ scale: var(--seed-feedback-scale);
8498
+ }
8499
+
8500
+ .seed-page-banner__closeButton {
8501
+ 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);
8502
+ outline: var(--seed-dimension-x0_5) solid transparent;
8503
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8504
+ }
8505
+
8316
8506
  .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
8317
8507
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8318
8508
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8319
8509
  }
8320
8510
 
8511
+ @media (hover: hover) and (pointer: fine) {
8512
+ .seed-page-banner__closeButton:is(:hover, [data-hover]) {
8513
+ background-color: var(--seed-color-bg-transparent-pressed);
8514
+ }
8515
+ }
8516
+
8517
+ @media not all and (hover: hover) and (pointer: fine) {
8518
+ .seed-page-banner__closeButton:is(:active, [data-active]) {
8519
+ background-color: var(--seed-color-bg-transparent-pressed);
8520
+ }
8521
+ }
8522
+
8321
8523
  .seed-page-banner__root--tone_neutral-variant_weak {
8322
8524
  background-color: var(--seed-color-bg-neutral-weak);
8323
8525
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8340,8 +8542,12 @@
8340
8542
  color: var(--seed-color-fg-neutral);
8341
8543
  }
8342
8544
 
8343
- .seed-page-banner__root--tone_neutral-variant_solid {
8344
- background-color: var(--seed-color-bg-neutral-inverted);
8545
+ .seed-page-banner__closeButton--tone_neutral-variant_weak {
8546
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8547
+ }
8548
+
8549
+ .seed-page-banner__root--tone_neutral-variant_solid {
8550
+ background-color: var(--seed-color-bg-neutral-inverted);
8345
8551
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
8346
8552
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8347
8553
  }
@@ -8362,6 +8568,10 @@
8362
8568
  color: var(--seed-color-fg-neutral-inverted);
8363
8569
  }
8364
8570
 
8571
+ .seed-page-banner__closeButton--tone_neutral-variant_solid {
8572
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
8573
+ }
8574
+
8365
8575
  .seed-page-banner__root--tone_informative-variant_weak {
8366
8576
  background-color: var(--seed-color-bg-informative-weak);
8367
8577
  --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
@@ -8384,6 +8594,10 @@
8384
8594
  color: var(--seed-color-fg-informative-contrast);
8385
8595
  }
8386
8596
 
8597
+ .seed-page-banner__closeButton--tone_informative-variant_weak {
8598
+ --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
8599
+ }
8600
+
8387
8601
  .seed-page-banner__root--tone_informative-variant_solid {
8388
8602
  background-color: var(--seed-color-bg-informative-solid);
8389
8603
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8406,6 +8620,10 @@
8406
8620
  color: var(--seed-color-palette-static-white);
8407
8621
  }
8408
8622
 
8623
+ .seed-page-banner__closeButton--tone_informative-variant_solid {
8624
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8625
+ }
8626
+
8409
8627
  .seed-page-banner__root--tone_positive-variant_weak {
8410
8628
  background-color: var(--seed-color-bg-positive-weak);
8411
8629
  --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
@@ -8428,6 +8646,10 @@
8428
8646
  color: var(--seed-color-fg-positive-contrast);
8429
8647
  }
8430
8648
 
8649
+ .seed-page-banner__closeButton--tone_positive-variant_weak {
8650
+ --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
8651
+ }
8652
+
8431
8653
  .seed-page-banner__root--tone_positive-variant_solid {
8432
8654
  background-color: var(--seed-color-bg-positive-solid);
8433
8655
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8450,6 +8672,10 @@
8450
8672
  color: var(--seed-color-palette-static-white);
8451
8673
  }
8452
8674
 
8675
+ .seed-page-banner__closeButton--tone_positive-variant_solid {
8676
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8677
+ }
8678
+
8453
8679
  .seed-page-banner__root--tone_warning-variant_weak {
8454
8680
  background-color: var(--seed-color-bg-warning-weak);
8455
8681
  --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
@@ -8472,6 +8698,10 @@
8472
8698
  color: var(--seed-color-fg-warning-contrast);
8473
8699
  }
8474
8700
 
8701
+ .seed-page-banner__closeButton--tone_warning-variant_weak {
8702
+ --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
8703
+ }
8704
+
8475
8705
  .seed-page-banner__root--tone_warning-variant_solid {
8476
8706
  background-color: var(--seed-color-bg-warning-solid);
8477
8707
  --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -8494,6 +8724,10 @@
8494
8724
  color: var(--seed-color-palette-static-black-alpha-900);
8495
8725
  }
8496
8726
 
8727
+ .seed-page-banner__closeButton--tone_warning-variant_solid {
8728
+ --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8729
+ }
8730
+
8497
8731
  .seed-page-banner__root--tone_critical-variant_weak {
8498
8732
  background-color: var(--seed-color-bg-critical-weak);
8499
8733
  --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
@@ -8516,6 +8750,10 @@
8516
8750
  color: var(--seed-color-fg-critical-contrast);
8517
8751
  }
8518
8752
 
8753
+ .seed-page-banner__closeButton--tone_critical-variant_weak {
8754
+ --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
8755
+ }
8756
+
8519
8757
  .seed-page-banner__root--tone_critical-variant_solid {
8520
8758
  background-color: var(--seed-color-bg-critical-solid);
8521
8759
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -8538,6 +8776,10 @@
8538
8776
  color: var(--seed-color-palette-static-white);
8539
8777
  }
8540
8778
 
8779
+ .seed-page-banner__closeButton--tone_critical-variant_solid {
8780
+ --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8781
+ }
8782
+
8541
8783
  .seed-page-banner__root--tone_magic-variant_weak {
8542
8784
  background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
8543
8785
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -8560,6 +8802,206 @@
8560
8802
  color: var(--seed-color-fg-neutral);
8561
8803
  }
8562
8804
 
8805
+ .seed-page-banner__closeButton--tone_magic-variant_weak {
8806
+ --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8807
+ }
8808
+
8809
+ .seed-pagination-button {
8810
+ box-sizing: border-box;
8811
+ cursor: pointer;
8812
+ text-transform: none;
8813
+ white-space: nowrap;
8814
+ vertical-align: middle;
8815
+ -webkit-font-smoothing: antialiased;
8816
+ -moz-osx-font-smoothing: grayscale;
8817
+ width: var(--seed-dimension-x10);
8818
+ height: var(--seed-dimension-x10);
8819
+ border-radius: var(--seed-radius-r2);
8820
+ isolation: isolate;
8821
+ background: none;
8822
+ border: none;
8823
+ flex-shrink: 0;
8824
+ justify-content: center;
8825
+ align-items: center;
8826
+ padding: 0;
8827
+ font-family: inherit;
8828
+ text-decoration: none;
8829
+ display: inline-flex;
8830
+ position: relative;
8831
+ }
8832
+
8833
+ .seed-pagination-button:before {
8834
+ content: "";
8835
+ z-index: -1;
8836
+ border-radius: inherit;
8837
+ background-color: var(--seed-color-bg-transparent);
8838
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8839
+ position: absolute;
8840
+ inset: 0;
8841
+ }
8842
+
8843
+ .seed-pagination-button {
8844
+ --seed-icon-size: var(--seed-dimension-x4);
8845
+ --seed-icon-color: var(--seed-color-fg-neutral);
8846
+ outline: var(--seed-dimension-x0_5) solid transparent;
8847
+ outline-offset: var(--seed-dimension-x0_5);
8848
+ }
8849
+
8850
+ .seed-pagination-button:is(:focus-visible, [data-focus-visible]) {
8851
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8852
+ outline-offset: var(--seed-dimension-x0_5);
8853
+ }
8854
+
8855
+ .seed-pagination-button {
8856
+ scale: 1;
8857
+ }
8858
+
8859
+ @media (hover: hover) and (pointer: fine) {
8860
+ .seed-pagination-button:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8861
+ background-color: var(--seed-color-bg-transparent-pressed);
8862
+ }
8863
+ }
8864
+
8865
+ @media not all and (hover: hover) and (pointer: fine) {
8866
+ .seed-pagination-button:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8867
+ background-color: var(--seed-color-bg-transparent-pressed);
8868
+ }
8869
+ }
8870
+
8871
+ .seed-pagination-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8872
+ scale: var(--seed-scale-s97);
8873
+ }
8874
+
8875
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]) {
8876
+ cursor: not-allowed;
8877
+ --seed-icon-color: var(--seed-color-fg-disabled);
8878
+ }
8879
+
8880
+ .seed-pagination-button:is(:disabled, [disabled], [data-disabled]):before {
8881
+ background-color: var(--seed-color-bg-transparent);
8882
+ }
8883
+
8884
+ .seed-pagination-button {
8885
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8886
+ }
8887
+
8888
+ .seed-pagination-page-item {
8889
+ box-sizing: border-box;
8890
+ cursor: pointer;
8891
+ text-transform: none;
8892
+ white-space: nowrap;
8893
+ vertical-align: middle;
8894
+ -webkit-font-smoothing: antialiased;
8895
+ -moz-osx-font-smoothing: grayscale;
8896
+ width: var(--seed-dimension-x10);
8897
+ height: var(--seed-dimension-x10);
8898
+ border-radius: var(--seed-radius-r2);
8899
+ isolation: isolate;
8900
+ color: var(--seed-color-fg-neutral);
8901
+ font-family: inherit;
8902
+ font-size: var(--seed-font-size-t4);
8903
+ line-height: var(--seed-line-height-t4);
8904
+ font-weight: var(--seed-font-weight-bold);
8905
+ background: none;
8906
+ border: none;
8907
+ flex-shrink: 0;
8908
+ justify-content: center;
8909
+ align-items: center;
8910
+ padding: 0;
8911
+ text-decoration: none;
8912
+ display: inline-flex;
8913
+ position: relative;
8914
+ }
8915
+
8916
+ .seed-pagination-page-item:before {
8917
+ content: "";
8918
+ z-index: -1;
8919
+ border-radius: inherit;
8920
+ background-color: var(--seed-color-bg-transparent);
8921
+ position: absolute;
8922
+ inset: 0;
8923
+ }
8924
+
8925
+ .seed-pagination-page-item > [data-pagination-page-item-label] {
8926
+ text-overflow: ellipsis;
8927
+ white-space: nowrap;
8928
+ min-width: 0;
8929
+ max-width: 100%;
8930
+ display: block;
8931
+ overflow: hidden;
8932
+ }
8933
+
8934
+ .seed-pagination-page-item {
8935
+ outline: var(--seed-dimension-x0_5) solid transparent;
8936
+ outline-offset: var(--seed-dimension-x0_5);
8937
+ }
8938
+
8939
+ .seed-pagination-page-item:is(:focus-visible, [data-focus-visible]) {
8940
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8941
+ outline-offset: var(--seed-dimension-x0_5);
8942
+ }
8943
+
8944
+ .seed-pagination-page-item {
8945
+ scale: 1;
8946
+ }
8947
+
8948
+ @media (hover: hover) and (pointer: fine) {
8949
+ .seed-pagination-page-item:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8950
+ background-color: var(--seed-color-bg-transparent-pressed);
8951
+ }
8952
+ }
8953
+
8954
+ @media not all and (hover: hover) and (pointer: fine) {
8955
+ .seed-pagination-page-item:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8956
+ background-color: var(--seed-color-bg-transparent-pressed);
8957
+ }
8958
+ }
8959
+
8960
+ .seed-pagination-page-item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
8961
+ scale: var(--seed-scale-s97);
8962
+ }
8963
+
8964
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8965
+ color: var(--seed-color-fg-neutral-inverted);
8966
+ }
8967
+
8968
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8969
+ background-color: var(--seed-color-bg-neutral-inverted);
8970
+ }
8971
+
8972
+ @media (hover: hover) and (pointer: fine) {
8973
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8974
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8975
+ }
8976
+ }
8977
+
8978
+ @media not all and (hover: hover) and (pointer: fine) {
8979
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8980
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
8981
+ }
8982
+ }
8983
+
8984
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8985
+ cursor: not-allowed;
8986
+ color: var(--seed-color-fg-disabled);
8987
+ }
8988
+
8989
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8990
+ background-color: var(--seed-color-bg-transparent);
8991
+ }
8992
+
8993
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8994
+ color: var(--seed-color-fg-disabled);
8995
+ }
8996
+
8997
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8998
+ background-color: var(--seed-color-bg-disabled);
8999
+ }
9000
+
9001
+ .seed-pagination-page-item {
9002
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9003
+ }
9004
+
8563
9005
  .seed-progress-circle__root {
8564
9006
  box-sizing: border-box;
8565
9007
  display: inline-flex;
@@ -8612,7 +9054,7 @@
8612
9054
  }
8613
9055
 
8614
9056
  .seed-pull-to-refresh__root {
8615
- --ptr-size: 44px;
9057
+ --ptr-size: calc(var(--seed-dimension-x6) + var(--seed-dimension-x8) * 2);
8616
9058
  --ptr-transition-duration: var(--seed-duration-d6);
8617
9059
  height: 100%;
8618
9060
  }
@@ -8646,7 +9088,7 @@
8646
9088
  box-sizing: border-box;
8647
9089
  cursor: pointer;
8648
9090
  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);
9091
+ 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
9092
  outline: var(--seed-dimension-x0_5) solid transparent;
8651
9093
  outline-offset: var(--seed-dimension-x0_5);
8652
9094
  border: none;
@@ -8662,6 +9104,10 @@
8662
9104
  outline-offset: var(--seed-dimension-x0_5);
8663
9105
  }
8664
9106
 
9107
+ .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9108
+ scale: var(--seed-feedback-scale);
9109
+ }
9110
+
8665
9111
  @media (hover: hover) and (pointer: fine) {
8666
9112
  .seed-quantity-picker__decrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8667
9113
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8729,7 +9175,7 @@
8729
9175
  box-sizing: border-box;
8730
9176
  cursor: pointer;
8731
9177
  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);
9178
+ 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
9179
  outline: var(--seed-dimension-x0_5) solid transparent;
8734
9180
  outline-offset: var(--seed-dimension-x0_5);
8735
9181
  border: none;
@@ -8745,6 +9191,10 @@
8745
9191
  outline-offset: var(--seed-dimension-x0_5);
8746
9192
  }
8747
9193
 
9194
+ .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9195
+ scale: var(--seed-feedback-scale);
9196
+ }
9197
+
8748
9198
  @media (hover: hover) and (pointer: fine) {
8749
9199
  .seed-quantity-picker__incrementButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8750
9200
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -8972,9 +9422,6 @@
8972
9422
  border-color: var(--seed-color-stroke-neutral-weak);
8973
9423
  border-radius: var(--seed-radius-full);
8974
9424
  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
9425
  flex: none;
8979
9426
  justify-content: center;
8980
9427
  align-items: center;
@@ -8982,6 +9429,16 @@
8982
9429
  position: relative;
8983
9430
  }
8984
9431
 
9432
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9433
+ scale: var(--seed-radiomark-feedback-scale, var(--seed-feedback-scale));
9434
+ }
9435
+
9436
+ .seed-radiomark__root {
9437
+ 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);
9438
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
9439
+ outline-offset: var(--seed-dimension-x0_5);
9440
+ }
9441
+
8985
9442
  @media (hover: hover) and (pointer: fine) {
8986
9443
  .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
8987
9444
  background-color: var(--seed-color-bg-transparent-pressed);
@@ -9121,8 +9578,12 @@
9121
9578
  outline-offset: var(--seed-dimension-x0_5);
9122
9579
  }
9123
9580
 
9581
+ .seed-reaction-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9582
+ scale: var(--seed-feedback-scale);
9583
+ }
9584
+
9124
9585
  .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);
9586
+ 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
9587
  background: var(--seed-color-bg-transparent);
9127
9588
  font-weight: var(--seed-font-weight-medium);
9128
9589
  color: var(--seed-color-fg-neutral);
@@ -9393,7 +9854,7 @@
9393
9854
  }
9394
9855
 
9395
9856
  .seed-select__scrollArea {
9396
- max-height: min(480px, var(--seed-select-available-height, 480px));
9857
+ max-height: min(var(--seed-select-max-height, 480px), var(--seed-select-available-height, var(--seed-select-max-height, 480px)));
9397
9858
  box-sizing: border-box;
9398
9859
  padding-block: var(--seed-dimension-x2);
9399
9860
  gap: var(--seed-dimension-x2);
@@ -9876,7 +10337,7 @@
9876
10337
  cursor: pointer;
9877
10338
  border-radius: var(--seed-radius-r3);
9878
10339
  background-color: var(--seed-color-bg-transparent);
9879
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10340
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9880
10341
  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
10342
  flex-direction: column;
9882
10343
  display: flex;
@@ -9913,11 +10374,11 @@
9913
10374
 
9914
10375
  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
9915
10376
  cursor: not-allowed;
9916
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
10377
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
9917
10378
  }
9918
10379
 
9919
10380
  .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);
10381
+ box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-weak);
9921
10382
  }
9922
10383
 
9923
10384
  .seed-select-box__root {
@@ -10611,11 +11072,6 @@
10611
11072
  top: calc(28px + var(--seed-safe-area-top));
10612
11073
  border-radius: var(--seed-radius-r3);
10613
11074
  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
11075
  border: none;
10620
11076
  justify-content: center;
10621
11077
  align-items: center;
@@ -10626,6 +11082,18 @@
10626
11082
  right: 24px;
10627
11083
  }
10628
11084
 
11085
+ .seed-side-panel__closeButton:is(:active, [data-active]) {
11086
+ scale: var(--seed-feedback-scale);
11087
+ }
11088
+
11089
+ .seed-side-panel__closeButton {
11090
+ 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);
11091
+ --seed-icon-size: 22px;
11092
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
11093
+ outline: var(--seed-dimension-x0_5) solid transparent;
11094
+ outline-offset: var(--seed-dimension-x0_5);
11095
+ }
11096
+
10629
11097
  .seed-side-panel__closeButton:is(:focus-visible, [data-focus-visible]) {
10630
11098
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
10631
11099
  outline-offset: var(--seed-dimension-x0_5);
@@ -11041,7 +11509,7 @@
11041
11509
  background: var(--seed-color-bg-neutral-inverted);
11042
11510
  border-radius: var(--seed-radius-r2);
11043
11511
  width: 100%;
11044
- max-width: 560px;
11512
+ max-width: 464px;
11045
11513
  padding-inline: var(--seed-dimension-x2_5);
11046
11514
  padding-block: var(--seed-dimension-x2_5);
11047
11515
  min-height: 44px;
@@ -11122,6 +11590,14 @@
11122
11590
  position: relative;
11123
11591
  }
11124
11592
 
11593
+ .seed-snackbar__actionButton:is(:active, [data-active]) {
11594
+ scale: var(--seed-feedback-scale);
11595
+ }
11596
+
11597
+ .seed-snackbar__actionButton {
11598
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
11599
+ }
11600
+
11125
11601
  .seed-snackbar__actionButton:after {
11126
11602
  content: "";
11127
11603
  top: 50%;
@@ -11238,11 +11714,15 @@
11238
11714
  border-radius: var(--seed-radius-full);
11239
11715
  background: var(--seed-color-palette-gray-600);
11240
11716
  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);
11717
+ 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
11718
  display: block;
11243
11719
  position: relative;
11244
11720
  }
11245
11721
 
11722
+ .seed-switchmark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11723
+ scale: var(--seed-switchmark-feedback-scale, var(--seed-feedback-scale));
11724
+ }
11725
+
11246
11726
  .seed-switchmark__root:is(:disabled, [disabled], [data-disabled]) {
11247
11727
  opacity: .38;
11248
11728
  }
@@ -11428,8 +11908,12 @@
11428
11908
  bottom: 0;
11429
11909
  }
11430
11910
 
11911
+ .seed-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
11912
+ scale: var(--seed-feedback-scale);
11913
+ }
11914
+
11431
11915
  .seed-tabs__trigger {
11432
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
11916
+ 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
11917
  outline: var(--seed-dimension-x0_5) solid transparent;
11434
11918
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
11435
11919
  }
@@ -12921,8 +13405,12 @@
12921
13405
  cursor: not-allowed;
12922
13406
  }
12923
13407
 
13408
+ .seed-toggle-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
13409
+ scale: var(--seed-feedback-scale);
13410
+ }
13411
+
12924
13412
  .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);
13413
+ 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
13414
  font-weight: var(--seed-font-weight-bold);
12927
13415
  }
12928
13416
 
@@ -13161,7 +13649,7 @@
13161
13649
 
13162
13650
  .seed-wheel-picker__selectionIndicator {
13163
13651
  z-index: 0;
13164
- inset-inline: 0;
13652
+ inset-inline: var(--seed-dimension-x4);
13165
13653
  height: var(--seed-wheel-picker-item-size);
13166
13654
  pointer-events: none;
13167
13655
  position: absolute;
@@ -13169,6 +13657,145 @@
13169
13657
  transform: translateY(-50%);
13170
13658
  }
13171
13659
 
13660
+ .seed-wheel-picker-public__root {
13661
+ background-color: var(--seed-color-bg-layer-floating);
13662
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13663
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13664
+ --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13665
+ width: 100%;
13666
+ position: relative;
13667
+ overflow: hidden;
13668
+ }
13669
+
13670
+ .seed-wheel-picker-public__scrollFog {
13671
+ z-index: 1;
13672
+ height: 100%;
13673
+ position: relative;
13674
+ overflow: hidden;
13675
+ }
13676
+
13677
+ .seed-wheel-picker-public__columns {
13678
+ justify-content: center;
13679
+ width: 100%;
13680
+ height: 100%;
13681
+ display: flex;
13682
+ }
13683
+
13684
+ .seed-wheel-picker-public__column {
13685
+ box-sizing: border-box;
13686
+ overscroll-behavior-x: none;
13687
+ overscroll-behavior-y: contain;
13688
+ scroll-snap-type: y mandatory;
13689
+ scrollbar-width: none;
13690
+ -ms-overflow-style: none;
13691
+ touch-action: pan-y;
13692
+ cursor: grab;
13693
+ width: max-content;
13694
+ height: 100%;
13695
+ padding-block: var(--seed-wheel-picker-public-center-offset);
13696
+ outline: none;
13697
+ flex: none;
13698
+ overflow: hidden auto;
13699
+ }
13700
+
13701
+ .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13702
+ cursor: default;
13703
+ --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13704
+ --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13705
+ overflow-y: hidden;
13706
+ }
13707
+
13708
+ .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13709
+ cursor: grabbing;
13710
+ scroll-snap-type: none;
13711
+ }
13712
+
13713
+ .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13714
+ scroll-snap-type: none;
13715
+ }
13716
+
13717
+ .seed-wheel-picker-public__column::-webkit-scrollbar {
13718
+ display: none;
13719
+ }
13720
+
13721
+ .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13722
+ outline: var(--seed-dimension-x0_5) solid transparent;
13723
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13724
+ border-radius: var(--seed-radius-r2);
13725
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13726
+ }
13727
+
13728
+ .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]) {
13729
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13730
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13731
+ }
13732
+
13733
+ .seed-wheel-picker-public__item {
13734
+ height: var(--seed-wheel-picker-public-item-size);
13735
+ min-height: var(--seed-wheel-picker-public-item-size);
13736
+ color: var(--seed-wheel-picker-public-item-color);
13737
+ scroll-snap-align: center;
13738
+ -webkit-user-select: none;
13739
+ user-select: none;
13740
+ justify-content: center;
13741
+ align-items: center;
13742
+ display: flex;
13743
+ }
13744
+
13745
+ .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13746
+ color: #0000;
13747
+ 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%);
13748
+ -webkit-text-fill-color: transparent;
13749
+ -webkit-background-clip: text;
13750
+ background-clip: text;
13751
+ }
13752
+
13753
+ .seed-wheel-picker-public__itemLabel {
13754
+ box-sizing: border-box;
13755
+ height: 100%;
13756
+ padding-inline: var(--seed-dimension-x4);
13757
+ font-weight: var(--seed-font-weight-medium);
13758
+ white-space: nowrap;
13759
+ flex-shrink: 0;
13760
+ justify-content: center;
13761
+ align-items: center;
13762
+ display: flex;
13763
+ }
13764
+
13765
+ .seed-wheel-picker-public__selectionIndicator {
13766
+ z-index: 0;
13767
+ inset-inline: var(--seed-dimension-x4);
13768
+ height: var(--seed-wheel-picker-public-item-size);
13769
+ border-radius: var(--seed-radius-r2);
13770
+ background-color: var(--seed-color-bg-neutral-weak);
13771
+ pointer-events: none;
13772
+ position: absolute;
13773
+ top: 50%;
13774
+ transform: translateY(-50%);
13775
+ }
13776
+
13777
+ .seed-wheel-picker-public__root--size_small {
13778
+ height: var(--seed-wheel-picker-public-viewport-size, 180px);
13779
+ --seed-wheel-picker-public-item-size: 36px;
13780
+ --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13781
+ }
13782
+
13783
+ .seed-wheel-picker-public__itemLabel--size_small {
13784
+ font-size: var(--seed-font-size-t7-static);
13785
+ line-height: var(--seed-line-height-t7-static);
13786
+ }
13787
+
13788
+ .seed-wheel-picker-public__root--size_medium {
13789
+ height: var(--seed-wheel-picker-public-viewport-size, 220px);
13790
+ --seed-wheel-picker-public-item-size: 44px;
13791
+ --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13792
+ }
13793
+
13794
+ .seed-wheel-picker-public__itemLabel--size_medium {
13795
+ font-size: var(--seed-font-size-t10-static);
13796
+ line-height: var(--seed-line-height-t10-static);
13797
+ }
13798
+
13172
13799
  @media (min-width: 480px) {
13173
13800
  .seed-action-button {
13174
13801
  --seed-box-bleed-bottom: var(--seed-box-bleed-bottom-sm, initial);
@@ -13195,6 +13822,12 @@
13195
13822
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13196
13823
  }
13197
13824
 
13825
+ .seed-date-picker__root {
13826
+ --seed-box-height: var(--seed-box-height-sm, initial);
13827
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13828
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13829
+ }
13830
+
13198
13831
  .seed-help-bubble__content {
13199
13832
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13200
13833
  }
@@ -13256,6 +13889,12 @@
13256
13889
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13257
13890
  }
13258
13891
 
13892
+ .seed-date-picker__root {
13893
+ --seed-box-height: var(--seed-box-height-md, initial);
13894
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
13895
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
13896
+ }
13897
+
13259
13898
  .seed-help-bubble__content {
13260
13899
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13261
13900
  }
@@ -13317,6 +13956,12 @@
13317
13956
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13318
13957
  }
13319
13958
 
13959
+ .seed-date-picker__root {
13960
+ --seed-box-height: var(--seed-box-height-lg, initial);
13961
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
13962
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13963
+ }
13964
+
13320
13965
  .seed-help-bubble__content {
13321
13966
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
13322
13967
  }
@@ -13378,6 +14023,12 @@
13378
14023
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
13379
14024
  }
13380
14025
 
14026
+ .seed-date-picker__root {
14027
+ --seed-box-height: var(--seed-box-height-xl, initial);
14028
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14029
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14030
+ }
14031
+
13381
14032
  .seed-help-bubble__content {
13382
14033
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
13383
14034
  }